From f0b62d8df36b8a4d71f08606f9d7a9f5e81b5792 Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Thu, 1 Oct 2020 23:11:31 +1000 Subject: [PATCH] re-orderable mods: order is saved + mods are loaded according to priority --- repo/core/css/menu.css | 39 ++++++++--------- repo/core/menu.js | 76 ++++++++++++++++++---------------- repo/custom-inserts/mod.js | 5 ++- repo/material-ocean/mod.js | 18 ++++---- repo/material-ocean/styles.css | 8 ++-- repo/night-shift/mod.js | 2 +- 6 files changed, 78 insertions(+), 70 deletions(-) diff --git a/repo/core/css/menu.css b/repo/core/css/menu.css index 43a26fd..17992b8 100644 --- a/repo/core/css/menu.css +++ b/repo/core/css/menu.css @@ -231,7 +231,7 @@ s { background: var(--theme--option-background); color: var(--theme--option-color); border-radius: 2px; - transition: color 200ms, background 200ms; + transition: color 200ms, background 200ms, opacity 200ms; user-select: none; } #search #tags > span:not(:last-child) { @@ -618,37 +618,38 @@ s { font-weight: bold; } -#modules.reorder section { - margin-bottom: 0.4em; +.reorder #search #tags > span, +.reorder #search #tags > span:hover { + opacity: 0.7; + background: var(--theme--option-background); } -#modules.reorder [draggable] { - margin-bottom: 1.15em; +.reorder #search #tags > .selected, +.reorder #search #tags > .selected:hover { + background: var(--tag_color, var(--theme--option_active-background)); } -#modules.reorder [draggable]::after { + +.reorder #modules .dragged-over::after { content: ''; - height: 0.3em; + height: 0.25em; width: 99%; position: absolute; - margin: 0.5em 0; + margin: 0.3em 0; opacity: 0.7; - background: var(--theme--table-border); -} -#modules.reorder [draggable].dragged-over::after { background: var(--theme--selected); } -#modules.reorder .switch, -#modules.reorder .tags, -#modules.reorder .desc, -#modules.reorder .options, -#modules.reorder .author, -#modules.reorder .version { +.reorder #modules .switch, +.reorder #modules .tags, +.reorder #modules .desc, +.reorder #modules .options, +.reorder #modules .author, +.reorder #modules .version { display: none; } -#modules.reorder label { +.reorder #modules label { cursor: pointer; } -#modules.reorder label::before { +.reorder #modules label::before { content: '::'; margin-right: 0.4em; color: var(--theme--text_ui); diff --git a/repo/core/menu.js b/repo/core/menu.js index 22e79c6..533f009 100644 --- a/repo/core/menu.js +++ b/repo/core/menu.js @@ -7,12 +7,10 @@ 'use strict'; const store = require('../../pkg/store.js'), - { id } = require('./mod.js'), helpers = require('../../pkg/helpers.js'), fs = require('fs-extra'), path = require('path'), - electron = require('electron'), - browser = electron.remote.getCurrentWindow(); + electron = require('electron'); window['__start'] = async () => { const buttons = require('./buttons.js')(() => ({ @@ -197,13 +195,15 @@ window['__start'] = async () => { modules.loaded.forEach((mod) => { const $search_input = document.querySelector('#search > input'); if ( - (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())) + !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()))) ) return (mod.elem.style.display = 'none'); mod.elem.style.display = 'block'; @@ -223,21 +223,20 @@ window['__start'] = async () => { ); document.querySelector('#tags').append(el); el.addEventListener('click', (event) => { - el.className = el.className === 'selected' ? '' : 'selected'; - onclick(el.className === 'selected'); + if (!document.body.classList.contains('reorder')) { + el.className = el.className === 'selected' ? '' : 'selected'; + onclick(el.className === 'selected'); + } }); return el; } - createTag( - 'enabled', - (state) => [(search_filters.enabled = state), search()] - // 'var(--theme--bg_green)' - ); - createTag( - 'disabled', - (state) => [(search_filters.disabled = state), search()] - // 'var(--theme--bg_red)' - ); + createTag('enabled', (state) => [ + ((search_filters.enabled = state), search()), + ]); + createTag('disabled', (state) => [ + (search_filters.disabled = state), + search(), + ]); for (let tag of search_filters.tags) createTag(`#${tag}`, (state) => [ state ? search_filters.tags.add(tag) : search_filters.tags.delete(tag), @@ -541,9 +540,10 @@ window['__start'] = async () => { document .querySelectorAll('.dragged-over') .forEach((el) => el.classList.remove('dragged-over')); - const $node = draggable.list.find( - (node) => node.innerText === event.target.innerText - ); + const $node = [ + draggable.list[0].previousElementSibling, + ...draggable.list, + ].find((node) => node.innerText === event.target.innerText); if ($node) $node.classList.add('dragged-over'); }); document.addEventListener('drop', (event) => { @@ -558,18 +558,21 @@ window['__start'] = async () => { const from = draggable.list.findIndex( (node) => node.innerText === draggable.target.innerText ), - to = draggable.list.findIndex( - (node) => node.innerText === event.target.innerText + to = + event.target.innerText === + draggable.list[0].previousElementSibling.innerText + ? 0 + : draggable.list.findIndex( + (node) => node.innerText === event.target.innerText + ) + 1; + if (to >= 0) { + draggable.list.splice( + to > from ? to - 1 : to, + 0, + draggable.list.splice(from, 1)[0] ); - // [draggable.list[from], draggable.list[to]] = [ - // draggable.list[to], - // draggable.list[from], - // ]; -- swap - if (to >= draggable.list.length) { - let k = to - draggable.list.length; - while (k--) draggable.list.push(undefined); + store('mods').priority = draggable.list.map((m) => m.id); } - draggable.list.splice(to, 0, draggable.list.splice(from, 1)[0]); } draggable.render(); }); @@ -582,9 +585,10 @@ window['__start'] = async () => { <${draggable.tags[0]} data-bolded="configure">configure | <${draggable.tags[1]} data-bolded="reorder">reorder `; - $modules.classList[draggable.state ? 'add' : 'remove']('reorder'); + document.body.classList[draggable.state ? 'add' : 'remove']('reorder'); $modules .querySelectorAll('input') .forEach((input) => (input.disabled = draggable.state)); + search(); }); }; diff --git a/repo/custom-inserts/mod.js b/repo/custom-inserts/mod.js index 59c0ba0..8ae3aa4 100644 --- a/repo/custom-inserts/mod.js +++ b/repo/custom-inserts/mod.js @@ -12,8 +12,9 @@ module.exports = { id: 'b4b0aced-2059-43bf-8d1d-ccd757ee5ebb', tags: ['extension'], name: 'custom inserts', - desc: 'link files for small client-side tweaks.', - version: '0.1.2', + desc: `link files for small client-side tweaks. (not sure how to do something? check out the + [tweaks](https://github.com/dragonwocky/notion-enhancer/blob/master/TWEAKS.md) collection.)`, + version: '0.1.3', author: 'dragonwocky', options: [ { diff --git a/repo/material-ocean/mod.js b/repo/material-ocean/mod.js index e4a8b42..19b6752 100644 --- a/repo/material-ocean/mod.js +++ b/repo/material-ocean/mod.js @@ -1,16 +1,16 @@ /* - * Material Ocean + * material ocean * (c) 2020 Abubakar Yagoub (https://blacksuan19.tk) - * under GNU's GPL3 license + * under the MIT license */ -"use strict"; +'use strict'; module.exports = { - id: "69e7ccb2-4aef-484c-876d-3de1b433d2b9", - tags: ["theme", "dark"], - name: "Material Ocean", - desc: "a Material theme with oceanic colors", - version: "0.1", - author: "blacksuan19", + id: '69e7ccb2-4aef-484c-876d-3de1b433d2b9', + tags: ['theme', 'dark'], + name: 'material ocean', + desc: 'an oceanic colour palette.', + version: '0.1', + author: 'blacksuan19', }; diff --git a/repo/material-ocean/styles.css b/repo/material-ocean/styles.css index 02bc6f0..cb6bc4f 100644 --- a/repo/material-ocean/styles.css +++ b/repo/material-ocean/styles.css @@ -1,8 +1,10 @@ -/* Copyright © Blacksuan19 @ 2020 */ -/* part of Material Ocean Color Scheme */ +/* + * material ocean + * (c) 2020 Abubakar Yagoub (https://blacksuan19.tk) + * under the MIT license + */ :root { - /* material ocean colors */ --ocean-main: #0f111a; --ocean-sec: #00010a; --ocean-accent: #ff4151; diff --git a/repo/night-shift/mod.js b/repo/night-shift/mod.js index 8014918..0c29d7c 100644 --- a/repo/night-shift/mod.js +++ b/repo/night-shift/mod.js @@ -12,7 +12,7 @@ module.exports = { name: 'night shift', desc: 'sync dark/light theme with the system (overrides normal theme setting).', - version: '0.1.0', + version: '0.1.1', author: 'dragonwocky', hacks: { 'renderer/preload.js'(store, __exports) {