feat(custom inspector): node tags

Akryum · Akryum · commit dea79bf481ff · 2020-08-31T23:20:03.000+02:00
diff --git a/packages/api/src/api/api.ts b/packages/api/src/api/api.ts
@@ -42,6 +42,13 @@ export interface CustomInspectorNode {
   id: string
   label: string
   children?: CustomInspectorNode[]
+  tags?: CustomInspectorNodeTag[]
+}
+
+export interface CustomInspectorNodeTag {
+  label: string
+  textColor: number
+  backgroundColor: number
 }
 
 export interface CustomInspectorState {
diff --git a/packages/app-frontend/src/features/inspector/custom/CustomInspectorNode.vue b/packages/app-frontend/src/features/inspector/custom/CustomInspectorNode.vue
@@ -85,6 +85,18 @@ export default {
       <span>
         {{ node.label }}
       </span>
+
+      <span
+        v-for="(tag, index) of node.tags"
+        :key="index"
+        :style="{
+          color: `#${tag.textColor.toString(16).padStart(6, '0')}`,
+          backgroundColor: `#${tag.backgroundColor.toString(16).padStart(6, '0')}`,
+        }"
+        class="tag px-1 rounded-sm ml-2"
+      >
+        {{ tag.label }}
+      </span>
     </div>
 
     <div v-if="expanded && node.children">
@@ -97,3 +109,9 @@ export default {
     </div>
   </div>
 </template>
+
+<style lang="postcss" scoped>
+.tag {
+  font-size: 0.65rem;
+}
+</style>
diff --git a/packages/shell-dev-vue3/src/devtools-plugin/index.js b/packages/shell-dev-vue3/src/devtools-plugin/index.js
@@ -69,7 +69,19 @@ export default {
               children: [
                 {
                   id: 'child',
-                  label: `Child ${payload.filter}`
+                  label: `Child ${payload.filter}`,
+                  tags: [
+                    {
+                      label: 'active',
+                      textColor: 0x000000,
+                      backgroundColor: 0xFF984F
+                    },
+                    {
+                      label: 'test',
+                      textColor: 0xffffff,
+                      backgroundColor: 0x000000
+                    }
+                  ]
                 }
               ]
             }

Original file line number	Diff line number	Diff line change
`@@ -69,7 +69,19 @@ export default {`
`69`	`69`	`children: [`
`70`	`70`	`{`
`71`	`71`	`id: 'child',`
`72`		- label: `Child ${payload.filter}`
	`72`	+ label: `Child ${payload.filter}`,
	`73`	`+ tags: [`
	`74`	`+ {`
	`75`	`+ label: 'active',`
	`76`	`+ textColor: 0x000000,`
	`77`	`+ backgroundColor: 0xFF984F`
	`78`	`+ },`
	`79`	`+ {`
	`80`	`+ label: 'test',`
	`81`	`+ textColor: 0xffffff,`
	`82`	`+ backgroundColor: 0x000000`
	`83`	`+ }`
	`84`	`+ ]`
`73`	`85`	`}`
`74`	`86`	`]`
`75`	`87`	`}`