diff --git a/html/package-lock.json b/html/package-lock.json
index 21127670..025a218c 100644
--- a/html/package-lock.json
+++ b/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",
diff --git a/html/package.json b/html/package.json
index ede982b0..f63561b4 100644
--- a/html/package.json
+++ b/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"
}
}
diff --git a/html/src/app.dark.scss b/html/src/app.dark.scss
index f06273c4..703d9678 100644
--- a/html/src/app.dark.scss
+++ b/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;
}
diff --git a/html/src/app.js b/html/src/app.js
index 70605f3a..ac989cb2 100644
--- a/html/src/app.js
+++ b/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;
diff --git a/html/src/app.scss b/html/src/app.scss
index a356a916..ccb0e295 100644
--- a/html/src/app.scss
+++ b/html/src/app.scss
@@ -433,105 +433,14 @@ i.x-user-status.busy {
background: #f56c6c;
}
-.x-friend-item > .detail > .name.x-tag-untrusted {
- color: rgb(204, 204, 204);
+.x-tag-friend {
+ color: rgb(255, 208, 0) !important;
+ border-color: rgb(255, 208, 0) !important;
}
-.el-tag.x-tag-untrusted {
- color: rgb(204, 204, 204);
- border-color: rgb(204, 204, 204);
-}
-
-.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);
+.x-tag-vrcplus {
+ color: rgb(255, 208, 0) !important;
+ border-color: rgb(255, 208, 0) !important;
}
.el-tree-node {
@@ -588,3 +497,7 @@ i.x-user-status.busy {
vertical-align: top;
text-align: right;
}
+
+.color-picker {
+ font-size: 18px;
+}
diff --git a/html/src/index.pug b/html/src/index.pug
index f3257d16..f5ac3a20 100644
--- a/html/src/index.pug
+++ b/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