diff --git a/repo/focus-mode/mod.json b/repo/focus-mode/mod.json index 91e6b79..0ffb3c8 100644 --- a/repo/focus-mode/mod.json +++ b/repo/focus-mode/mod.json @@ -13,9 +13,11 @@ } ], "css": { + "frame": ["tabs.css"], "client": ["client.css"] }, "js": { + "frame": ["tabs.mjs"], "client": ["client.mjs"] }, "options": [ @@ -25,6 +27,13 @@ "label": "even padding", "tooltip": "matches the empty space at the top and sides of the frame with **extra padding at the bottom when the sidebar is hidden**", "value": true + }, + { + "type": "toggle", + "key": "tabs", + "label": "hide tabs", + "tooltip": "makes the tab bar transparent unless hovered over", + "value": false } ] } diff --git a/repo/focus-mode/tabs.css b/repo/focus-mode/tabs.css new file mode 100644 index 0000000..8b0414f --- /dev/null +++ b/repo/focus-mode/tabs.css @@ -0,0 +1,14 @@ +/** + * notion-enhancer: focus mode + * (c) 2021 dragonwocky (https://dragonwocky.me/) + * (https://notion-enhancer.github.io/) under the MIT license + */ + +[data-focus-mode='hide-tabs'] header:not(:hover) { + background: var(--theme--bg); + border-bottom-color: transparent; +} +[data-focus-mode='hide-tabs'] header:not(:hover) > * { + opacity: 0; + transition: opacity 200ms ease-in-out; +} diff --git a/repo/focus-mode/tabs.mjs b/repo/focus-mode/tabs.mjs new file mode 100644 index 0000000..6074834 --- /dev/null +++ b/repo/focus-mode/tabs.mjs @@ -0,0 +1,12 @@ +/** + * notion-enhancer: focus mode + * (c) 2020 Arecsu + * (c) 2021 dragonwocky (https://dragonwocky.me/) + * (https://notion-enhancer.github.io/) under the MIT license + */ + +'use strict'; + +export default async function (api, db) { + if (await db.get(['tabs'])) document.body.dataset.focusMode = 'hide-tabs'; +} diff --git a/repo/integrated-titlebar/rendererIndex.cjs b/repo/integrated-titlebar/frame.mjs similarity index 69% rename from repo/integrated-titlebar/rendererIndex.cjs rename to repo/integrated-titlebar/frame.mjs index c383b9f..f0e7729 100644 --- a/repo/integrated-titlebar/rendererIndex.cjs +++ b/repo/integrated-titlebar/frame.mjs @@ -6,18 +6,21 @@ 'use strict'; -module.exports = async function ({ fs, web, registry }, db, __exports, __eval) { - const tilingMode = await db.get(['tiling']), +import { createWindowButtons } from './buttons.mjs'; + +export default async function (api, db) { + const { web, registry } = api, + tilingMode = await db.get(['tiling']), dragareaHeight = await db.get(['dragarea_height']), tabsEnabled = await registry.enabled('e1692c29-475e-437b-b7ff-3eee872e1a42'); if (tabsEnabled && !tilingMode) { - await web.whenReady(); - const script = document.createElement('script'); - script.type = 'module'; - script.src = fs.localPath('repo/integrated-titlebar/tabs.mjs'); - document.head.appendChild(script); - web.loadStylesheet('repo/integrated-titlebar/buttons.css'); + const windowActionsSelector = '#window-actions'; + await web.whenReady([windowActionsSelector]); + + const $topbarActions = document.querySelector(windowActionsSelector), + $windowButtons = await createWindowButtons(api, db); + web.render($topbarActions, $windowButtons); } else { const dragareaSelector = '[style*="-webkit-app-region: drag;"]'; await web.whenReady([dragareaSelector]); @@ -37,4 +40,4 @@ module.exports = async function ({ fs, web, registry }, db, __exports, __eval) { } }); } -}; +} diff --git a/repo/integrated-titlebar/mod.json b/repo/integrated-titlebar/mod.json index cae80a0..01a970b 100644 --- a/repo/integrated-titlebar/mod.json +++ b/repo/integrated-titlebar/mod.json @@ -14,16 +14,15 @@ } ], "css": { + "frame": ["buttons.css"], "client": ["buttons.css"], "menu": ["buttons.css"] }, "js": { + "frame": ["frame.mjs"], "client": ["client.mjs"], "menu": ["menu.mjs"], - "electron": [ - { "source": "createWindow.cjs", "target": "main/createWindow.js" }, - { "source": "rendererIndex.cjs", "target": "renderer/index.js" } - ] + "electron": [{ "source": "createWindow.cjs", "target": "main/createWindow.js" }] }, "options": [ { diff --git a/repo/integrated-titlebar/tabs.mjs b/repo/integrated-titlebar/tabs.mjs deleted file mode 100644 index e3dacaa..0000000 --- a/repo/integrated-titlebar/tabs.mjs +++ /dev/null @@ -1,21 +0,0 @@ -/** - * notion-enhancer: integrated titlebar - * (c) 2021 dragonwocky (https://dragonwocky.me/) - * (https://notion-enhancer.github.io/) under the MIT license - */ - -'use strict'; - -import * as api from '../../api/index.mjs'; -import { createWindowButtons } from './buttons.mjs'; - -(async () => { - const db = await api.registry.db('a5658d03-21c6-4088-bade-fa4780459133'), - { web } = api, - windowActionsSelector = '#window-actions'; - - await web.whenReady([windowActionsSelector]); - const $topbarActions = document.querySelector(windowActionsSelector), - $windowButtons = await createWindowButtons(api, db); - web.render($topbarActions, $windowButtons); -})(); diff --git a/repo/tabs/rendererIndex.cjs b/repo/tabs/rendererIndex.cjs index 931d84c..3e5bf2f 100644 --- a/repo/tabs/rendererIndex.cjs +++ b/repo/tabs/rendererIndex.cjs @@ -13,6 +13,9 @@ module.exports = async function (api, db, __exports, __eval) { { components, web } = api; window['__start'] = async () => { + // display:none; to prevent content flash while css loads + document.body.style.display = 'none'; + const tabCache = new Map(), Tab = await require('./tab.cjs')(api, db, tabCache); document.body.dataset.tabLabels = await db.get(['label_type']); diff --git a/repo/tabs/tabs.css b/repo/tabs/tabs.css index f887c35..3b81480 100644 --- a/repo/tabs/tabs.css +++ b/repo/tabs/tabs.css @@ -19,7 +19,7 @@ body { } body { - display: flex; + display: flex !important; flex-direction: column; } diff --git a/repo/theming/rendererIndex.cjs b/repo/theming/frame.mjs similarity index 64% rename from repo/theming/rendererIndex.cjs rename to repo/theming/frame.mjs index b940278..a02d873 100644 --- a/repo/theming/rendererIndex.cjs +++ b/repo/theming/frame.mjs @@ -6,7 +6,7 @@ 'use strict'; -module.exports = async function ({ registry, web, storage, electron }, db, __exports, __eval) { +export default async function ({ web, storage, electron }, db) { await web.whenReady(); const updateTheme = async () => { @@ -16,10 +16,4 @@ module.exports = async function ({ registry, web, storage, electron }, db, __exp }; electron.onMessage('update-theme', updateTheme); updateTheme(); - - for (const mod of await registry.list((mod) => registry.enabled(mod.id))) { - for (const sheet of mod.css?.frame || []) { - web.loadStylesheet(`repo/${mod._dir}/${sheet}`); - } - } -}; +} diff --git a/repo/theming/mod.json b/repo/theming/mod.json index 99c3cbc..dca8b51 100644 --- a/repo/theming/mod.json +++ b/repo/theming/mod.json @@ -13,16 +13,16 @@ } ], "css": { - "frame": ["variables.css", "electronSearch.css"], + "frame": ["variables.css"], "client": ["variables.css", "prism.css", "patches.css"], "menu": ["variables.css"] }, "js": { + "frame": ["frame.mjs"], "client": ["client.mjs"], "menu": ["menu.mjs"], "electron": [ { "source": "main.cjs", "target": "main/main.js" }, - { "source": "rendererIndex.cjs", "target": "renderer/index.js" }, { "source": "rendererSearch.cjs", "target": "renderer/search.js" } ] },