chore: add styles for the list view buttons. Remove prop state from bulkActions. Add prop for bulk actions: buttonCustomCssClass

Author: yaroslav8765

adminforth/modules/configValidator.ts

@@ -227,7 +227,6 @@ export default class ConfigValidator implements IConfigValidator {
 
     bulkActions.push({
       label: `Delete checked`,
-      state: 'danger',
       icon: 'flowbite:trash-bin-outline',
       confirm: 'Are you sure you want to delete selected items?',
       allowed: async ({ resource, adminUser, allowedActions }) => { return allowedActions.delete },

adminforth/modules/styles.ts

@@ -271,7 +271,12 @@ export const styles = () => ({
     lightEditViewSaveButtonTextHover: "#B91C1C",
 
     /* ListView buttons */
-
+    lightListViewButtonBackground: "#FFFFFF",
+    lightListViewButtonBackgroundHover: "#F3F4F6",
+    lightListViewButtonText: "#111827",
+    lightListViewButtonTextHover: "alias:lightPrimary",
+    lightListViewButtonFocusRing: "#F3F4F6",
+    lightListViewButtonBorder: "#D1D5DB",
 
 
 
@@ -511,6 +516,8 @@ export const styles = () => ({
     darkToastText: "#9CA3AF",
 
 ///////////////////////////////////////////////////////////////////
+    //Show views
+    /* CreateView buttons */
     darkCreateViewButtonBackground: "#1F2937",
     darkCreateViewButtonBackgroundHover: "#374151",
     darkCreateViewButtonText: "#9CA3AF",
@@ -521,6 +528,7 @@ export const styles = () => ({
     darkCreateViewSaveButtonText: "#EF4444",
     darkCreateViewSaveButtonTextHover: "#FFFFFF",
 
+    /* EditView buttons */
     darkEditViewButtonBackground: "#1F2937",
     darkEditViewButtonBackgroundHover: "#374151",
     darkEditViewButtonText: "#9CA3AF",
@@ -531,6 +539,14 @@ export const styles = () => ({
     darkEditViewSaveButtonText: "#EF4444",
     darkEditViewSaveButtonTextHover: "#FFFFFF",
 
+    /* ListView buttons */
+    darkListViewButtonBackground: "#1F2937",
+    darkListViewButtonBackgroundHover: "#374151",
+    darkListViewButtonText: "#9CA3AF",
+    darkListViewButtonTextHover: "#FFFFFF",
+    darkListViewButtonFocusRing: "#374151",
+    darkListViewButtonBorder: "#4B5563",
+
 
   },
   boxShadow: {

adminforth/spa/src/views/ListView.vue

@@ -21,7 +21,7 @@
         @click="()=>{checkboxes = []}"
         v-if="checkboxes.length"
         data-tooltip-target="tooltip-remove-all"
-        class="flex gap-1  items-center py-1 px-3 me-2 text-sm font-medium text-gray-900 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-darkListTable dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 rounded-default"
+        class="flex gap-1  items-center py-1 px-3 me-2 text-sm font-medium text-lightListViewButtonText focus:outline-none bg-lightListViewButtonBackground rounded border border-lightListViewButtonBorder hover:bg-lightListViewButtonBackgroundHover hover:text-lightListViewButtonTextHover focus:z-10 focus:ring-4 focus:ring-lightListViewButtonFocusRing dark:focus:ring-darkListViewButtonFocusRing dark:bg-darkListViewButtonBackground dark:text-darkListViewButtonText dark:border-darkListViewButtonBorder dark:hover:text-darkListViewButtonTextHover dark:hover:bg-darkListViewButtonBackgroundHover rounded-default"
       >
         <IconBanOutline class="w-5 h-5 "/>
 
@@ -37,17 +37,13 @@
         v-for="(action,i) in coreStore.resource?.options?.bulkActions" 
         :key="action.id"
         @click="startBulkAction(action.id)"
-        class="flex gap-1 items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-default 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"
-        :class="{
-          'bg-red-100 text-red-800 border-red-400 dark:bg-red-700 dark:text-red-400 dark:border-red-400':action.state==='danger',
-          'bg-green-100 text-green-800 border-green-400 dark:bg-green-700 dark:text-green-400 dark:border-green-400':action.state==='success',
-          'bg-lightPrimaryOpacity text-lightPrimary border-blue-400 dark:bg-blue-700 dark:text-blue-400 dark:border-blue-400':action.state==='active',
-        }"
+        class="flex gap-1 items-center py-1 px-3 text-sm font-medium text-lightListViewButtonText focus:outline-none bg-lightListViewButtonBackground rounded-default border border-lightListViewButtonBorder hover:bg-lightListViewButtonBackgroundHover hover:text-lightListViewButtonTextHover focus:z-10 focus:ring-4 focus:ring-lightListViewButtonFocusRing dark:focus:ring-darkListViewButtonFocusRing dark:bg-darkListViewButtonBackground dark:text-darkListViewButtonText dark:border-darkListViewButtonBorder dark:hover:text-darkListViewButtonTextHover dark:hover:bg-darkListViewButtonBackgroundHover"
+        :class="action.buttonCustomCssClass || ''"
       >
         <component
           v-if="action.icon && !bulkActionLoadingStates[action.id]"
           :is="getIcon(action.icon)"
-          class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"></component>
+          class="w-5 h-5 transition duration-75 group-hover:text-gray-900 dark:group-hover:text-white"></component>
         <div v-if="bulkActionLoadingStates[action.id]">
           <svg 
             aria-hidden="true" 
@@ -74,14 +70,14 @@
 
       <RouterLink v-if="coreStore.resource?.options?.allowedActions?.create"
         :to="{ name: 'resource-create', params: { resourceId: $route.params.resourceId } }"
-        class="af-create-button flex items-center py-1 px-3 text-sm font-medium text-gray-900 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 rounded-default"
+        class="af-create-button flex items-center py-1 px-3 text-sm font-medium text-lightListViewButtonText focus:outline-none bg-lightListViewButtonBackground rounded border border-lightListViewButtonBorder hover:bg-lightListViewButtonBackgroundHover hover:text-lightListViewButtonTextHover focus:z-10 focus:ring-4 focus:ring-lightListViewButtonFocusRing dark:focus:ring-darkListViewButtonFocusRing dark:bg-darkListViewButtonBackground dark:text-darkListViewButtonText dark:border-darkListViewButtonBorder dark:hover:text-darkListViewButtonTextHover dark:hover:bg-darkListViewButtonBackgroundHover rounded-default"
       >
         <IconPlusOutline class="w-4 h-4 me-2"/>
         {{ $t('Create') }}
       </RouterLink>
 
       <button
-        class="af-filter-button flex gap-1 items-center py-1 px-3 me-2 text-sm font-medium text-gray-900 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 rounded-default"
+        class="af-filter-button flex gap-1 items-center py-1 px-3 me-2 text-sm font-medium text-lightListViewButtonText focus:outline-none bg-lightListViewButtonBackground rounded border border-lightListViewButtonBorder hover:bg-lightListViewButtonBackgroundHover hover:text-lightListViewButtonTextHover focus:z-10 focus:ring-4 focus:ring-lightListViewButtonFocusRing dark:focus:ring-darkListViewButtonFocusRing dark:bg-darkListViewButtonBackground dark:text-darkListViewButtonText dark:border-darkListViewButtonBorder dark:hover:text-darkListViewButtonTextHover dark:hover:bg-darkListViewButtonBackgroundHover rounded-default"
         @click="()=>{filtersShow = !filtersShow}"
         v-if="coreStore.resource?.options?.allowedActions?.filter"
       >

adminforth/types/Common.ts

@@ -95,12 +95,9 @@ export interface AdminForthBulkActionCommon {
   label: string,
 
   /**
-   * Bulk Action button state 'danger'|success|'active',
-   *  * 'danger' - red button
-   *  * 'success' - green button
-   *  * 'active' - blue button
+   * Add custom class
    **/ 
-  state?: 'danger' | 'success' | 'active';
+  buttonCustomCssClass?: string;
 
   /** 
    * Optional small badge for button which will be displayed in the list view

dev-demo/index.ts

@@ -390,6 +390,14 @@ export const admin = new AdminForth({
           EditViewSaveButtonText: "#DC2626",
           EditViewSaveButtonTextHover: "#B91C1C",
 
+          ListViewButtonBackground: "alias:lightPrimary",
+          ListViewButtonBackgroundHover: "alias:lightListViewButtonBackground lighten",
+          ListViewButtonText: "alias:lightListViewButtonBackground inverse",
+          ListViewButtonTextHover: "alias:lightListViewButtonText opacity:0.8",
+          ListViewButtonFocusRing: "alias:lightlistViewButtonBackground",
+          ListViewButtonBorder: "alias:lightListViewButtonBackground darken",
+
+
         },
         dark: {
           primary: '#bd1a76',
@@ -609,6 +617,14 @@ export const admin = new AdminForth({
           EditViewSaveButtonText: "#F87171",
           EditViewSaveButtonTextHover: "#FFFFFF",
 
+
+          ListViewButtonBackground: "alias:darkPrimary",
+          ListViewButtonBackgroundHover: "alias:darkListViewButtonBackground lighten",
+          ListViewButtonText: "alias:darkListViewButtonBackground inverse",
+          ListViewButtonTextHover: "alias:darkListViewButtonText opacity:0.8",
+          ListViewButtonFocusRing: "alias:darklistViewButtonBackground",
+          ListViewButtonBorder: "alias:darkListViewButtonBackground darken",
+
         }
       }
     },

dev-demo/resources/apartments.ts

@@ -498,7 +498,6 @@ export default {
       {
         label: "Mark as listed",
         // icon: 'typcn:archive',
-        state: "active",
         confirm:
           "Are you sure you want to mark all selected apartments as listed?",
         action: async function ({ selectedIds, adminUser }: any) {