From ee012aea1d06a74f53e91e7d9602c7782f638e8a Mon Sep 17 00:00:00 2001
From: Bauke
Date: Tue, 25 Oct 2022 13:08:53 +0200
Subject: [PATCH] Add move buttons.
---
source/options/components/page-main.ts | 42 ++++++++++++++++--
source/options/scss/components/page-main.scss | 43 ++++++++++++-------
2 files changed, 66 insertions(+), 19 deletions(-)
diff --git a/source/options/components/page-main.ts b/source/options/components/page-main.ts
index f7dc153..970db42 100644
--- a/source/options/components/page-main.ts
+++ b/source/options/components/page-main.ts
@@ -23,6 +23,12 @@ export class PageMain extends Component {
};
}
+ 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);
@@ -34,9 +40,16 @@ export class PageMain extends Component {
const isFirefox = import.meta.env.VITE_BROWSER === 'firefox';
const queueItems = this.state.queue
- .sort((a, b) => a.added.getTime() - b.added.getTime())
+ .sort((a, b) => a.sortIndex - b.sortIndex)
.map(
- (item) => html`<${queueItem} item=${item} remove=${this.removeItem} />`,
+ (item) =>
+ html`
+ <${queueItem}
+ item=${item}
+ move=${this.moveItem}
+ remove=${this.removeItem}
+ />
+ `,
);
if (queueItems.length === 0) {
@@ -114,12 +127,35 @@ export class PageMain extends Component {
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`
@@ -141,7 +177,7 @@ function queueItem(props: ItemProps): HtmComponent {
<${PrivacyLink} attributes=${{href: url}}>${text ?? url}/>
- ${remove}
+ ${move}${remove}