better macro group settings with group colors

src/components/settings/macros/MacroCategoryDialog.vue

@@ -5,18 +5,55 @@
     max-width="350"
     @save="handleSave"
   >
-    <v-card-text>
-      <v-text-field
-        v-model="newName"
-        autofocus
-        outlined
-        :label="label"
-        :rules="[
-          $rules.required,
-          customRules.uniqueName
-        ]"
-        required
-      />
+    <v-card-text class="pa-0">
+      <app-setting
+        :title="label"
+      >
+        <v-text-field
+          v-model="newName"
+          dense
+          filled
+          hide-details
+          :rules="[
+            $rules.required,
+            // customRules.uniqueName
+          ]"
+          required
+        />
+      </app-setting>
+
+      <v-divider />
+
+      <app-setting
+        :title="$t('app.general.label.color')"
+      >
+        <app-btn
+          outlined
+          small
+          color="primary"
+          class="mr-1"
+          @click="handleResetColor"
+        >
+          {{ $t('app.setting.btn.reset') }}
+        </app-btn>
+        <app-color-picker
+          v-model="newColor"
+          :title="$t('app.general.btn.set_color')"
+        />
+      </app-setting>
+
+      <v-divider />
+
+      <app-setting
+        :title="$t('app.general.label.visible')"
+      >
+        <v-switch
+          v-model="newVisible"
+          class="mt-0 pt-0"
+          color="primary"
+          hide-details
+        />
+      </app-setting>
     </v-card-text>
   </app-dialog>
 </template>
@@ -39,7 +76,15 @@ export default class MacroCategoryDialog extends Vue {
   @Prop({ type: String, required: true })
   readonly name!: string
 
+  @Prop({ type: String, required: true })
+  readonly color!: string
+
+  @Prop({ type: Boolean, required: true })
+  readonly visible!: boolean
+
   newName = ''
+  newColor = ''
+  newVisible = true
 
   get customRules () {
     return {
@@ -49,15 +94,21 @@ export default class MacroCategoryDialog extends Vue {
 
   mounted () {
     this.newName = this.name
+    this.newColor = this.color
+    this.newVisible = this.visible
   }
 
   get categories () {
     return this.$store.getters['macros/getCategories']
   }
 
   handleSave () {
-    this.$emit('save', this.newName)
+    this.$emit('save', this.newName, this.newColor, this.newVisible)
     this.open = false
   }
+
+  handleResetColor () {
+    this.newColor = ''
+  }
 }
 </script>

src/components/settings/macros/MacroSettings.vue

@@ -118,6 +118,8 @@
         :title="categoryDialogState.title"
         :label="categoryDialogState.label"
         :name="categoryDialogState.name"
+        :color="categoryDialogState.color"
+        :visible="categoryDialogState.visible"
         @save="categoryDialogState.handler"
       />
     </v-card>
@@ -170,6 +172,8 @@ export default class MacroSettings extends Mixins(StateMixin) {
       label: this.$t('app.general.label.name'),
       category: null,
       name: '',
+      color: '',
+      visible: true,
       handler: this.handleAddCategory
     }
   }
@@ -181,6 +185,8 @@ export default class MacroSettings extends Mixins(StateMixin) {
       label: this.$t('app.general.label.name'),
       category,
       name: category.name,
+      color: category.color ?? '',
+      visible: category.visible,
       handler: this.handleEditCategory
     }
   }
@@ -193,10 +199,12 @@ export default class MacroSettings extends Mixins(StateMixin) {
     this.$store.dispatch('macros/addCategory', category)
   }
 
-  handleEditCategory (name: string) {
+  handleEditCategory (name: string, color: string, visible: boolean) {
     const category = {
       ...this.categoryDialogState.category,
-      name
+      name,
+      color,
+      visible
     }
     this.$store.dispatch('macros/editCategory', category)
   }

src/components/widgets/macros/MacroBtn.vue

@@ -84,14 +84,17 @@
 <script lang="ts">
 import { Component, Prop, Mixins } from 'vue-property-decorator'
 import StateMixin from '@/mixins/state'
-import type { Macro } from '@/store/macros/types'
+import type { Macro, MacroCategory } from '@/store/macros/types'
 import gcodeMacroParams from '@/util/gcode-macro-params'
 
 @Component({})
 export default class MacroBtn extends Mixins(StateMixin) {
   @Prop({ type: Object, required: true })
   readonly macro!: Macro
 
+  @Prop({ type: Object, required: true })
+  readonly category!: MacroCategory
+
   params: { [index: string]: { value: string | number; reset: string | number }} = {}
 
   get isMacroWithRawParam () {
@@ -131,8 +134,9 @@ export default class MacroBtn extends Mixins(StateMixin) {
   }
 
   get borderStyle () {
-    if (this.macro && this.macro.color !== '') {
-      return `border-color: ${this.macro.color} !important; border-left: solid 4px ${this.macro.color} !important;`
+    const color = this.macro && this.macro.color !== '' ? this.macro.color : this.category && this.category.color !== '' ? this.category.color : ''
+    if (color !== '') {
+      return `border-color: ${color} !important; border-left: solid 4px ${color} !important;`
     }
     return ''
   }

src/components/widgets/macros/Macros.vue

@@ -52,6 +52,7 @@
               <macro-btn
                 v-bind="attrs"
                 :macro="macro"
+                :category="category"
                 :loading="hasWait(`${$waits.onMacro}${macro.name}`)"
                 class="me-2 mb-2 d-inline-block"
                 v-on="on"

src/store/macros/getters.ts

@@ -67,14 +67,15 @@ export const getters: GetterTree<MacrosState, RootState> = {
   // Gets visible macros, transformed. Should include the macro's config.
   // Is only used on the dashboard. Grouped by category.
   getVisibleMacros: (state, getters) => {
-    const defaultCategory = { id: '0', name: '', order: 9999, visible: true }
+    const defaultCategory = { id: '0', name: '', order: 9999, color: '', visible: true }
     const categories = [...state.categories, defaultCategory]
 
     return categories
-      .map(({ id, name, order, visible }) => ({
+      .map(({ id, name, order, color, visible }) => ({
         id,
         name,
         order,
+        color,
         visible,
         macros: getters.getMacrosByCategory(id).filter((macro: Macro) => macro.visible) as Macro[]
       }))

src/store/macros/mutations.ts

@@ -67,7 +67,9 @@ export const mutations: MutationTree<MacrosState> = {
     Vue.set(state.categories, i, {
       id: payload.id,
       name: payload.name,
-      order: payload.order
+      order: payload.order,
+      color: payload.color,
+      visible: payload.visible
     })
     state.stored.forEach((macro, i) => {
       if (macro.categoryId === payload.id) {