Rearrange settings (#467)

* cleans code for duplicate settings * cleans the if logic a bit * redirect settings button to display tab with animation Remove settings from main panel, Adds a bounce animation in presenter view, Rearrange settings to bring display at top, Add analytics event to see what triggered the settings panel. * removes unexpected units with zero from sccs file * rename display to settings * Changes the way we do analytics on settings * add comments explaining tabs and panes * changes order of autoplay * removes css hack for reflowing animation
KhalisFoundation · Feb 5, 2019 · 9a67de7 · 9a67de7
1 parent a107947
commit 9a67de7
Show file tree

Hide file tree

Showing 10 changed files with 189 additions and 172 deletions.
diff --git a/www/index.html b/www/index.html
@@ -78,20 +78,21 @@
                 <i class="fa fa-window-minimize"></i>
                 <i class="fa fa-window-maximize disabled"></i>
             </div>
+            <span class="nav-header-text"> </span>
             <div class="nav-header-tabs">
-              <span class="nav-header-tab nav-header-text active" id="history-tab" data-title="History">
+              <span class="nav-header-tab nav-header-text active" id="history-tab" data-title="history">
                 <i class="fa fa-clock-o"></i> History
               </span>
-              <span class="nav-header-tab nav-header-text" id="themes-tab" data-title="Themes">
+              <span class="nav-header-tab nav-header-text" id="themes-tab" data-title="themes">
                 <i class="fa fa-paint-brush"></i> Themes
               </span>
-              <span class="nav-header-tab nav-header-text" id="insert-tab" data-title="Insert">
+              <span class="nav-header-tab nav-header-text" id="insert-tab" data-title="insert">
                 <i class="fa fa-desktop"></i> Insert
               </span>
-              <span class="nav-header-tab nav-header-text" id="display-tab" data-title="Display">
-                <i class="fa fa-cogs"></i> Display
+              <span class="nav-header-tab nav-header-text" id="settings-tab" data-title="settings">
+                <i class="fa fa-cogs"></i> Settings
               </span>
-              <span class="nav-header-tab nav-header-text" id="other-tab" data-title="Others">
+              <span class="nav-header-tab nav-header-text" id="others-tab" data-title="others">
                 <i class="fa fa-ellipsis-h"></i> Others
               </span>
             </div>
@@ -107,9 +108,9 @@
             <div class="tab-content" id ="insert-tab-content">
               <ul id="list-of-custom-slides"></ul>
             </div>
-            <div class="tab-content" id ="display-tab-content">
+            <div class="tab-content" id ="settings-tab-content">
             </div>
-            <div class="tab-content" id ="other-tab-content">
+            <div class="tab-content" id ="others-tab-content">
                 <ul id="list-of-shabad-options"></ul>
             </div>
           </section>
@@ -132,27 +133,6 @@
             <ul id="shabad" class="gurmukhi"></ul>
           </section>
         </div>
-        <!--<div class="nav-page" id="sync-page">
-          <div class="navigator-header">
-            <div class="preferences-open"> </div>
-            <span class="nav-header-text">Synced Share</span>
-          </div>
-          <section class="block-list">
-            <div class="connect-box">
-              <div class="help-block">Give remote access to devices via unique code.</div>
-              <button class="button connect-btn">Start Sharing</button>
-            </div>
-            <div class="share-box hidden">
-              <div class="help-block">
-                Ask sangat to visit
-                <a href="https://sttm.co/sync" target="_blank">sttm.co/sync</a>
-                and enter the following code
-              </div>
-              <input name="code" readonly value="" />
-              <button class="button end-btn">Stop Sharing</button>
-            </div>
-          </section>
-        </div>-->
         <div class="takeover-page" id="menu-page">
           <div class="navigator-header">
             <div class="preferences-close"> </div>

diff --git a/www/js/controller.js b/www/js/controller.js
@@ -175,7 +175,7 @@ const winMenu = [
         accelerator: 'Ctrl+,',
         click: () => {
           analytics.trackEvent('menu', 'preferences');
-          global.core.menu.toggleMenu();
+          global.core.menu.showSettingsTab(true);
         },
       },
       {
@@ -248,7 +248,7 @@ const macMenu = [
         label: 'Preferences',
         accelerator: 'Cmd+,',
         click: () => {
-          global.core.menu.toggleMenu();
+          global.core.menu.showSettingsTab(true);
         },
       },
       {
@@ -397,6 +397,8 @@ function checkPresenterView() {
   classList.toggle('scale-viewer', inPresenterView);
 
   document.querySelector('#presenter-view-toggle').checked = inPresenterView;
+  // hide header-tabs for non presenter view
+  document.querySelector('.nav-header-tabs').classList.toggle('hidden', !inPresenterView);
 }
 
 global.platform.ipc.on('presenter-view', () => {

diff --git a/www/js/desktop_scripts.js b/www/js/desktop_scripts.js
@@ -184,23 +184,6 @@ Array.from($titleButtons).forEach((el) => {
   el.addEventListener('click', e => windowAction(e));
 });
 
-const allTabs = document.getElementsByClassName('nav-header-tab');
-
-function showTabContent(clickedTab) {
-  document.querySelector('.nav-header-tab.active').classList.remove('active');
-  const tabContent = document.getElementById(`${clickedTab}-content`);
-  document.querySelector('.tab-content.active').classList.remove('active');
-  tabContent.classList.add('active');
-}
-
-Array.prototype.forEach.call(allTabs, ((element) => {
-  element.addEventListener('click', (event) => {
-    const clickedTabId = event.currentTarget.id;
-    showTabContent(clickedTabId);
-    document.getElementById(clickedTabId).classList.add('active');
-  });
-}));
-
 const $minimize = document.querySelectorAll('.navigator-header .toggle-minimize');
 const $minimizeIcons = document.querySelectorAll('.navigator-header .toggle-minimize i');
 

diff --git a/www/js/footer-left.json b/www/js/footer-left.json
@@ -1,14 +1,37 @@
 {
   "search": {
     "label": "Search",
-    "icon": "search"
+    "icon": "search",
+    "type": "pane-nav"
   },
-  "session": {
+  "history": {
     "label": "History",
-    "icon": "history"
+    "icon": "history",
+    "type": "tab-nav"
   },
   "shabad": {
     "label": "Current Shabad",
-    "icon": "dot-circle-o"
+    "icon": "dot-circle-o",
+    "type": "pane-nav"
+  },
+  "themes": {
+    "label": "Themes",
+    "icon": "paint-brush",
+    "type": "tab-nav"
+  },
+  "insert": {
+    "label": "Insert",
+    "icon": "desktop",
+    "type": "tab-nav"
+  },
+  "settings": {
+    "label": "Settings",
+    "icon": "cogs",
+    "type": "tab-nav"
+  },
+  "others": {
+    "label": "Others",
+    "icon": "ellipsis-h",
+    "type": "tab-nav"
   }
 }
diff --git a/www/js/menu.js b/www/js/menu.js
@@ -9,6 +9,7 @@ const moment = require('moment');
 const electron = require('electron');
 const sanitizeHtml = require('sanitize-html');
 const { store, analytics } = require('electron').remote.require('./app');
+const search = require('./search');
 
 const allowedTags = ['b', 'i', 'em', 'u', 'pre', 'strong', 'div', 'code', 'br', 'p', 'ul', 'li', 'ol'];
 
@@ -304,7 +305,7 @@ module.exports = {
     const $preferencesOpen = document.querySelectorAll('.preferences-open');
     $preferencesOpen.forEach(($menuToggle) => {
       $menuToggle.appendChild(menuButton.cloneNode(true));
-      $menuToggle.addEventListener('click', () => { module.exports.toggleMenu('#menu-page'); });
+      $menuToggle.addEventListener('click', module.exports.showSettingsTab);
     });
     document.querySelector('.preferences-close').appendChild(closeButton);
 
@@ -329,6 +330,22 @@ module.exports = {
 
   showNotificationsModal,
 
+  showSettingsTab(fromMainMenu) {
+    search.activateNavLink('settings', true);
+    search.activateNavPage('session', { id: 'settings', label: 'Settings' });
+
+    const isPresenterView = document.body.classList.contains('presenter-view');
+    const settingsViewType = isPresenterView ? 'from_presenter_view' : 'not_from_presenter_view';
+    const settingsClickSource = fromMainMenu ? 'menu_settings' : 'hamburger_settings';
+    analytics.trackEvent(settingsClickSource, 'click', settingsViewType);
+
+    const sessionPage = document.querySelector('#session-page');
+    sessionPage.classList.add('bounce-animate');
+    sessionPage.addEventListener('webkitAnimationEnd', () => {
+      sessionPage.classList.remove('bounce-animate');
+    });
+  },
+
   toggleMenu(pageSelector = '#menu-page') {
     document.querySelector(pageSelector).classList.toggle('active');
   },

diff --git a/www/js/search.js b/www/js/search.js
@@ -216,20 +216,42 @@ const searchOptions = h(
 
 const navPageLinks = [];
 Object.keys(pageNavJSON).forEach(id => {
+  const navType = pageNavJSON[id].type;
   navPageLinks.push(
     h(
       'li',
       h(
-        `a#${id}-pageLink`,
+        `a#${id}-pageLink.${navType}`,
         {
-          onclick: () => module.exports.navPage(id),
+          onclick: () => {
+            if (navType === 'pane-nav') {
+              // if it's one of the 4 panes (not a tab) then shift whole page
+              module.exports.navPage(id);
+            } else {
+              // if it's a tab, open that tab in session page (bottom right pane)
+              module.exports.activateNavPage('session', { id, label: pageNavJSON[id].label });
+              module.exports.activateNavLink(id, true);
+            }
+          },
+          'data-title': id,
         },
         h(`i.fa.fa-${pageNavJSON[id].icon}`),
       ),
     ),
   );
 });
 
+document.querySelectorAll('.nav-header-tab').forEach((element) => {
+  element.addEventListener('click', (event) => {
+    const clickedTabId = event.currentTarget.dataset.title;
+    module.exports.activateNavPage('session', {
+      id: clickedTabId,
+      label: pageNavJSON[clickedTabId].label,
+    });
+    module.exports.activateNavLink(clickedTabId, true);
+  });
+});
+
 const presenterSwitch = h(
   'li',
   [
@@ -786,13 +808,33 @@ module.exports = {
   },
 
   navPage(page) {
-    this.$navPages.forEach($navPage => {
-      $navPage.classList.remove('active');
-    });
+    this.activateNavLink(page);
+    this.activateNavPage(page);
+  },
+
+  activateNavLink(page, tab = false) {
     this.$navPageLinks.forEach($navPageLink => {
       $navPageLink.classList.remove('active');
     });
-    document.querySelector(`#${page}-page`).classList.add('active');
     document.querySelector(`#${page}-pageLink`).classList.add('active');
+
+    if (tab) {
+      document.querySelector('.nav-header-tab.active').classList.remove('active');
+      document.getElementById(`${page}-tab`).classList.add('active');
+    }
+  },
+
+  activateNavPage(page, tab = null) {
+    this.$navPages.forEach($navPage => {
+      $navPage.classList.remove('active');
+    });
+
+    document.querySelector(`#${page}-page`).classList.add('active');
+
+    if (tab) {
+      document.querySelector('.tab-content.active').classList.remove('active');
+      document.querySelector(`#${tab.id}-tab-content`).classList.add('active');
+      document.querySelector('#session-page .nav-header-text').innerText = tab.label;
+    }
   },
 };
diff --git a/www/js/settings.js b/www/js/settings.js
@@ -32,67 +32,6 @@ function updateRangeSetting(key, val) {
   analytics.trackEvent('settings', optionKey, val);
 }
 
-function addDisplayTab() {
-  document.getElementById('display-tab-content').innerHTML = '';
-  const catKey = 'slide-layout';
-  const settingKey = 'display-options';
-  const userPrefs = store.getAllPrefs();
-  const setting = settings[catKey].settings[settingKey];
-  const switchList = h('ul');
-  Object.keys(setting.options).forEach((option) => {
-    const optionId = `setting-${catKey}-${settingKey}-${option}`;
-    const switchListAttrs = {
-      name: `setting-${catKey}-${settingKey}`,
-      onclick: (e) => {
-        const newVal = e.target.checked;
-        store.setUserPref(`${catKey}.${settingKey}.${option}`, newVal);
-        updateCheckboxSetting(option);
-        if (typeof global.controller[option] === 'function') {
-          global.controller[option](newVal);
-        }
-        if (typeof global.core[option] === 'function') {
-          global.core[option](newVal);
-        }
-      },
-      type: 'checkbox',
-      value: option,
-    };
-    if (option === 'akhandpaatt') {
-      switchListAttrs.disabled = store.get('userPrefs.slide-layout.display-options.disable-akhandpaatt');
-      switchListAttrs.title = 'Disabled during casting';
-    }
-    if (userPrefs[catKey][settingKey][option]) {
-      switchListAttrs.checked = true;
-    }
-    let optionLabel = setting.options[option];
-    let subLabel = false;
-    if (typeof setting.options[option] === 'object') {
-      optionLabel = setting.options[option].label;
-      subLabel = setting.options[option].subLabel;
-
-      if (typeof subLabel === 'object') {
-        subLabel = store.get(subLabel.storepref);
-      }
-    }
-
-    switchList.appendChild(
-      h('li',
-        [
-          h('span', optionLabel),
-          h('div.switch',
-            [
-              h(`input#${optionId}`,
-                switchListAttrs),
-              h('label',
-                {
-                  htmlFor: optionId })])]));
-    if (subLabel) {
-      switchList.appendChild(h(`div.sub-label.${option}`, subLabel));
-    }
-  });
-  document.getElementById('display-tab-content').appendChild(switchList);
-}
-
 function createSettingsPage(userPrefs) {
   if (document.getElementById('settings')) {
     document.getElementById('settings').remove();
@@ -280,8 +219,7 @@ module.exports = {
   init() {
     const userPrefs = store.getAllPrefs();
     this.settingsPage = createSettingsPage(userPrefs);
-    document.querySelector('#menu-page').appendChild(this.settingsPage);
-    addDisplayTab();
+    document.querySelector('#settings-tab-content').appendChild(this.settingsPage);
     this.applySettings();
   },