You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ponymail.apache.org by hu...@apache.org on 2021/12/13 22:44:00 UTC

[incubator-ponymail-foal] 01/03: Make sidebar stats optional, expand calendar if hidden.

This is an automated email from the ASF dual-hosted git repository.

humbedooh pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-ponymail-foal.git

commit 6612556a5bc8c0a9274d4ed36b6f14594de75ab5
Author: Daniel Gruno <hu...@apache.org>
AuthorDate: Mon Dec 13 23:43:16 2021 +0100

    Make sidebar stats optional, expand calendar if hidden.
---
 webui/css/scaffolding.css           |  7 +++++-
 webui/js/source/aavariables.js      |  1 +
 webui/js/source/preferences.js      | 23 ++++++++++++++++++-
 webui/js/source/primer.js           | 16 ++++++++++++--
 webui/js/source/sidebar-calendar.js | 44 ++++++++++++++++++++-----------------
 webui/js/source/sidebar-stats.js    |  8 +++++--
 6 files changed, 73 insertions(+), 26 deletions(-)

diff --git a/webui/css/scaffolding.css b/webui/css/scaffolding.css
index a7ea6f0..a435ab8 100644
--- a/webui/css/scaffolding.css
+++ b/webui/css/scaffolding.css
@@ -696,12 +696,17 @@ a.dropdown-toggle {
 }
 
 #display_options_dropdown > div {
+    width: 100%;
+    overflow-y: auto;
+}
+
+#display_options_dropdown > div > div {
     width: 45%;
     float: left;
     margin: 2%;
 }
 
-#display_options_dropdown > div:first-child {
+#display_options_dropdown > div > div:first-child {
     border-right: 2px solid #3333;
 }
 
diff --git a/webui/js/source/aavariables.js b/webui/js/source/aavariables.js
index b3e3420..4fcaf74 100644
--- a/webui/js/source/aavariables.js
+++ b/webui/js/source/aavariables.js
@@ -53,6 +53,7 @@ let G_current_per_page = 0;
 // sidebar calendar
 const MONTHS_SHORTENED = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
 const CALENDAR_YEARS_SHOWN = 4; // TODO: should this be configurable?
+let G_show_stats_sidebar = true; // Whether to show author stats or not
 
 // datepicker
 const DAYS_SHORTENED = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
diff --git a/webui/js/source/preferences.js b/webui/js/source/preferences.js
index 0789b44..3ca036a 100644
--- a/webui/js/source/preferences.js
+++ b/webui/js/source/preferences.js
@@ -37,6 +37,9 @@ function init_preferences(state, json) {
             if (ljson.G_current_listmode_compact !== undefined) {
                 G_current_listmode_compact = ljson.G_current_listmode_compact;
             }
+            if (ljson.G_show_stats_sidebar !== undefined) {
+                G_show_stats_sidebar = ljson.G_show_stats_sidebar;
+            }
         }
     }
 
@@ -53,6 +56,10 @@ function init_preferences(state, json) {
     if (cld) {
         cld.checked = !G_chatty_layout;
     }
+    let cla = document.getElementById('G_show_stats_sidebar');
+    if (cla) {
+        cla.checked = G_show_stats_sidebar;
+    }
 
     // Set list display mode:
     let dmt = document.getElementById('display_mode_threaded');
@@ -134,7 +141,8 @@ function save_preferences() {
         let ljson = {
             G_chatty_layout: G_chatty_layout,
             G_current_listmode: G_current_listmode,
-            G_current_listmode_compact: G_current_listmode_compact
+            G_current_listmode_compact: G_current_listmode_compact,
+            G_show_stats_sidebar: G_show_stats_sidebar
         };
         let lstring = JSON.stringify(ljson);
         window.localStorage.setItem('G_ponymail_preferences', lstring);
@@ -182,3 +190,16 @@ function set_skin_permalink(enable_chatty) {
     save_preferences();
     parse_permalink();
 }
+
+function set_show_stats(display) {
+    G_show_stats_sidebar = display;
+    if (display === false) {
+        document.getElementById('sidebar_stats').style.display = "none";
+        document.getElementById('sidebar_wordcloud').style.display = "none";
+    } else {
+        document.getElementById('sidebar_stats').style.display = "block";
+        document.getElementById('sidebar_wordcloud').style.display = "block";
+    }
+    save_preferences();
+    renderCalendar();
+}
\ No newline at end of file
diff --git a/webui/js/source/primer.js b/webui/js/source/primer.js
index f83bd56..cbec6fc 100644
--- a/webui/js/source/primer.js
+++ b/webui/js/source/primer.js
@@ -24,7 +24,13 @@ function renderListView(state, json) {
     G_current_state = state;
     async_escrow['rendering'] = new Date();
     if (!state || state.update_calendar !== false) {
-        renderCalendar(json.firstYear, json.firstMonth, json.lastYear, json.lastMonth, json.active_months);
+        renderCalendar({
+            FY: json.firstYear,
+            FM: json.firstMonth,
+            LY: json.lastYear,
+            LM: json.lastMonth,
+            activity: json.active_months
+        });
     }
     // sort threads by date
     if (isArray(json.thread_struct)) {
@@ -182,7 +188,13 @@ function render_virtual_inbox(state, json) {
 
         async_escrow['rendering'] = new Date();
         if (!state || state.update_calendar !== false) {
-            renderCalendar(json.firstYear, json.firstMonth, json.lastYear, json.lastMonth, json.active_months);
+            renderCalendar({
+                FY: json.firstYear,
+                FM: json.firstMonth,
+                LY: json.lastYear,
+                LM: json.lastMonth,
+                activity: json.active_months
+            });
         }
         // sort threads by date
         if (isArray(json.thread_struct)) {
diff --git a/webui/js/source/sidebar-calendar.js b/webui/js/source/sidebar-calendar.js
index 8a9ea2d..3e1ed41 100644
--- a/webui/js/source/sidebar-calendar.js
+++ b/webui/js/source/sidebar-calendar.js
@@ -16,10 +16,13 @@
 */
 
 let calendar_index = 0;
+let current_calendar_size = CALENDAR_YEARS_SHOWN;
+let calendar_state = {}
 
-function renderCalendar(FY, FM, LY, LM, activity = null) {
+function renderCalendar(state) {
+    calendar_state = state ? state : calendar_state;
     calendar_index = 0;
-
+    current_calendar_size = G_show_stats_sidebar ? CALENDAR_YEARS_SHOWN : CALENDAR_YEARS_SHOWN * 3;
     // Only render if calendar div is present
     let cal = document.getElementById('sidebar_calendar');
     if (!cal) {
@@ -29,10 +32,11 @@ function renderCalendar(FY, FM, LY, LM, activity = null) {
     let now = new Date();
     let CY = now.getFullYear();
     let CM = now.getMonth() + 1;
-    let SY = Math.min(LY, CY); // last year in calendar, considering current date
+    let SY = Math.min(calendar_state.LY, CY); // last year in calendar, considering current date
+
     // If Last Year is into the future, set Last Month to this one.
-    if (LY > CY) {
-        LM = CM;
+    if (calendar_state.LY > CY) {
+        calendar_state.LM = CM;
     }
 
     let cdiv = new HTML('div', {
@@ -45,7 +49,7 @@ function renderCalendar(FY, FM, LY, LM, activity = null) {
         class: 'sidebar_calendar_chevron'
     });
     chevron.inject(new HTML('span', {
-        onclick: 'calendar_scroll(this, -4);',
+        onclick: 'calendar_scroll(this, -1);',
         style: {
             display: 'none'
         },
@@ -56,7 +60,7 @@ function renderCalendar(FY, FM, LY, LM, activity = null) {
     cdiv.inject(chevron);
 
     // Create divs for each year, assign all visible
-    for (let Y = SY; Y >= FY; Y--) {
+    for (let Y = SY; Y >= calendar_state.FY; Y--) {
         let ydiv = new HTML('div', {
             class: 'sidebar_calendar_year',
             id: 'sidebar_calendar_' + N++
@@ -73,34 +77,34 @@ function renderCalendar(FY, FM, LY, LM, activity = null) {
             // Mark out-of-bounds segments
             let ym = '%04u-%02u'.format(Y, i+1);
             let c_active = true;
-            if (activity && !activity[ym]) {
+            if (calendar_state.activity && !calendar_state.activity[ym]) {
                 c_active = false;
             }
-            if ((Y == SY && i >= LM) || (Y == CY && i > CM)) {
+            if ((Y == SY && i >= calendar_state.LM) || (Y == CY && i > CM)) {
                 c_active = false;
             }
-            if (Y == FY && ((i + 1) < FM)) {
+            if (Y == calendar_state.FY && ((i + 1) < calendar_state.FM)) {
                 c_active = false;
             }
             if (!c_active) {
                 mdiv.setAttribute("class", "sidebar_calendar_month_nothing");
                 mdiv.setAttribute("onclick", "javascript:void(0);");
-            } else if (activity && activity[ym]) {
-                let count = activity[ym];
+            } else if (calendar_state.activity && calendar_state.activity[ym]) {
+                let count = calendar_state.activity[ym];
                 if (count >= 1000) {
                     count = Math.round(count/100.0); // nearest century
                     count = Math.floor(count/10) + "k" + (count % 10); // thousands and remainder
                 } else {
                     count = count.toString();
                 }
-                mdiv.inject(new HTML('span', {title: `${activity[ym].pretty()} emails this month`, class: 'calendar_count'}, count));
+                mdiv.inject(new HTML('span', {title: `${calendar_state.activity[ym].pretty()} emails this month`, class: 'calendar_count'}, count));
             }
             ydiv.inject(mdiv);
         }
         cdiv.inject(ydiv);
     }
 
-    cal.innerHTML = "<p style='text-align: center;'>Archives (%u - %u):</p>".format(FY, SY);
+    cal.innerHTML = "<p style='text-align: center;'>Archives (%u - %u):</p>".format(calendar_state.FY, SY);
     cal.inject(cdiv);
 
 
@@ -108,7 +112,7 @@ function renderCalendar(FY, FM, LY, LM, activity = null) {
         class: 'sidebar_calendar_chevron'
     });
     chevron.inject(new HTML('span', {
-        onclick: 'calendar_scroll(this, 4);',
+        onclick: 'calendar_scroll(this, 1);',
         style: {
             display: 'none'
         },
@@ -118,9 +122,9 @@ function renderCalendar(FY, FM, LY, LM, activity = null) {
     }, " "));
     cdiv.inject(chevron);
 
-    // If we have > 4 years, hide the rest
-    if (N > CALENDAR_YEARS_SHOWN) {
-        for (let i = CALENDAR_YEARS_SHOWN; i < N; i++) {
+    // If we have > N years, hide the rest
+    if (N > current_calendar_size) {
+        for (let i = current_calendar_size; i < N; i++) {
             let obj = document.getElementById('sidebar_calendar_' + i);
             if (obj) {
                 obj.style.display = "none";
@@ -130,8 +134,8 @@ function renderCalendar(FY, FM, LY, LM, activity = null) {
     }
 }
 
-function calendar_scroll(me, x) {
-    console.log(me)
+function calendar_scroll(me, direction) {
+    let x = direction * current_calendar_size;
     let years = document.getElementsByClassName('sidebar_calendar_year');
     calendar_index = Math.max(Math.min(years.length - x, calendar_index + x), 0);
     if (calendar_index > 0) {
diff --git a/webui/js/source/sidebar-stats.js b/webui/js/source/sidebar-stats.js
index d323bca..a75a4b5 100644
--- a/webui/js/source/sidebar-stats.js
+++ b/webui/js/source/sidebar-stats.js
@@ -15,6 +15,7 @@
  limitations under the License.
 */
 
+
 async function sidebar_stats(json) {
     let obj = document.getElementById('sidebar_stats');
     if (!obj) {
@@ -46,7 +47,7 @@ async function sidebar_stats(json) {
 
     // Top 10 participants
     obj.inject("Found %u emails by %u authors, divided into %u topics.".format(json.emails.length, json.numparts, json.no_threads));
-    obj.inject(new HTML('h5', {}, "Most active authors:"));
+    obj.inject(new HTML('h5', {}, "Most active authors: "));
     for (let i = 0; i < json.participants.length; i++) {
         if (i >= 5) {
             break;
@@ -82,5 +83,8 @@ async function sidebar_stats(json) {
             wordCloud(json.cloud, 220, 100, wc);
         }, 50);
     }
-
+    if (G_show_stats_sidebar === false) {
+        obj.style.display = "none";
+        wc.style.display = "none";
+    }
 }