diff --git a/www/index.html b/www/index.html index f0dbaff90..d4d0e7c2a 100644 --- a/www/index.html +++ b/www/index.html @@ -78,20 +78,21 @@ +
- + History - + Themes - + Insert - - Display + + Settings - + Others
@@ -107,9 +108,9 @@
-
+
-
+
    @@ -132,27 +133,6 @@
    -
    diff --git a/www/js/controller.js b/www/js/controller.js index 4175e9042..eaf106c5f 100644 --- 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 index e68a72bd7..a75664081 100644 --- 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 index 4c448423f..9263c8886 100644 --- 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 index 8214966c4..8fd361daf 100644 --- 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 index c2453aa66..09457c8b5 100644 --- a/www/js/search.js +++ b/www/js/search.js @@ -216,13 +216,24 @@ 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}`), ), @@ -230,6 +241,17 @@ Object.keys(pageNavJSON).forEach(id => { ); }); +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 index 5c8d0f538..57b1cf682 100644 --- 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(); }, diff --git a/www/js/settings.json b/www/js/settings.json index 78e6b2d2d..8ae678340 100644 --- a/www/js/settings.json +++ b/www/js/settings.json @@ -1,36 +1,39 @@ { - "app": { - "title": "App Settings", + "slide-layout": { + "title": "Slide Layout", "settings": { - "theme": { - "title": "", - "type": "radio", - "options": {} - }, - "themebg": { - "title": "", - "type": "dynamic", - "options": {} - }, - "layout": { - "title": "App Layout", + "display-options": { + "title": "Display Options", "type": "switch", "options": { - "presenter-view": "Presenter View" + "akhandpaatt": { + "label": "Akhand Paatth View (Beta)", + "subLabel": "(Google ChromeCast Unavailable)" + }, + "larivaar": "Larivaar", + "left-align": "Left-Align", + "quick-tools": "Quick Tools", + "livefeed": { + "label":"Live Feed Text Files", + "subLabel": { + "storepref": "userPrefs.app.live-feed-location" + } + }, + "autoplay": "Auto Play" } }, - "analytics": { - "title": "Other Options", - "type": "switch", + "autoplay-options": { + "title": "Autoplay Options", + "type": "range", "options": { - "collect-statistics":"Collect Statistics" + "autoplayTimer": { + "title": "Delay (Seconds)", + "max": 20, + "min": 1, + "step": 1 + } } - } - } - }, - "slide-layout": { - "title": "Slide Layout", - "settings": { + }, "fields": { "title": "Fields to Display", "type": "checkbox", @@ -70,37 +73,34 @@ "step": 1 } } + } + } + }, + "app": { + "title": "App Settings", + "settings": { + "theme": { + "title": "", + "type": "radio", + "options": {} }, - "display-options": { - "title": "Display Options", + "themebg": { + "title": "", + "type": "dynamic", + "options": {} + }, + "layout": { + "title": "App Layout", "type": "switch", "options": { - "akhandpaatt": { - "label": "Akhand Paatth View (Beta)", - "subLabel": "(Google ChromeCast Unavailable)" - }, - "larivaar": "Larivaar", - "left-align": "Left-Align", - "autoplay": "Auto Play", - "quick-tools": "Quick Tools", - "livefeed": { - "label":"Live Feed Text Files", - "subLabel": { - "storepref": "userPrefs.app.live-feed-location" - } - } + "presenter-view": "Presenter View" } }, - "autoplay-options": { - "title": "Autoplay Options", - "type": "range", + "analytics": { + "title": "Other Options", + "type": "switch", "options": { - "autoplayTimer": { - "title": "Delay (Seconds)", - "max": 20, - "min": 1, - "step": 1 - } + "collect-statistics":"Collect Statistics" } } } diff --git a/www/src/scss/_animations.scss b/www/src/scss/_animations.scss index ae53204fe..180afb24f 100644 --- a/www/src/scss/_animations.scss +++ b/www/src/scss/_animations.scss @@ -66,8 +66,34 @@ } } +@keyframes bounce { + 0% { + transform: translateY(0); + } + + 25% { + transform: translateY(50px); + } + + 50% { + transform: translateY(0); + } + + 75% { + transform: translateY(25px); + } + + 100% { + transform: translateY(0); + } +} + .delete-animate { animation: fadeOutRollDown 0.5s ease 1, gayab 0.1s ease 1; animation-delay: 0s, 0.5s; animation-fill-mode: both; } + +.presenter-view .bounce-animate { + animation: bounce 0.5s ease 1; +} diff --git a/www/src/scss/_header.scss b/www/src/scss/_header.scss index 7cdb3c664..833df4c21 100644 --- a/www/src/scss/_header.scss +++ b/www/src/scss/_header.scss @@ -45,6 +45,7 @@ .nav-header-text { padding: 0 10px; + text-transform: capitalize; } .nav-header-tab { @@ -139,6 +140,11 @@ } } +.presenter-view .navigator-header { + .nav-header-text { display: none; } + .nav-header-tab { display: inline-block; } +} + #session-page, #menu-page { .toggle-minimize {