diff --git a/extension/helpers.js b/extension/helpers.js index d8bfc48..0b6ca06 100644 --- a/extension/helpers.js +++ b/extension/helpers.js @@ -9,7 +9,8 @@ export const ERROR = Symbol(); export const env = {}; -env.name = 'browser'; +env.name = 'extension'; +env.version = chrome.runtime.getManifest().version; env.openEnhancerMenu = () => chrome.runtime.sendMessage({ action: 'openEnhancerMenu' }); env.focusNotion = () => chrome.runtime.sendMessage({ action: 'focusNotion' }); @@ -20,9 +21,11 @@ export const storage = {}; storage.set = (id, key, value) => new Promise((res, rej) => chrome.storage.sync.set({ [`[${id}]${key}`]: value }, res)); -storage.get = (id, key) => +storage.get = (id, key, fallback = undefined) => new Promise((res, rej) => - chrome.storage.sync.get([`[${id}]${key}`], (values) => res(values[`[${id}]${key}`])) + chrome.storage.sync.get([`[${id}]${key}`], (values) => + res(values[`[${id}]${key}`] ?? fallback) + ) ); /** - */ @@ -127,7 +130,7 @@ fmt.Prism.hooks.add('complete', async (event) => { event.element.parentElement.removeAttribute('tabindex'); event.element.parentElement.parentElement .querySelector('.copy-to-clipboard-button') - .prepend(web.createElement(await fs.getText('icons/fontawesome/copy.svg'))); + .prepend(web.createElement(await fs.getText('icons/fa/copy.svg'))); // if (!fmt.Prism._stylesheetLoaded) { // web.loadStyleset('./dep/prism.css'); // fmt.Prism._stylesheetLoaded = true; @@ -192,8 +195,14 @@ export const fs = {}; /** * @param {string} path */ -fs.getJSON = (path) => fetch(chrome.runtime.getURL(path)).then((res) => res.json()); -fs.getText = (path) => fetch(chrome.runtime.getURL(path)).then((res) => res.text()); +fs.getJSON = (path) => + fetch(path.startsWith('https://') ? path : chrome.runtime.getURL(path)).then((res) => + res.json() + ); +fs.getText = (path) => + fetch(path.startsWith('https://') ? path : chrome.runtime.getURL(path)).then((res) => + res.text() + ); fs.isFile = async (path) => { try { diff --git a/extension/icons/fontawesome/caret-down.svg b/extension/icons/fa/caret-down.svg similarity index 100% rename from extension/icons/fontawesome/caret-down.svg rename to extension/icons/fa/caret-down.svg diff --git a/extension/icons/fontawesome/code.svg b/extension/icons/fa/code.svg similarity index 100% rename from extension/icons/fontawesome/code.svg rename to extension/icons/fa/code.svg diff --git a/extension/icons/fontawesome/copy.svg b/extension/icons/fa/copy.svg similarity index 100% rename from extension/icons/fontawesome/copy.svg rename to extension/icons/fa/copy.svg diff --git a/extension/icons/fontawesome/discord.svg b/extension/icons/fa/discord.svg similarity index 100% rename from extension/icons/fontawesome/discord.svg rename to extension/icons/fa/discord.svg diff --git a/extension/icons/fa/exclamation-triangle.svg b/extension/icons/fa/exclamation-triangle.svg new file mode 100644 index 0000000..752b93d --- /dev/null +++ b/extension/icons/fa/exclamation-triangle.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/extension/icons/fontawesome/file.svg b/extension/icons/fa/file.svg similarity index 100% rename from extension/icons/fontawesome/file.svg rename to extension/icons/fa/file.svg diff --git a/extension/icons/fontawesome/info.svg b/extension/icons/fa/info.svg similarity index 100% rename from extension/icons/fontawesome/info.svg rename to extension/icons/fa/info.svg diff --git a/extension/icons/fontawesome/long-arrow-alt-left.svg b/extension/icons/fa/long-arrow-alt-left.svg similarity index 100% rename from extension/icons/fontawesome/long-arrow-alt-left.svg rename to extension/icons/fa/long-arrow-alt-left.svg diff --git a/extension/icons/fontawesome/long-arrow-alt-right.svg b/extension/icons/fa/long-arrow-alt-right.svg similarity index 100% rename from extension/icons/fontawesome/long-arrow-alt-right.svg rename to extension/icons/fa/long-arrow-alt-right.svg diff --git a/extension/icons/fa/redo.svg b/extension/icons/fa/redo.svg new file mode 100644 index 0000000..66878a5 --- /dev/null +++ b/extension/icons/fa/redo.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/extension/icons/monster/party.svg b/extension/icons/monster/party.svg new file mode 100644 index 0000000..e0b975e --- /dev/null +++ b/extension/icons/monster/party.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/client.css b/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/client.css index be75895..0e4776d 100644 --- a/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/client.css +++ b/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/client.css @@ -9,6 +9,7 @@ -webkit-user-select: none; transition: background 20ms ease-in 0s; cursor: pointer; + color: var(--theme--text_sidebar); } .enhancer--sidebarMenuTrigger:hover { background: var(--theme--button-hover); @@ -26,11 +27,10 @@ padding: 2px 14px; width: 100%; } -.enhancer--sidebarMenuTrigger > div > div:first-child { +.enhancer--sidebarMenuTrigger > div > :first-child { flex-shrink: 0; flex-grow: 0; border-radius: 3px; - color: var(--theme--text_sidebar); width: 22px; height: 22px; display: flex; @@ -38,10 +38,33 @@ justify-content: center; margin-right: 8px; } -.enhancer--sidebarMenuTrigger > div > div:last-child { +.enhancer--sidebarMenuTrigger > div > :nth-child(2) { flex: 1 1 auto; white-space: nowrap; - min-width: 0px; overflow: hidden; text-overflow: ellipsis; } +.enhancer--notifications { + color: var(--theme--text); +} +.enhancer--notifications > div > :last-child { + display: flex; +} +.enhancer--notifications > div > :last-child > div { + margin-left: auto; + margin-bottom: 2px; + display: inline-flex; + align-items: center; + justify-content: center; + width: 16px; + height: 16px; + font-size: 10px; + font-weight: 600; + border-radius: 3px; + color: var(--theme--tag_new-text); + background: var(--theme--tag_new); +} +.enhancer--notifications > div > :last-child > div > span { + margin-bottom: 1px; + margin-left: -0.5px; +} diff --git a/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/client.js b/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/client.js index 6afed32..b48889e 100644 --- a/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/client.js +++ b/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/client.js @@ -12,18 +12,37 @@ import { env, storage, web, fs } from '../../helpers.js'; const sidebarSelector = '#notion-app > div > div.notion-cursor-listener > div.notion-sidebar-container > div > div > div > div:nth-child(4)'; web.whenReady([sidebarSelector], async () => { - const enhancerIcon = await fs.getText('icons/colour.svg'), - enhancerSidebarElement = web.createElement( - `
${enhancerIcon}
notion-enhancer
` + const $enhancerSidebarElement = web.createElement( + web.html`
+
+
${await fs.getText('icons/colour.svg')}
+
notion-enhancer
+
+
` + ), + notifications = { + list: await fs.getJSON('https://notion-enhancer.github.io/notifications.json'), + dismissed: await storage.get(_id, 'notifications', []), + }; + notifications.waiting = notifications.list.filter( + ({ id }) => !notifications.dismissed.includes(id) + ); + if (notifications.waiting.length) { + $enhancerSidebarElement.classList.add('enhancer--notifications'); + $enhancerSidebarElement.children[0].append( + web.createElement( + web.html`
${notifications.waiting.length}
` + ) ); + } const setTheme = () => storage.set(_id, 'theme', document.querySelector('.notion-dark-theme') ? 'dark' : 'light'); - enhancerSidebarElement.addEventListener('click', () => { + $enhancerSidebarElement.addEventListener('click', () => { setTheme().then(env.openEnhancerMenu); }); window.addEventListener('focus', setTheme); window.addEventListener('blur', setTheme); setTheme(); - document.querySelector(sidebarSelector).appendChild(enhancerSidebarElement); + document.querySelector(sidebarSelector).appendChild($enhancerSidebarElement); }); web.hotkeyListener(['Ctrl', 'Alt', 'E'], env.openEnhancerMenu); diff --git a/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.css b/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.css index d460fe4..5ab71ce 100644 --- a/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.css +++ b/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.css @@ -54,10 +54,10 @@ header h1 svg { padding-top: 0.3em; margin-right: 0.2em; } -header h1 svg[data-fa='info'] { +header h1 svg[data-icon='info'] { margin-right: 0em; } -header h1 svg[data-fa='code'] { +header h1 svg[data-icon='code'] { margin-right: 0.3em; } @@ -372,16 +372,16 @@ label > span:not([class]) { overflow-x: auto; } -.alert--list { +.notification--list { position: absolute; bottom: 1.5rem; right: 1.5rem; } -[role='alert'] { +.notification { + background: var(--theme--block_grey); + color: var(--theme--block_grey-text); max-width: calc(100vw - 3rem); width: 25rem; - background: var(--theme--block_blue); - color: var(--theme--block_blue-text); font-size: var(--theme--font_ui-size); border-top: 4px currentColor solid; border-bottom-left-radius: 3px; @@ -391,21 +391,26 @@ label > span:not([class]) { display: flex; margin-top: 1rem; position: relative; + transition: opacity 200ms ease-in-out, transform 115ms ease-out 200ms, + margin-top 115ms ease-out 200ms; + transform: scaleY(1); + transform-origin: 100% 100%; + opacity: 0; } -[role='alert'] svg { +.notification svg { height: 1.5rem; width: 1.5rem; margin-top: 0.25rem; margin-right: 1rem; } -[role='alert'] h3 { +.notification h3 { margin: 0 0 0.25rem 0; font-weight: bold; } -[role='alert'] p { +.notification p { margin: 0.25rem 0 0.5rem 0; } -[role='alert'] .alert--dismiss { +.notification .notification--dismiss { position: absolute; top: 0.5rem; right: 0.75rem; @@ -418,10 +423,20 @@ label > span:not([class]) { transition: opacity 200ms ease-in-out; opacity: 0; } -[role='alert']:hover .alert--dismiss, -[role='alert']:focus-within .alert--dismiss { +.notification:hover .notification--dismiss, +.notification:focus-within .notification--dismiss { opacity: 1; } +.notification.celebration, +.notification.information { + background: var(--theme--block_blue); + color: var(--theme--block_blue-text); +} +.notification.warning, +.notification.danger { + background: var(--theme--block_red); + color: var(--theme--block_red-text); +} ::-webkit-scrollbar { background: transparent; diff --git a/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.html b/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.html index 14f00a8..43d89a0 100644 --- a/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.html +++ b/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.html @@ -15,51 +15,18 @@ >

- website + website

- source code

-

support

+

support

- + diff --git a/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.js b/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.js index 8d68a25..17ec19a 100644 --- a/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.js +++ b/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.js @@ -15,15 +15,9 @@ for (let mod of await registry.get()) { } } - document.querySelector('img[data-target="notion"]').addEventListener('click', env.focusNotion); web.hotkeyListener(['Ctrl', 'Alt', 'E'], env.focusNotion); -document.querySelectorAll('[data-fa]').forEach(icon => fs.getText(`icons/fontawesome/${icon.dataset.fa}.svg`).then(svg => { - svg = web.createElement(svg); - svg.dataset.fa = icon.dataset.fa; icon.replaceWith(svg); -})) - const components = {}; components.card = { preview: ({ preview = '' }) => @@ -74,7 +68,7 @@ components.card = { web.createElement( web.html`

- ${await fs.getText('icons/fontawesome/long-arrow-alt-right.svg')} + settings & documentation

` @@ -108,7 +102,7 @@ components.options = { >

${label}

- ${await fs.getText('icons/fontawesome/caret-down.svg')} +