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

feat: add names/pronouns/field entries on enter

Browse source
This commit is contained in:
Sam 2023-03-31 00:11:28 +02:00
parent b1e267cb29
commit ba48ba0eb2
Signed by: sam
GPG key ID: B4EF20DDE721CAA1
5 changed files with 97 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -148,12 +148,16 @@
fields[newIndex] = temp;
};
const addName = () => {
const addName = (event: Event) => {
event.preventDefault();
names = [...names, { value: newName, status: WordStatus.Okay }];
newName = "";
};
const addPronouns = () => {
const addPronouns = (event: Event) => {
event.preventDefault();
if (newPronouns in data.pronouns) {
const fullSet = data.pronouns[newPronouns];
pronouns = [
@ -173,7 +177,9 @@
newPronouns = "";
};
const addLink = () => {
const addLink = (event: Event) => {
event.preventDefault();
links = [...links, newLink];
newLink = "";
};
@ -297,9 +303,10 @@
<Input bind:value={display_name} />
</FormGroup>
<div>
<FormGroup floating label="Bio ({bio.length}/{MAX_DESCRIPTION_LENGTH})">
<textarea style="min-height: 100px;" class="form-control" bind:value={bio} />
</FormGroup>
<div class="form">
<label for="bio"><strong>Bio ({bio.length}/{MAX_DESCRIPTION_LENGTH})</strong></label>
<textarea class="form-control" style="height: 200px;" id="bio" bind:value={bio} />
</div>
<p class="text-muted mt-3">
<Icon name="info-circle-fill" aria-hidden /> Your bio supports limited
<a
@ -324,10 +331,10 @@
remove={() => removeName(index)}
/>
{/each}
<div class="input-group m-1">
<form class="input-group m-1" on:submit={addName}>
<input type="text" class="form-control" bind:value={newName} />
<IconButton color="success" icon="plus" tooltip="Add name" click={() => addName()} />
</div>
<IconButton type="submit" color="success" icon="plus" tooltip="Add name" />
</form>
</div>
<div class="col-md">
<h4>Links</h4>
@ -342,10 +349,10 @@
/>
</div>
{/each}
<div class="input-group m-1">
<form class="input-group m-1" on:submit={addLink}>
<input type="text" class="form-control" bind:value={newLink} />
<IconButton color="success" icon="plus" tooltip="Add link" click={() => addLink()} />
</div>
<IconButton type="submit" color="success" icon="plus" tooltip="Add link" />
</form>
</div>
</div>
<div class="row m-1">
@ -359,7 +366,7 @@
remove={() => removePronoun(index)}
/>
{/each}
<div class="input-group m-1">
<form class="input-group m-1" on:submit={addPronouns}>
<input
type="text"
class="form-control"
@ -368,18 +375,18 @@
required
/>
<IconButton
type="submit"
color="success"
icon="plus"
tooltip="Add pronouns"
disabled={newPronouns === ""}
click={() => addPronouns()}
/>
<Button id="pronouns-help" color="secondary"><Icon name="question" /></Button>
<Popover target="pronouns-help" placement="bottom">
For common pronouns, the short form (e.g. "she/her" or "he/him") is enough; for less
common pronouns, you will have to use all five forms (e.g. "ce/cir/cir/cirs/cirself").
</Popover>
</div>
</form>
</div>
</div>
<hr />