raddi customization UI

src/components/notifications/notifications.scss

@@ -121,7 +121,7 @@
       width: 32px;
       height: 32px;
       border-radius: $fallback--avatarAltRadius;
-      border-radius: 50%;
+      border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
       overflow: hidden;
       line-height: 0;
 

src/components/status/status.vue

@@ -365,7 +365,8 @@ status-text-container {
 .status .avatar {
   width: 48px;
   height: 48px;
-  border-radius: 5px;
+  border-radius: $fallback--avatarRadius;
+  border-radius: var(--avatarRadius, $fallback--avatarRadius);
   overflow: hidden;
 
   img {

src/components/style_switcher/style_switcher.js

@@ -9,10 +9,16 @@ export default {
       btnColorLocal: '',
       textColorLocal: '',
       linkColorLocal: '',
-      redColorLocal: '#ff0000',
+      redColorLocal: '',
-      blueColorLocal: '#0095ff',
+      blueColorLocal: '',
-      greenColorLocal: '#0fa00f',
+      greenColorLocal: '',
-      orangeColorLocal: '#E3FF00'
+      orangeColorLocal: '',
+      btnRadiusLocal: '',
+      panelRadiusLocal: '',
+      avatarRadiusLocal: '',
+      avatarAltRadiusLocal: '',
+      attachmentRadiusLocal: '',
+      tooltipRadiusLocal: ''
     }
   },
   created () {
@@ -26,20 +32,28 @@ export default {
   },
   mounted () {
     this.bgColorLocal = rgbstr2hex(this.$store.state.config.colors.bg)
-    this.btnColorLocal = rgbstr2hex(this.$store.state.config.colors.lightBg)
+    this.btnColorLocal = rgbstr2hex(this.$store.state.config.colors.btn)
     this.textColorLocal = rgbstr2hex(this.$store.state.config.colors.fg)
     this.linkColorLocal = rgbstr2hex(this.$store.state.config.colors.link)
 
-    this.redColorLocal = rgbstr2hex(this.$store.state.config.colors.cRed || this.redColorLocal)
+    this.redColorLocal = rgbstr2hex(this.$store.state.config.colors.cRed)
-    this.blueColorLocal = rgbstr2hex(this.$store.state.config.colors.cBlue || this.blueColorLocal)
+    this.blueColorLocal = rgbstr2hex(this.$store.state.config.colors.cBlue)
-    this.greenColorLocal = rgbstr2hex(this.$store.state.config.colors.cGreen || this.greenColorLocal)
+    this.greenColorLocal = rgbstr2hex(this.$store.state.config.colors.cGreen)
-    this.orangeColorLocal = rgbstr2hex(this.$store.state.config.colors.cOrange || this.orangeColorLocal)
+    this.orangeColorLocal = rgbstr2hex(this.$store.state.config.colors.cOrange)
+
+    this.btnRadiusLocal = this.$store.state.config.radii.btnRadius || 4
+    this.panelRadiusLocal = this.$store.state.config.radii.panelRadius || 10
+    this.avatarRadiusLocal = this.$store.state.config.radii.avatarRadius || 5
+    this.avatarAltRadiusLocal = this.$store.state.config.radii.avatarAltRadius || 50
+    this.tooltipRadiusLocal = this.$store.state.config.radii.tooltipRadius || 2
+    this.attachmentRadiusLocal = this.$store.state.config.radii.attachmentRadius || 5
   },
   methods: {
     setCustomTheme () {
       if (!this.bgColorLocal && !this.btnColorLocal && !this.linkColorLocal) {
         // reset to picked themes
       }
+
       const rgb = (hex) => {
         const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
         return result ? {
@@ -69,7 +83,13 @@ export default {
             cRed: redRgb,
             cBlue: blueRgb,
             cGreen: greenRgb,
-            cOrange: orangeRgb
+            cOrange: orangeRgb,
+            btnRadius: this.btnRadiusLocal,
+            panelRadius: this.panelRadiusLocal,
+            avatarRadius: this.avatarRadiusLocal,
+            avatarAltRadius: this.avatarAltRadiusLocal,
+            tooltipRadius: this.tooltipRadiusLocal,
+            attachmentRadius: this.attachmentRadiusLocal
           }})
       }
     }

src/components/style_switcher/style_switcher.vue

@@ -51,7 +51,46 @@
         <input id="orangecolor-t" class="theme-color-in" type="text" v-model="orangeColorLocal">
       </div>
     </div>
-    <div>
+    <div class="radius-container">
+      <div class="radius-item">
+        <label for="btnradius" class="theme-radius-lb">{{$t('settings.btnRadius')}}</label>
+        <input id="btnradius" class="theme-radius-rn" type="range" v-model="btnRadiusLocal">
+        <input id="btnradius-t" class="theme-radius-in" type="text" v-model="btnRadiusLocal">
+      </div>
+      <div class="radius-item">
+        <label for="panelradius" class="theme-radius-lb">{{$t('settings.panelRadius')}}</label>
+        <input id="panelradius" class="theme-radius-rn" type="range" v-model="panelRadiusLocal">
+        <input id="panelradius-t" class="theme-radius-in" type="text" v-model="panelRadiusLocal">
+      </div>
+      <div class="radius-item">
+        <label for="avatarradius" class="theme-radius-lb">{{$t('settings.avatarRadius')}}</label>
+        <input id="avatarradius" class="theme-radius-rn" type="range" v-model="avatarRadiusLocal">
+        <input id="avatarradius-t" class="theme-radius-in" type="green" v-model="avatarRadiusLocal">
+      </div>
+      <div class="radius-item">
+        <label for="avataraltradius" class="theme-radius-lb">{{$t('settings.avatarAltRadius')}}</label>
+        <input id="avataraltradius" class="theme-radius-rn" type="range" v-model="avatarAltRadiusLocal">
+        <input id="avataraltradius-t" class="theme-radius-in" type="text" v-model="avatarAltRadiusLocal">
+      </div>
+      <div class="radius-item">
+        <label for="attachmentradius" class="theme-radius-lb">{{$t('settings.attachmentRadius')}}</label>
+        <input id="attachmentrradius" class="theme-radius-rn" type="range" v-model="attachmentRadiusLocal">
+        <input id="attachmentradius-t" class="theme-radius-in" type="text" v-model="attachmentRadiusLocal">
+      </div>
+      <div class="radius-item">
+        <label for="tooltipradius" class="theme-radius-lb">{{$t('settings.tooltipRadius')}}</label>
+        <input id="tooltipradius" class="theme-radius-rn" type="range" v-model="tooltipRadiusLocal">
+        <input id="tooltipradius-t" class="theme-radius-in" type="text" v-model="tooltipRadiusLocal">
+      </div>
+    </div>
+    <div :style="{
+                 '--btnRadius': btnRadiusLocal + 'px',
+                 '--panelRadius': panelRadiusLocal + 'px',
+                 '--avatarRadius': avatarRadiusLocal + 'px',
+                 '--avatarAltRadius': avatarAltRadiusLocal + 'px',
+                 '--tooltipRadius': tooltipRadiusLocal + 'px',
+                 '--attachmentRadius': attachmentRadiusLocal + 'px'
+                 }">
       <div class="panel">
         <div class="panel-heading" :style="{ 'background-color': btnColorLocal, 'color': textColorLocal }">Preview</div>
         <div class="panel-body theme-preview-content" :style="{ 'background-color': bgColorLocal, 'color': textColorLocal }">
@@ -88,6 +127,7 @@
   justify-content: space-between;
 }
 
+.radius-item,
 .color-item {
   min-width: 20em;
   display:flex;
@@ -100,13 +140,16 @@
   }
 }
 
+.theme-radius-rn,
 .theme-color-cl {
   border: 0;
   box-shadow: none;
   background: transparent;
+  color: var(--faint, $fallback--faint);
 }
 
 .theme-color-cl,
+.theme-radius-in,
 .theme-color-in {
   margin-left: 4px;
 }
@@ -114,12 +157,29 @@
 .theme-color-in {
   padding: 5px;
   min-width: 4em;
+}
+
+.theme-radius-in {
+  min-width: 1em;
+}
+
+.theme-radius-in,
+.theme-color-in {
   max-width: 7em;
   flex: 1;
 }
+
+.theme-radius-lb,
 .theme-color-lb {
   flex: 2;
   min-width: 7em;
+}
+
+.theme-radius-lb{
+  max-width: 50em;
+}
+
+.theme-color-lb {
   max-width: 10em;
 }
 

src/components/user_card_content/user_card_content.vue

@@ -134,7 +134,8 @@
   }
 
   .avatar {
-    border-radius: 5px;
+    border-radius: $fallback--avatarRadius;
+    border-radius: var(--avatarRadius, $fallback--avatarRadius);
     flex: 1 0 100%;
     width: 56px;
     height: 56px;

src/services/style_setter/style_setter.js

@@ -64,6 +64,7 @@ const setColors = (col, commit) => {
 
   const isDark = (col.text.r + col.text.g + col.text.b) > (col.bg.r + col.bg.g + col.bg.b)
   let colors = {}
+  let radii = {}
 
   let mod = 10
   if (isDark) {
@@ -89,11 +90,22 @@ const setColors = (col, commit) => {
   colors.cGreen = col.cGreen && rgb2hex(col.cGreen.r, col.cGreen.g, col.cGreen.b)
   colors.cOrange = col.cOrange && rgb2hex(col.cOrange.r, col.cOrange.g, col.cOrange.b)
 
+  console.log('OMGGGG')
+  console.log(JSON.stringify(col))
+  radii.btnRadius = col.btnRadius
+  radii.panelRadius = col.panelRadius
+  radii.avatarRadius = col.avatarRadius
+  radii.avatarAltRadius = col.avatarAltRadius
+  radii.tooltipRadius = col.tooltipRadius
+  radii.attachmentRadius = col.attachmentRadius
+
   styleSheet.toString()
-  styleSheet.insertRule(`body { ${Object.entries(colors).map(([k, v]) => `--${k}: ${v}`).join(';')} }`, 'index-max')
+  styleSheet.insertRule(`body { ${Object.entries(colors).filter(([k, v]) => v).map(([k, v]) => `--${k}: ${v}`).join(';')} }`, 'index-max')
+  styleSheet.insertRule(`body { ${Object.entries(radii).filter(([k, v]) => v).map(([k, v]) => `--${k}: ${v}px`).join(';')} }`, 'index-max')
   body.style.display = 'initial'
 
   commit('setOption', { name: 'colors', value: colors })
+  commit('setOption', { name: 'radii', value: radii })
   commit('setOption', { name: 'customTheme', value: col })
 }