Skip to content

Commit abc25b9

Browse files
gaspergromgaspergrom
authored
fix: collection color management (#3905)
Signed-off-by: Gašper Grom <gasper.grom@gmail.com>
1 parent c332703 commit abc25b9

1 file changed

Lines changed: 70 additions & 64 deletions

File tree

‎frontend/src/modules/admin/modules/collections/components/lf-collection-add.vue‎

Lines changed: 70 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -56,70 +56,6 @@
5656
</lf-field>
5757
</article>
5858

59-
<!-- Appearance section -->
60-
<div class="mb-6">
61-
<h6 class="text-sm font-semibold text-gray-500 mb-4 border-b border-gray-100 pb-2">
62-
Appearance
63-
</h6>
64-
65-
<!-- Card image URL -->
66-
<article class="mb-6">
67-
<lf-field label-text="Card image URL" :required="true">
68-
<lf-input
69-
v-model="form.imageUrl"
70-
class="h-10"
71-
placeholder="https://example.com/card-image.png"
72-
:invalid="$v.imageUrl.$invalid && $v.imageUrl.$dirty"
73-
@blur="$v.imageUrl.$touch()"
74-
@change="$v.imageUrl.$touch()"
75-
/>
76-
<lf-field-messages
77-
:validation="$v.imageUrl"
78-
:error-messages="{ url: 'Please enter a valid URL' }"
79-
/>
80-
<span class="text-2xs text-gray-400">Recommended image size: 800×240px</span>
81-
</lf-field>
82-
</article>
83-
84-
<!-- Collection logo URL -->
85-
<article class="mb-6">
86-
<lf-field label-text="Collection logo URL" :required="true">
87-
<lf-input
88-
v-model="form.logoUrl"
89-
class="h-10"
90-
placeholder="https://example.com/logo.png"
91-
:invalid="$v.logoUrl.$invalid && $v.logoUrl.$dirty"
92-
@blur="$v.logoUrl.$touch()"
93-
@change="$v.logoUrl.$touch()"
94-
/>
95-
<lf-field-messages
96-
:validation="$v.logoUrl"
97-
:error-messages="{ url: 'Please enter a valid URL' }"
98-
/>
99-
<span class="text-2xs text-gray-400">Recommended image size: 400×400px</span>
100-
</lf-field>
101-
</article>
102-
103-
<!-- Collection color -->
104-
<article class="mb-6">
105-
<lf-field label-text="Collection color">
106-
<div class="flex items-center gap-2">
107-
<span
108-
class="w-6 h-6 rounded-full flex-shrink-0 border border-gray-200"
109-
:style="{ backgroundColor: form.color || '#009AFF' }"
110-
/>
111-
<lf-input
112-
v-model="form.color"
113-
class="h-10 flex-grow"
114-
placeholder="#FE9A00"
115-
type="color"
116-
/>
117-
</div>
118-
<span class="text-2xs text-gray-400">Leave blank to use the default color #009AFF</span>
119-
</lf-field>
120-
</article>
121-
</div>
122-
12359
<!-- Category -->
12460
<article class="mb-5">
12561
<lf-field label-text="Category">
@@ -180,6 +116,76 @@
180116
/>
181117
</lf-field>
182118
</article>
119+
120+
<!-- Appearance section -->
121+
<div class="mb-6">
122+
<div class="flex items-center gap-3">
123+
<h6 class="text-sm font-primary font-semibold text-gray-500 mb-4 pb-2">
124+
Appearance
125+
</h6>
126+
<div class="border-b border-gray-100 w-full" />
127+
</div>
128+
129+
<!-- Card image URL -->
130+
<article class="mb-6">
131+
<lf-field label-text="Card image URL" :required="true">
132+
<lf-input
133+
v-model="form.imageUrl"
134+
class="h-10"
135+
placeholder="https://example.com/card-image.png"
136+
:invalid="$v.imageUrl.$invalid && $v.imageUrl.$dirty"
137+
@blur="$v.imageUrl.$touch()"
138+
@change="$v.imageUrl.$touch()"
139+
/>
140+
<lf-field-messages
141+
:validation="$v.imageUrl"
142+
:error-messages="{ url: 'Please enter a valid URL' }"
143+
/>
144+
<span class="text-2xs text-gray-400">Recommended image size: 800×240px</span>
145+
</lf-field>
146+
</article>
147+
148+
<!-- Collection logo URL -->
149+
<article class="mb-6">
150+
<lf-field label-text="Collection logo URL" :required="true">
151+
<lf-input
152+
v-model="form.logoUrl"
153+
class="h-10"
154+
placeholder="https://example.com/logo.png"
155+
:invalid="$v.logoUrl.$invalid && $v.logoUrl.$dirty"
156+
@blur="$v.logoUrl.$touch()"
157+
@change="$v.logoUrl.$touch()"
158+
/>
159+
<lf-field-messages
160+
:validation="$v.logoUrl"
161+
:error-messages="{ url: 'Please enter a valid URL' }"
162+
/>
163+
<span class="text-2xs text-gray-400">Recommended image size: 400×400px</span>
164+
</lf-field>
165+
</article>
166+
167+
<!-- Collection color -->
168+
<article class="mb-6">
169+
<lf-field label-text="Collection color">
170+
<div class="flex items-center gap-2">
171+
<lf-input
172+
v-model="form.color"
173+
class="h-10 flex-grow"
174+
placeholder="Enter HEX code"
175+
>
176+
<template #prefix>
177+
<span
178+
v-if="form.color"
179+
class="w-6 h-6 rounded-full flex-shrink-0 border border-gray-200"
180+
:style="{ backgroundColor: form.color || '#009AFF' }"
181+
/>
182+
</template>
183+
</lf-input>
184+
</div>
185+
<span class="text-2xs text-gray-400">Leave blank to use the default color #009AFF</span>
186+
</lf-field>
187+
</article>
188+
</div>
183189
</div>
184190
<lf-collection-add-projects-tab
185191
v-if="activeTab === 'projects'"

0 commit comments

Comments
 (0)