Trust Rank color picker

html/package-lock.json

@@ -12430,6 +12430,12 @@
         "loader-utils": "^1.0.2"
       }
     },
+    "vue-swatches": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/vue-swatches/-/vue-swatches-2.1.0.tgz",
+      "integrity": "sha512-JbSomg1penZvgHL24blA3PDgji7LPVGGSFlMo7F+jYVcxooemadI3gkMwFJVIPMikG5g160Mq+Lbph/lqFjzzw==",
+      "dev": true
+    },
     "vue-template-compiler": {
       "version": "2.6.12",
       "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.12.tgz",

html/package.json

@@ -46,6 +46,7 @@
     "vue": "^2.6.12",
     "vue-data-tables": "^3.4.5",
     "vue-lazyload": "^1.3.3",
-    "vuejs-toggle-switch": "^1.3.2"
+    "vuejs-toggle-switch": "^1.3.2",
+    "vue-swatches": "^2.1.0"
   }
 }

html/src/app.dark.scss

@@ -327,24 +327,6 @@ button {
     color: #c7c7c7;
 }
 
-.x-friend-item > .detail > .name.x-tag-veteran {
-    color: rgb(177, 143, 255);
-}
-
-.el-tag.x-tag-veteran {
-    color: rgb(177, 143, 255);
-    border-color: rgb(177, 143, 255);
-}
-
-.x-friend-item > .detail > .name.x-tag-legendary {
-    color: rgb(255, 105, 180);
-}
-
-.el-tag.x-tag-legendary {
-    color: rgb(255, 105, 180);
-    border-color: rgb(255, 105, 180);
-}
-
 .x-user-dialog .el-textarea__inner {
     color: #fff;
 }

html/src/app.js

@@ -10,6 +10,9 @@ import VueLazyload from 'vue-lazyload';
 import { DataTables } from 'vue-data-tables';
 // eslint-disable-next-line no-unused-vars
 import ToggleSwitch from 'vuejs-toggle-switch';
+import VSwatches from 'vue-swatches';
+Vue.component('v-swatches', VSwatches)
+import "../node_modules/vue-swatches/dist/vue-swatches.css"
 import ElementUI from 'element-ui';
 import locale from 'element-ui/lib/locale/lang/en';
 
@@ -5969,6 +5972,52 @@ speechSynthesis.getVoices();
         }
     };
 
+    if (!configRepository.getString('VRCX_trustColor')) {
+        var trustColor = {
+            untrusted: '#CCCCCC',
+            basic: '#1778FF',
+            known: '#2BCF5C',
+            trusted: '#FF7B42',
+            veteran: '#B18FFF',
+            legend: '#FFD000',
+            legendary: '#FF69B4'
+        };
+        configRepository.setString('VRCX_trustColor', JSON.stringify(trustColor));
+    }
+    $app.data.trustColor = JSON.parse(configRepository.getString('VRCX_trustColor'));
+
+    $app.data.trustColorSwatches = ['#CCCCCC', '#1778FF', '#2BCF5C', '#FF7B42', '#B18FFF', '#FFD000', '#FF69B4', '#ABCDEF', '#8143E6', '#B52626', '#000000', '#FFFFFF'];
+
+    $app.methods.updatetrustColor = function () {
+        var trustColor = $app.trustColor;
+        if (trustColor) {
+            configRepository.setString('VRCX_trustColor', JSON.stringify(trustColor));
+        } else {
+            trustColor = JSON.parse(configRepository.getString('VRCX_trustColor'));
+            $app.trustColor = trustColor;
+        }
+        if (document.getElementById('trustColor') !== null) {
+            document.getElementById('trustColor').outerHTML = '';
+        }
+        var style = document.createElement('style');
+        style.id = 'trustColor';
+        style.type = 'text/css';
+        var newCSS = '';
+        for (var rank in trustColor) {
+            newCSS += `.x-tag-${rank} { color: ${trustColor[rank]} !important; border-color: ${trustColor[rank]} !important; } `;
+        }
+        style.innerHTML = newCSS;
+        document.getElementsByTagName('head')[0].appendChild(style);
+    };
+    $app.methods.updatetrustColor();
+    $app.watch['trustColor.untrusted'] = $app.methods.updatetrustColor;
+    $app.watch['trustColor.basic'] = $app.methods.updatetrustColor;
+    $app.watch['trustColor.known'] = $app.methods.updatetrustColor;
+    $app.watch['trustColor.trusted'] = $app.methods.updatetrustColor;
+    $app.watch['trustColor.veteran'] = $app.methods.updatetrustColor;
+    $app.watch['trustColor.legend'] = $app.methods.updatetrustColor;
+    $app.watch['trustColor.legendary'] = $app.methods.updatetrustColor;
+
     $app.methods.saveSharedFeedFilters = function () {
         this.notyFeedFiltersDialog.visible = false;
         this.wristFeedFiltersDialog.visible = false;

html/src/app.scss

@@ -433,105 +433,14 @@ i.x-user-status.busy {
     background: #f56c6c;
 }
 
-.x-friend-item > .detail > .name.x-tag-untrusted {
+.x-tag-friend {
-    color: rgb(204, 204, 204);
+    color: rgb(255, 208, 0) !important;
+    border-color: rgb(255, 208, 0) !important;
 }
 
-.el-tag.x-tag-untrusted {
+.x-tag-vrcplus {
-    color: rgb(204, 204, 204);
+    color: rgb(255, 208, 0) !important;
-    border-color: rgb(204, 204, 204);
+    border-color: rgb(255, 208, 0) !important;
-}
-
-.x-friend-item > .detail > .name.x-tag-basic {
-    color: rgb(23, 120, 255);
-}
-
-.el-tag.x-tag-basic {
-    color: rgb(23, 120, 255);
-    border-color: rgb(23, 120, 255);
-}
-
-.x-friend-item > .detail > .name.x-tag-known {
-    color: rgb(43, 207, 92);
-}
-
-.el-tag.x-tag-known {
-    color: rgb(43, 207, 92);
-    border-color: rgb(43, 207, 92);
-}
-
-.x-friend-item > .detail > .name.x-tag-trusted {
-    color: rgb(255, 123, 66);
-}
-
-.el-tag.x-tag-trusted {
-    color: rgb(255, 123, 66);
-    border-color: rgb(255, 123, 66);
-}
-
-.x-friend-item > .detail > .name.x-tag-veteran {
-    color: rgb(129, 67, 230);
-}
-
-.el-tag.x-tag-veteran {
-    color: rgb(129, 67, 230);
-    border-color: rgb(129, 67, 230);
-}
-
-.x-friend-item > .detail > .name.x-tag-legend {
-    // color: rgb(255, 255, 0);
-    color: rgb(255, 208, 0);
-}
-
-.el-tag.x-tag-legend {
-    // border-color: rgb(255, 255, 0);
-    // color: rgb(255, 255, 0);
-    color: rgb(255, 208, 0);
-    border-color: rgb(255, 208, 0);
-}
-
-.x-friend-item > .detail > .name.x-tag-legendary {
-    color: rgb(255, 105, 180);
-}
-
-.el-tag.x-tag-legendary {
-    color: rgb(255, 105, 180);
-    border-color: rgb(255, 105, 180);
-}
-
-.x-friend-item > .detail > .name.x-tag-vip {
-    color: rgb(181, 38, 38);
-}
-
-.el-tag.x-tag-vip {
-    color: rgb(181, 38, 38);
-    border-color: rgb(181, 38, 38);
-}
-
-.x-friend-item > .detail > .name.x-tag-troll {
-    color: rgb(120, 47, 47);
-}
-
-.el-tag.x-tag-troll {
-    color: rgb(120, 47, 47);
-    border-color: rgb(120, 47, 47);
-}
-
-.x-friend-item > .detail > .name.x-tag-friend {
-    // color: rgb(255, 255, 0);
-    color: rgb(255, 208, 0);
-}
-
-.el-tag.x-tag-friend {
-    // border-color: rgb(255, 255, 0);
-    // color: rgb(255, 255, 0);
-    color: rgb(255, 208, 0);
-    border-color: rgb(255, 208, 0);
-}
-
-.el-tag.x-tag-vrcplus {
-    color: rgb(255, 208, 0);
-    border-color: rgb(255, 208, 0);
 }
 
 .el-tree-node {
@@ -588,3 +497,7 @@ i.x-user-status.busy {
     vertical-align: top;
     text-align: right;
 }
+
+.color-picker {
+    font-size: 18px;
+}

html/src/index.pug

@@ -528,6 +528,30 @@ html
                     div.options-container-item
                         span.name Offline
                         el-switch(v-model="orderFriendsGroup3" inactive-text="by name" active-text="by state")
+                    div.options-container
+                        span.header Trust Rank Colors
+                        div.options-container-item
+                            div
+                                v-swatches(v-model="trustColor.untrusted" show-fallback fallback-input-type="color" popover-x="right" :swatches="trustColorSwatches" class="x-tag-untrusted")
+                                    span.color-picker(slot="trigger") #[i.el-icon-s-open] Visitor
+                            div
+                                v-swatches(v-model="trustColor.basic" show-fallback fallback-input-type="color" popover-x="right" :swatches="trustColorSwatches" class="x-tag-basic")
+                                    span.color-picker(slot="trigger") #[i.el-icon-s-open] New User
+                            div
+                                v-swatches(v-model="trustColor.known" show-fallback fallback-input-type="color" popover-x="right" :swatches="trustColorSwatches" class="x-tag-known")
+                                    span.color-picker(slot="trigger") #[i.el-icon-s-open] User
+                            div
+                                v-swatches(v-model="trustColor.trusted" show-fallback fallback-input-type="color" popover-x="right" :swatches="trustColorSwatches" class="x-tag-trusted")
+                                    span.color-picker(slot="trigger") #[i.el-icon-s-open] Known User
+                            div
+                                v-swatches(v-model="trustColor.veteran" show-fallback fallback-input-type="color" popover-x="right" :swatches="trustColorSwatches" class="x-tag-veteran")
+                                    span.color-picker(slot="trigger") #[i.el-icon-s-open] Trusted User
+                            div
+                                v-swatches(v-model="trustColor.legend" show-fallback fallback-input-type="color" popover-x="right" :swatches="trustColorSwatches" class="x-tag-legend")
+                                    span.color-picker(slot="trigger") #[i.el-icon-s-open] Veteran User
+                            div
+                                v-swatches(v-model="trustColor.legendary" show-fallback fallback-input-type="color" popover-x="right" :swatches="trustColorSwatches" class="x-tag-legendary")
+                                    span.color-picker(slot="trigger") #[i.el-icon-s-open] Legendary User
                 div.options-container
                     span.header Discord Presence
                     div.options-container-item
@@ -598,7 +622,7 @@ html
                         el-dropdown(@command="(voice) => changeTTSVoice(voice)" trigger="click" size="small")
                             el-button(v-text="TTSvoices[notificationTTSVoice].name" size="mini" :disabled="!openVR || !notificationTTS")
                             el-dropdown-menu(#default="dropdown")
-                                el-dropdown-item(v-if="voice" v-for="(voice, index) in TTSvoices" :key="index" v-text="voice.name" :command="index")         
+                                el-dropdown-item(v-if="voice" v-for="(voice, index) in TTSvoices" :key="index" v-text="voice.name" :command="index")     
                 div.options-container
                     span.header Application
                     div.options-container-item