tweak welcome text and add modal to notif badge count

This commit is contained in:
dragonwocky 2021-10-31 20:46:07 +11:00
parent 1ac78b64e8
commit bdba993cf8
3 changed files with 19 additions and 19 deletions

View File

@ -44,6 +44,7 @@ export default async function ({ env, fs, storage, registry, web }, db) {
notifications.count++; notifications.count++;
} }
} }
if ((await storage.get(['last_read_changelog'])) !== env.version) notifications.count++;
if (notifications.count) { if (notifications.count) {
web.render( web.render(
$sidebarLink.children[0], $sidebarLink.children[0],

View File

@ -7,7 +7,7 @@
'use strict'; 'use strict';
import * as api from '../../api/_.mjs'; import * as api from '../../api/_.mjs';
import { notifications, $welcomeModal } from './notifications.mjs'; import { notifications, $changelogModal } from './notifications.mjs';
const { env, fs, storage, registry, web, components } = api; const { env, fs, storage, registry, web, components } = api;
for (const mod of await registry.list((mod) => registry.enabled(mod.id))) { for (const mod of await registry.list((mod) => registry.enabled(mod.id))) {
@ -348,8 +348,8 @@ const $coreNavItem = web.html`<a href="?view=core" class="nav-item">core</a>`,
${await components.feather('clock', { class: 'nav-changelog-icon' })} ${await components.feather('clock', { class: 'nav-changelog-icon' })}
</button>`; </button>`;
$changelogNavItem.addEventListener('click', () => { $changelogNavItem.addEventListener('click', () => {
$welcomeModal.scrollTop = 0; $changelogModal.scrollTop = 0;
$welcomeModal.classList.add('modal-visible'); $changelogModal.classList.add('modal-visible');
}); });
web.render( web.render(

View File

@ -67,10 +67,11 @@ for (const notification of notifications.provider) {
if (!cached && versionMatches && envMatches) notifications.add(notification); if (!cached && versionMatches && envMatches) notifications.add(notification);
} }
const $welcomeModalButton = web.html`<button type="button" class="modal-button"> const lastReadChangelog = await storage.get(['last_read_changelog']),
$changelogModalButton = web.html`<button type="button" class="modal-button">
Accept & Continue Accept & Continue
</button>`; </button>`;
export const $welcomeModal = web.render( export const $changelogModal = web.render(
web.html`<div class="modal" role="dialog" aria-modal="true"> web.html`<div class="modal" role="dialog" aria-modal="true">
<div class="modal-overlay" aria-hidden="true"></div> <div class="modal-overlay" aria-hidden="true"></div>
</div>`, </div>`,
@ -94,16 +95,16 @@ export const $welcomeModal = web.render(
<div class="modal-content"> <div class="modal-content">
<h3 class="modal-content-heading">welcome</h3> <h3 class="modal-content-heading">welcome</h3>
<p> <p>
hi! i'm dragonwocky, the creator of the notion-enhancer. if you're seeing this, hi! i'm dragonwocky, the creator of the notion-enhancer.
you've either installed the enhancer for the first time or just updated to a if you're seeing this, you've just installed or updated to a new
new version. you should check out the version of the enhancer. you should check out the
<a href="https://notion-enhancer.github.io/getting-started" class="link" target="_blank">getting started</a> <a href="https://notion-enhancer.github.io/getting-started" class="link" target="_blank">getting started</a>
guide for a quick overview of how to use the enhancer. for extra support guide for a quick overview of how to use it. for extra support
or to chat with others who use the enhancer, you can join our or to chat with others who use the enhancer, you can join our
<a href="https://discord.com/invite/sFWPXtA" class="link" target="_blank">discord server</a>. <a href="https://discord.com/invite/sFWPXtA" class="link" target="_blank">discord server</a>.
</p> </p>
<p class="mt-1"> <p class="mt-1">
maintaining and updating the enhancer takes a lot of time and work. p.s. maintaining and updating the enhancer takes a lot of time and work.
if you would like to support future development of the enhancer, please consider if you would like to support future development of the enhancer, please consider
<a href="https://buy.stripe.com/00gdR93R6csIgDKeUV" class="link" target="_blank">making a donation</a>. <a href="https://buy.stripe.com/00gdR93R6csIgDKeUV" class="link" target="_blank">making a donation</a>.
</p> </p>
@ -135,16 +136,14 @@ export const $welcomeModal = web.render(
</div> </div>
</div> </div>
</div>`, </div>`,
web.render(web.html`<div class="modal-actions"></div>`, $welcomeModalButton) web.render(web.html`<div class="modal-actions"></div>`, $changelogModalButton)
) )
); );
web.render(document.body, $welcomeModal); web.render(document.body, $changelogModal);
if (lastReadChangelog !== env.version) {
const lastAcceptedWelcome = await storage.get(['last_accepted_welcome']); $changelogModal.classList.add('modal-visible');
if (lastAcceptedWelcome !== env.version) {
$welcomeModal.classList.add('modal-visible');
} }
$welcomeModalButton.addEventListener('click', async () => { $changelogModalButton.addEventListener('click', async () => {
$welcomeModal.classList.remove('modal-visible'); $changelogModal.classList.remove('modal-visible');
await storage.set(['last_accepted_welcome'], env.version); await storage.set(['last_read_changelog'], env.version);
}); });