Support for entity icon color change

platypush/backend/http/webapp/src/components/elements/Icon.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="icon-container">
     <img class="icon" :src="url" :alt="alt" v-if="url?.length">
-    <i class="icon" :class="className" v-else-if="className?.length" />
+    <i class="icon" :class="className" :style="{color: color}"
+      v-else-if="className?.length" />
   </div>
 </template>
 
@@ -14,6 +15,10 @@ export default {
     url: {
       type: String,
     },
+    color: {
+      type: String,
+      default: '',
+    },
     alt: {
       type: String,
       default: '',

platypush/backend/http/webapp/src/components/elements/NameEditor.vue

@@ -7,6 +7,7 @@
     <button class="cancel" @click="$emit('cancel')" @touch="$emit('cancel')">
       <i class="fas fa-ban" />
     </button>
+    <slot />
   </form>
 </template>
 

platypush/backend/http/webapp/src/components/panels/Entities/Index.vue

@@ -246,8 +246,8 @@ export default {
         entity.name = event.entity?.name || this.entities[entityId]?.name
 
       entity.meta = {
-        ...(this.entities[entityId]?.meta || {}),
         ...(meta[event.entity.type] || {}),
+        ...(this.entities[entityId]?.meta || {}),
         ...(event.entity?.meta || {}),
       }
 

platypush/backend/http/webapp/src/components/panels/Entities/Modal.vue

@@ -13,9 +13,39 @@
     </div>
 
     <div class="table-row">
-      <div class="title">Icon</div>
-      <div class="value icon-container">
-        <i class="icon" :class="entity.meta.icon.class" v-if="entity?.meta?.icon?.class" />
+      <div class="title">
+        Icon
+        <EditButton @click="editIcon = true" v-if="!editIcon" />
+      </div>
+      <div class="value icon-canvas">
+        <span class="icon-editor" v-if="editIcon">
+          <NameEditor :value="entity.meta?.icon?.class || entity.meta?.icon?.url" @input="onIconEdit"
+            @cancel="editIcon = false" :disabled="loading">
+            <button type="button" title="Reset" @click="onIconEdit(null)"
+                @touch="onIconEdit(null)">
+              <i class="fas fa-rotate-left" />
+            </button>
+          </NameEditor>
+          <span class="help">
+            Supported: image URLs or
+            <a href="https://fontawesome.com/icons" target="_blank">FontAwesome icon classes</a>.
+          </span>
+        </span>
+
+        <Icon v-bind="entity?.meta?.icon || {}" v-else />
+      </div>
+    </div>
+
+    <div class="table-row">
+      <div class="title">
+        Icon color
+      </div>
+      <div class="value icon-color-picker">
+        <input type="color" :value="entity.meta?.icon?.color" @change="onIconColorEdit">
+        <button type="button" title="Reset" @click="onIconColorEdit(null)"
+            @touch="onIconColorEdit(null)">
+          <i class="fas fa-rotate-left" />
+        </button>
       </div>
     </div>
 
@@ -53,13 +83,15 @@
 
 <script>
 import Modal from "@/components/Modal";
+import Icon from "@/components/elements/Icon";
 import EditButton from "@/components/elements/EditButton";
 import NameEditor from "@/components/elements/NameEditor";
 import Utils from "@/Utils";
+import meta from './meta.json'
 
 export default {
   name: "Entity",
-  components: {Modal, EditButton, NameEditor},
+  components: {Modal, EditButton, NameEditor, Icon},
   mixins: [Utils],
   emits: ['input', 'loading'],
   props: {
@@ -94,16 +126,78 @@ export default {
         this.loading = false
         this.editName = false
       }
+    },
+
+    async onIconEdit(newIcon) {
+      this.loading = true
+
+      try {
+        const icon = {url: null, class: null}
+        if (newIcon?.length) {
+          if (newIcon.startsWith('http'))
+            icon.url = newIcon
+          else
+            icon.class = newIcon
+        } else {
+          icon.url = (meta[this.entity.type] || {})?.icon?.url
+          icon.class = (meta[this.entity.type] || {})?.icon?.['class']
         }
+
+        const req = {}
+        req[this.entity.id] = {icon: icon}
+        await this.request('entities.set_meta', req)
+      } finally {
+        this.loading = false
+        this.editIcon = false
+      }
+    },
+
+    async onIconColorEdit(event) {
+      this.loading = true
+
+      try {
+        const icon = this.entity.meta?.icon || {}
+        if (event)
+          icon.color = event.target.value
+        else
+          icon.color = null
+
+        const req = {}
+        req[this.entity.id] = {icon: icon}
+        await this.request('entities.set_meta', req)
+      } finally {
+        this.loading = false
+        this.editIcon = false
+      }
+    },
   },
 }
 </script>
 
 <style lang="scss" scoped>
 :deep(.modal) {
-  .icon-container {
+  .icon-canvas {
     display: inline-flex;
     align-items: center;
+
+    .icon-container {
+      justify-content: right;
+    }
+  }
+
+  .icon-editor {
+    display: flex;
+    flex-direction: column;
+  }
+
+  button {
+    border: none;
+    background: none;
+    padding: 0 0.5em;
+  }
+
+  .help {
+    font-size: 0.75em;
   }
 }
 </style>