Skip to content

Commit 40175c4

Browse files
yaroslav8765yaroslav8765
committed
chore: add styles for date picker. fix resource list tablse styles
1 parent 228ac64 commit 40175c4

File tree

6 files changed

+204
-23
lines changed

6 files changed

+204
-23
lines changed

‎adminforth/modules/styles.ts

Lines changed: 31 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -42,10 +42,10 @@ export const styles = () => ({
4242
lightListTablePaginationBackgoroundHover: "#F3F4F6",
4343
lightListTablePaginationBorder: "#D1D5DB",
4444
lightListTablePaginationFocusRing: "#F3F4F6",
45-
ligthListTablePaginationText: "#111827",
46-
ligthListTablePaginationCurrentPageText: "#374151",
47-
ligthListTablePaginationTextHover: "alias:lightPrimary",
48-
ligthListTablePaginationHelpText: "#374151",
45+
lightListTablePaginationText: "#111827",
46+
lightListTablePaginationCurrentPageText: "#374151",
47+
lightListTablePaginationTextHover: "alias:lightPrimary",
48+
lightListTablePaginationHelpText: "#374151",
4949

5050
lightForm: "#ffffff", // show view background
5151
lightFormBorder: "#F5F5F5", // show view rows border
@@ -124,13 +124,26 @@ export const styles = () => ({
124124
lightInputErrorColor: "#EF4444", //color of icon and text, when error shown
125125
lightRequiredIconColor: "#9CA3AF", //requires icon color
126126

127+
127128
lightDatePickerButtonBackground: "#F9FAFB",
128129
lightDatePickerButtonText: "#111827",
129130
lightDatePickerPlaceHolder: "#9CA3AF",
130131
lightDatePickerButtonBorder: "#D1D5DB",
131132
lightDatePickerIcon: "#6B7280",
132133
lightDatePickerExpandText: "alias:lightPrimary",
133134

135+
lightDatePickerCalendarBackground: "#FFFFFF",
136+
lightDatePickerCalendarText: "#111827",
137+
lightDatePickerCalendarArrowButtonBackground: "#FFFFFF",
138+
lightDatePickerCalendarArrowButtonBackgroundHover: "#F3F4F6",
139+
lightDatePickerCalendarArrowButtonFocusRing: "#E5E7EB",
140+
lightDatePickerCalendarDaysOfWeekText: "#6B7280",
141+
lightDatePickerCalendarDateButtonText: "#111827",
142+
lightDatePickerCalendarDateButtonBackgroundHover: "#F3F4F6",
143+
lightDatePickerCalendarDateActiveButtonBackground: "#1D4ED8",
144+
lightDatePickerCalendarDateActiveButtonText: "#FFFFFF",
145+
146+
134147
lightTooltipBackground: "#111827",
135148
lightTooltipText: "#FFFFFF",
136149

@@ -400,13 +413,27 @@ export const styles = () => ({
400413
darkInputErrorColor: "#F87171",
401414
darkRequiredIconColor: "#6B7280",
402415

416+
403417
darkDatePickerButtonBackground: "#374151",
404418
darkDatePickerButtonText: "#FFFFFF",
405419
darkDatePickerPlaceHolder: "#9CA3AF",
406420
darkDatePickerButtonBorder: "#4B5563",
407421
darkDatePickerIcon: "#9CA3AF",
408422
darkDatePickerExpandText: "alias:darkPrimary",
409423

424+
darkDatePickerCalendarBackground: "#374151",
425+
darkDatePickerCalendarMainText: "#FFFFFF",
426+
darkDatePickerCalendarArrowButtonBackground: "#374151",
427+
darkDatePickerCalendarArrowButtonBackgroundHover: "#4B5563",
428+
darkDatePickerCalendarArrowButtonFocusRing: "#E5E7EB",
429+
darkDatePickerCalendarDaysOfWeekText: "#9CA3AF",
430+
darkDatePickerCalendarDateButtonText: "#FFFFFF",
431+
darkDatePickerCalendarDateActiveButtonBackground: "#2563EB",
432+
darkDatePickerCalendarDateButtonBackgroundHover: "#4B5563",
433+
darkDatePickerCalendarDateActiveButtonText: "#FFFFFF",
434+
435+
436+
410437
darkTooltipBackground: "#374151",
411438
darkTooltipText: "#FFFFFF",
412439

‎adminforth/spa/src/App.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
<div class="flex items-center ms-3 ">
2727
<span
2828
v-if="!coreStore.config?.singleTheme"
29-
@click="toggleTheme" class="cursor-pointer flex items-center gap-1 block px-4 py-2 text-sm text-black hover:bg-lightHtml dark:text-darkSidebarTextHover dark:hover:bg-darkHtml dark:hover:text-darkSidebarTextActive" role="menuitem">
29+
@click="toggleTheme" class="cursor-pointer flex items-center gap-1 block px-4 py-2 text-sm text-black dark:text-darkSidebarTextHover dark:hover:text-darkSidebarTextActive" role="menuitem">
3030
<IconMoonSolid class="w-5 h-5 text-blue-300" v-if="coreStore.theme !== 'dark'" />
3131
<IconSunSolid class="w-5 h-5 text-yellow-300" v-else />
3232
</span>

‎adminforth/spa/src/components/CustomDatePicker.vue

Lines changed: 91 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
<IconTime class="w-4 h-4 text-lightDatePickerIcon dark:text-darkDatePickerIcon bg-lightDatePickerButtonBackground dark:bg-darkDatePickerButtonBackground"/>
2626
</div>
2727

28-
<input v-model="startTime" type="time" id="start-time" onfocus="this.showPicker()" onclick="this.showPicker()" step="1"
28+
<input v-model="startTime" type="time" id="start-time" step="1"
2929
class="bg-lightDatePickerButtonBackground border border-lightDatePickerButtonBorder text-lightDatePickerButtonText text-sm rounded-lg block w-full p-2.5 dark:bg-darkInputBackground dark:border-darkInputBorder dark:placeholder-darkInputPlaceholderText dark:text-darkDatePickerButtonText focus:ring-lightInputFocusRing focus:border-lightInputFocusBorder dark:focus:ring-darkInputFocusRing dark:focus:border-darkInputFocusBorder"
3030
value="00:00" :disabled="readonly" required/>
3131
</div>
@@ -153,15 +153,15 @@ function initDatepickers() {
153153
}
154154
155155
function addChangeDateListener() {
156-
datepickerStartEl.value.addEventListener('changeDate', setStartDate)
156+
// datepickerStartEl.value.addEventListener('changeDate', setStartDate)
157157
}
158158
159159
function removeChangeDateListener() {
160160
datepickerStartEl.value.removeEventListener('changeDate', setStartDate);
161161
}
162162
163163
function destroyDatepickerElement() {
164-
datepickerObject.value.destroy();
164+
// datepickerObject.value.destroy();
165165
}
166166
167167
function setStartDate(event) {
@@ -197,4 +197,91 @@ function focus() {
197197
defineExpose({
198198
focus,
199199
});
200-
</script>
200+
</script>
201+
202+
<style lang="css" scoped>
203+
204+
:global(.datepicker-controls button svg),
205+
:global(.datepicker-controls button) {
206+
@apply text-lightDatePickerCalendarText;
207+
}
208+
209+
:global( .datepicker-dropdown ),
210+
:global( .datepicker-picker ) {
211+
@apply !bg-lightDatePickerCalendarBackground
212+
}
213+
214+
:global(.datepicker-controls button:hover) {
215+
@apply bg-lightDatePickerCalendarArrowButtonBackgroundHover;
216+
}
217+
218+
:global(.datepicker-controls button) {
219+
@apply ring-lightDatePickerCalendarArrowButtonFocusRing bg-lightDatePickerCalendarArrowButtonBackground;
220+
}
221+
222+
:global(.datepicker-controls button:focus) {
223+
@apply ring-lightDatePickerCalendarArrowButtonFocusRing;
224+
}
225+
226+
:global(.days-of-week span) {
227+
@apply text-lightDatePickerCalendarDaysOfWeekText;
228+
}
229+
230+
:global(.datepicker-grid span) {
231+
@apply text-lightDatePickerCalendarDateButtonText;
232+
}
233+
234+
:global(.datepicker-grid span:hover:not(.selected)) {
235+
@apply bg-lightDatePickerCalendarDateButtonBackgroundHover;
236+
}
237+
238+
:global(.datepicker-grid .selected ) {
239+
@apply text-lightDatePickerCalendarDateActiveButtonText bg-lightDatePickerCalendarDateActiveButtonBackground;
240+
}
241+
242+
243+
244+
245+
246+
247+
248+
249+
:global(.dark .datepicker-controls button svg),
250+
:global(.dark .datepicker-controls button) {
251+
@apply text-darkDatePickerCalendarMainText;
252+
}
253+
254+
:global(.dark .datepicker-dropdown),
255+
:global(.dark .datepicker-picker) {
256+
@apply !bg-darkDatePickerCalendarBackground;
257+
}
258+
259+
:global(.dark .datepicker-controls button:hover) {
260+
@apply bg-darkDatePickerCalendarArrowButtonBackgroundHover;
261+
}
262+
263+
:global(.dark .datepicker-controls button) {
264+
@apply ring-darkDatePickerCalendarArrowButtonFocusRing bg-darkDatePickerCalendarArrowButtonBackground;
265+
}
266+
267+
:global(.dark .datepicker-controls button) {
268+
@apply ring-darkDatePickerCalendarArrowButtonFocusRing;
269+
}
270+
271+
:global(.dark .days-of-week span) {
272+
@apply text-darkDatePickerCalendarDaysOfWeekText;
273+
}
274+
275+
:global(.dark .datepicker-grid span) {
276+
@apply text-darkDatePickerCalendarDateButtonText;
277+
}
278+
279+
:global(.dark .datepicker-grid span:hover:not(.selected)) {
280+
@apply bg-darkDatePickerCalendarDateButtonBackgroundHover;
281+
}
282+
283+
:global(.dark .datepicker-grid .selected) {
284+
@apply text-darkDatePickerCalendarDateActiveButtonText
285+
bg-darkDatePickerCalendarDateActiveButtonBackground;
286+
}
287+
</style>

‎adminforth/spa/src/components/ResourceListTable.vue

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -203,7 +203,7 @@
203203
>
204204
<!-- Buttons -->
205205
<button
206-
class="af-pagination-prev-button flex items-center py-1 px-3 gap-1 text-sm font-medium text-ligthListTablePaginationText focus:outline-none bg-lightListTablePaginationBackgoround border-r-0 rounded-s border border-lightListTablePaginationBorder hover:bg-lightListTablePaginationBackgoroundHover hover:text-ligthListTablePaginationTextHover focus:z-10 focus:ring-4 focus:ring-lightListTablePaginationFocusRing dark:focus:ring-darkListTablePaginationFocusRing dark:bg-darkListTablePaginationBackgoround dark:text-darkListTablePaginationText dark:border-darkListTablePaginationBorder dark:hover:text-darkListTablePaginationTextHover dark:hover:bg-darkListTablePaginationBackgoroundHover disabled:opacity-50"
206+
class="af-pagination-prev-button flex items-center py-1 px-3 gap-1 text-sm font-medium text-lightListTablePaginationText focus:outline-none bg-lightListTablePaginationBackgoround border-r-0 rounded-s border border-lightListTablePaginationBorder hover:bg-lightListTablePaginationBackgoroundHover hover:text-lightListTablePaginationTextHover focus:z-10 focus:ring-4 focus:ring-lightListTablePaginationFocusRing dark:focus:ring-darkListTablePaginationFocusRing dark:bg-darkListTablePaginationBackgoround dark:text-darkListTablePaginationText dark:border-darkListTablePaginationBorder dark:hover:text-darkListTablePaginationTextHover dark:hover:bg-darkListTablePaginationBackgoroundHover disabled:opacity-50"
207207
@click="page--; pageInput = page.toString();" :disabled="page <= 1">
208208
<svg class="w-3.5 h-3.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
209209
viewBox="0 0 14 10">
@@ -215,14 +215,14 @@
215215
</span>
216216
</button>
217217
<button
218-
class="af-pagination-first-page-button flex items-center py-1 px-3 text-sm font-medium text-ligthListTablePaginationText focus:outline-none bg-lightListTablePaginationBackgoround border-r-0 border border-lightListTablePaginationBorder hover:bg-lightListTablePaginationBackgoroundHover hover:text-ligthListTablePaginationTextHover focus:z-10 focus:ring-4 focus:ring-lightListTablePaginationFocusRing dark:focus:ring-darkListTablePaginationFocusRing dark:bg-darkListTablePaginationBackgoround dark:text-darkListTablePaginationText dark:border-darkListTablePaginationBorder dark:hover:text-darkListTablePaginationTextHover dark:hover:bg-darkListTablePaginationBackgoroundHover disabled:opacity-50"
218+
class="af-pagination-first-page-button flex items-center py-1 px-3 text-sm font-medium text-lightListTablePaginationText focus:outline-none bg-lightListTablePaginationBackgoround border-r-0 border border-lightListTablePaginationBorder hover:bg-lightListTablePaginationBackgoroundHover hover:text-lightListTablePaginationTextHover focus:z-10 focus:ring-4 focus:ring-lightListTablePaginationFocusRing dark:focus:ring-darkListTablePaginationFocusRing dark:bg-darkListTablePaginationBackgoround dark:text-darkListTablePaginationText dark:border-darkListTablePaginationBorder dark:hover:text-darkListTablePaginationTextHover dark:hover:bg-darkListTablePaginationBackgoroundHover disabled:opacity-50"
219219
@click="page = 1; pageInput = page.toString();" :disabled="page <= 1">
220220
<!-- <IconChevronDoubleLeftOutline class="w-4 h-4" /> -->
221221
1
222222
</button>
223223
<div
224224
contenteditable="true"
225-
class="af-pagination-input min-w-10 outline-none inline-block w-auto py-1.5 px-3 text-sm text-center text-ligthListTablePaginationCurrentPageText border border-lightListTablePaginationBorder dark:border-darkListTablePaginationBorder dark:text-darkListTablePaginationCurrentPageText dark:bg-darkListTablePaginationBackgoround z-10"
225+
class="af-pagination-input min-w-10 outline-none inline-block w-auto py-1.5 px-3 text-sm text-center text-lightListTablePaginationCurrentPageText border border-lightListTablePaginationBorder dark:border-darkListTablePaginationBorder dark:text-darkListTablePaginationCurrentPageText dark:bg-darkListTablePaginationBackgoround z-10"
226226
@keydown="onPageKeydown($event)"
227227
@input="onPageInput($event)"
228228
@blur="validatePageInput()"
@@ -231,14 +231,14 @@
231231
</div>
232232

233233
<button
234-
class="af-pagination-last-page-button flex items-center py-1 px-3 text-sm font-medium text-ligthListTablePaginationText focus:outline-none bg-lightListTablePaginationBackgoround border-l-0 border border-lightListTablePaginationBorder hover:bg-lightListTablePaginationBackgoroundHover hover:text-ligthListTablePaginationTextHover focus:z-10 focus:ring-4 focus:ring-lightListTablePaginationFocusRing dark:focus:ring-darkListTablePaginationFocusRing dark:bg-darkListTablePaginationBackgoround dark:text-darkListTablePaginationText dark:border-darkListTablePaginationBorder dark:hover:text-white dark:hover:bg-darkListTablePaginationBackgoroundHover disabled:opacity-50"
234+
class="af-pagination-last-page-button flex items-center py-1 px-3 text-sm font-medium text-lightListTablePaginationText focus:outline-none bg-lightListTablePaginationBackgoround border-l-0 border border-lightListTablePaginationBorder hover:bg-lightListTablePaginationBackgoroundHover hover:text-lightListTablePaginationTextHover focus:z-10 focus:ring-4 focus:ring-lightListTablePaginationFocusRing dark:focus:ring-darkListTablePaginationFocusRing dark:bg-darkListTablePaginationBackgoround dark:text-darkListTablePaginationText dark:border-darkListTablePaginationBorder dark:hover:text-white dark:hover:bg-darkListTablePaginationBackgoroundHover disabled:opacity-50"
235235
@click="page = totalPages; pageInput = page.toString();" :disabled="page >= totalPages">
236236
{{ totalPages }}
237237

238238
<!-- <IconChevronDoubleRightOutline class="w-4 h-4" /> -->
239239
</button>
240240
<button
241-
class="af-pagination-next-button flex items-center py-1 px-3 gap-1 text-sm font-medium text-ligthListTablePaginationText focus:outline-none bg-lightListTablePaginationBackgoround border-l-0 rounded-e border border-lightListTablePaginationBorder hover:bg-lightListTablePaginationBackgoroundHover hover:text-ligthListTablePaginationTextHover focus:z-10 focus:ring-4 focus:ring-lightListTablePaginationFocusRing dark:focus:ring-darkListTablePaginationFocusRing dark:bg-darkListTablePaginationBackgoround dark:text-darkListTablePaginationText dark:border-darkListTablePaginationBorder dark:hover:text-white dark:hover:bg-darkListTablePaginationBackgoroundHover disabled:opacity-50"
241+
class="af-pagination-next-button flex items-center py-1 px-3 gap-1 text-sm font-medium text-lightListTablePaginationText focus:outline-none bg-lightListTablePaginationBackgoround border-l-0 rounded-e border border-lightListTablePaginationBorder hover:bg-lightListTablePaginationBackgoroundHover hover:text-lightListTablePaginationTextHover focus:z-10 focus:ring-4 focus:ring-lightListTablePaginationFocusRing dark:focus:ring-darkListTablePaginationFocusRing dark:bg-darkListTablePaginationBackgoround dark:text-darkListTablePaginationText dark:border-darkListTablePaginationBorder dark:hover:text-white dark:hover:bg-darkListTablePaginationBackgoroundHover disabled:opacity-50"
242242
@click="page++; pageInput = page.toString();" :disabled="page >= totalPages">
243243
<span class="hidden sm:inline">{{ $t('Next') }}</span>
244244
<svg class="w-3.5 h-3.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
@@ -250,7 +250,7 @@
250250
</div>
251251

252252
<!-- Help text -->
253-
<span class="text-sm text-ligthListTablePaginationHelpText dark:text-darkListTablePaginationHelpText">
253+
<span class="text-sm text-lightListTablePaginationHelpText dark:text-darkListTablePaginationHelpText">
254254
<span v-if="((((page || 1) - 1) * pageSize + 1 > totalRows) && totalRows > 0)">{{ $t('Wrong Page') }} </span>
255255
<template v-else-if="resource && totalRows > 0">
256256

0 commit comments

Comments
 (0)