Skip to content

Commit 056f334

Browse files
yaroslav8765yaroslav8765
committed
chore: add styles for edit view
1 parent a240d1b commit 056f334

File tree

3 files changed

+72
-2
lines changed

3 files changed

+72
-2
lines changed

‎adminforth/modules/styles.ts

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -260,6 +260,20 @@ export const styles = () => ({
260260
lightCreateViewSaveButtonFocusRing: "#F3F4F6",
261261
lightCreateViewSaveButtonBorder: "#D1D5DB",
262262

263+
lightEditViewCancelButtonBackground: "#FFFFFF",
264+
lightEditViewCancelButtonBackgroundHover: "#F3F4F6",
265+
lightEditViewCancelButtonText: "#111827",
266+
lightEditViewCancelButtonTextHover: "alias:lightPrimary",
267+
lightEditViewCancelButtonFocusRing: "#F3F4F6",
268+
lightEditViewCancelButtonBorder: "#D1D5DB",
269+
270+
lightEditViewSaveButtonBackground: "#FFFFFF",
271+
lightEditViewSaveButtonBackgroundHover: "#F3F4F6",
272+
lightEditViewSaveButtonText: "#DC2626",
273+
lightEditViewSaveButtonTextHover: "#B91C1C",
274+
lightEditViewSaveButtonFocusRing: "#F3F4F6",
275+
lightEditViewSaveButtonBorder: "#D1D5DB",
276+
263277

264278

265279
// colors for dark theme
@@ -512,6 +526,20 @@ export const styles = () => ({
512526
darkCreateViewSaveButtonFocusRing: "#374151",
513527
darkCreateViewSaveButtonBorder: "#4B5563",
514528

529+
darkEditViewCancelButtonBackground: "#1F2937",
530+
darkEditViewCancelButtonBackgroundHover: "#374151",
531+
darkEditViewCancelButtonText: "#9CA3AF",
532+
darkEditViewCancelButtonTextHover: "#FFFFFF",
533+
darkEditViewCancelButtonFocusRing: "#374151",
534+
darkEditViewCancelButtonBorder: "#4B5563",
535+
536+
darkEditViewSaveButtonBackground: "#1F2937",
537+
darkEditViewSaveButtonBackgroundHover: "#374151",
538+
darkEditViewSaveButtonText: "#EF4444",
539+
darkEditViewSaveButtonTextHover: "#FFFFFF",
540+
darkEditViewSaveButtonFocusRing: "#374151",
541+
darkEditViewSaveButtonBorder: "#4B5563",
542+
515543
},
516544
boxShadow: {
517545
customLight: "0 4px 8px rgba(0, 0, 0, 0.1)", // Lighter shadow

‎adminforth/spa/src/views/EditView.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,14 @@
1212
<BreadcrumbsWithButtons>
1313
<!-- save and cancle -->
1414
<button @click="$router.back()"
15-
class="flex items-center py-1 px-3 me-2 text-sm font-medium text-gray-900 rounded-default focus:outline-none bg-white rounded 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"
15+
class="flex items-center py-1 px-3 me-2 text-sm font-medium text-lightEditViewCancelButtonText rounded-default focus:outline-none bg-lightEditViewCancelButtonBackground rounded border border-lightEditViewCancelButtonBorder hover:bg-lightEditViewCancelButtonBackground hover:text-lightEditViewCancelButtonTextHover focus:z-10 focus:ring-4 focus:ring-lightEditViewCancelButtonFocusRing dark:focus:ring-darkEditViewCancelButtonFocusRing dark:bg-darkEditViewCancelButtonBackground dark:text-darkEditViewCancelButtonText dark:border-darkEditViewCancelButtonBorder dark:hover:text-darkEditViewCancelButtonTextHover dark:hover:bg-darkEditViewCancelButtonBackgroundHover"
1616
>
1717
{{ $t('Cancel') }}
1818
</button>
1919

2020
<button
2121
@click="saveRecord"
22-
class="flex items-center py-1 px-3 text-sm font-medium rounded-default text-red-600 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-red-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-red-500 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 disabled:opacity-50"
22+
class="flex items-center py-1 px-3 text-sm font-medium rounded-default text-lightEditViewSaveButtonText focus:outline-none bg-lightEditViewSaveButtonBackground rounded border border-lightEditViewSaveButtonBorder hover:bg-lightEditViewSaveButtonBackgroundHover hover:text-lightEditViewSaveButtonTextHover focus:z-10 focus:ring-4 focus:ring-lightEditViewSaveButtonFocusRing dark:focus:ring-darkEditViewSaveButtonFocusRing dark:bg-darkEditViewSaveButtonBackground dark:text-darkEditViewSaveButtonText dark:border-darkEditViewSaveButtonBorder dark:hover:text-darkEditViewSaveButtonTextHover dark:hover:bg-darkEditViewSaveButtonBackground disabled:opacity-50"
2323
:disabled="saving || (validating && !isValid)"
2424
>
2525
<IconFloppyDiskSolid class="w-4 h-4" />

‎dev-demo/index.ts

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -384,6 +384,20 @@ export const admin = new AdminForth({
384384
CreateViewSaveButtonFocusRing: "alias:lightCreateViewCancelButtonBackground",
385385
CreateViewSaveButtonBorder: "alias:lightCreateViewCancelButtonBackground darken",
386386

387+
EditViewCancelButtonBackground: "alias:lightPrimary",
388+
EditViewCancelButtonBackgroundHover: "alias:lightEditViewCancelButtonBackground lighten",
389+
EditViewCancelButtonText: "alias:lightEditViewCancelButtonBackground inverse",
390+
EditViewCancelButtonTextHover: "alias:lightEditViewCancelButtonText opacity:0.8",
391+
EditViewCancelButtonFocusRing: "alias:lightEditViewCancelButtonBackground",
392+
EditViewCancelButtonBorder: "alias:lightEditViewCancelButtonBackground darken",
393+
394+
EditViewSaveButtonBackground: "alias:lightPrimary",
395+
EditViewSaveButtonBackgroundHover: "alias:lightEditViewCancelButtonBackground lighten",
396+
EditViewSaveButtonText: "#DC2626",
397+
EditViewSaveButtonTextHover: "#B91C1C",
398+
EditViewSaveButtonFocusRing: "alias:lightEditViewCancelButtonBackground",
399+
EditViewSaveButtonBorder: "alias:lightEditViewCancelButtonBackground darken",
400+
387401
},
388402
dark: {
389403
primary: '#bd1a76',
@@ -583,6 +597,34 @@ export const admin = new AdminForth({
583597
ToastCloseIconFocusRing: "alias:darkToastCloseIcon",
584598
ToastText: "alias:darkPrimary inverse",
585599

600+
CreateViewCancelButtonBackground: "alias:darkPrimary",
601+
CreateViewCancelButtonBackgroundHover: "alias:darkCreateViewCancelButtonBackground lighten",
602+
CreateViewCancelButtonText: "alias:darkCreateViewCancelButtonBackground inverse",
603+
CreateViewCancelButtonTextHover: "alias:darkCreateViewCancelButtonText opacity:0.8",
604+
CreateViewCancelButtonFocusRing: "alias:darkCreateViewCancelButtonBackground",
605+
CreateViewCancelButtonBorder: "alias:darkCreateViewCancelButtonBackground darken",
606+
607+
CreateViewSaveButtonBackground: "alias:darkPrimary",
608+
CreateViewSaveButtonBackgroundHover: "alias:darkCreateViewCancelButtonBackground lighten",
609+
CreateViewSaveButtonText: "#F87171",
610+
CreateViewSaveButtonTextHover: "#FFFFFF",
611+
CreateViewSaveButtonFocusRing: "alias:darkCreateViewCancelButtonBackground",
612+
CreateViewSaveButtonBorder: "alias:darkCreateViewCancelButtonBackground darken",
613+
614+
EditViewCancelButtonBackground: "alias:darkPrimary",
615+
EditViewCancelButtonBackgroundHover: "alias:darkEditViewCancelButtonBackground lighten",
616+
EditViewCancelButtonText: "alias:darkEditViewCancelButtonBackground inverse",
617+
EditViewCancelButtonTextHover: "alias:darkEditViewCancelButtonText opacity:0.8",
618+
EditViewCancelButtonFocusRing: "alias:darkEditViewCancelButtonBackground",
619+
EditViewCancelButtonBorder: "alias:darkEditViewCancelButtonBackground darken",
620+
621+
EditViewSaveButtonBackground: "alias:darkPrimary",
622+
EditViewSaveButtonBackgroundHover: "alias:darkEditViewCancelButtonBackground lighten",
623+
EditViewSaveButtonText: "#F87171",
624+
EditViewSaveButtonTextHover: "#FFFFFF",
625+
EditViewSaveButtonFocusRing: "alias:darkEditViewCancelButtonBackground",
626+
EditViewSaveButtonBorder: "alias:darkEditViewCancelButtonBackground darken",
627+
586628
}
587629
}
588630
},

0 commit comments

Comments
 (0)