Skip to content

Commit 39ec0a8

Browse files
dvcoldvcol
committed
feat(settings): adds account cards in settings
1 parent 211cf66 commit 39ec0a8

16 files changed

+382
-66
lines changed

‎src/components/views/panel/PanelDetail.vue ‎src/components/common/typography/TextField.vue

+38-8
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,20 @@ defineProps({
1212
type: String,
1313
required: true,
1414
},
15+
labelWidth: {
16+
type: String,
17+
required: false,
18+
default: '2.5rem',
19+
},
1520
value: {
1621
type: [String, Number, Boolean],
1722
required: false,
1823
},
24+
flex: {
25+
type: String,
26+
required: false,
27+
default: 'flex: 0 1 31.5%',
28+
},
1929
values: {
2030
type: Array as PropType<TagLink[]>,
2131
required: false,
@@ -28,6 +38,10 @@ defineProps({
2838
type: Boolean,
2939
required: false,
3040
},
41+
pre: {
42+
type: Boolean,
43+
required: false,
44+
},
3145
skeleton: {
3246
type: Object as PropType<SkeletonProps>,
3347
required: false,
@@ -38,10 +52,16 @@ const { openTab } = useLinksStore();
3852
</script>
3953

4054
<template>
41-
<NFlex class="detail" :class="{ grow, array }" align="center">
55+
<NFlex
56+
class="detail"
57+
:class="{ grow, array }"
58+
:style="{ '--prefix-min-width': labelWidth, '--text-flex': flex }"
59+
align="baseline"
60+
:wrap="false"
61+
>
4262
<span class="prefix">{{ label }}</span>
43-
<template v-if="array">
44-
<template v-if="values">
63+
<NFlex v-if="array" class="value">
64+
<template v-if="values !== undefined">
4565
<TagLinkComponent
4666
v-for="(tag, i) of values"
4767
:key="i"
@@ -54,24 +74,30 @@ const { openTab } = useLinksStore();
5474
<NSkeleton round v-bind="skeleton" />
5575
<NSkeleton round v-bind="skeleton" />
5676
</template>
57-
</template>
77+
</NFlex>
5878
<template v-else>
59-
<span v-if="value">{{ value }}</span>
60-
<NSkeleton v-else round v-bind="skeleton" />
79+
<span v-if="value !== undefined" class="value" :class="{ pre }">{{ value }}</span>
80+
<NSkeleton v-else :repeat="pre ? 3 : 0" round v-bind="skeleton" />
6181
</template>
6282
</NFlex>
6383
</template>
6484

6585
<style lang="scss" scoped>
6686
.prefix {
67-
min-width: 2.5rem;
87+
flex: 0 0 auto;
88+
min-width: var(--prefix-min-width);
6889
color: var(--white-50);
6990
font-weight: 600;
7091
transition: color 0.3s var(--n-bezier);
7192
}
7293
94+
.value {
95+
flex: 1 1 auto;
96+
}
97+
7398
.detail {
74-
flex: 0 1 31.5%;
99+
flex: var(--text-flex);
100+
align-items: baseline;
75101
76102
&:hover .prefix {
77103
color: var(--white-70);
@@ -85,5 +111,9 @@ const { openTab } = useLinksStore();
85111
flex: 1 1 auto;
86112
width: 100%;
87113
}
114+
115+
.pre {
116+
white-space: pre-wrap;
117+
}
88118
}
89119
</style>

‎src/components/views/panel/MoviePanelDetails.vue

+8-12
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ import { computed, type PropType, toRefs } from 'vue';
44
55
import type { TraktMovieExtended } from '~/models/trakt/trakt-movie.model';
66
7+
import TextField from '~/components/common/typography/TextField.vue';
78
import PanelAlias from '~/components/views/panel/PanelAlias.vue';
8-
import PanelDetail from '~/components/views/panel/PanelDetail.vue';
99
1010
import PanelLinks from '~/components/views/panel/PanelLinks.vue';
1111
import { useLinksStore } from '~/stores/settings/links.store';
@@ -81,40 +81,36 @@ const movieTitle = computed(() => deCapitalise(movie?.value?.title));
8181
<NFlex size="large" class="container" vertical>
8282
<NFlex class="row" size="large">
8383
<!-- Release date -->
84-
<PanelDetail
84+
<TextField
8585
:label="i18n('released')"
8686
:value="releasedDate"
8787
:skeleton="{ width: '5.125rem' }"
8888
/>
8989

9090
<!-- Year -->
91-
<PanelDetail :label="i18n('year')" :value="year" :skeleton="{ width: '2.25rem' }" />
91+
<TextField :label="i18n('year')" :value="year" :skeleton="{ width: '2.25rem' }" />
9292

9393
<!-- Country -->
94-
<PanelDetail
95-
:label="i18n('country')"
96-
:value="country"
97-
:skeleton="{ width: '2ch' }"
98-
/>
94+
<TextField :label="i18n('country')" :value="country" :skeleton="{ width: '2ch' }" />
9995
</NFlex>
10096

10197
<NFlex class="row" size="large">
10298
<!-- Release Time -->
103-
<PanelDetail
99+
<TextField
104100
:label="i18n('released_time')"
105101
:value="releasedTime"
106102
:skeleton="{ width: '5.125rem' }"
107103
/>
108104

109105
<!-- Runtime -->
110-
<PanelDetail
106+
<TextField
111107
:label="i18n('runtime')"
112108
:value="runtime"
113109
:skeleton="{ width: '3.75rem' }"
114110
/>
115111

116112
<!-- Status -->
117-
<PanelDetail
113+
<TextField
118114
:label="i18n('status')"
119115
:value="status"
120116
:skeleton="{ width: '7.5rem' }"
@@ -131,7 +127,7 @@ const movieTitle = computed(() => deCapitalise(movie?.value?.title));
131127

132128
<NFlex class="lists" vertical size="large">
133129
<!-- Genres -->
134-
<PanelDetail
130+
<TextField
135131
:label="i18n('genres')"
136132
:values="genres"
137133
:skeleton="{ width: '3rem' }"

‎src/components/views/panel/PanelAlias.vue

+3-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ import { computed, nextTick, type PropType, ref, toRefs } from 'vue';
44
55
import type { InputInst } from 'naive-ui';
66
7-
import PanelDetail from '~/components/views/panel/PanelDetail.vue';
7+
import TextField from '~/components/common/typography/TextField.vue';
8+
89
import {
910
type AliasScope,
1011
useLinksStore,
@@ -81,7 +82,7 @@ const i18n = useI18n('panel', 'alias');
8182
</NInput>
8283

8384
<!-- Alias -->
84-
<PanelDetail
85+
<TextField
8586
v-else
8687
class="alias-detail"
8788
:label="i18n('label')"

‎src/components/views/panel/PanelLinks.vue

+2-7
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@ import { computed, type PropType, toRefs } from 'vue';
44
import type { TagLink } from '~/models/tag.model';
55
import type { TraktApiIds } from '~/models/trakt/trakt-id.model';
66
7+
import TextField from '~/components/common/typography/TextField.vue';
78
import IconExternalLinkRounded from '~/components/icons/IconExternalLinkRounded.vue';
89
import IconIMDb from '~/components/icons/IconIMDb.vue';
910
import IconTMDb from '~/components/icons/IconTMDb.vue';
1011
import IconTVDb from '~/components/icons/IconTVDb.vue';
1112
import IconTrakt from '~/components/icons/IconTrakt.vue';
12-
import PanelDetail from '~/components/views/panel/PanelDetail.vue';
1313
1414
import { ResolveExternalLinks } from '~/settings/external.links';
1515
import { resolveLinkUrl, useLinksStore } from '~/stores/settings/links.store';
@@ -146,10 +146,5 @@ const links = computed(() => {
146146
</script>
147147

148148
<template>
149-
<PanelDetail
150-
:label="i18n('links')"
151-
:values="links"
152-
:skeleton="{ width: '3rem' }"
153-
array
154-
/>
149+
<TextField :label="i18n('links')" :values="links" :skeleton="{ width: '3rem' }" array />
155150
</template>

‎src/components/views/panel/PersonPanelDetails.vue

+7-7
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@ import { computed, type PropType, toRefs } from 'vue';
55
import type { TagLink } from '~/models/tag.model';
66
import type { TraktPersonExtended } from '~/models/trakt/trakt-people.model';
77
8+
import TextField from '~/components/common/typography/TextField.vue';
89
import IconExternalLinkRounded from '~/components/icons/IconExternalLinkRounded.vue';
910
import IconFacebook from '~/components/icons/IconFacebook.vue';
1011
import IconInstagram from '~/components/icons/IconInstagram.vue';
1112
import IconTwitter from '~/components/icons/IconTwitter.vue';
1213
import IconWikipedia from '~/components/icons/IconWikipedia.vue';
13-
import PanelDetail from '~/components/views/panel/PanelDetail.vue';
1414
1515
import PanelLinks from '~/components/views/panel/PanelLinks.vue';
1616
import { ResolveExternalLinks } from '~/settings/external.links';
@@ -110,21 +110,21 @@ const socials = computed(() => {
110110
<NFlex size="large" class="container" vertical>
111111
<NFlex class="row" size="large">
112112
<!-- Known For -->
113-
<PanelDetail
113+
<TextField
114114
:label="i18n('known_for')"
115115
:value="knownFor"
116116
:skeleton="{ width: '5rem' }"
117117
/>
118118

119119
<!-- Birthday -->
120-
<PanelDetail
120+
<TextField
121121
:label="i18n('birthday')"
122122
:value="birthday"
123123
:skeleton="{ width: '5.125rem' }"
124124
/>
125125

126126
<!-- Death -->
127-
<PanelDetail
127+
<TextField
128128
:label="i18n('death')"
129129
:value="death"
130130
:skeleton="{ width: '5.125rem' }"
@@ -134,10 +134,10 @@ const socials = computed(() => {
134134

135135
<NFlex class="row" size="large">
136136
<!-- Age -->
137-
<PanelDetail :label="i18n('age')" :value="age" :skeleton="{ width: '3ch' }" />
137+
<TextField :label="i18n('age')" :value="age" :skeleton="{ width: '3ch' }" />
138138

139139
<!-- Birth place -->
140-
<PanelDetail
140+
<TextField
141141
:label="i18n('birthplace')"
142142
:value="birthplace"
143143
:skeleton="{ width: '12rem' }"
@@ -147,7 +147,7 @@ const socials = computed(() => {
147147

148148
<NFlex class="lists" vertical size="large">
149149
<!-- socials -->
150-
<PanelDetail
150+
<TextField
151151
:label="i18n('socials')"
152152
:values="socials"
153153
:skeleton="{ width: '3rem' }"

‎src/components/views/panel/ShowPanelDetails.vue

+11-15
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ import type { TraktEpisodeExtended } from '~/models/trakt/trakt-episode.model';
66
import type { TraktSeasonExtended } from '~/models/trakt/trakt-season.model';
77
import type { TraktShowExtended } from '~/models/trakt/trakt-show.model';
88
9+
import TextField from '~/components/common/typography/TextField.vue';
910
import PanelAlias from '~/components/views/panel/PanelAlias.vue';
10-
import PanelDetail from '~/components/views/panel/PanelDetail.vue';
1111
1212
import PanelLinks from '~/components/views/panel/PanelLinks.vue';
1313
import { useLinksStore } from '~/stores/settings/links.store';
@@ -150,17 +150,13 @@ const title = computed(() =>
150150
<NFlex size="large" class="container" vertical>
151151
<NFlex class="row" size="large">
152152
<!-- Show Year -->
153-
<PanelDetail :label="i18n('year')" :value="year" :skeleton="{ width: '2.25rem' }" />
153+
<TextField :label="i18n('year')" :value="year" :skeleton="{ width: '2.25rem' }" />
154154

155155
<!-- Show Country -->
156-
<PanelDetail
157-
:label="i18n('country')"
158-
:value="country"
159-
:skeleton="{ width: '2ch' }"
160-
/>
156+
<TextField :label="i18n('country')" :value="country" :skeleton="{ width: '2ch' }" />
161157

162158
<!-- Show Network -->
163-
<PanelDetail
159+
<TextField
164160
:label="i18n('network')"
165161
:value="network"
166162
grow
@@ -170,21 +166,21 @@ const title = computed(() =>
170166

171167
<NFlex class="row" size="large">
172168
<!-- Air date -->
173-
<PanelDetail
169+
<TextField
174170
:label="i18n('aired')"
175171
:value="airedDate"
176172
:skeleton="{ width: '5.125rem' }"
177173
/>
178174

179175
<!-- Runtime -->
180-
<PanelDetail
176+
<TextField
181177
:label="i18n('runtime')"
182178
:value="runtime"
183179
:skeleton="{ width: '3.75rem' }"
184180
/>
185181

186182
<!-- Show Status -->
187-
<PanelDetail
183+
<TextField
188184
:label="i18n('status')"
189185
:value="status"
190186
grow
@@ -194,22 +190,22 @@ const title = computed(() =>
194190

195191
<NFlex class="row" size="large">
196192
<!-- Air Time -->
197-
<PanelDetail
193+
<TextField
198194
:label="i18n('aired_time')"
199195
:value="airedTime"
200196
:skeleton="{ width: '5.125rem' }"
201197
/>
202198

203199
<!-- Season aired episodes -->
204-
<PanelDetail
200+
<TextField
205201
v-if="mode !== 'show'"
206202
:label="i18n('aired_episodes')"
207203
:value="airedEpisodes"
208204
:skeleton="{ width: '3rem' }"
209205
/>
210206

211207
<!-- Episode Type -->
212-
<PanelDetail
208+
<TextField
213209
v-if="mode === 'episode'"
214210
:label="i18n('type')"
215211
:value="episodeType"
@@ -223,7 +219,7 @@ const title = computed(() =>
223219

224220
<NFlex class="lists" vertical size="large">
225221
<!-- Genres -->
226-
<PanelDetail
222+
<TextField
227223
:label="i18n('genres')"
228224
:values="genres"
229225
:skeleton="{ width: '3rem' }"

0 commit comments

Comments
 (0)