mirror of
https://github.com/notion-enhancer/notion-enhancer.git
synced 2025-04-07 05:59:02 +00:00
component: corner action
This commit is contained in:
parent
cc1418ee5d
commit
a03168d980
@ -1,5 +1,5 @@
|
||||
/*
|
||||
* notion-enhancer: api
|
||||
* notion-enhancer core: api
|
||||
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (https://notion-enhancer.github.io/) under the MIT license
|
||||
*/
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
/*
|
||||
* notion-enhancer: api
|
||||
* notion-enhancer core: api
|
||||
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (https://notion-enhancer.github.io/) under the MIT license
|
||||
*/
|
||||
@ -16,7 +16,7 @@
|
||||
* @param {HTMLElement} $ref - the element that will trigger the tooltip when hovered
|
||||
* @param {string} text - the markdown content of the tooltip
|
||||
*/
|
||||
export { tooltip } from './tooltip.mjs';
|
||||
export { setTooltip } from './tooltip.mjs';
|
||||
|
||||
/**
|
||||
* generate an icon from the feather icons set
|
||||
@ -35,3 +35,11 @@ export { feather } from './feather.mjs';
|
||||
* @param {Element} panel.$content - an element containing the content of the view
|
||||
*/
|
||||
export { addPanelView } from './panel.mjs';
|
||||
|
||||
/**
|
||||
* adds a button to notion's bottom right corner
|
||||
* @param {string} icon - an svg string
|
||||
* @param {function} listener - the function to call when the button is clicked
|
||||
* @returns {Element} the appended corner action element
|
||||
*/
|
||||
export { addCornerAction } from './corner-action.mjs';
|
||||
|
||||
53
api/components/corner-action.css
Normal file
53
api/components/corner-action.css
Normal file
@ -0,0 +1,53 @@
|
||||
/*
|
||||
* notion-enhancer core: api
|
||||
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (c) 2021 CloudHill <rl.cloudhill@gmail.com> (https://github.com/CloudHill)
|
||||
* (https://notion-enhancer.github.io/) under the MIT license
|
||||
*/
|
||||
|
||||
#enhancer--corner-actions {
|
||||
position: absolute;
|
||||
bottom: 26px;
|
||||
right: 26px;
|
||||
z-index: 101;
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
#enhancer--corner-actions > div {
|
||||
position: static !important;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
margin-left: 12px;
|
||||
pointer-events: auto;
|
||||
border-radius: 100%;
|
||||
font-size: 20px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--theme--bg_card);
|
||||
box-shadow: var(--theme--ui_shadow, rgba(15, 15, 15, 0.15)) 0px 0px 0px 1px,
|
||||
var(--theme--ui_shadow, rgba(15, 15, 15, 0.15)) 0px 2px 4px !important;
|
||||
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
#enhancer--corner-actions > div:hover {
|
||||
background: var(--theme--ui_interactive-hover);
|
||||
}
|
||||
#enhancer--corner-actions > div:active {
|
||||
background: var(--theme--ui_interactive-active);
|
||||
}
|
||||
#enhancer--corner-actions > div.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#enhancer--corner-actions > div > svg {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
color: var(--theme--icon);
|
||||
fill: var(--theme--icon);
|
||||
}
|
||||
43
api/components/corner-action.mjs
Normal file
43
api/components/corner-action.mjs
Normal file
@ -0,0 +1,43 @@
|
||||
/*
|
||||
* notion-enhancer core: api
|
||||
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (c) 2021 CloudHill <rl.cloudhill@gmail.com> (https://github.com/CloudHill)
|
||||
* (https://notion-enhancer.github.io/) under the MIT license
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* shared notion-style elements
|
||||
* @module notion-enhancer/api/components/corner-action
|
||||
*/
|
||||
|
||||
import { web } from '../_.mjs';
|
||||
|
||||
web.loadStylesheet('api/components/corner-action.css');
|
||||
|
||||
const $cornerButtonsContainer = web.html`<div id="enhancer--corner-actions"></div>`;
|
||||
|
||||
/**
|
||||
* adds a button to notion's bottom right corner
|
||||
* @param {string} icon - an svg string
|
||||
* @param {function} listener - the function to call when the button is clicked
|
||||
* @returns {Element} the appended corner action element
|
||||
*/
|
||||
export const addCornerAction = async (icon, listener) => {
|
||||
await web.whenReady(['.notion-help-button']);
|
||||
const $helpButton = document.querySelector('.notion-help-button'),
|
||||
$onboardingButton = document.querySelector('.onboarding-checklist-button');
|
||||
if ($onboardingButton) $cornerButtonsContainer.prepend($onboardingButton);
|
||||
$cornerButtonsContainer.prepend($helpButton);
|
||||
document
|
||||
.querySelector('.notion-app-inner > .notion-cursor-listener')
|
||||
.append($cornerButtonsContainer);
|
||||
|
||||
const $actionButton = web.html`<div class="enhancer--corner-action-button">${icon}</div>`;
|
||||
$actionButton.addEventListener('click', listener);
|
||||
|
||||
$cornerButtonsContainer.append($actionButton);
|
||||
|
||||
return $actionButton;
|
||||
};
|
||||
@ -1,5 +1,5 @@
|
||||
/*
|
||||
* notion-enhancer: api
|
||||
* notion-enhancer core: api
|
||||
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (https://notion-enhancer.github.io/) under the MIT license
|
||||
*/
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
/*
|
||||
* notion-enhancer core: components
|
||||
* notion-enhancer core: api
|
||||
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (c) 2021 CloudHill <rl.cloudhill@gmail.com> (https://github.com/CloudHill)
|
||||
* (https://notion-enhancer.github.io/) under the MIT license
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
/*
|
||||
* notion-enhancer: api
|
||||
* notion-enhancer core: api
|
||||
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (c) 2021 CloudHill <rl.cloudhill@gmail.com> (https://github.com/CloudHill)
|
||||
* (https://notion-enhancer.github.io/) under the MIT license
|
||||
*/
|
||||
|
||||
@ -14,6 +15,8 @@
|
||||
import { web, components, registry } from '../_.mjs';
|
||||
const db = await registry.db('36a2ffc9-27ff-480e-84a7-c7700a7d232d');
|
||||
|
||||
web.loadStylesheet('api/components/panel.css');
|
||||
|
||||
const _views = [],
|
||||
svgExpand = web.raw`<svg viewBox="-1 -1 9 11">
|
||||
<path d="M 3.5 0L 3.98809 -0.569442L 3.5 -0.987808L 3.01191 -0.569442L 3.5 0ZM 3.5 9L 3.01191
|
||||
@ -218,8 +221,6 @@ async function createViews() {
|
||||
$switcherOverlayContainer.addEventListener('click', closeSwitcher);
|
||||
}
|
||||
|
||||
web.loadStylesheet('api/components/panel.css');
|
||||
|
||||
/**
|
||||
* adds a view to the enhancer's side panel
|
||||
* @param {object} panel - information used to construct and render the panel
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
/*
|
||||
* notion-enhancer core: components
|
||||
* notion-enhancer core: api
|
||||
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (https://notion-enhancer.github.io/) under the MIT license
|
||||
*/
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
/*
|
||||
* notion-enhancer: api
|
||||
* notion-enhancer core: api
|
||||
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (https://notion-enhancer.github.io/) under the MIT license
|
||||
*/
|
||||
@ -21,7 +21,7 @@ web.loadStylesheet('api/components/tooltip.css');
|
||||
* @param {HTMLElement} $ref - the element that will trigger the tooltip when hovered
|
||||
* @param {string} text - the markdown content of the tooltip
|
||||
*/
|
||||
export const tooltip = ($ref, text) => {
|
||||
export const setTooltip = ($ref, text) => {
|
||||
web.render(document.body, _$tooltip);
|
||||
text = web.html`${fmt.md.render(text)}`;
|
||||
$ref.addEventListener('mouseover', (event) => {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
/*
|
||||
* notion-enhancer: api
|
||||
* notion-enhancer core: api
|
||||
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (https://notion-enhancer.github.io/) under the MIT license
|
||||
*/
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
/*
|
||||
* notion-enhancer: api
|
||||
* notion-enhancer core: api
|
||||
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (https://notion-enhancer.github.io/) under the MIT license
|
||||
*/
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
/*
|
||||
* notion-enhancer: api
|
||||
* notion-enhancer core: api
|
||||
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (https://notion-enhancer.github.io/) under the MIT license
|
||||
*/
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
/*
|
||||
* notion-enhancer: api
|
||||
* notion-enhancer core: api
|
||||
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (https://notion-enhancer.github.io/) under the MIT license
|
||||
*/
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
/*
|
||||
* notion-enhancer: api
|
||||
* notion-enhancer core: api
|
||||
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (https://notion-enhancer.github.io/) under the MIT license
|
||||
*/
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
/*
|
||||
* notion-enhancer: api
|
||||
* notion-enhancer core: api
|
||||
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (https://notion-enhancer.github.io/) under the MIT license
|
||||
*/
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
/*
|
||||
* notion-enhancer: api
|
||||
* notion-enhancer core: api
|
||||
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (https://notion-enhancer.github.io/) under the MIT license
|
||||
*/
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
/*
|
||||
* notion-enhancer: api
|
||||
* notion-enhancer core: api
|
||||
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (https://notion-enhancer.github.io/) under the MIT license
|
||||
*/
|
||||
|
||||
Loading…
Reference in New Issue
Block a user