Skip to content

Commit 9d935d7

Browse files
yaroslav8765yaroslav8765
committed
chore: add styles for the resource list table
1 parent fefdec9 commit 9d935d7

File tree

3 files changed

+63
-31
lines changed

3 files changed

+63
-31
lines changed

‎adminforth/modules/styles.ts

Lines changed: 25 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -29,14 +29,23 @@ export const styles = () => ({
2929
lightSidebarIconsHover: "alias:lightSidebarText", // sidebar list item icons hover
3030
lightSidebarHeading: "alias:lightSidebarText opacity:0.3", // sidebar heading
3131

32+
lightListSkeletLoader: "#E5E7EB",
3233
lightList: "#FFFFFF", // list view background
3334
lightListTable: "#FFFFFF", // list view table background
3435
lightListTableHeading: "#f5f5f8", // list view table heading
3536
lightListTableHeadingText: "#374151", // list view table heading text
36-
lightListTableText: "#6b726c", // list view table text
37+
lightListTableText: "#6B7280", // list view table text
3738
lightListTableRowHover: "rgb(249 250 251)", // list view row hover
38-
lightListBreadcrumbsText: "#666666", // list view breadcrumbs text
39-
lightListBorder: "#DDDDDD", // list view rows border
39+
// lightListBreadcrumbsText: "#666666", // list view breadcrumbs text
40+
lightListBorder: "#DDDDDD", // list view rows
41+
lightListTablePaginationBackgoround: "#FFFFFF",
42+
lightListTablePaginationBackgoroundHover: "#F3F4F6",
43+
lightListTablePaginationBorder: "#D1D5DB",
44+
lightListTablePaginationFocusRing: "#F3F4F6",
45+
ligthListTablePaginationText: "#111827",
46+
ligthListTablePaginationCurrentPageText: "#374151",
47+
ligthListTablePaginationTextHover: "alias:lightPrimary",
48+
ligthListTablePaginationHelpText: "#374151",
4049

4150
lightForm: "#ffffff", // show view background
4251
lightFormBorder: "#F5F5F5", // show view rows border
@@ -245,10 +254,18 @@ export const styles = () => ({
245254
darkListTable: "#1f2937",
246255
darkListTableHeading: "#374151",
247256
darkListTableHeadingText: "#9ca3af",
248-
darkListTableText: "#9ca3af",
257+
darkListTableText: "#9CA3AF",
249258
darkListTableRowHover: "rgb(35 47 65)",
250-
darkListBreadcrumbsText: "#BBBBBB",
251-
darkListBorder: "#444444",
259+
// darkListBreadcrumbsText: "#BBBBBB",
260+
darkListBorder: "#444444",
261+
darkListTablePaginationBackgoround: "#1F2937",
262+
darkListTablePaginationBackgoroundHover: "#374151",
263+
darkListTablePaginationBorder: "#4B5563",
264+
darkListTablePaginationFocusRing: "#374151",
265+
darkListTablePaginationText: "#9CA3AF",
266+
darkListTablePaginationCurrentPageText: "#9CA3AF",
267+
darkListTablePaginationTextHover: "#FFFFFF",
268+
darkListTablePaginationHelpText: "#9CA3AF",
252269

253270
darkForm: "#1F2937",
254271
darkFormBorder: "#222222",
@@ -272,7 +289,7 @@ export const styles = () => ({
272289
darkDropdownMultipleSelectIconFocus: "#6B7280",
273290
darkDropdownMultipleSelectIconFocusBackground: "#F3F4F6",
274291

275-
darkCheckboxBgUnchecked: "alias:darkPrimaryContrast lighten",
292+
darkCheckboxBgUnchecked: "#374151",
276293
darkCheckboxBgChecked: "alias:darkPrimary",
277294
darkCheckboxIconColor: "alias:darkPrimaryContrast lighten",
278295
darkCheckboxBorderColor: "alias:darkPrimary darken",
@@ -306,7 +323,7 @@ export const styles = () => ({
306323
darkInputFocusBorder: "alias:darkPrimary",
307324
darkInputIconColor: "#9CA3AF",
308325
darkInputErrorColor: "#F87171",
309-
darkRequiredIconColor: "#EF4444",
326+
darkRequiredIconColor: "#6B7280",
310327

311328
darkDatePickerButtonBackground: "#374151",
312329
darkDatePickerButtonText: "#FFFFFF",

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@
77
<div role="status" v-if="!resource || !resource.columns"
88
class="max-w p-4 space-y-4 divide-y divide-gray-200 rounded shadow animate-pulse dark:divide-gray-700 md:p-6 dark:border-gray-700">
99
<div role="status" class="max-w-sm animate-pulse">
10-
<div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[360px]"></div>
10+
<div class="h-2 lightListSkeletLoader rounded-full dark:bg-gray-700 max-w-[360px]"></div>
1111
</div>
1212
</div>
13-
<table v-else class=" w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 rounded-default">
13+
<table v-else class=" w-full text-sm text-left rtl:text-right text-lightListTableText dark:text-darkListTableText rounded-default">
1414

1515
<tbody>
1616
<!-- table header -->
@@ -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-gray-900 focus:outline-none bg-white border-r-0 rounded-s border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 disabled:opacity-50"
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"
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-gray-900 focus:outline-none bg-white border-r-0 border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 disabled:opacity-50"
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"
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 min-w-10 py-1.5 px-3 text-sm text-center text-gray-700 border border-gray-300 dark:border-gray-700 dark:text-gray-400 dark:bg-gray-800 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-ligthListTablePaginationCurrentPageText 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-gray-900 focus:outline-none bg-white border-l-0 border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 disabled:opacity-50"
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"
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-gray-900 focus:outline-none bg-white border-l-0 rounded-e border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 disabled:opacity-50"
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"
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-gray-700 dark:text-gray-400">
253+
<span class="text-sm text-ligthListTablePaginationHelpText 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

‎dev-demo/index.ts

Lines changed: 30 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -153,20 +153,27 @@ export const admin = new AdminForth({
153153
styles:{
154154
colors: {
155155
light: {
156+
Html: "#d0f5f4",
157+
156158
primary: '#00acb5',
157-
ListTableHeading: '#2fe0c9',
158-
Form:"#fffa94",
159159

160160
List: "#FFFFFF",
161-
ListTable: "#FFFFFF",
162-
// ListTableHeading: "#f5f5f8",
161+
ListTable: "#b0f5f3",
162+
ListTableHeading: "#2fe0c9",
163163
ListTableHeadingText: "alias:lightListTableHeading inverse",
164-
ListTableText: "#alias:lightListTableHeadingText",
165-
ListTableRowHover: "rgb(249 250 251)",
166-
ListBreadcrumbsText: "#666666",
167-
ListBorder: "#DDDDDD",
168-
169-
//Form: "alias:lightListTableHeading lighten",
164+
ListTableText: "alias:lightListTableHeadingText opacity:0.8",
165+
ListTableRowHover: "alias:lightListTable lighten",
166+
ListBorder: "#DDDDDD",
167+
ListTablePaginationBackgoround: "alias:lightListTable",
168+
ListTablePaginationBackgoroundHover: "alias:lightListTablePaginationBackgoround lighten",
169+
ListTablePaginationBorder: "alias:lightListTablePaginationBackgoround darken",
170+
ListTablePaginationFocusRing: "alias:lightListTablePaginationBackgoround opacity:0.4",
171+
ListTablePaginationText: "alias:lightListTablePaginationBackgoround inverse",
172+
ListTablePaginationCurrentPageText: "alias:lightListTablePaginationBackgoround inverse",
173+
ListTablePaginationTextHover: "alias:lightListTablePaginationText opacity:0.6",
174+
ListTablePaginationHelpText: "alias:lightListTablePaginationCurrentPageText",
175+
176+
Form: "#fffa94",
170177
Border: "#F5F5F5",
171178
FormHeading: "alias:lightListTableHeading",
172179
FormFieldTextColor: "alias:lightListTableText",
@@ -187,7 +194,7 @@ export const admin = new AdminForth({
187194
DropdownButtonsPlaceholderText: "alias:lightFormFieldTextColor opacity:0.6",
188195

189196
DropdownOptionsBackground: "alias:lightForm lighten",
190-
DropdownOptionsHoverBackground: "#alias:lightForm darken",
197+
DropdownOptionsHoverBackground: "alias:lightForm darken",
191198
DropdownPicked:"alias:lightDropdownOptionsHoverBackground opacity:0.5",
192199
DropdownOptionsText: "alias:lightFormFieldTextColor",
193200

@@ -338,15 +345,23 @@ export const admin = new AdminForth({
338345
},
339346
dark: {
340347
primary: '#bd1a76',
348+
Html: "#5c0959",
341349

342-
List: "#111111",
343-
ListTable: "#1f2937",
350+
List: "#470538",
351+
ListTable: "#753767",
344352
ListTableHeading: "#db0dbc",
345353
ListTableHeadingText: "alias:darkListTableHeading inverse",
346354
ListTableText: "alias:darkListTableHeadingText",
347-
ListTableRowHover: "rgb(35 47 65)",
348-
ListBreadcrumbsText: "#BBBBBB",
355+
ListTableRowHover: "alias:darkListTableHeading opacity:0.6",
349356
ListBorder: "#444444",
357+
ListTablePaginationBackgoround: "alias:darkListTable",
358+
ListTablePaginationBackgoroundHover: "alias:darkListTablePaginationBackgoround lighten",
359+
ListTablePaginationBorder: "alias:darkListTablePaginationBackgoround darken",
360+
ListTablePaginationFocusRing: "alias:darkListTablePaginationBackgoround opacity:0.4",
361+
ListTablePaginationText: "alias:darkListTablePaginationBackgoround inverse",
362+
ListTablePaginationCurrentPageText: "alias:darkListTablePaginationBackgoround inverse",
363+
ListTablePaginationTextHover: "alias:darkListTablePaginationText opacity:0.6",
364+
ListTablePaginationHelpText: "alias:darkListTablePaginationCurrentPageText",
350365

351366
Form: "#36bfb4",
352367
FormBorder: "#222222",

0 commit comments

Comments
 (0)