dragonwocky/notion-enhancer
1
0
Fork 0
mirror of https://github.com/notion-enhancer/notion-enhancer.git synced 2025-04-07 05:59:02 +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;
user-select: none;
padding: 0.75rem 0 0.75rem 1rem;
--scoped--bg: var(--theme--bg_secondary);
background: var(--scoped--bg);
background: var(--theme--bg_secondary);
}
#enhancer--panel-header-title {
max-width: calc(100% - 4.25rem);
@ -119,11 +118,6 @@
max-width: calc(100% - 1.75em);
position: relative;
}
.enhancer--panel-view-title-fade-edge {
display: inline-block;
width: 0.75rem;
height: 1em;
}
#enhancer--panel-switcher-overlay-container {
position: fixed;
@ -155,33 +149,18 @@
cursor: pointer;
overflow: hidden;
position: relative;
--scoped--bg: var(--theme--bg_card);
background: var(--scoped--bg);
background: var(--theme--bg_card);
}
#enhancer--panel-header:hover,
#enhancer--panel-header:focus-within,
.enhancer--panel-switcher-item:hover,
.enhancer--panel-switcher-item:focus {
--scoped--bg: var(--theme--ui_interactive-hover);
background: var(--theme--ui_interactive-hover);
}
#enhancer--panel-header:active,
.enhancer--panel-switcher-item: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 {
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';
$hoverTrigger.style.width = panelWidth + 'px';
$notionFrame.style.paddingRight = panelWidth + 'px';
$notionRightSidebar.style.right = panelWidth + 'px';
if ($notionRightSidebar) $notionRightSidebar.style.right = panelWidth + 'px';
},
resizeEnd = (event) => {
$panel.style.width = '';
$hoverTrigger.style.width = '';
$notionFrame.style.paddingRight = '';
$notionRightSidebar.style.right = '';
if ($notionRightSidebar) $notionRightSidebar.style.right = '';
updateWidth();
$resizeHandle.style.cursor = '';
document.body.removeEventListener('mousemove', resizeDrag);
@ -264,11 +264,7 @@ export const addPanelView = async ({
web.html`<span class="enhancer--panel-view-title-icon"></span>`,
icon instanceof Element ? icon : web.html`${icon}`
),
$title: web.render(
web.html`<span class="enhancer--panel-view-title-text"></span>`,
title,
web.html`<span class="enhancer--panel-view-title-fade-edge"></span>`
),
$title: web.render(web.html`<span class="enhancer--panel-view-title-text"></span>`, title),
$content,
onFocus,
onBlur,

3
api/web.mjs
View File

@ -195,9 +195,10 @@ document.addEventListener('keyup', (event) => {
/**
* 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.
* available modifiers are 'alt', 'ctrl', 'meta', and 'shift'.
* can be provided as a + separated string.
* @param {function} callback - called whenever the keys are pressed
*/
export const addHotkeyListener = (keys, callback) => {