mirror of
https://github.com/notion-enhancer/notion-enhancer.git
synced 2025-04-06 21:49:03 +00:00
mockup alerts, add header icons, copy plaintext code button
This commit is contained in:
parent
0bc27b9a57
commit
042ddfed13
@ -124,6 +124,7 @@ import './dep/prism.js';
|
||||
fmt.Prism = Prism;
|
||||
fmt.Prism.manual = true;
|
||||
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')));
|
||||
@ -138,15 +139,15 @@ import './dep/markdown-it.min.js';
|
||||
fmt.md = new markdownit({
|
||||
linkify: true,
|
||||
highlight: (str, lang) =>
|
||||
web.html`<pre${
|
||||
lang ? ` class="language-${lang} match-braces"` : ''
|
||||
}><code>${web.escapeHtml(str)}</code></pre>`,
|
||||
web.html`<pre class="language-${lang || 'plaintext'} match-braces"><code>${web.escapeHtml(
|
||||
str
|
||||
)}</code></pre>`,
|
||||
});
|
||||
fmt.md.renderer.rules.code_block = (tokens, idx, options, env, slf) => {
|
||||
const attrIdx = tokens[idx].attrIndex('class');
|
||||
if (attrIdx === -1) {
|
||||
tokens[idx].attrPush(['class', 'match-braces']);
|
||||
} else tokens[idx].attrs[attrIdx][1] = 'match-braces';
|
||||
tokens[idx].attrPush(['class', 'match-braces language-plaintext']);
|
||||
} else tokens[idx].attrs[attrIdx][1] = 'match-braces language-plaintext';
|
||||
return web.html`<pre${slf.renderAttrs(tokens[idx])}><code>${web.escapeHtml(
|
||||
tokens[idx].content
|
||||
)}</code></pre>\n`;
|
||||
|
||||
2
extension/icons/fontawesome/discord.svg
Normal file
2
extension/icons/fontawesome/discord.svg
Normal file
@ -0,0 +1,2 @@
|
||||
<!-- https://fontawesome.com/icons/discord?style=solid -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M297.216 243.2c0 15.616-11.52 28.416-26.112 28.416-14.336 0-26.112-12.8-26.112-28.416s11.52-28.416 26.112-28.416c14.592 0 26.112 12.8 26.112 28.416zm-119.552-28.416c-14.592 0-26.112 12.8-26.112 28.416s11.776 28.416 26.112 28.416c14.592 0 26.112-12.8 26.112-28.416.256-15.616-11.52-28.416-26.112-28.416zM448 52.736V512c-64.494-56.994-43.868-38.128-118.784-107.776l13.568 47.36H52.48C23.552 451.584 0 428.032 0 398.848V52.736C0 23.552 23.552 0 52.48 0h343.04C424.448 0 448 23.552 448 52.736zm-72.96 242.688c0-82.432-36.864-149.248-36.864-149.248-36.864-27.648-71.936-26.88-71.936-26.88l-3.584 4.096c43.52 13.312 63.744 32.512 63.744 32.512-60.811-33.329-132.244-33.335-191.232-7.424-9.472 4.352-15.104 7.424-15.104 7.424s21.248-20.224 67.328-33.536l-2.56-3.072s-35.072-.768-71.936 26.88c0 0-36.864 66.816-36.864 149.248 0 0 21.504 37.12 78.08 38.912 0 0 9.472-11.52 17.152-21.248-32.512-9.728-44.8-30.208-44.8-30.208 3.766 2.636 9.976 6.053 10.496 6.4 43.21 24.198 104.588 32.126 159.744 8.96 8.96-3.328 18.944-8.192 29.44-15.104 0 0-12.8 20.992-46.336 30.464 7.68 9.728 16.896 20.736 16.896 20.736 56.576-1.792 78.336-38.912 78.336-38.912z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
2
extension/icons/fontawesome/info.svg
Normal file
2
extension/icons/fontawesome/info.svg
Normal file
@ -0,0 +1,2 @@
|
||||
<!-- https://fontawesome.com/icons/info?style=solid -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512"><path fill="currentColor" d="M20 424.229h20V279.771H20c-11.046 0-20-8.954-20-20V212c0-11.046 8.954-20 20-20h112c11.046 0 20 8.954 20 20v212.229h20c11.046 0 20 8.954 20 20V492c0 11.046-8.954 20-20 20H20c-11.046 0-20-8.954-20-20v-47.771c0-11.046 8.954-20 20-20zM96 0C56.235 0 24 32.235 24 72s32.235 72 72 72 72-32.235 72-72S135.764 0 96 0z"></path></svg>
|
||||
|
After Width: | Height: | Size: 470 B |
@ -89,7 +89,7 @@
|
||||
/*
|
||||
* https://prismjs.com/plugins/inline-color/
|
||||
*/
|
||||
span.inline-color-wrapper {
|
||||
.inline-color-wrapper {
|
||||
/*
|
||||
* base64 svg (https://stackoverflow.com/a/21626701/7595472 - prevents visual glitches)
|
||||
* <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2">
|
||||
@ -108,7 +108,7 @@ span.inline-color-wrapper {
|
||||
border: 0.5px solid var(--theme--code_plain);
|
||||
overflow: hidden;
|
||||
}
|
||||
span.inline-color {
|
||||
.inline-color {
|
||||
display: block;
|
||||
height: 120%;
|
||||
width: 120%;
|
||||
|
||||
@ -20,7 +20,8 @@ html[class] {
|
||||
}
|
||||
|
||||
body {
|
||||
padding: 1.5rem;
|
||||
padding: 2rem 2.5rem;
|
||||
margin: 0;
|
||||
background: var(--theme--sidebar);
|
||||
color: var(--theme--text);
|
||||
font-family: var(--theme--font_sans);
|
||||
@ -38,13 +39,27 @@ header > * {
|
||||
margin: 0 1.25rem 0 0;
|
||||
font-size: var(--theme--font_heading1-size);
|
||||
}
|
||||
header img {
|
||||
height: 100%;
|
||||
width: 24px;
|
||||
}
|
||||
header h1 a:not([data-active]) {
|
||||
text-decoration: none;
|
||||
}
|
||||
header h1 img {
|
||||
width: 0.95em;
|
||||
height: 0.95em;
|
||||
margin-right: 0.5em;
|
||||
margin-bottom: -0.1em;
|
||||
}
|
||||
header h1 svg {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
padding-top: 0.3em;
|
||||
margin-right: 0.2em;
|
||||
}
|
||||
header h1 svg[data-fa='info'] {
|
||||
margin-right: 0em;
|
||||
}
|
||||
header h1 svg[data-fa='code'] {
|
||||
margin-right: 0.3em;
|
||||
}
|
||||
|
||||
img[data-target='notion'] {
|
||||
cursor: pointer;
|
||||
@ -218,7 +233,9 @@ img[data-target='notion'] {
|
||||
.library--number_label *,
|
||||
.library--file_label * {
|
||||
appearance: none;
|
||||
font-family: var(--theme--font_sans);
|
||||
font-size: var(--theme--font_ui-size);
|
||||
color: var(--theme--text);
|
||||
}
|
||||
label p:not([class]),
|
||||
label p > span:not([class]),
|
||||
@ -355,6 +372,57 @@ label > span:not([class]) {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.alert--list {
|
||||
position: absolute;
|
||||
bottom: 1.5rem;
|
||||
right: 1.5rem;
|
||||
}
|
||||
[role='alert'] {
|
||||
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;
|
||||
border-bottom-right-radius: 3px;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
|
||||
padding: 1.25em 1.5em;
|
||||
display: flex;
|
||||
margin-top: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
[role='alert'] svg {
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
margin-top: 0.25rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
[role='alert'] h3 {
|
||||
margin: 0 0 0.25rem 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
[role='alert'] p {
|
||||
margin: 0.25rem 0 0.5rem 0;
|
||||
}
|
||||
[role='alert'] .alert--dismiss {
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
right: 0.75rem;
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0.25rem 0.35rem;
|
||||
font-size: var(--theme--font_body-size);
|
||||
color: currentColor;
|
||||
cursor: pointer;
|
||||
transition: opacity 200ms ease-in-out;
|
||||
opacity: 0;
|
||||
}
|
||||
[role='alert']:hover .alert--dismiss,
|
||||
[role='alert']:focus-within .alert--dismiss {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
background: transparent;
|
||||
width: 10px;
|
||||
|
||||
@ -7,15 +7,59 @@
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<p><img data-target="notion" alt="" width="24" src="../../icons/colour.svg" /></p>
|
||||
<h1><a href="?view=library" data-target="library">library</a></h1>
|
||||
<h1><a href="?view=alerts" data-target="alerts">alerts</a></h1>
|
||||
<h1><a href="https://github.com/notion-enhancer/extension">github</a></h1>
|
||||
<h1><a href="https://discord.gg/sFWPXtA">discord</a></h1>
|
||||
<h1>
|
||||
<img data-target="notion" alt="" width="24" src="../../icons/colour.svg" /><a
|
||||
href="?view=library"
|
||||
data-target="library"
|
||||
>library</a
|
||||
>
|
||||
</h1>
|
||||
<h1>
|
||||
<span data-fa="info"></span><a href="https://notion-enhancer.github.io/">website</a>
|
||||
</h1>
|
||||
<h1>
|
||||
<span data-fa="code"></span
|
||||
><a href="https://github.com/notion-enhancer/extension">source code</a>
|
||||
</h1>
|
||||
<h1><span data-fa="discord"></span><a href="https://discord.gg/sFWPXtA">support</a></h1>
|
||||
</header>
|
||||
<main>
|
||||
<section data-container></section>
|
||||
</main>
|
||||
<footer class="alert--list">
|
||||
<div role="alert">
|
||||
<div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3>v0.11.0 released</h3>
|
||||
<p>
|
||||
<a href="chrome://extensions">read the changelog</a> and
|
||||
<a href="">update the extension</a>
|
||||
</p>
|
||||
</div>
|
||||
<button class="alert--dismiss">×</button>
|
||||
</div>
|
||||
<div role="alert">
|
||||
<div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3>alert</h3>
|
||||
<p>description</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<script src="./menu.js" type="module"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -15,9 +15,15 @@ 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 = '' }) =>
|
||||
@ -254,9 +260,6 @@ const views = {
|
||||
.map((query) => query.split('='))
|
||||
);
|
||||
switch (search.get('view')) {
|
||||
case 'alerts':
|
||||
await this.alerts();
|
||||
break;
|
||||
case 'mod':
|
||||
const mod = (await registry.get()).find((mod) => mod.id === search.get('id'));
|
||||
if (mod) {
|
||||
@ -289,12 +292,6 @@ const views = {
|
||||
.querySelectorAll('a[href^="#"]')
|
||||
.forEach((a) => a.addEventListener('click', this._navigator));
|
||||
},
|
||||
async alerts() {
|
||||
this.$container.dataset.container = 'alerts';
|
||||
document.querySelector('header [data-target="alerts"]').dataset.active = true;
|
||||
for (let mod of await registry.get())
|
||||
this.$container.append(await components.card._generate(mod));
|
||||
},
|
||||
async mod(mod) {
|
||||
this.$container.dataset.container = 'mod';
|
||||
document.querySelector('header [data-target="library"]').dataset.active = true;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user