dragonwocky/notion-enhancer
1
0
Fork 0
mirror of https://github.com/notion-enhancer/notion-enhancer.git synced 2025-04-18 02:39:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

update panel, hotkey comment

Browse Source
This commit is contained in:
dragonwocky 2021-10-21 23:27:19 +11:00
parent 7da5f65c85
commit e72115fd51
3 changed files with 8 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
api/components/panel.css
View File

@ -106,8 +106,7 @@
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
padding: 0.75rem 0 0.75rem 1rem; padding: 0.75rem 0 0.75rem 1rem;
--scoped--bg: var(--theme--bg_secondary); background: var(--theme--bg_secondary);
background: var(--scoped--bg);
} }
#enhancer--panel-header-title { #enhancer--panel-header-title {
max-width: calc(100% - 4.25rem); max-width: calc(100% - 4.25rem);
@ -119,11 +118,6 @@
max-width: calc(100% - 1.75em); max-width: calc(100% - 1.75em);
position: relative; position: relative;
} }
.enhancer--panel-view-title-fade-edge {
display: inline-block;
width: 0.75rem;
height: 1em;
}
#enhancer--panel-switcher-overlay-container { #enhancer--panel-switcher-overlay-container {
position: fixed; position: fixed;
@ -155,33 +149,18 @@
cursor: pointer; cursor: pointer;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
--scoped--bg: var(--theme--bg_card); background: var(--theme--bg_card);
background: var(--scoped--bg);
} }
#enhancer--panel-header:hover, #enhancer--panel-header:hover,
#enhancer--panel-header:focus-within, #enhancer--panel-header:focus-within,
.enhancer--panel-switcher-item:hover, .enhancer--panel-switcher-item:hover,
.enhancer--panel-switcher-item:focus { .enhancer--panel-switcher-item:focus {
--scoped--bg: var(--theme--ui_interactive-hover); background: var(--theme--ui_interactive-hover);
} }
#enhancer--panel-header:active, #enhancer--panel-header:active,
.enhancer--panel-switcher-item:active { .enhancer--panel-switcher-item:active {
background: var(--theme--ui_interactive-active); background: var(--theme--ui_interactive-active);
} }
.enhancer--panel-view-title-fade-edge:after {
content: '';
height: 100%;
position: absolute;
right: 0;
top: 0;
width: 0.75rem;
background: linear-gradient(
to right,
transparent 0%,
var(--scoped--bg) 50%,
var(--scoped--bg) 100%
);
}
#enhancer--panel-content { #enhancer--panel-content {
margin: 0.75rem 1rem; margin: 0.75rem 1rem;

10
api/components/panel.mjs
View File

@ -73,13 +73,13 @@ const $panel = web.html`<div id="enhancer--panel"></div>`,
$panel.style.width = panelWidth + 'px'; $panel.style.width = panelWidth + 'px';
$hoverTrigger.style.width = panelWidth + 'px'; $hoverTrigger.style.width = panelWidth + 'px';
$notionFrame.style.paddingRight = panelWidth + 'px'; $notionFrame.style.paddingRight = panelWidth + 'px';
$notionRightSidebar.style.right = panelWidth + 'px'; if ($notionRightSidebar) $notionRightSidebar.style.right = panelWidth + 'px';
}, },
resizeEnd = (event) => { resizeEnd = (event) => {
$panel.style.width = ''; $panel.style.width = '';
$hoverTrigger.style.width = ''; $hoverTrigger.style.width = '';
$notionFrame.style.paddingRight = ''; $notionFrame.style.paddingRight = '';
$notionRightSidebar.style.right = ''; if ($notionRightSidebar) $notionRightSidebar.style.right = '';
updateWidth(); updateWidth();
$resizeHandle.style.cursor = ''; $resizeHandle.style.cursor = '';
document.body.removeEventListener('mousemove', resizeDrag); document.body.removeEventListener('mousemove', resizeDrag);
@ -264,11 +264,7 @@ export const addPanelView = async ({
web.html`<span class="enhancer--panel-view-title-icon"></span>`, web.html`<span class="enhancer--panel-view-title-icon"></span>`,
icon instanceof Element ? icon : web.html`${icon}` icon instanceof Element ? icon : web.html`${icon}`
), ),
$title: web.render( $title: web.render(web.html`<span class="enhancer--panel-view-title-text"></span>`, title),
web.html`<span class="enhancer--panel-view-title-text"></span>`,
title,
web.html`<span class="enhancer--panel-view-title-fade-edge"></span>`
),
$content, $content,
onFocus, onFocus,
onBlur, onBlur,

3
api/web.mjs
View File

@ -195,9 +195,10 @@ document.addEventListener('keyup', (event) => {
/** /**
* register a hotkey listener to the page * register a hotkey listener to the page
* @param {array} keys - the combination of keys that will trigger the hotkey. * @param {array|string} keys - the combination of keys that will trigger the hotkey.
* key codes can be tested at http://keycode.info/ and are case-insensitive. * key codes can be tested at http://keycode.info/ and are case-insensitive.
* available modifiers are 'alt', 'ctrl', 'meta', and 'shift'. * available modifiers are 'alt', 'ctrl', 'meta', and 'shift'.
* can be provided as a + separated string.
* @param {function} callback - called whenever the keys are pressed * @param {function} callback - called whenever the keys are pressed
*/ */
export const addHotkeyListener = (keys, callback) => { export const addHotkeyListener = (keys, callback) => {