From e523ce446836384e52ba152547f399288c2e266e Mon Sep 17 00:00:00 2001 From: KoloMl Date: Mon, 2 Dec 2024 03:12:09 +0400 Subject: [PATCH 01/25] Added initial version of tag group entity with tags & prefixes --- src/app.d.ts | 2 ++ src/lib/extension/entities/TagGroup.ts | 19 +++++++++++++++++++ src/lib/extension/transporting/exporters.ts | 9 +++++++++ 3 files changed, 30 insertions(+) create mode 100644 src/lib/extension/entities/TagGroup.ts diff --git a/src/app.d.ts b/src/app.d.ts index 3735081..4462d62 100644 --- a/src/app.d.ts +++ b/src/app.d.ts @@ -1,6 +1,7 @@ // See https://kit.svelte.dev/docs/types#app // for information about these interfaces import MaintenanceProfile from "$entities/MaintenanceProfile.ts"; +import type TagGroup from "$entities/TagGroup.ts"; declare global { namespace App { @@ -24,6 +25,7 @@ declare global { interface EntityNamesMap { profiles: MaintenanceProfile; + groups: TagGroup; } } } diff --git a/src/lib/extension/entities/TagGroup.ts b/src/lib/extension/entities/TagGroup.ts new file mode 100644 index 0000000..63bcbdf --- /dev/null +++ b/src/lib/extension/entities/TagGroup.ts @@ -0,0 +1,19 @@ +import StorageEntity from "$lib/extension/base/StorageEntity.ts"; + +export interface TagGroupSettings { + name: string; + tags: string[]; + prefixes: string[]; +} + +export default class TagGroup extends StorageEntity { + constructor(id: string, settings: Partial) { + super(id, { + name: settings.name || '', + tags: settings.tags || [], + prefixes: settings.prefixes || [], + }); + } + + static _entityName = 'groups'; +} diff --git a/src/lib/extension/transporting/exporters.ts b/src/lib/extension/transporting/exporters.ts index c2386c4..468df8e 100644 --- a/src/lib/extension/transporting/exporters.ts +++ b/src/lib/extension/transporting/exporters.ts @@ -13,6 +13,15 @@ const entitiesExporters: ExportersMap = { tags: entity.settings.tags, } }, + groups: entity => { + return { + v: 1, + id: entity.id, + name: entity.settings.name, + tags: entity.settings.tags, + prefixes: entity.settings.prefixes, + } + } }; export function exportEntityToObject(entityInstance: StorageEntity, entityName: string): Record { From c9a9fe059c49710e41675d31e31f6bb5cb3f25e3 Mon Sep 17 00:00:00 2001 From: KoloMl Date: Mon, 2 Dec 2024 03:17:48 +0400 Subject: [PATCH 02/25] Group view element --- src/components/features/GroupView.svelte | 49 ++++++++++++++++++++++++ 1 file changed, 49 insertions(+) create mode 100644 src/components/features/GroupView.svelte diff --git a/src/components/features/GroupView.svelte b/src/components/features/GroupView.svelte new file mode 100644 index 0000000..0032a0c --- /dev/null +++ b/src/components/features/GroupView.svelte @@ -0,0 +1,49 @@ + + +
+ Group Name: +
{group.settings.name}
+
+
+ Tags: +
+ {#each sortedTagsList as tagName} + {tagName} + {/each} +
+
+
+ Prefixes: +
+ {#each sortedPrefixes as prefixName} + {prefixName}* + {/each} +
+
+ + From 4bdf04f911887faa403897f4132c866dc6523dfc Mon Sep 17 00:00:00 2001 From: KoloMl Date: Mon, 2 Dec 2024 03:17:58 +0400 Subject: [PATCH 03/25] Added store for the groups --- src/stores/tag-groups-store.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 src/stores/tag-groups-store.js diff --git a/src/stores/tag-groups-store.js b/src/stores/tag-groups-store.js new file mode 100644 index 0000000..057becd --- /dev/null +++ b/src/stores/tag-groups-store.js @@ -0,0 +1,12 @@ +import {writable} from "svelte/store"; +import TagGroup from "$entities/TagGroup.ts"; + +/** @type {import('svelte/store').Writable} */ +export const tagGroupsStore = writable([]); + +TagGroup + .readAll() + .then(groups => tagGroupsStore.set(groups)) + .then(() => { + TagGroup.subscribe(groups => tagGroupsStore.set(groups)); + }); From 93d6d3a17461c60c019056785bf6b7c5ccf27cf4 Mon Sep 17 00:00:00 2001 From: KoloMl Date: Mon, 2 Dec 2024 03:19:58 +0400 Subject: [PATCH 04/25] Groups listing, added link on the main view --- src/routes/+page.svelte | 1 + src/routes/features/groups/+page.svelte | 23 +++++++++++++++++++++++ 2 files changed, 24 insertions(+) create mode 100644 src/routes/features/groups/+page.svelte diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 7b1fa3a..49cdecb 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -22,6 +22,7 @@
{/if} Tagging Profiles + Tag Groups
Preferences About diff --git a/src/routes/features/groups/+page.svelte b/src/routes/features/groups/+page.svelte new file mode 100644 index 0000000..97fc1b7 --- /dev/null +++ b/src/routes/features/groups/+page.svelte @@ -0,0 +1,23 @@ + + + + Back + Create New + {#if groups.length} +
+ {#each groups as group} + {group.settings.name} + {/each} + {/if} +
+ Import Group + From 4fcf83d732ad006d38b6b7758bb357b570b06345 Mon Sep 17 00:00:00 2001 From: KoloMl Date: Mon, 2 Dec 2024 03:23:32 +0400 Subject: [PATCH 05/25] Group detail view & editing form --- src/routes/features/groups/[id]/+page.svelte | 38 ++++++++++ .../features/groups/[id]/edit/+page.svelte | 70 +++++++++++++++++++ 2 files changed, 108 insertions(+) create mode 100644 src/routes/features/groups/[id]/+page.svelte create mode 100644 src/routes/features/groups/[id]/edit/+page.svelte diff --git a/src/routes/features/groups/[id]/+page.svelte b/src/routes/features/groups/[id]/+page.svelte new file mode 100644 index 0000000..b8be605 --- /dev/null +++ b/src/routes/features/groups/[id]/+page.svelte @@ -0,0 +1,38 @@ + + + + Back +
+ +{#if group} + +{/if} + +
+ Edit Group + Export Group + diff --git a/src/routes/features/groups/[id]/edit/+page.svelte b/src/routes/features/groups/[id]/edit/+page.svelte new file mode 100644 index 0000000..1782699 --- /dev/null +++ b/src/routes/features/groups/[id]/edit/+page.svelte @@ -0,0 +1,70 @@ + + + + Back +
+ + + + + + + + + + + + + +
+ Save Group + From 7d19693f5e2066cb61b62200f2d58cb75e442b72 Mon Sep 17 00:00:00 2001 From: KoloMl Date: Wed, 4 Dec 2024 23:21:26 +0400 Subject: [PATCH 06/25] Import & export views --- .../features/groups/[id]/export/+page.svelte | 50 +++++++ .../features/groups/import/+page.svelte | 134 ++++++++++++++++++ 2 files changed, 184 insertions(+) create mode 100644 src/routes/features/groups/[id]/export/+page.svelte create mode 100644 src/routes/features/groups/import/+page.svelte diff --git a/src/routes/features/groups/[id]/export/+page.svelte b/src/routes/features/groups/[id]/export/+page.svelte new file mode 100644 index 0000000..1a2b891 --- /dev/null +++ b/src/routes/features/groups/[id]/export/+page.svelte @@ -0,0 +1,50 @@ + + + + Back +
+ + + + + + + +
+ isEncodedGroupShown = !isEncodedGroupShown}> + Switch Format: + {#if isEncodedGroupShown} + Base64-Encoded + {:else} + Raw JSON + {/if} + + diff --git a/src/routes/features/groups/import/+page.svelte b/src/routes/features/groups/import/+page.svelte new file mode 100644 index 0000000..01583bc --- /dev/null +++ b/src/routes/features/groups/import/+page.svelte @@ -0,0 +1,134 @@ + + + + Back +
+ +{#if errorMessage} +

Failed to import: {errorMessage}

+ +
+ +{/if} +{#if !candidateGroup} + + + + + + +
+ Import + +{:else} + {#if existingGroup} +

+ This group will replace the existing "{existingGroup.settings.name}" group, since it have the same ID. +

+ {/if} + + +
+ {#if existingGroup} + Replace Existing Group + Save as New Group + {:else} + Import New Group + {/if} + candidateGroup = null}>Cancel + +{/if} + + From 9e9499c9046d6c45531c00500c61ca0e73552e99 Mon Sep 17 00:00:00 2001 From: KoloMl Date: Wed, 4 Dec 2024 23:25:04 +0400 Subject: [PATCH 07/25] Group deletion confirmation --- src/routes/features/groups/[id]/+page.svelte | 1 + .../features/groups/[id]/delete/+page.svelte | 41 +++++++++++++++++++ 2 files changed, 42 insertions(+) create mode 100644 src/routes/features/groups/[id]/delete/+page.svelte diff --git a/src/routes/features/groups/[id]/+page.svelte b/src/routes/features/groups/[id]/+page.svelte index b8be605..fffcfdb 100644 --- a/src/routes/features/groups/[id]/+page.svelte +++ b/src/routes/features/groups/[id]/+page.svelte @@ -35,4 +35,5 @@
Edit Group Export Group + Delete Group diff --git a/src/routes/features/groups/[id]/delete/+page.svelte b/src/routes/features/groups/[id]/delete/+page.svelte new file mode 100644 index 0000000..50f1b1b --- /dev/null +++ b/src/routes/features/groups/[id]/delete/+page.svelte @@ -0,0 +1,41 @@ + + + + Back +
+ +{#if targetGroup} +

+ Do you want to remove group "{targetGroup.settings.name}"? This action is irreversible. +

+ +
+ Yes + No + +{:else} +

Loading...

+{/if} From 27133077c8e9ca2c176446641aed28d7c5c154b6 Mon Sep 17 00:00:00 2001 From: KoloMl Date: Sun, 8 Dec 2024 22:57:49 +0400 Subject: [PATCH 08/25] Adding default theme colors for categories --- src/styles/colors.scss | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/src/styles/colors.scss b/src/styles/colors.scss index b6beafa..37e5039 100644 --- a/src/styles/colors.scss +++ b/src/styles/colors.scss @@ -25,6 +25,27 @@ $tag-background: #1b3c21; $tag-count-background: #2d6236; $tag-text: #4aa158; +$tag-rating-text: #418dd9; +$tag-rating-background: darken($tag-rating-text, 35%); +$tag-spoiler-text: #d49b39; +$tag-spoiler-background: darken($tag-spoiler-text, 34%); +$tag-origin-text: #6f66d6; +$tag-origin-background: darken($tag-origin-text, 40%); +$tag-oc-text: #b157b7; +$tag-oc-background: darken($tag-oc-text, 33%); +$tag-error-text: #d45460; +$tag-error-background: desaturate(darken($tag-error-text, 38%), 6%); +$tag-character-text: #4aaabf; +$tag-character-background: darken($tag-character-text, 33%); +$tag-content-official-text: #b9b541; +$tag-content-official-background: desaturate(darken($tag-content-official-text, 29%),2%); +$tag-content-fanmade-text: #cc8eb5; +$tag-content-fanmade-background: darken($tag-content-fanmade-text, 40%); +$tag-species-text: #b16b50; +$tag-species-background: darken($tag-species-text, 35%); +$tag-body-type-text: #b8b8b8; +$tag-body-type-background: desaturate(darken($tag-body-type-text, 35%), 10%); + $input-background: #26232d; $input-border: #5c5a61; From e61f6af237747c8d521afc9073a90d806447b46d Mon Sep 17 00:00:00 2001 From: KoloMl Date: Sun, 8 Dec 2024 22:58:16 +0400 Subject: [PATCH 09/25] Added category field to tag group --- src/lib/extension/entities/TagGroup.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/lib/extension/entities/TagGroup.ts b/src/lib/extension/entities/TagGroup.ts index 63bcbdf..95dc44a 100644 --- a/src/lib/extension/entities/TagGroup.ts +++ b/src/lib/extension/entities/TagGroup.ts @@ -4,6 +4,7 @@ export interface TagGroupSettings { name: string; tags: string[]; prefixes: string[]; + category: string; } export default class TagGroup extends StorageEntity { @@ -12,6 +13,7 @@ export default class TagGroup extends StorageEntity { name: settings.name || '', tags: settings.tags || [], prefixes: settings.prefixes || [], + category: settings.category || '' }); } From 17396952c37e4cc5f0d8e1cf4d08ca450b055e48 Mon Sep 17 00:00:00 2001 From: KoloMl Date: Sun, 8 Dec 2024 22:58:46 +0400 Subject: [PATCH 10/25] Added field for selection of category, added container for tags --- src/components/tags/TagsColorContainer.svelte | 62 ++++++++++++++ .../ui/forms/TagCategorySelectField.svelte | 80 +++++++++++++++++++ src/lib/booru/tag-categories.js | 12 +++ 3 files changed, 154 insertions(+) create mode 100644 src/components/tags/TagsColorContainer.svelte create mode 100644 src/components/ui/forms/TagCategorySelectField.svelte create mode 100644 src/lib/booru/tag-categories.js diff --git a/src/components/tags/TagsColorContainer.svelte b/src/components/tags/TagsColorContainer.svelte new file mode 100644 index 0000000..ba02c41 --- /dev/null +++ b/src/components/tags/TagsColorContainer.svelte @@ -0,0 +1,62 @@ + + +
+ +
+ + diff --git a/src/components/ui/forms/TagCategorySelectField.svelte b/src/components/ui/forms/TagCategorySelectField.svelte new file mode 100644 index 0000000..61040ee --- /dev/null +++ b/src/components/ui/forms/TagCategorySelectField.svelte @@ -0,0 +1,80 @@ + + + + + diff --git a/src/lib/booru/tag-categories.js b/src/lib/booru/tag-categories.js new file mode 100644 index 0000000..cbd33da --- /dev/null +++ b/src/lib/booru/tag-categories.js @@ -0,0 +1,12 @@ +export const categories = [ + 'rating', + 'spoiler', + 'origin', + 'oc', + 'error', + 'character', + 'content-official', + 'content-fanmade', + 'species', + 'body-type', +]; From 62bcba34dae108a304b54ab7b6393ed69c7f3688 Mon Sep 17 00:00:00 2001 From: KoloMl Date: Sun, 8 Dec 2024 22:59:13 +0400 Subject: [PATCH 11/25] Editing tag category, applying category color on view --- src/components/features/GroupView.svelte | 26 ++++++++++++------- .../features/groups/[id]/edit/+page.svelte | 20 ++++++++++---- 2 files changed, 31 insertions(+), 15 deletions(-) diff --git a/src/components/features/GroupView.svelte b/src/components/features/GroupView.svelte index 0032a0c..597016e 100644 --- a/src/components/features/GroupView.svelte +++ b/src/components/features/GroupView.svelte @@ -1,4 +1,6 @@ @@ -69,6 +69,8 @@ + + From ba10768496fad989b1f99cbeaa473b651933c50c Mon Sep 17 00:00:00 2001 From: KoloMl Date: Fri, 3 Jan 2025 06:28:09 +0400 Subject: [PATCH 25/25] Added visible close button --- src/lib/components/FullscreenViewer.js | 3 +++ src/styles/content/listing.scss | 17 +++++++++++++++++ 2 files changed, 20 insertions(+) diff --git a/src/lib/components/FullscreenViewer.js b/src/lib/components/FullscreenViewer.js index b74182d..ee8b939 100644 --- a/src/lib/components/FullscreenViewer.js +++ b/src/lib/components/FullscreenViewer.js @@ -8,6 +8,7 @@ export class FullscreenViewer extends BaseComponent { #imageElement = document.createElement('img'); #spinnerElement = document.createElement('i'); #sizeSelectorElement = document.createElement('select'); + #closeButtonElement = document.createElement('i'); /** @type {number|null} */ #touchId = null; /** @type {number|null} */ @@ -29,9 +30,11 @@ export class FullscreenViewer extends BaseComponent { this.container.append( this.#spinnerElement, this.#sizeSelectorElement, + this.#closeButtonElement, ); this.#spinnerElement.classList.add('spinner', 'fa', 'fa-circle-notch', 'fa-spin'); + this.#closeButtonElement.classList.add('close', 'fa', 'fa-xmark'); this.#sizeSelectorElement.classList.add('size-selector', 'input'); for (const [sizeKey, sizeName] of Object.entries(FullscreenViewer.#previewSizes)) { diff --git a/src/styles/content/listing.scss b/src/styles/content/listing.scss index a770c00..a6ec9e9 100644 --- a/src/styles/content/listing.scss +++ b/src/styles/content/listing.scss @@ -206,6 +206,23 @@ z-index: 1; } + .close { + position: absolute; + top: 5px; + right: 5px; + z-index: 1; + padding: 5px; + background-color: colors.$text; + color: colors.$background; + font-size: 20px; + line-height: 20px; + width: 20px; + height: 20px; + text-align: center; + display: block; + cursor: pointer; + } + &.shown { opacity: var(--opacity, 1); pointer-events: initial;