From daa46b875580506d3c814d3ddd8a87e2314cc1db Mon Sep 17 00:00:00 2001 From: Bauke Date: Wed, 26 Apr 2023 12:42:52 +0200 Subject: [PATCH] Remove the old options page. --- source/options/components/components.ts | 3 - source/options/components/page-footer.ts | 39 ---- source/options/components/page-header.ts | 15 -- source/options/components/page-main.ts | 189 ------------------ source/options/index.scss | 28 --- source/options/index.ts | 35 ---- .../options/scss/components/page-footer.scss | 9 - .../options/scss/components/page-header.scss | 23 --- source/options/scss/components/page-main.scss | 106 ---------- source/options/scss/love.scss | 45 ----- source/options/scss/mixins.scss | 11 - source/options/scss/reset.scss | 12 -- source/options/scss/variables.scss | 4 - 13 files changed, 519 deletions(-) delete mode 100644 source/options/components/components.ts delete mode 100644 source/options/components/page-footer.ts delete mode 100644 source/options/components/page-header.ts delete mode 100644 source/options/components/page-main.ts delete mode 100644 source/options/index.scss delete mode 100644 source/options/index.ts delete mode 100644 source/options/scss/components/page-footer.scss delete mode 100644 source/options/scss/components/page-header.scss delete mode 100644 source/options/scss/components/page-main.scss delete mode 100644 source/options/scss/love.scss delete mode 100644 source/options/scss/mixins.scss delete mode 100644 source/options/scss/reset.scss delete mode 100644 source/options/scss/variables.scss diff --git a/source/options/components/components.ts b/source/options/components/components.ts deleted file mode 100644 index 470f4e3..0000000 --- a/source/options/components/components.ts +++ /dev/null @@ -1,3 +0,0 @@ -export * from './page-footer.js'; -export * from './page-header.js'; -export * from './page-main.js'; diff --git a/source/options/components/page-footer.ts b/source/options/components/page-footer.ts deleted file mode 100644 index 24d754c..0000000 --- a/source/options/components/page-footer.ts +++ /dev/null @@ -1,39 +0,0 @@ -import {PrivacyLink} from '@holllo/preact-components'; -import {html} from 'htm/preact'; -import {Component} from 'preact'; - -import type {Settings} from '../../settings/settings.js'; - -type Props = { - settings: Settings; -}; - -export class PageFooter extends Component { - render() { - const {settings} = this.props; - const version = settings.manifest.version; - - const donateAttributes = { - href: 'https://liberapay.com/Holllo', - }; - const donateLink = html` - <${PrivacyLink} attributes="${donateAttributes}">Donate - `; - - const versionAttributes = { - href: `https://git.bauke.xyz/Holllo/queue/releases/tag/${version}`, - }; - const versionLink = html` - <${PrivacyLink} attributes="${versionAttributes}">v${version} - `; - - return html` -
-

- ${donateLink} 💖 ${versionLink} © Holllo — Free and open-source, - forever. -

-
- `; - } -} diff --git a/source/options/components/page-header.ts b/source/options/components/page-header.ts deleted file mode 100644 index 8149fd8..0000000 --- a/source/options/components/page-header.ts +++ /dev/null @@ -1,15 +0,0 @@ -import {html} from 'htm/preact'; -import {Component} from 'preact'; - -export class PageHeader extends Component { - render() { - return html` -
-

- ⇥ - Queue -

-
- `; - } -} diff --git a/source/options/components/page-main.ts b/source/options/components/page-main.ts deleted file mode 100644 index 970db42..0000000 --- a/source/options/components/page-main.ts +++ /dev/null @@ -1,189 +0,0 @@ -import {ConfirmButton, PrivacyLink} from '@holllo/preact-components'; -import {Component, html} from 'htm/preact'; - -import type {Settings} from '../../settings/settings.js'; -import {updateBadge} from '../../utilities/badge.js'; -import type {History} from '../../utilities/history.js'; - -type Props = { - history: History; - settings: Settings; -}; - -type State = { - queue: Queue.Item[]; -}; - -export class PageMain extends Component { - constructor(props: Props) { - super(props); - - this.state = { - queue: props.settings.queue, - }; - } - - moveItem = async (id: number, direction: Queue.MoveDirection) => { - const {settings} = this.props; - await settings.moveQueueItem(id, direction); - this.setState({queue: this.props.settings.queue}); - }; - - removeItem = async (id: number) => { - const {settings} = this.props; - await settings.removeQueueItem(id); - await updateBadge(settings); - this.setState({queue: this.props.settings.queue}); - }; - - render() { - const isFirefox = import.meta.env.VITE_BROWSER === 'firefox'; - - const queueItems = this.state.queue - .sort((a, b) => a.sortIndex - b.sortIndex) - .map( - (item) => - html` - <${queueItem} - item=${item} - move=${this.moveItem} - remove=${this.removeItem} - /> - `, - ); - - if (queueItems.length === 0) { - queueItems.push(html`
  • No items queued. 🤷
    • `); - } - - const historyItems = this.props.history.queue - .sort((a, b) => b.added.getTime() - a.added.getTime()) - .map((item) => html`<${queueItem} item=${item} />`); - - let history: HtmComponent | undefined; - if (historyItems.length > 0) { - history = html` -
    - Queue history - -
      - ${historyItems} -
    -
    - `; - } - - return html` -
    -
      - ${queueItems} -
    - - ${history} - -
    - How do I use Queue? - -

    Adding links to your queue:

    -
      -
    • - Right-click any link ${isFirefox ? 'or tab' : ''} and click "Add - to Queue". -
      • -
    - -

    Opening the next link from your queue:

    -
      -
    • Click on the extension icon to open it in the current tab.
      • -
    • - Right-click the extension icon and click "Open next link in new - tab". -
      • -
    - -

    Opening the extension page:

    -
      - ${isFirefox - ? html`
    • Double-click the extension icon.
      • ` - : undefined} -
    • - Right-click the extension icon and click "Open the extension - page". -
      • -
    - -

    Deleting queue items:

    -
      -
    • - Click the red button with the ✗ and then confirm it by clicking - again. -
      • -
    -
    -
    - `; - } -} - -type ItemProps = { - item: Queue.Item; - move?: (id: number, direction: Queue.MoveDirection) => Promise; - remove?: (id: number) => Promise; -}; - -function queueItem(props: ItemProps): HtmComponent { - const added = props.item.added.toLocaleString(); - const {id, text, url} = props.item; - - const move = []; - if (props.move !== undefined) { - const moveButtons: Array<[string, Queue.MoveDirection]> = [ - ['↑', 'up'], - ['↓', 'down'], - ]; - move.push( - ...moveButtons.map( - ([text, direction]) => - html` - - `, - ), - ); - } - - let remove; - if (props.remove !== undefined) { - remove = html` - <${ConfirmButton} - class="confirm-button" - click=${async () => props.remove!(id)} - confirmClass="confirm" - confirmText="✓" - extraAttributes=${{title: 'Remove'}} - text="✗" - timeout=${5 * 1000} - /> - `; - } - - return html` -
  • -

    - <${PrivacyLink} attributes=${{href: url}}>${text ?? url} -

    - -
    ${move}${remove}
    - -

    - -

    -
    • - `; -} diff --git a/source/options/index.scss b/source/options/index.scss deleted file mode 100644 index 5953c5f..0000000 --- a/source/options/index.scss +++ /dev/null @@ -1,28 +0,0 @@ -@use '../../node_modules/modern-normalize/modern-normalize.css'; -@use 'scss/reset'; -@use 'scss/mixins'; -@use 'scss/love'; - -// Component styles -@use 'scss/components/page-header'; -@use 'scss/components/page-main'; -@use 'scss/components/page-footer'; - -html { - font-size: 62.5%; -} - -body { - background-color: var(--db-1); - color: var(--df-1); - font-size: 1.5rem; - padding: 16px; -} - -a { - color: var(--da-3); - - &:hover { - color: var(--df-2); - } -} diff --git a/source/options/index.ts b/source/options/index.ts deleted file mode 100644 index 7728650..0000000 --- a/source/options/index.ts +++ /dev/null @@ -1,35 +0,0 @@ -import {html} from 'htm/preact'; -import {Component, render} from 'preact'; - -import {Settings} from '../settings/settings.js'; -import {updateBadge} from '../utilities/badge.js'; -import {History} from '../utilities/history.js'; -import {PageFooter, PageHeader, PageMain} from './components/components.js'; - -window.addEventListener('DOMContentLoaded', async () => { - const history = await History.fromLocalStorage(); - const settings = await Settings.fromSyncStorage(); - await updateBadge(settings); - - render( - html`<${OptionsPage} history=${history} settings=${settings} />`, - document.body, - ); -}); - -type Props = { - history: Queue.Item[]; - settings: Settings; -}; - -class OptionsPage extends Component { - render() { - const {history, settings} = this.props; - - return html` - <${PageHeader} /> - <${PageMain} history=${history} settings=${settings} /> - <${PageFooter} settings=${settings} /> - `; - } -} diff --git a/source/options/scss/components/page-footer.scss b/source/options/scss/components/page-footer.scss deleted file mode 100644 index 0995430..0000000 --- a/source/options/scss/components/page-footer.scss +++ /dev/null @@ -1,9 +0,0 @@ -@use '../mixins'; - -.page-footer { - @include mixins.responsive-container; - - border: 1px solid var(--df-2); - margin-bottom: 16px; - padding: 16px; -} diff --git a/source/options/scss/components/page-header.scss b/source/options/scss/components/page-header.scss deleted file mode 100644 index 3bef67a..0000000 --- a/source/options/scss/components/page-header.scss +++ /dev/null @@ -1,23 +0,0 @@ -@use '../mixins'; - -.page-header { - @include mixins.responsive-container; - - border: 1px solid var(--df-2); - margin-bottom: 16px; - - h1 { - font-size: 2.5rem; - } - - .icon { - align-items: center; - background-color: var(--df-2); - color: var(--db-1); - display: inline-flex; - height: 4.5rem; - justify-content: center; - margin-right: 8px; - width: 4.5rem; - } -} diff --git a/source/options/scss/components/page-main.scss b/source/options/scss/components/page-main.scss deleted file mode 100644 index 2d8c8b3..0000000 --- a/source/options/scss/components/page-main.scss +++ /dev/null @@ -1,106 +0,0 @@ -@use '../mixins'; - -.page-main { - @include mixins.responsive-container; - - margin-bottom: 16px; -} - -.q-list { - border: 1px solid var(--df-2); - list-style: none; - margin-bottom: 16px; - padding: 16px; - - > li:not(:last-child) { - margin-bottom: 16px; - } -} - -.q-item { - background-color: var(--db-2); - display: grid; - grid-template-columns: auto min-content; - padding: 8px; - - .title { - display: inline-block; - font-size: 2rem; - font-weight: bold; - margin-bottom: 8px; - } - - .buttons { - display: grid; - gap: 4px; - grid-template-columns: repeat(3, 1fr); - - button { - align-items: center; - background-color: var(--da-3); - border: none; - color: var(--db-1); - cursor: pointer; - display: flex; - flex-direction: column; - font-weight: bold; - height: 2.5rem; - justify-content: center; - padding: 0; - width: 2.5rem; - - &.confirm-button { - background-color: var(--la-1); - color: var(--df-1); - - &.confirm { - background-color: var(--df-1); - color: var(--la-1); - } - } - } - } -} - -.history, -.usage { - border: 1px solid var(--df-2); - - &[open] { - summary { - background-color: var(--df-2); - color: var(--db-1); - margin-bottom: 16px; - } - - > :not(summary) { - padding: 0 16px; - } - } - - summary { - cursor: pointer; - font-weight: bold; - padding: 16px; - - &:hover { - background-color: var(--df-1); - color: var(--db-1); - } - } -} - -.history { - margin-bottom: 16px; - - .q-list { - border: none; - } -} - -.usage { - ul { - list-style: square; - margin: 4px 0 2rem 16px; - } -} diff --git a/source/options/scss/love.scss b/source/options/scss/love.scss deleted file mode 100644 index c7f7b0a..0000000 --- a/source/options/scss/love.scss +++ /dev/null @@ -1,45 +0,0 @@ -/* - The Love Theme CSS Custom Properties - https://love.holllo.cc - version 0.1.0 - MIT license -*/ - -.love { - /* Love Dark */ - --df-1: #f2efff; - --df-2: #e6deff; - --db-1: #1f1731; - --db-2: #2a2041; - --da-1: #f99fb1; - --da-2: #faa56c; - --da-3: #d2b83a; - --da-4: #96c839; - --da-5: #3bd18a; - --da-6: #3ecdbf; - --da-7: #41c8e5; - --da-8: #98b9f8; - --da-9: #d5a6f8; - --da-10: #f99add; - --dg-1: #e2e2e2; - --dg-2: #c6c6c6; - --dg-3: #ababab; - - /* Love Light */ - --lf-1: #1f1731; - --lf-2: #2a2041; - --lb-1: #f2efff; - --lb-2: #e6deff; - --la-1: #8b123c; - --la-2: #6a3b11; - --la-3: #514610; - --la-4: #384d10; - --la-5: #115133; - --la-6: #124f49; - --la-7: #144d5a; - --la-8: #17477e; - --la-9: #6f1995; - --la-10: #81156a; - --lg-1: #1b1b1b; - --lg-2: #303030; - --lg-3: #474747; -} diff --git a/source/options/scss/mixins.scss b/source/options/scss/mixins.scss deleted file mode 100644 index 83905d2..0000000 --- a/source/options/scss/mixins.scss +++ /dev/null @@ -1,11 +0,0 @@ -@use 'variables'; - -@mixin responsive-container { - margin-left: auto; - margin-right: auto; - width: variables.$large-breakpoint; - - @media (max-width: variables.$large-breakpoint) { - width: 100%; - } -} diff --git a/source/options/scss/reset.scss b/source/options/scss/reset.scss deleted file mode 100644 index 3d792cd..0000000 --- a/source/options/scss/reset.scss +++ /dev/null @@ -1,12 +0,0 @@ -h1, -h2, -h3, -h4, -h5, -ol, -ul, -li, -p { - margin: 0; - padding: 0; -} diff --git a/source/options/scss/variables.scss b/source/options/scss/variables.scss deleted file mode 100644 index 2b9ef21..0000000 --- a/source/options/scss/variables.scss +++ /dev/null @@ -1,4 +0,0 @@ -$small-breakpoint: 600px; -$medium-breakpoint: 900px; -$large-breakpoint: 1200px; -$extra-large-breakpoint: 1800px;