liz/PluralKit
liz/PluralKit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

tweak(dashboard): add html color pickers to all color fields

Browse Source
This commit is contained in:
Jake Fulmine 2023-06-03 12:45:22 +02:00
parent 99e6dc9d23
commit 3b0a7626de
4 changed files with 32 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
dashboard/src/components/group/Edit.svelte
View File

@ -118,7 +118,14 @@
</Col> </Col>
<Col xs={12} lg={4} class="mb-2"> <Col xs={12} lg={4} class="mb-2">
<Label>Color:</Label> <Label>Color:</Label>
<Input bind:value={input.color} type="text" placeholder={group.color} aria-label="group color"/> <Row>
<Col xs={9}>
<Input type="text" bind:value={input.color} aria-label="group color value"/>
</Col>
<Col>
<Input class="p-0 w-100" on:change={(e) => input.color = e.target.value.slice(1, 7)} type="color" aria-label="color picker" />
</Col>
</Row>
</Col> </Col>
<Col xs={12} lg={4} class="mb-2"> <Col xs={12} lg={4} class="mb-2">
<Label>Icon url:</Label> <Label>Icon url:</Label>

9
dashboard/src/components/group/NewGroup.svelte
View File

@ -95,7 +95,14 @@
</Col> </Col>
<Col xs={12} lg={4} class="mb-2"> <Col xs={12} lg={4} class="mb-2">
<Label>Color:</Label> <Label>Color:</Label>
<Input bind:value={input.color} type="text"/> <Row>
<Col xs={9}>
<Input type="text" bind:value={input.color} aria-label="group color value"/>
</Col>
<Col>
<Input class="p-0 w-100" on:change={(e) => input.color = e.target.value.slice(1, 7)} type="color" aria-label="color picker" />
</Col>
</Row>
</Col> </Col>
<Col xs={12} lg={4} class="mb-2"> <Col xs={12} lg={4} class="mb-2">
<Label>Icon url:</Label> <Label>Icon url:</Label>

9
dashboard/src/components/member/Edit.svelte
View File

@ -149,7 +149,14 @@
</Col> </Col>
<Col xs={12} lg={4} class="mb-2"> <Col xs={12} lg={4} class="mb-2">
<Label>Color:</Label> <Label>Color:</Label>
<Input bind:value={input.color} type="text" placeholder={member.color} aria-label="member color" /> <Row>
<Col xs={9}>
<Input type="text" bind:value={input.color} aria-label="member color value"/>
</Col>
<Col>
<Input class="p-0 w-100" on:change={(e) => input.color = e.target.value.slice(1, 7)} type="color" aria-label="color picker" />
</Col>
</Row>
</Col> </Col>
<Col xs={12} lg={4} class="mb-2"> <Col xs={12} lg={4} class="mb-2">
<Label>Avatar url:</Label> <Label>Avatar url:</Label>

9
dashboard/src/components/member/NewMember.svelte
View File

@ -139,7 +139,14 @@
</Col> </Col>
<Col xs={12} lg={4} class="mb-2"> <Col xs={12} lg={4} class="mb-2">
<Label>Color:</Label> <Label>Color:</Label>
<Input bind:value={input.color} type="text" placeholder={input.color}/> <Row>
<Col xs={9}>
<Input type="text" bind:value={input.color} aria-label="member color value"/>
</Col>
<Col>
<Input class="p-0 w-100" on:change={(e) => input.color = e.target.value.slice(1, 7)} type="color" aria-label="color picker" />
</Col>
</Row>
</Col> </Col>
<Col xs={12} lg={4} class="mb-2"> <Col xs={12} lg={4} class="mb-2">
<Label>Avatar url:</Label> <Label>Avatar url:</Label>