sam/pronounscc
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat: select label preferences with dropdown

Browse source
This commit is contained in:
Sam 2023-03-14 15:00:56 +01:00
parent 18fc764d64
commit e3f3ac1d8d
Signed by: sam
GPG key ID: B4EF20DDE721CAA1
8 changed files with 327 additions and 171 deletions
Download patch file Download diff file Expand all files Collapse all files

4
frontend/src/lib/components/FieldCard.svelte
View file

@ -9,8 +9,8 @@
</script>
<div>
<h4>{field.name}</h4>
<ul class="list-unstyled">
<h3>{field.name}</h3>
<ul class="list-unstyled fs-5">
{#each field.entries as entry}
<li><StatusIcon status={entry.status} /> {entry.value}</li>
{/each}

3
frontend/src/lib/components/StatusIcon.svelte
View file

@ -4,6 +4,7 @@
import { WordStatus } from "$lib/api/entities";
export let status: WordStatus;
export let className: string | null = null;
const iconFor = (wordStatus: WordStatus) => {
switch (wordStatus) {
@ -48,5 +49,5 @@
let iconElement: HTMLElement;
</script>
<span bind:this={iconElement} tabindex={0}><Icon name={statusIcon} /></span>
<span bind:this={iconElement} tabindex={0}><Icon name={statusIcon} class={className} /></span>
<Tooltip target={iconElement} placement="top">{statusText}</Tooltip>

2
frontend/src/routes/+layout.svelte
View file

@ -5,7 +5,6 @@
import Navigation from "./nav/Navigation.svelte";
import type { LayoutData } from "./$types";
import { version } from "$app/environment";
import { PUBLIC_BASE_URL } from "$env/static/public";
export let data: LayoutData;
@ -13,7 +12,6 @@
</script>
<svelte:head>
<title>pronouns.cc</title>
<meta property="og:type" content="website" />
<meta name="theme-color" content="#aa8ed6" />
<meta property="og:site_name" content="pronouns.cc" />

72
frontend/src/routes/edit/EditableField.svelte
View file

@ -2,6 +2,7 @@
import { WordStatus, type Field } from "$lib/api/entities";
import IconButton from "$lib/components/IconButton.svelte";
import { Button, Input, InputGroup, InputGroupText } from "sveltestrap";
import FieldEntry from "./FieldEntry.svelte";
export let field: Field;
export let deleteField: () => void;
@ -25,12 +26,8 @@
};
const removeEntry = (index: number) => {
if (field.entries.length === 1) field.entries = [];
else if (index === 0) field.entries = field.entries.slice(1);
else if (index === field.entries.length - 1)
field.entries = field.entries.slice(0, field.entries.length - 1);
else
field.entries = [...field.entries.slice(0, index - 1), ...field.entries.slice(0, index + 1)];
field.entries.splice(index, 1);
field.entries = [...field.entries];
};
</script>
@ -41,62 +38,13 @@
<Button color="danger" on:click={() => deleteField()}>Delete field</Button>
</InputGroup>
{#each field.entries as _, index}
<div class="input-group m-1">
<IconButton
color="secondary"
icon="chevron-up"
tooltip="Move entry up"
click={() => moveEntry(index, true)}
/>
<IconButton
color="secondary"
icon="chevron-down"
tooltip="Move entry down"
click={() => moveEntry(index, false)}
/>
<input type="text" class="form-control" bind:value={field.entries[index].value} />
<IconButton
color="secondary"
icon="heart-fill"
tooltip="Favourite"
click={() => (field.entries[index].status = WordStatus.Favourite)}
active={field.entries[index].status === WordStatus.Favourite}
/>
<IconButton
color="secondary"
icon="hand-thumbs-up"
tooltip="Okay"
click={() => (field.entries[index].status = WordStatus.Okay)}
active={field.entries[index].status === WordStatus.Okay}
/>
<IconButton
color="secondary"
icon="emoji-laughing"
tooltip="Jokingly"
click={() => (field.entries[index].status = WordStatus.Jokingly)}
active={field.entries[index].status === WordStatus.Jokingly}
/>
<IconButton
color="secondary"
icon="people"
tooltip="Friends only"
click={() => (field.entries[index].status = WordStatus.FriendsOnly)}
active={field.entries[index].status === WordStatus.FriendsOnly}
/>
<IconButton
color="secondary"
icon="hand-thumbs-down"
tooltip="Avoid"
click={() => (field.entries[index].status = WordStatus.Avoid)}
active={field.entries[index].status === WordStatus.Avoid}
/>
<IconButton
color="danger"
icon="trash3"
tooltip="Remove entry"
click={() => removeEntry(index)}
/>
</div>
<FieldEntry
bind:value={field.entries[index].value}
bind:status={field.entries[index].status}
moveUp={() => moveEntry(index, true)}
moveDown={() => moveEntry(index, false)}
remove={() => removeEntry(index)}
/>
{/each}
<div class="input-group m-1">

88
frontend/src/routes/edit/EditableName.svelte Normal file
View file

@ -0,0 +1,88 @@
<script lang="ts">
import { WordStatus } from "$lib/api/entities";
import IconButton from "$lib/components/IconButton.svelte";
import {
ButtonDropdown,
DropdownItem,
DropdownMenu,
DropdownToggle,
Icon,
Tooltip,
} from "sveltestrap";
export let value: string;
export let status: WordStatus;
export let moveUp: () => void;
export let moveDown: () => void;
export let remove: () => void;
let buttonElement: HTMLElement;
const iconFor = (wordStatus: WordStatus) => {
switch (wordStatus) {
case WordStatus.Favourite:
return "heart-fill";
case WordStatus.Okay:
return "hand-thumbs-up";
case WordStatus.Jokingly:
return "emoji-laughing";
case WordStatus.FriendsOnly:
return "people";
case WordStatus.Avoid:
return "hand-thumbs-down";
default:
return "hand-thumbs-up";
}
};
const textFor = (wordStatus: WordStatus) => {
switch (wordStatus) {
case WordStatus.Favourite:
return "Favourite";
case WordStatus.Okay:
return "Okay";
case WordStatus.Jokingly:
return "Jokingly";
case WordStatus.FriendsOnly:
return "Friends only";
case WordStatus.Avoid:
return "Avoid";
default:
return "Okay";
}
};
</script>
<div class="input-group m-1">
<IconButton icon="chevron-up" color="secondary" tooltip="Move name up" click={moveUp} />
<IconButton icon="chevron-down" color="secondary" tooltip="Move name down" click={moveDown} />
<input type="text" class="form-control" bind:value />
<ButtonDropdown>
<Tooltip target={buttonElement} placement="top">{textFor(status)}</Tooltip>
<DropdownToggle color="secondary" caret bind:inner={buttonElement}>
<Icon name={iconFor(status)} />
</DropdownToggle>
<DropdownMenu>
<DropdownItem
on:click={() => (status = WordStatus.Favourite)}
active={status === WordStatus.Favourite}>Favourite</DropdownItem
>
<DropdownItem on:click={() => (status = WordStatus.Okay)} active={status === WordStatus.Okay}
>Okay</DropdownItem
>
<DropdownItem
on:click={() => (status = WordStatus.Jokingly)}
active={status === WordStatus.Jokingly}>Jokingly</DropdownItem
>
<DropdownItem
on:click={() => (status = WordStatus.FriendsOnly)}
active={status === WordStatus.FriendsOnly}>Friends only</DropdownItem
>
<DropdownItem
on:click={() => (status = WordStatus.Avoid)}
active={status === WordStatus.Avoid}>Avoid</DropdownItem
>
</DropdownMenu>
</ButtonDropdown>
<IconButton color="danger" icon="trash3" tooltip="Remove name" click={remove} />
</div>

100
frontend/src/routes/edit/EditablePronouns.svelte Normal file
View file

@ -0,0 +1,100 @@
<script lang="ts">
import { WordStatus, type Pronoun } from "$lib/api/entities";
import IconButton from "$lib/components/IconButton.svelte";
import {
ButtonDropdown,
DropdownItem,
DropdownMenu,
DropdownToggle,
Icon,
Tooltip,
} from "sveltestrap";
export let pronoun: Pronoun;
export let moveUp: () => void;
export let moveDown: () => void;
export let remove: () => void;
let buttonElement: HTMLElement;
const iconFor = (wordStatus: WordStatus) => {
switch (wordStatus) {
case WordStatus.Favourite:
return "heart-fill";
case WordStatus.Okay:
return "hand-thumbs-up";
case WordStatus.Jokingly:
return "emoji-laughing";
case WordStatus.FriendsOnly:
return "people";
case WordStatus.Avoid:
return "hand-thumbs-down";
default:
return "hand-thumbs-up";
}
};
const textFor = (wordStatus: WordStatus) => {
switch (wordStatus) {
case WordStatus.Favourite:
return "Favourite";
case WordStatus.Okay:
return "Okay";
case WordStatus.Jokingly:
return "Jokingly";
case WordStatus.FriendsOnly:
return "Friends only";
case WordStatus.Avoid:
return "Avoid";
default:
return "Okay";
}
};
</script>
<div class="input-group m-1">
<IconButton icon="chevron-up" color="secondary" tooltip="Move pronouns up" click={moveUp} />
<IconButton icon="chevron-down" color="secondary" tooltip="Move pronouns down" click={moveDown} />
<input
placeholder="Full set (e.g. it/it/its/its/itself)"
type="text"
class="form-control"
bind:value={pronoun.pronouns}
required
/>
<input
placeholder="Optional display text (e.g. it/its)"
type="text"
class="form-control"
bind:value={pronoun.display_text}
/>
<ButtonDropdown>
<Tooltip target={buttonElement} placement="top">{textFor(pronoun.status)}</Tooltip>
<DropdownToggle color="secondary" caret bind:inner={buttonElement}>
<Icon name={iconFor(pronoun.status)} />
</DropdownToggle>
<DropdownMenu>
<DropdownItem
on:click={() => (pronoun.status = WordStatus.Favourite)}
active={pronoun.status === WordStatus.Favourite}>Favourite</DropdownItem
>
<DropdownItem
on:click={() => (pronoun.status = WordStatus.Okay)}
active={pronoun.status === WordStatus.Okay}>Okay</DropdownItem
>
<DropdownItem
on:click={() => (pronoun.status = WordStatus.Jokingly)}
active={pronoun.status === WordStatus.Jokingly}>Jokingly</DropdownItem
>
<DropdownItem
on:click={() => (pronoun.status = WordStatus.FriendsOnly)}
active={pronoun.status === WordStatus.FriendsOnly}>Friends only</DropdownItem
>
<DropdownItem
on:click={() => (pronoun.status = WordStatus.Avoid)}
active={pronoun.status === WordStatus.Avoid}>Avoid</DropdownItem
>
</DropdownMenu>
</ButtonDropdown>
<IconButton color="danger" icon="trash3" tooltip="Remove pronouns" click={remove} />
</div>

88
frontend/src/routes/edit/FieldEntry.svelte Normal file
View file

@ -0,0 +1,88 @@
<script lang="ts">
import { WordStatus } from "$lib/api/entities";
import IconButton from "$lib/components/IconButton.svelte";
import {
ButtonDropdown,
DropdownItem,
DropdownMenu,
DropdownToggle,
Icon,
Tooltip,
} from "sveltestrap";
export let value: string;
export let status: WordStatus;
export let moveUp: () => void;
export let moveDown: () => void;
export let remove: () => void;
let buttonElement: HTMLElement;
const iconFor = (wordStatus: WordStatus) => {
switch (wordStatus) {
case WordStatus.Favourite:
return "heart-fill";
case WordStatus.Okay:
return "hand-thumbs-up";
case WordStatus.Jokingly:
return "emoji-laughing";
case WordStatus.FriendsOnly:
return "people";
case WordStatus.Avoid:
return "hand-thumbs-down";
default:
return "hand-thumbs-up";
}
};
const textFor = (wordStatus: WordStatus) => {
switch (wordStatus) {
case WordStatus.Favourite:
return "Favourite";
case WordStatus.Okay:
return "Okay";
case WordStatus.Jokingly:
return "Jokingly";
case WordStatus.FriendsOnly:
return "Friends only";
case WordStatus.Avoid:
return "Avoid";
default:
return "Okay";
}
};
</script>
<div class="input-group m-1">
<IconButton icon="chevron-up" color="secondary" tooltip="Move entry up" click={moveUp} />
<IconButton icon="chevron-down" color="secondary" tooltip="Move entry down" click={moveDown} />
<input type="text" class="form-control" bind:value />
<ButtonDropdown>
<Tooltip target={buttonElement} placement="top">{textFor(status)}</Tooltip>
<DropdownToggle color="secondary" caret bind:inner={buttonElement}>
<Icon name={iconFor(status)} />
</DropdownToggle>
<DropdownMenu>
<DropdownItem
on:click={() => (status = WordStatus.Favourite)}
active={status === WordStatus.Favourite}>Favourite</DropdownItem
>
<DropdownItem on:click={() => (status = WordStatus.Okay)} active={status === WordStatus.Okay}
>Okay</DropdownItem
>
<DropdownItem
on:click={() => (status = WordStatus.Jokingly)}
active={status === WordStatus.Jokingly}>Jokingly</DropdownItem
>
<DropdownItem
on:click={() => (status = WordStatus.FriendsOnly)}
active={status === WordStatus.FriendsOnly}>Friends only</DropdownItem
>
<DropdownItem
on:click={() => (status = WordStatus.Avoid)}
active={status === WordStatus.Avoid}>Avoid</DropdownItem
>
</DropdownMenu>
</ButtonDropdown>
<IconButton color="danger" icon="trash3" tooltip="Remove entry" click={remove} />
</div>

141
frontend/src/routes/edit/profile/+page.svelte
View file

@ -12,11 +12,21 @@
} from "$lib/api/entities";
import FallbackImage from "$lib/components/FallbackImage.svelte";
import { userStore } from "$lib/store";
import { Alert, Button, FormGroup, Icon, Input } from "sveltestrap";
import {
Alert,
Button,
ButtonDropdown,
DropdownToggle,
FormGroup,
Icon,
Input,
} from "sveltestrap";
import { encode } from "base64-arraybuffer";
import { apiFetchClient } from "$lib/api/fetch";
import IconButton from "$lib/components/IconButton.svelte";
import EditableField from "../EditableField.svelte";
import EditableName from "../EditableName.svelte";
import EditablePronouns from "../EditablePronouns.svelte";
const MAX_AVATAR_BYTES = 1_000_000;
@ -284,56 +294,13 @@
<div class="col-md">
<h4>Names</h4>
{#each names as _, index}
<div class="input-group m-1">
<Button color="secondary" on:click={() => moveName(index, true)}>
<Icon name="chevron-up" />
</Button>
<Button color="secondary" on:click={() => moveName(index, false)}>
<Icon name="chevron-down" />
</Button>
<input type="text" class="form-control" bind:value={names[index].value} />
<IconButton
color="secondary"
icon="heart-fill"
tooltip="Favourite"
click={() => (names[index].status = WordStatus.Favourite)}
active={names[index].status === WordStatus.Favourite}
/>
<IconButton
color="secondary"
icon="hand-thumbs-up"
tooltip="Okay"
click={() => (names[index].status = WordStatus.Okay)}
active={names[index].status === WordStatus.Okay}
/>
<IconButton
color="secondary"
icon="emoji-laughing"
tooltip="Jokingly"
click={() => (names[index].status = WordStatus.Jokingly)}
active={names[index].status === WordStatus.Jokingly}
/>
<IconButton
color="secondary"
icon="people"
tooltip="Friends only"
click={() => (names[index].status = WordStatus.FriendsOnly)}
active={names[index].status === WordStatus.FriendsOnly}
/>
<IconButton
color="secondary"
icon="hand-thumbs-down"
tooltip="Avoid"
click={() => (names[index].status = WordStatus.Avoid)}
active={names[index].status === WordStatus.Avoid}
/>
<IconButton
color="danger"
icon="trash3"
tooltip="Remove name"
click={() => removeName(index)}
/>
</div>
<EditableName
bind:value={names[index].value}
bind:status={names[index].status}
moveUp={() => moveName(index, true)}
moveDown={() => moveName(index, false)}
remove={() => removeName(index)}
/>
{/each}
<div class="input-group m-1">
<input type="text" class="form-control" bind:value={newName} />
@ -363,61 +330,27 @@
<div class="col-md">
<h4>Pronouns</h4>
{#each pronouns as _, index}
<div class="input-group m-1">
<Button color="secondary" on:click={() => movePronoun(index, true)}>
<Icon name="chevron-up" />
</Button>
<Button color="secondary" on:click={() => movePronoun(index, false)}>
<Icon name="chevron-down" />
</Button>
<input type="text" class="form-control" bind:value={pronouns[index].pronouns} />
<input type="text" class="form-control" bind:value={pronouns[index].display_text} />
<IconButton
color="secondary"
icon="heart-fill"
tooltip="Favourite"
click={() => (pronouns[index].status = WordStatus.Favourite)}
active={pronouns[index].status === WordStatus.Favourite}
/>
<IconButton
color="secondary"
icon="hand-thumbs-up"
tooltip="Okay"
click={() => (pronouns[index].status = WordStatus.Okay)}
active={pronouns[index].status === WordStatus.Okay}
/>
<IconButton
color="secondary"
icon="emoji-laughing"
tooltip="Jokingly"
click={() => (pronouns[index].status = WordStatus.Jokingly)}
active={pronouns[index].status === WordStatus.Jokingly}
/>
<IconButton
color="secondary"
icon="people"
tooltip="Friends only"
click={() => (pronouns[index].status = WordStatus.FriendsOnly)}
active={pronouns[index].status === WordStatus.FriendsOnly}
/>
<IconButton
color="secondary"
icon="hand-thumbs-down"
tooltip="Avoid"
click={() => (pronouns[index].status = WordStatus.Avoid)}
active={pronouns[index].status === WordStatus.Avoid}
/>
<IconButton
color="danger"
icon="trash3"
tooltip="Remove pronouns"
click={() => removePronoun(index)}
/>
</div>
<EditablePronouns
bind:pronoun={pronouns[index]}
moveUp={() => movePronoun(index, true)}
moveDown={() => movePronoun(index, false)}
remove={() => removePronoun(index)}
/>
{/each}
<div class="input-group m-1">
<input type="text" class="form-control" bind:value={newPronouns} />
<input type="text" class="form-control" bind:value={newPronounsDisplay} />
<input
type="text"
class="form-control"
placeholder="Full set (e.g. it/it/its/its/itself)"
bind:value={newPronouns}
required
/>
<input
type="text"
class="form-control"
placeholder="Optional display text (e.g. it/its)"
bind:value={newPronounsDisplay}
/>
<IconButton
color="success"
icon="plus"