From 394a891115fca8fe9fd391bd56bef45b19555743 Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Wed, 21 Oct 2020 22:30:58 +1100 Subject: [PATCH] theme conflicts notice in menu --- repo/calendar-scroll/mod.js | 2 +- repo/calendar-scroll/styles.css | 1 + repo/core/css/menu.css | 10 ++- repo/core/enhancerMenu.js | 130 +++++++++++++++++++++++++------- repo/core/render.js | 16 +++- 5 files changed, 125 insertions(+), 34 deletions(-) diff --git a/repo/calendar-scroll/mod.js b/repo/calendar-scroll/mod.js index 0d2f2ff..13dcd89 100644 --- a/repo/calendar-scroll/mod.js +++ b/repo/calendar-scroll/mod.js @@ -14,7 +14,7 @@ module.exports = { name: 'calendar scroll', desc: 'add a button to scroll down to the current week in fullpage/infinite-scroll calendars.', - version: '0.1.0', + version: '0.1.1', author: 'dragonwocky', hacks: { 'renderer/preload.js'(store, __exports) { diff --git a/repo/calendar-scroll/styles.css b/repo/calendar-scroll/styles.css index ed41f12..9f6dfd7 100644 --- a/repo/calendar-scroll/styles.css +++ b/repo/calendar-scroll/styles.css @@ -13,6 +13,7 @@ border-radius: 3px; line-height: 1.2; padding: 0 0.5em; + margin-right: 5px; } #calendar-scroll-to-week:hover { background: transparent; diff --git a/repo/core/css/menu.css b/repo/core/css/menu.css index 1f36cf7..4e05425 100644 --- a/repo/core/css/menu.css +++ b/repo/core/css/menu.css @@ -181,7 +181,7 @@ s { text-decoration: underline; } -[data-relaunch] { +[data-action] { text-decoration: underline dotted; cursor: pointer; } @@ -621,12 +621,16 @@ s { } .reorder #search #tags > span, -.reorder #search #tags > span:hover { +.reorder #search #tags > span:hover, +.conflict #search #tags > span, +.conflict #search #tags > span:hover { opacity: 0.7; background: var(--theme--option-background); } .reorder #search #tags > .selected, -.reorder #search #tags > .selected:hover { +.reorder #search #tags > .selected:hover, +.conflict #search #tags > .selected, +.conflict #search #tags > .selected:hover { background: var(--tag_color, var(--theme--option_active-background)); } diff --git a/repo/core/enhancerMenu.js b/repo/core/enhancerMenu.js index cdea17f..37e8642 100644 --- a/repo/core/enhancerMenu.js +++ b/repo/core/enhancerMenu.js @@ -185,7 +185,78 @@ window['__start'] = async () => { }) ); - // search + const conflicts = { + relaunch: null, + detected: () => + store('mods', { + conflicts: { dark: false, light: false }, + }).conflicts, + alerts: [], + check() { + document.body.classList.remove('conflict'); + conflicts.alerts.forEach((alert) => alert.resolve()); + conflicts.alerts = []; + const enabled = modules.loaded.filter( + (mod) => + store('mods', { [mod.id]: { enabled: false } })[mod.id].enabled && + mod.tags.includes('theme') + ), + dark = enabled.filter((mod) => mod.tags.includes('dark')), + light = enabled.filter((mod) => mod.tags.includes('light')); + for (let mode of [ + [dark, 'dark'], + [light, 'light'], + ]) { + const conflictID = mode[0] + .map((mod) => mod.id) + .sort() + .join('||'); + if ( + conflicts.detected()[mode[1]] && + conflicts.detected()[mode[1]][0] === conflictID && + conflicts.detected()[mode[1]][1] + ) + continue; + if (mode[0].length > 1) { + document.body.classList.add('conflict'); + conflicts.detected()[mode[1]] = [conflictID, false]; + const alert = createAlert( + 'error', + `conflicting ${mode[1]} themes: ${mode[0] + .map((mod) => `${mod.name}`) + .join( + ', ' + )}.
resolve or dismiss to continue.` + ); + alert.el + .querySelector('[data-action="dismiss"]') + .addEventListener('click', (event) => { + conflicts.detected()[mode[1]] = [conflictID, true]; + conflicts.check(); + }); + alert.append(); + conflicts.alerts.push(alert); + } else conflicts.detected()[mode[1]] = false; + } + search(); + }, + }; + function modified() { + conflicts.check(); + if (conflicts.relaunch) return; + conflicts.relaunch = createAlert( + 'info', + 'changes may not fully apply until app relaunch.' + ); + conflicts.relaunch.el + .querySelector('[data-action="relaunch"]') + .addEventListener('click', (event) => { + electron.remote.app.relaunch(); + electron.remote.app.quit(); + }); + conflicts.relaunch.append(); + } + const search_filters = { enabled: true, disabled: true, @@ -209,17 +280,30 @@ window['__start'] = async () => { } function search() { modules.loaded.forEach((mod) => { - const $search_input = document.querySelector('#search > input'); + const $search_input = document.querySelector('#search > input'), + conflictingIDs = [conflicts.detected().dark, conflicts.detected().light] + .filter((conflict) => conflict && !conflict[1]) + .map(([mods, dismissed]) => mods.split('||')) + .flat(); + if ( + conflictingIDs.length || + document.body.classList.contains('reorder') + ) { + $search_input.disabled = true; + } else $search_input.disabled = false; if ( !document.body.classList.contains('reorder') && - ((mod.elem.classList.contains('enabled') && !search_filters.enabled) || - (mod.elem.classList.contains('disabled') && - !search_filters.disabled) || - !mod.tags.some((tag) => search_filters.tags.has(tag)) || - ($search_input.value && - !innerText(mod.elem) - .toLowerCase() - .includes($search_input.value.toLowerCase().trim()))) + (conflictingIDs.length + ? !conflictingIDs.some((id) => id.includes(mod.id)) + : (mod.elem.classList.contains('enabled') && + !search_filters.enabled) || + (mod.elem.classList.contains('disabled') && + !search_filters.disabled) || + !mod.tags.some((tag) => search_filters.tags.has(tag)) || + ($search_input.value && + !innerText(mod.elem) + .toLowerCase() + .includes($search_input.value.toLowerCase().trim()))) ) return (mod.elem.style.display = 'none'); mod.elem.style.display = 'block'; @@ -239,7 +323,10 @@ window['__start'] = async () => { ); document.querySelector('#tags').append(el); el.addEventListener('click', (event) => { - if (!document.body.classList.contains('reorder')) { + if ( + !document.body.classList.contains('reorder') && + !document.body.classList.contains('conflict') + ) { el.className = el.className === 'selected' ? '' : 'selected'; onclick(el.className === 'selected'); } @@ -299,22 +386,6 @@ window['__start'] = async () => { return parsed; } - let $modified_notice; - function modified() { - if ($modified_notice) return; - $modified_notice = createAlert( - 'info', - `changes may not fully apply until app relaunch.` - ); - $modified_notice.el - .querySelector('[data-relaunch]') - .addEventListener('click', (event) => { - electron.remote.app.relaunch(); - electron.remote.app.quit(); - }); - $modified_notice.append(); - } - const file_icon = await fs.readFile( path.resolve(`${__dirname}/icons/file.svg`) ); @@ -406,11 +477,11 @@ window['__start'] = async () => { const $modules = document.querySelector('#modules'); for (let mod of modules.loaded) { - for (let fonts of mod.fonts || []) { + for (let font of mod.fonts || []) { document .querySelector('head') .appendChild( - helpers.createElement(``) + helpers.createElement(``) ); } @@ -519,6 +590,7 @@ window['__start'] = async () => { .forEach((checkbox) => checkbox.addEventListener('click', (event) => event.target.blur()) ); + conflicts.check(); // draggable re-ordering const draggable = { diff --git a/repo/core/render.js b/repo/core/render.js index c2e731e..30bdc25 100644 --- a/repo/core/render.js +++ b/repo/core/render.js @@ -9,7 +9,11 @@ const url = require('url'), path = require('path'), electron = require('electron'), - { __notion } = require('../../pkg/helpers.js'), + { + __notion, + getEnhancements, + createElement, + } = require('../../pkg/helpers.js'), config = require(`${__notion}/app/config.js`), constants = require(`${__notion}/app/shared/constants.js`), notion_intl = require(`${__notion}/app/shared/notion-intl/index.js`), @@ -968,6 +972,16 @@ module.exports = (store, __exports) => { window['__start'] = () => { document.head.innerHTML += ``; + const modules = getEnhancements(); + for (let mod of modules.loaded) { + for (let font of mod.fonts || []) { + document + .querySelector('head') + .appendChild( + createElement(``) + ); + } + } // open menu on hotkey toggle document.addEventListener('keyup', (event) => {