Remove the old options page.
This commit is contained in:
parent
0a2891d919
commit
daa46b8755
GPG Key ID:
C1C0F29952BCF558
|
|
@ -1,3 +0,0 @@
|
|||
export * from './page-footer.js';
|
||||
export * from './page-header.js';
|
||||
export * from './page-main.js';
|
||||
|
|
@ -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<Props> {
|
||||
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`
|
||||
<footer class="page-footer">
|
||||
<p>
|
||||
${donateLink} 💖 ${versionLink} © Holllo — Free and open-source,
|
||||
forever.
|
||||
</p>
|
||||
</footer>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
import {html} from 'htm/preact';
|
||||
import {Component} from 'preact';
|
||||
|
||||
export class PageHeader extends Component {
|
||||
render() {
|
||||
return html`
|
||||
<header class="page-header">
|
||||
<h1>
|
||||
<span class="icon">⇥</span>
|
||||
Queue
|
||||
</h1>
|
||||
</header>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
|
@ -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<Props, State> {
|
||||
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`<li>No items queued. 🤷</li>`);
|
||||
}
|
||||
|
||||
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`
|
||||
<details class="history">
|
||||
<summary>Queue history</summary>
|
||||
|
||||
<ul class="q-list">
|
||||
${historyItems}
|
||||
</ul>
|
||||
</details>
|
||||
`;
|
||||
}
|
||||
|
||||
return html`
|
||||
<main class="page-main">
|
||||
<ul class="q-list">
|
||||
${queueItems}
|
||||
</ul>
|
||||
|
||||
${history}
|
||||
|
||||
<details class="usage">
|
||||
<summary>How do I use Queue?</summary>
|
||||
|
||||
<p>Adding links to your queue:</p>
|
||||
<ul>
|
||||
<li>
|
||||
Right-click any link ${isFirefox ? 'or tab' : ''} and click "Add
|
||||
to Queue".
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>Opening the next link from your queue:</p>
|
||||
<ul>
|
||||
<li>Click on the extension icon to open it in the current tab.</li>
|
||||
<li>
|
||||
Right-click the extension icon and click "Open next link in new
|
||||
tab".
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>Opening the extension page:</p>
|
||||
<ul>
|
||||
${isFirefox
|
||||
? html`<li>Double-click the extension icon.</li>`
|
||||
: undefined}
|
||||
<li>
|
||||
Right-click the extension icon and click "Open the extension
|
||||
page".
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>Deleting queue items:</p>
|
||||
<ul>
|
||||
<li>
|
||||
Click the red button with the ✗ and then confirm it by clicking
|
||||
again.
|
||||
</li>
|
||||
</ul>
|
||||
</details>
|
||||
</main>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
type ItemProps = {
|
||||
item: Queue.Item;
|
||||
move?: (id: number, direction: Queue.MoveDirection) => Promise<void>;
|
||||
remove?: (id: number) => Promise<void>;
|
||||
};
|
||||
|
||||
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`
|
||||
<button
|
||||
title="Move item ${direction}"
|
||||
onClick=${async () => props.move!(id, direction)}
|
||||
>
|
||||
${text}
|
||||
</button>
|
||||
`,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
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`
|
||||
<li class="q-item">
|
||||
<p class="title">
|
||||
<${PrivacyLink} attributes=${{href: url}}>${text ?? url}<//>
|
||||
</p>
|
||||
|
||||
<div class="buttons">${move}${remove}</div>
|
||||
|
||||
<p>
|
||||
<time datetime=${added} title="Link queued on ${added}.">
|
||||
${added}
|
||||
</time>
|
||||
</p>
|
||||
</li>
|
||||
`;
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
@ -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<Props> {
|
||||
render() {
|
||||
const {history, settings} = this.props;
|
||||
|
||||
return html`
|
||||
<${PageHeader} />
|
||||
<${PageMain} history=${history} settings=${settings} />
|
||||
<${PageFooter} settings=${settings} />
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
@use '../mixins';
|
||||
|
||||
.page-footer {
|
||||
@include mixins.responsive-container;
|
||||
|
||||
border: 1px solid var(--df-2);
|
||||
margin-bottom: 16px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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%;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
ol,
|
||||
ul,
|
||||
li,
|
||||
p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
$small-breakpoint: 600px;
|
||||
$medium-breakpoint: 900px;
|
||||
$large-breakpoint: 1200px;
|
||||
$extra-large-breakpoint: 1800px;
|
||||
Loading…
Reference in New Issue