koloml/furbooru-tagging-assistant
1
0
Fork 0
mirror of https://github.com/koloml/furbooru-tagging-assistant.git synced 2025-12-24 07:12:57 +00:00
Code Issues Activity

Merge pull request #15 from koloml/feature/menu-items-controls

Browse Source 
Minor refactoring for menu items, support switching between tagging profiles using radio controls right from the list
This commit is contained in:
KoloMl
2024-07-07 03:19:23 +04:00
committed by GitHub
parent 965045e672 7ee1a72302
commit b7a53daa9b
9 changed files with 91 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/ui/menu/Menu.svelte
View File

@@ -9,11 +9,11 @@
display: flex;
flex-direction: column;
& > :global(a) {
& > :global(.menu-item) {
padding: 5px 24px;
}
:global(a) {
:global(.menu-item) {
color: colors.$text;
&:hover {

20
src/components/ui/menu/MenuLink.svelte → src/components/ui/menu/MenuItem.svelte
View File

@@ -1,8 +1,8 @@
<script>
/**
* @type {string}
* @type {string|null}
*/
export let href;
export let href = null;
/**
* @type {"tag"|"paint-brush"|"arrow-left"|"info-circle"|"wrench"|"globe"|"plus"|null}
@@ -15,19 +15,17 @@
export let target = undefined;
</script>
{#if href}
<a {href} {target} on:click>
{#if icon}
<i class="icon icon-{icon}"></i>
{/if}
<slot></slot>
</a>
{/if}
<svelte:element this="{href ? 'a': 'span'}" class="menu-item" {href} {target} on:click role="link" tabindex="0">
{#if icon}
<i class="icon icon-{icon}"></i>
{/if}
<slot></slot>
</svelte:element>
<style lang="scss">
@use '../../../styles/colors';
a {
.menu-item {
display: flex;
align-items: center;

36
src/components/ui/menu/MenuRadioItem.svelte Normal file
View File

@@ -0,0 +1,36 @@
<script>
import MenuLink from "$components/ui/menu/MenuItem.svelte";
/**
* @type {boolean}
*/
export let checked;
/**
* @type {string}
*/
export let name;
/**
* @type {string}
*/
export let value;
/**
* @type {string|null}
*/
export let href = null;
</script>
<MenuLink {href}>
<input type="radio" {name} {value} {checked} on:input on:click|stopPropagation>
<slot></slot>
</MenuLink>
<style lang="scss">
:global(.menu-item) input {
width: 16px;
height: 16px;
margin-right: 6px;
}
</style>

6
src/routes/+page.svelte
View File

@@ -1,10 +1,10 @@
<script>
import Menu from "$components/ui/menu/Menu.svelte";
import MenuLink from "$components/ui/menu/MenuLink.svelte";
import MenuItem from "$components/ui/menu/MenuItem.svelte";
</script>
<Menu>
<MenuLink href="/settings/maintenance">Tagging Profiles</MenuLink>
<MenuItem href="/settings/maintenance">Tagging Profiles</MenuItem>
<hr>
<MenuLink href="/about">About</MenuLink>
<MenuItem href="/about">About</MenuItem>
</Menu>

12
src/routes/about/+page.svelte
View File

@@ -1,10 +1,10 @@
<script>
import Menu from "$components/ui/menu/Menu.svelte";
import MenuLink from "$components/ui/menu/MenuLink.svelte";
import MenuItem from "$components/ui/menu/MenuItem.svelte";
</script>
<Menu>
<MenuLink icon="arrow-left" href="/">Back</MenuLink>
<MenuItem icon="arrow-left" href="/">Back</MenuItem>
<hr>
</Menu>
<h1>
@@ -16,10 +16,10 @@
</p>
<Menu>
<hr>
<MenuLink icon="globe" href="https://furbooru.org" target="_blank">
<MenuItem icon="globe" href="https://furbooru.org" target="_blank">
Visit Furbooru
</MenuLink>
<MenuLink icon="info-circle" href="https://github.com/koloml/furbooru-tagging-assistant" target="_blank">
</MenuItem>
<MenuItem icon="info-circle" href="https://github.com/koloml/furbooru-tagging-assistant" target="_blank">
GitHub Repo
</MenuLink>
</MenuItem>
</Menu>

6
src/routes/settings/+page.svelte
View File

@@ -1,10 +1,10 @@
<script>
import Menu from "$components/ui/menu/Menu.svelte";
import MenuLink from "$components/ui/menu/MenuLink.svelte";
import MenuItem from "$components/ui/menu/MenuItem.svelte";
</script>
<Menu>
<MenuLink href="/">Back</MenuLink>
<MenuItem href="/">Back</MenuItem>
<hr>
<MenuLink href="/settings/maintenance">Tagging Profiles</MenuLink>
<MenuItem href="/settings/maintenance">Tagging Profiles</MenuItem>
</Menu>

29
src/routes/settings/maintenance/+page.svelte
View File

@@ -1,6 +1,7 @@
<script>
import Menu from "$components/ui/menu/Menu.svelte";
import MenuLink from "$components/ui/menu/MenuLink.svelte";
import MenuItem from "$components/ui/menu/MenuItem.svelte";
import MenuRadioItem from "$components/ui/menu/MenuRadioItem.svelte";
import {activeProfileStore, maintenanceProfilesStore} from "$stores/maintenance-profiles-store.js";
/** @type {import('$lib/extension/entities/MaintenanceProfile.js').default[]} */
@@ -11,20 +12,34 @@
function resetActiveProfile() {
$activeProfileStore = null;
}
/**
* @param {Event} event
*/
function enableSelectedProfile(event) {
const target = event.target;
if (target instanceof HTMLInputElement && target.checked) {
activeProfileStore.set(target.value);
}
}
</script>
<Menu>
<MenuLink icon="arrow-left" href="/">Back</MenuLink>
<MenuLink icon="plus" href="/settings/maintenance/new/edit">Create New</MenuLink>
<MenuItem icon="arrow-left" href="/">Back</MenuItem>
<MenuItem icon="plus" href="/settings/maintenance/new/edit">Create New</MenuItem>
{#if profiles.length}
<hr>
{/if}
{#each profiles as profile}
<MenuLink href="/settings/maintenance/{profile.id}"
icon="{$activeProfileStore === profile.id ? 'tag' : null}">
<MenuRadioItem href="/settings/maintenance/{profile.id}"
name="active-profile"
value="{profile.id}"
checked="{$activeProfileStore === profile.id}"
on:input={enableSelectedProfile}>
{profile.settings.name}
</MenuLink>
</MenuRadioItem>
{/each}
<hr>
<MenuLink href="#" on:click={resetActiveProfile}>Reset Active Profile</MenuLink>
<MenuItem href="#" on:click={resetActiveProfile}>Reset Active Profile</MenuItem>
</Menu>

12
src/routes/settings/maintenance/[id]/+page.svelte
View File

@@ -1,10 +1,8 @@
<script>
import Menu from "$components/ui/menu/Menu.svelte";
import MenuLink from "$components/ui/menu/MenuLink.svelte";
import MenuItem from "$components/ui/menu/MenuItem.svelte";
import {page} from "$app/stores";
import {goto} from "$app/navigation";
import {onDestroy} from "svelte";
import {activeProfileStore, maintenanceProfilesStore} from "$stores/maintenance-profiles-store.js";
const profileId = $page.params.id;
@@ -39,7 +37,7 @@
</script>
<Menu>
<MenuLink href="/settings/maintenance" icon="arrow-left">Back</MenuLink>
<MenuItem href="/settings/maintenance" icon="arrow-left">Back</MenuItem>
<hr>
</Menu>
{#if profile}
@@ -58,14 +56,14 @@
{/if}
<Menu>
<hr>
<MenuLink icon="wrench" href="/settings/maintenance/{profileId}/edit">Edit Profile</MenuLink>
<MenuLink icon="tag" href="#" on:click={activateProfile}>
<MenuItem icon="wrench" href="/settings/maintenance/{profileId}/edit">Edit Profile</MenuItem>
<MenuItem icon="tag" href="#" on:click={activateProfile}>
{#if isActiveProfile}
<span>Profile is Active</span>
{:else}
<span>Activate Profile</span>
{/if}
</MenuLink>
</MenuItem>
</Menu>
<style lang="scss">

11
src/routes/settings/maintenance/[id]/edit/+page.svelte
View File

@@ -1,6 +1,6 @@
<script>
import Menu from "$components/ui/menu/Menu.svelte";
import MenuLink from "$components/ui/menu/MenuLink.svelte";
import MenuItem from "$components/ui/menu/MenuItem.svelte";
import TagsEditor from "$components/web-components/TagsEditor.svelte";
import FormControl from "$components/ui/forms/FormControl.svelte";
import TextField from "$components/ui/forms/TextField.svelte";
@@ -9,7 +9,6 @@
import {goto} from "$app/navigation";
import {maintenanceProfilesStore} from "$stores/maintenance-profiles-store.js";
import MaintenanceProfile from "$entities/MaintenanceProfile.js";
import {onDestroy} from "svelte";
/** @type {string} */
let profileId = $page.params.id;
@@ -60,9 +59,9 @@
</script>
<Menu>
<MenuLink icon="arrow-left" href="/settings/maintenance{profileId === 'new' ? '' : '/' + profileId}">
<MenuItem icon="arrow-left" href="/settings/maintenance{profileId === 'new' ? '' : '/' + profileId}">
Back
</MenuLink>
</MenuItem>
<hr>
</Menu>
<FormContainer>
@@ -75,8 +74,8 @@
</FormContainer>
<Menu>
<hr>
<MenuLink href="#" on:click={saveProfile}>Save Profile</MenuLink>
<MenuItem href="#" on:click={saveProfile}>Save Profile</MenuItem>
{#if profileId !== 'new'}
<MenuLink href="#" on:click={deleteProfile}>Delete Profile</MenuLink>
<MenuItem href="#" on:click={deleteProfile}>Delete Profile</MenuItem>
{/if}
</Menu>