Skip to content

Commit 7d887d8

Browse files
LaurentTreguierLaurentTreguier
committed
Add external links
1 parent ebab2ea commit 7d887d8

File tree

7 files changed

+153
-74
lines changed

7 files changed

+153
-74
lines changed

‎src/lib/components/inputs/image-picker.svelte

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<script lang="ts">
22
import { createEventDispatcher } from 'svelte';
3-
import { t } from 'i18next';
3+
4+
export let title: string;
45
56
const dispatch = createEventDispatcher();
67
let input: HTMLInputElement;
@@ -29,7 +30,7 @@
2930
</script>
3031

3132
<label
32-
title={t('components.image-picker')}
33+
{title}
3334
class="image-picker"
3435
on:dragover|preventDefault={onDragOver}
3536
on:drop|preventDefault={onDrop}

‎src/lib/components/list.svelte

+47-24
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,11 @@
33
</script>
44

55
<table class="list" class:borderless>
6+
<thead>
7+
<slot name="header" />
8+
</thead>
69
<tbody>
7-
<slot />
10+
<slot name="body" />
811
</tbody>
912
</table>
1013

@@ -34,43 +37,63 @@
3437
border-radius: 1em;
3538
border-spacing: 0;
3639
37-
&:not(.borderless) {
38-
@include borders;
39-
}
40-
4140
@include expanded-width {
4241
width: unset;
4342
min-width: 600px;
44-
45-
@include borders;
4643
}
4744
48-
:global(tr:not(:last-child) td) {
49-
border-bottom: 2px solid var(--color-border);
50-
}
45+
thead {
46+
font-weight: bold;
5147
52-
:global(tr:first-child td:first-child) {
53-
border-top-left-radius: 1em;
48+
:global(td) {
49+
padding: 1em 1em;
50+
}
5451
}
5552
56-
:global(tr:first-child td:last-child) {
57-
border-top-right-radius: 1em;
58-
}
53+
&.borderless thead :global(td) {
54+
border-bottom: 1px solid var(--color-border);
5955
60-
:global(tr:last-child td:first-child) {
61-
border-bottom-left-radius: 1em;
56+
@include expanded-width {
57+
border-bottom: unset;
58+
}
6259
}
6360
64-
:global(tr:last-child td:last-child) {
65-
border-bottom-right-radius: 1em;
61+
&:not(.borderless) tbody {
62+
@include borders;
6663
}
6764
68-
:global(td) {
69-
padding: 1em;
70-
}
65+
tbody {
66+
@include expanded-width {
67+
@include borders;
68+
}
69+
70+
:global(tr:not(:last-child) td) {
71+
border-bottom: 1px solid var(--color-border);
72+
}
73+
74+
:global(tr:first-child td:first-child) {
75+
border-top-left-radius: 1em;
76+
}
77+
78+
:global(tr:first-child td:last-child) {
79+
border-top-right-radius: 1em;
80+
}
81+
82+
:global(tr:last-child td:first-child) {
83+
border-bottom-left-radius: 1em;
84+
}
85+
86+
:global(tr:last-child td:last-child) {
87+
border-bottom-right-radius: 1em;
88+
}
89+
90+
:global(td) {
91+
padding: 1em;
92+
}
7193
72-
:global(td:last-child) {
73-
text-align: right;
94+
:global(td:last-child:not(:first-child)) {
95+
text-align: right;
96+
}
7497
}
7598
}
7699
</style>

‎src/lib/data/translations.json

+17-8
Original file line numberDiff line numberDiff line change
@@ -37,13 +37,23 @@
3737
"register": "Sign up"
3838
},
3939
"settings": {
40-
"avatar": {
41-
"change": "Change avatar",
42-
"remove": "Remove avatar"
40+
"profile": {
41+
"header": "Profile",
42+
"avatar": {
43+
"change": "Change avatar",
44+
"remove": "Remove avatar"
45+
},
46+
"username": "Username",
47+
"dateJoined": "Date joined",
48+
"logout": "Logout"
49+
},
50+
"about": {
51+
"header": "About",
52+
"website": "Website",
53+
"termsOfService": "Terms of service",
54+
"privacyPolicy": "Privacy policy",
55+
"sourceCode": "Source code"
4356
},
44-
"username": "Username",
45-
"dateJoined": "Date joined",
46-
"logout": "Logout",
4757
"errors": {
4858
"413": {
4959
"title": "File too large",
@@ -128,8 +138,7 @@
128138
}
129139
},
130140
"components": {
131-
"avatar": "Avatar",
132-
"image-picker": "Image picker"
141+
"avatar": "Avatar"
133142
}
134143
}
135144
}

‎src/lib/data/urls.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
"info": {
88
"website": "https://fyreplace.net",
99
"termsOfService": "https://fyreplace.net/terms-of-service",
10-
"privacyPolicy": "https://fyreplace.net/privacy-policy"
10+
"privacyPolicy": "https://fyreplace.net/privacy-policy",
11+
"sourceCode": "https://github.com/fyreplace"
1112
}
1213
}

‎src/routes/settings/+page.svelte

+78-34
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import { onMount } from 'svelte';
33
import { writable } from 'svelte/store';
44
import { t } from 'i18next';
5+
import { info } from '$lib/data/urls.json';
56
import { navigate, Destination } from '$lib/destinations';
67
import { DisplayableError } from '$lib/events';
78
import { call, getUsersClient } from '$lib/openapi';
@@ -91,40 +92,77 @@
9192
{#if $token}
9293
<div class="destination">
9394
<List borderless>
94-
<tr>
95-
<td>
96-
<div class="avatar-wrapper">
97-
<EditableAvatar user={currentUser} on:file={updateAvatar} />
98-
</div>
99-
</td>
100-
<td>
101-
<Button
102-
type="button"
103-
disabled={!currentUser?.avatar}
104-
loading={isAvatarLoading}
105-
on:click={removeAvatar}
106-
>
107-
{t('settings.avatar.remove')}
108-
</Button>
109-
</td>
110-
</tr>
111-
<tr>
112-
<td>{t('settings.username')}</td>
113-
<td title={t('settings.username')} class="username">
114-
{currentUser?.username ?? t('loading')}
115-
</td>
116-
</tr>
117-
<tr>
118-
<td>{t('settings.dateJoined')}</td>
119-
<td title={t('settings.dateJoined')}>
120-
{currentUser?.dateCreated.toLocaleString() ?? t('loading')}
121-
</td>
122-
</tr>
123-
<tr>
124-
<td colspan="2">
125-
<Button type="button" on:click={logout}>{t('settings.logout')}</Button>
126-
</td>
127-
</tr>
95+
<svelte:fragment slot="header">
96+
<tr>
97+
<td colspan="2">{t('settings.profile.header')}</td>
98+
</tr>
99+
</svelte:fragment>
100+
<svelte:fragment slot="body">
101+
<tr>
102+
<td>
103+
<div class="avatar-wrapper">
104+
<EditableAvatar user={currentUser} on:file={updateAvatar} />
105+
</div>
106+
</td>
107+
<td>
108+
<Button
109+
type="button"
110+
disabled={!currentUser?.avatar}
111+
loading={isAvatarLoading}
112+
on:click={removeAvatar}
113+
>
114+
{t('settings.profile.avatar.remove')}
115+
</Button>
116+
</td>
117+
</tr>
118+
<tr>
119+
<td>{t('settings.profile.username')}</td>
120+
<td title={t('settings.profile.username')} class="username">
121+
{currentUser?.username ?? t('loading')}
122+
</td>
123+
</tr>
124+
<tr>
125+
<td>{t('settings.profile.dateJoined')}</td>
126+
<td title={t('settings.profile.dateJoined')}>
127+
{currentUser?.dateCreated.toLocaleString() ?? t('loading')}
128+
</td>
129+
</tr>
130+
<tr>
131+
<td colspan="2" class="logout">
132+
<Button type="button" on:click={logout}>{t('settings.profile.logout')}</Button>
133+
</td>
134+
</tr>
135+
</svelte:fragment>
136+
</List>
137+
138+
<List borderless>
139+
<svelte:fragment slot="header">
140+
<tr>
141+
<td colspan="2">{t('settings.about.header')}</td>
142+
</tr>
143+
</svelte:fragment>
144+
<svelte:fragment slot="body">
145+
<tr>
146+
<td>
147+
<a href={info.website} target="_blank">{t('settings.about.website')}</a>
148+
</td>
149+
</tr>
150+
<tr>
151+
<td>
152+
<a href={info.termsOfService} target="_blank">{t('settings.about.termsOfService')}</a>
153+
</td>
154+
</tr>
155+
<tr>
156+
<td>
157+
<a href={info.privacyPolicy} target="_blank">{t('settings.about.privacyPolicy')}</a>
158+
</td>
159+
</tr>
160+
<tr>
161+
<td>
162+
<a href={info.sourceCode} target="_blank">{t('settings.about.sourceCode')}</a>
163+
</td>
164+
</tr>
165+
</svelte:fragment>
128166
</List>
129167
</div>
130168
{/if}
@@ -136,8 +174,10 @@
136174
width: 100%;
137175
box-sizing: border-box;
138176
display: flex;
177+
flex-direction: column;
139178
align-items: center;
140179
justify-content: center;
180+
gap: 2em;
141181
142182
@include expanded-width {
143183
padding: 2em;
@@ -155,4 +195,8 @@
155195
.username {
156196
font-weight: bold;
157197
}
198+
199+
.logout {
200+
text-align: center;
201+
}
158202
</style>

‎src/routes/settings/editable-avatar.svelte

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<script lang="ts">
2+
import { t } from 'i18next';
23
import type { User } from '$lib/openapi/generated';
34
import Avatar from '$lib/components/avatar.svelte';
45
import ImagePicker from '$lib/components/inputs/image-picker.svelte';
@@ -8,7 +9,7 @@
89
export let user: User | null = null;
910
</script>
1011

11-
<ImagePicker on:file>
12+
<ImagePicker title={t('settings.profile.avatar.change')} on:file>
1213
<Avatar {user} size={100} />
1314
<span class="edit-icon">
1415
<Icon size="32px"><EditIcon /></Icon>

‎src/routes/settings/page.test.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ test('Updating avatar with too large image produces a failure', async () => {
2626
const user = userEvent.setup();
2727
const bus = eventBus as StoringEventBus;
2828
render(Page);
29-
const imagePicker = screen.getByTitle('Image picker');
29+
const imagePicker = screen.getByTitle('Change avatar');
3030

3131
await user.upload(imagePicker, FakeUsersEndpointApi.largeImageFile);
3232
const avatar = screen.queryByTitle<HTMLImageElement>('Avatar');
@@ -38,7 +38,7 @@ test('Updating avatar with invalid image produces a failure', async () => {
3838
const user = userEvent.setup();
3939
const bus = eventBus as StoringEventBus;
4040
render(Page);
41-
const imagePicker = screen.getByTitle('Image picker');
41+
const imagePicker = screen.getByTitle('Change avatar');
4242

4343
await user.upload(imagePicker, FakeUsersEndpointApi.notImageFile);
4444
const avatar = screen.queryByTitle<HTMLImageElement>('Avatar');
@@ -49,7 +49,7 @@ test('Updating avatar with invalid image produces a failure', async () => {
4949
test('Updating avatar with valid image produces no failures', async () => {
5050
const user = userEvent.setup();
5151
render(Page);
52-
const imagePicker = screen.getByTitle('Image picker');
52+
const imagePicker = screen.getByTitle('Change avatar');
5353

5454
await user.upload(imagePicker, FakeUsersEndpointApi.normalImageFile);
5555
const avatar = screen.getByTitle<HTMLImageElement>('Avatar');
@@ -59,7 +59,7 @@ test('Updating avatar with valid image produces no failures', async () => {
5959
test('Removing avatar produces no failures', async () => {
6060
const user = userEvent.setup();
6161
render(Page);
62-
const imagePicker = screen.getByTitle('Image picker');
62+
const imagePicker = screen.getByTitle('Change avatar');
6363
const remove = screen.getByRole('button', { name: 'Remove avatar' });
6464
await user.upload(imagePicker, FakeUsersEndpointApi.normalImageFile);
6565

0 commit comments

Comments
 (0)