Added support for icon color

src/options/LocalCommands.vue

@@ -23,7 +23,7 @@
             >
               <div class="action-head" @click="toggleSelectedAction(name)">
                 <div class="icon">
-                  <i :class="action.iconClass" v-if="action.iconClass" />
+                  <i :class="action.iconClass" :style="{ color: action.color && action.color.length ? action.color : 'initial' }" v-if="action.iconClass" />
                   <i class="fas fa-cog" v-else />
                 </div>
 

src/options/Run.vue

@@ -81,13 +81,17 @@
       </form>
     </div>
 
-    <form class="save-form" ref="scriptForm" @submit.prevent="save" v-if="saveMode">
+    <form class="save-form" @submit.prevent="save" v-if="saveMode">
       <div class="row">
-        <input type="text" name="displayName" placeholder="Display name" />
+        <input type="text" name="displayName" v-model="saveParams.name" placeholder="Display name" />
       </div>
 
       <div class="row">
-        <input type="text" name="iconClass" placeholder="FontAwesome icon class (e.g. 'fas fa-play')" />
+        <input type="text" name="iconClass" v-model="saveParams.iconClass" placeholder="FontAwesome icon class (e.g. 'fas fa-play')" />
+      </div>
+
+      <div class="row">
+        <input type="text" ref="color" name="color" v-model="saveParams.color" placeholder="HTML/CSS color" />
       </div>
 
       <div class="row">
@@ -101,6 +105,10 @@
         />
       </div>
 
+      <div class="row icon-preview" v-if="saveParams.iconClass && saveParams.iconClass.length">
+        <i :class="saveParams.iconClass" :style="{ color: saveParams.color && saveParams.color.length ? saveParams.color : 'initial' }" />
+      </div>
+
       <div class="row multiple-host-selector">
         <div class="desc">
           Install script on these devices
@@ -176,6 +184,12 @@ export default {
         args: [],
         defaultArgs: {},
       },
+
+      saveParams: {
+        name: null,
+        iconClass: null,
+        color: null,
+      },
     };
   },
 
@@ -295,6 +309,14 @@ export default {
 
     toggleSaveMode() {
       this.saveMode = !this.saveMode;
+
+      if (!this.saveMode) {
+        this.saveParams = {
+          name: null,
+          iconClass: null,
+          color: null,
+        };
+      }
     },
 
     async loadPlugins() {
@@ -329,6 +351,7 @@ export default {
       const saveForm = event.target;
       const displayName = saveForm.displayName.value.trim();
       const iconClass = saveForm.iconClass.value.trim();
+      const color = saveForm.color.value.trim();
       const hosts = [...saveForm.querySelectorAll('input[data-type="host"]:checked')].map(el => el.value);
 
       if (!displayName.length) {
@@ -345,6 +368,7 @@ export default {
         type: this.actionMode,
         displayName: displayName,
         iconClass: iconClass,
+        color: color.length ? color : null,
         hosts: hosts,
         script: this.script,
         categories: this.selectedCategories.map(obj => obj.text),
@@ -357,6 +381,7 @@ export default {
       const saveForm = event.target;
       const displayName = saveForm.displayName.value.trim();
       const iconClass = saveForm.iconClass.value.trim();
+      const color = saveForm.color.value.trim();
       const hosts = [...saveForm.querySelectorAll('input[data-type="host"]:checked')].map(el => el.value);
 
       if (!displayName.length) {
@@ -373,6 +398,7 @@ export default {
         type: this.actionMode,
         displayName: displayName,
         iconClass: iconClass,
+        color: color.length ? color : null,
         hosts: hosts,
         name: this.action.name,
         args: this.getActionArgs(),
@@ -524,6 +550,11 @@ form {
     margin-bottom: 0.75em;
   }
 }
+
+.icon-preview {
+  font-size: 2em;
+  margin-left: 0.2em;
+}
 </style>
 
 <!-- vim:sw=2:ts=2:et: -->

src/popup/App.vue

@@ -38,7 +38,7 @@
             <div class="actions" v-if="selectedCategory === category || !category.length">
               <div class="action" v-for="(action, name) in actions" :key="name" @click="run_(name)">
                 <div class="icon">
-                  <i :class="action.iconClass" v-if="action.iconClass" />
+                  <i :class="action.iconClass" :style="{ color: action.color && action.color.length ? action.color : 'initial' }" v-if="action.iconClass" />
                   <i class="fas fa-cog" v-else />
                 </div>
 
@@ -160,10 +160,14 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+body {
+  overflow: hidden;
+}
+
 .container {
   width: 30em;
-  max-height: 40em;
   display: flex;
+  overflow: hidden;
 }
 
 .category {
@@ -178,8 +182,7 @@ export default {
   width: 100%;
   height: 100%;
   position: relative;
-  overflow-y: auto;
+  overflow: hidden;
-  overflow-x: hidden;
 
   .head {
     width: 100%;
@@ -208,7 +211,9 @@ export default {
 
 .body {
   height: calc(100% - 2.5em);
-  overflow: auto;
+  max-height: 35em;
+  overflow-y: auto;
+  overflow-x: hidden;
 
   .action {
     display: flex;