refactor: rework tool color in extruder panel (#1576)

src/components/panels/Extruder/ExtruderControlPanelTools.vue

@@ -1,7 +1,13 @@
 <template>
-    <v-item-group v-if="toolchangeMacros.length > 1" class="_btn-group py-0 px-3 mt-3">
-        <extruder-control-panel-tools-item v-for="macro in toolchangeMacros" :key="macro.name" :macro="macro" />
-    </v-item-group>
+    <div v-if="toolchangeMacros.length > 1">
+        <v-row v-for="(row, index) in rows" :key="'row_' + index" class="mt-0">
+            <v-col>
+                <v-item-group class="_btn-group py-0 px-3">
+                    <extruder-control-panel-tools-item v-for="macro in row" :key="macro.name" :macro="macro" />
+                </v-item-group>
+            </v-col>
+        </v-row>
+    </div>
 </template>
 
 <script lang="ts">
@@ -29,6 +35,17 @@ export default class ExtruderControlPanel extends Mixins(BaseMixin, ControlMixin
                 return numberA - numberB
             })
     }
+
+    get rows() {
+        const cols = 6
+        let rows = []
+
+        for (let i = 0; i < this.toolchangeMacros.length; i += cols) {
+            rows.push(this.toolchangeMacros.slice(i, i + cols))
+        }
+
+        return rows
+    }
 }
 </script>
 

src/components/panels/Extruder/ExtruderControlPanelToolsItem.vue

@@ -1,11 +1,11 @@
 <template>
     <v-btn
-        :class="buttonClass"
         :disabled="printerIsPrintingOnly"
-        :style="buttonStyle"
         dense
         class="flex-grow-1 px-0"
+        :style="buttonStyle"
         @click="doSend(macro.name)">
+        <span v-if="color != null" class="_extruderColorState mr-1" :style="dotStyle" />
         {{ macro.name }}
     </v-btn>
 </template>
@@ -27,19 +27,62 @@ export default class ExtruderControlPanel extends Mixins(BaseMixin, ControlMixin
     }
 
     get color() {
-        return this.macro.variables.color ?? this.macro.variables.colour ?? null
+        const color = this.macro.variables.color ?? this.macro.variables.colour ?? null
+        if (color === '' || color === 'undefined') return null
+
+        return color
     }
 
-    get buttonClass() {
-        return {
-            'primary--text': this.active,
+    get primaryColor(): string {
+        return this.$store.state.gui.uiSettings.primary
+    }
+
+    get primaryTextColor(): string {
+        let splits = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(this.primaryColor)
+        if (splits) {
+            const r = parseInt(splits[1], 16) * 0.2126
+            const g = parseInt(splits[2], 16) * 0.7152
+            const b = parseInt(splits[3], 16) * 0.0722
+            const perceivedLightness = (r + g + b) / 255
+
+            return perceivedLightness > 0.7 ? '#222' : '#fff'
         }
+
+        return '#ffffff'
+    }
+
+    get warningColor(): string {
+        return this.$vuetify?.theme?.currentTheme?.warning?.toString() ?? '#ff8300'
     }
 
     get buttonStyle() {
+        let backgroundColor = ''
+        if (this.active) {
+            backgroundColor = this.homedAxes.includes('xyz') ? this.primaryColor : this.warningColor
+        }
+
+        const textColor = this.active ? this.primaryTextColor : ''
+
         return {
+            color: textColor,
+            'background-color': backgroundColor,
+        }
+    }
+
+    get dotStyle() {
+        return {
+            'border-color': this.active ? this.primaryTextColor : '',
             'background-color': '#' + this.color,
         }
     }
 }
 </script>
+
+<style lang="scss" scoped>
+._extruderColorState {
+    width: 15px;
+    height: 15px;
+    border-radius: 50%;
+    border: 1px solid lightgray;
+}
+</style>