aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/components/notifications/notifications.scss2
-rw-r--r--src/components/status/status.vue3
-rw-r--r--src/components/style_switcher/style_switcher.js40
-rw-r--r--src/components/style_switcher/style_switcher.vue62
-rw-r--r--src/components/user_card_content/user_card_content.vue3
-rw-r--r--src/services/style_setter/style_setter.js14
6 files changed, 109 insertions, 15 deletions
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 @@
<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;
}
diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index eb1d2338..46d1c8b5 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 9ec9b735..2010fdfd 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 })
}
generated by cgit v1.2.3-70-g09d2 (git 2.49.0) at 2025-11-11 16:18:15 +0000