diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss index 7ef4f07d..e9a60a93 100644 --- a/src/components/notifications/notifications.scss +++ b/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; diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 4937ae8b..798443f1 100644 --- a/src/components/status/status.vue +++ b/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 { diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js index e6b80ac9..08bc7113 100644 --- a/src/components/style_switcher/style_switcher.js +++ b/src/components/style_switcher/style_switcher.js @@ -9,10 +9,16 @@ export default { btnColorLocal: '', textColorLocal: '', linkColorLocal: '', - redColorLocal: '#ff0000', - blueColorLocal: '#0095ff', - greenColorLocal: '#0fa00f', - orangeColorLocal: '#E3FF00' + redColorLocal: '', + blueColorLocal: '', + greenColorLocal: '', + 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.blueColorLocal = rgbstr2hex(this.$store.state.config.colors.cBlue || this.blueColorLocal) - this.greenColorLocal = rgbstr2hex(this.$store.state.config.colors.cGreen || this.greenColorLocal) - this.orangeColorLocal = rgbstr2hex(this.$store.state.config.colors.cOrange || this.orangeColorLocal) + this.redColorLocal = rgbstr2hex(this.$store.state.config.colors.cRed) + this.blueColorLocal = rgbstr2hex(this.$store.state.config.colors.cBlue) + this.greenColorLocal = rgbstr2hex(this.$store.state.config.colors.cGreen) + 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 }}) } } diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index 2ebf2b90..b096f00e 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -51,7 +51,46 @@ -