From b23bd076c320b84d47bf062c5b969236eb77479a Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 8 Apr 2018 02:39:39 +0300 Subject: [PATCH] raddi customization UI --- .../notifications/notifications.scss | 2 +- src/components/status/status.vue | 3 +- .../style_switcher/style_switcher.js | 40 +++++++++--- .../style_switcher/style_switcher.vue | 62 ++++++++++++++++++- .../user_card_content/user_card_content.vue | 3 +- src/services/style_setter/style_setter.js | 14 ++++- 6 files changed, 109 insertions(+), 15 deletions(-) diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss index 7ef4f07d3d..e9a60a93c2 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 4937ae8bf3..798443f105 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 e6b80ac979..08bc71130a 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 2ebf2b9087..b096f00eba 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -51,7 +51,46 @@ -
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
Preview
@@ -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; } diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue index eb1d23388e..46d1c8b5ba 100644 --- a/src/components/user_card_content/user_card_content.vue +++ b/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; diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index 9ec9b73511..2010fdfd60 100644 --- a/src/services/style_setter/style_setter.js +++ b/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 }) }