raddi customization UI
This commit is contained in:
Henry Jameson
parent
65f82cf294
commit
b23bd076c3
@ -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;
|
||||
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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
|
||||
}})
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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 })
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user