sam/pleroma-fe
sam/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

cleanup and optimization

Browse source
This commit is contained in:
Henry Jameson 2018-11-19 20:22:46 +03:00
parent a8180d03be
commit 56fec664a9
7 changed files with 216 additions and 155 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/App.scss
View file

@ -313,7 +313,7 @@ main-router {
border-radius: $fallback--panelRadius;
border-radius: var(--panelRadius, $fallback--panelRadius);
box-shadow: 1px 1px 4px rgba(0,0,0,.6);
box-shadow: var(--panel-shadow);
box-shadow: var(--panelShadow);
}
.panel-body:empty::before {

10
src/components/shadow_control/shadow_control.js
View file

@ -1,16 +1,13 @@
import ColorInput from '../color_input/color_input.vue'
import OpacityInput from '../opacity_input/opacity_input.vue'
import StyleSetter from '../../services/style_setter/style_setter.js'
import { getCssShadow } from '../../services/style_setter/style_setter.js'
import { hex2rgb } from '../../services/color_convert/color_convert.js'
import { set } from 'vue'
export default {
props: [
'value', 'fallback'
],
data () {
console.log('sdsa')
console.log(this.value, this.fallback)
return {
selectedId: 0,
cValue: this.value || this.fallback
@ -38,9 +35,6 @@ export default {
const movable = this.cValue.splice(this.selectedId, 1)[0]
this.cValue.splice(this.selectedId + 1, 0, movable)
this.selectedId += 1
},
update () {
this.$emit('input', this.cValue)
}
},
computed: {
@ -73,7 +67,7 @@ export default {
},
style () {
return {
boxShadow: StyleSetter.generateShadow(this.cValue)
boxShadow: getCssShadow(this.cValue)
}
}
}

1
src/components/shadow_control/shadow_control.vue
View file

@ -5,7 +5,6 @@
<input
v-model="selected.y"
:disabled="!present"
@input="update"
class="input-number"
type="number">
<div class="wrap">

204
src/components/style_switcher/style_switcher.js
View file

@ -1,12 +1,23 @@
import { rgb2hex, hex2rgb, getContrastRatio, alphaBlend } from '../../services/color_convert/color_convert.js'
import { set, delete as del } from 'vue'
import { generateColors, generateShadows, generateRadii, composePreset } from '../../services/style_setter/style_setter.js'
import ColorInput from '../color_input/color_input.vue'
import ShadowControl from '../shadow_control/shadow_control.vue'
import ContrastRatio from '../contrast_ratio/contrast_ratio.vue'
import OpacityInput from '../opacity_input/opacity_input.vue'
import StyleSetter from '../../services/style_setter/style_setter.js'
import TabSwitcher from '../tab_switcher/tab_switcher.jsx'
const v1OnlyNames = [
'bg',
'fg',
'text',
'link',
'cRed',
'cGreen',
'cBlue',
'cOrange'
].map(_ => _ + 'ColorLocal')
export default {
data () {
return {
@ -53,14 +64,14 @@ export default {
faintOpacityLocal: undefined,
faintLinkColorLocal: undefined,
shadowSelected: undefined,
shadowsLocal: {},
cRedColorLocal: '',
cBlueColorLocal: '',
cGreenColorLocal: '',
cOrangeColorLocal: '',
shadowSelected: undefined,
shadowsLocal: {},
btnRadiusLocal: '',
inputRadiusLocal: '',
panelRadiusLocal: '',
@ -86,81 +97,90 @@ export default {
selectedVersion () {
return Array.isArray(this.selected) ? 1 : 2
},
currentTheme () {
currentColors () {
return {
colors: {
bg: this.bgColorLocal,
text: this.textColorLocal,
link: this.linkColorLocal,
bg: this.bgColorLocal,
text: this.textColorLocal,
link: this.linkColorLocal,
fg: this.fgColorLocal,
fgText: this.fgTextColorLocal,
fgLink: this.fgLinkColorLocal,
fg: this.fgColorLocal,
fgText: this.fgTextColorLocal,
fgLink: this.fgLinkColorLocal,
panel: this.panelColorLocal,
panelText: this.panelTextColorLocal,
panelFaint: this.panelFaintColorLocal,
panel: this.panelColorLocal,
panelText: this.panelTextColorLocal,
panelFaint: this.panelFaintColorLocal,
input: this.inputColorLocal,
inputText: this.inputTextColorLocal,
input: this.inputColorLocal,
inputText: this.inputTextColorLocal,
topBar: this.topBarColorLocal,
topBarText: this.topBarTextColorLocal,
topBarLink: this.topBarLinkColorLocal,
topBar: this.topBarColorLocal,
topBarText: this.topBarTextColorLocal,
topBarLink: this.topBarLinkColorLocal,
btn: this.btnColorLocal,
btnText: this.btnTextColorLocal,
btn: this.btnColorLocal,
btnText: this.btnTextColorLocal,
alertError: this.alertErrorColorLocal,
badgeNotification: this.badgeNotificationColorLocal,
alertError: this.alertErrorColorLocal,
badgeNotification: this.badgeNotificationColorLocal,
faint: this.faintColorLocal,
faintLink: this.faintLinkColorLocal,
border: this.borderColorLocal,
faint: this.faintColorLocal,
faintLink: this.faintLinkColorLocal,
border: this.borderColorLocal,
cRed: this.cRedColorLocal,
cBlue: this.cBlueColorLocal,
cGreen: this.cGreenColorLocal,
cOrange: this.cOrangeColorLocal
},
opacity: {
bg: this.bgOpacityLocal,
btn: this.btnOpacityLocal,
input: this.inputOpacityLocal,
panel: this.panelOpacityLocal,
topBar: this.topBarOpacityLocal,
border: this.borderOpacityLocal,
faint: this.faintOpacityLocal
},
radii: {
btnRadius: this.btnRadiusLocal,
inputRadius: this.inputRadiusLocal,
panelRadius: this.panelRadiusLocal,
avatarRadius: this.avatarRadiusLocal,
avatarAltRadius: this.avatarAltRadiusLocal,
tooltipRadius: this.tooltipRadiusLocal,
attachmentRadius: this.attachmentRadiusLocal
}
cRed: this.cRedColorLocal,
cBlue: this.cBlueColorLocal,
cGreen: this.cGreenColorLocal,
cOrange: this.cOrangeColorLocal
}
},
preview () {
try {
if (!this.currentTheme.colors.bg) {
return {}
}
return StyleSetter.generatePreset(this.currentTheme)
} catch (e) {
console.error('CATCH')
console.error(e)
currentOpacity () {
return {
bg: this.bgOpacityLocal,
btn: this.btnOpacityLocal,
input: this.inputOpacityLocal,
panel: this.panelOpacityLocal,
topBar: this.topBarOpacityLocal,
border: this.borderOpacityLocal,
faint: this.faintOpacityLocal
}
},
currentRadii () {
return {
btn: this.btnRadiusLocal,
input: this.inputRadiusLocal,
panel: this.panelRadiusLocal,
avatar: this.avatarRadiusLocal,
avatarAlt: this.avatarAltRadiusLocal,
tooltip: this.tooltipRadiusLocal,
attachment: this.attachmentRadiusLocal
}
},
previewColors () {
if (this.currentColors.bg) {
return generateColors({
opacity: this.currentOpacity,
colors: this.currentColors
})
} else {
return {}
}
},
previewRadii () {
return generateRadii(this.currentRadii)
},
previewShadows () {
return generateShadows({ shadows: this.shadowsLocal })
},
preview () {
return composePreset(this.previewColors, this.previewRadii, this.previewShadows)
},
previewTheme () {
if (!this.preview.theme) return { colors: {}, opacity: {}, radii: {}, shadows: {} }
if (!this.preview.theme.colors) return { colors: {}, opacity: {}, radii: {}, shadows: {} }
return this.preview.theme
},
previewContrast () {
if (!this.previewTheme.colors) return {}
if (!this.previewTheme.colors.bg) return {}
const colors = this.previewTheme.colors
const opacity = this.previewTheme.opacity
if (!colors.bg) return {}
@ -228,19 +248,19 @@ export default {
return Object.entries(ratios).reduce((acc, [k, v]) => { acc[k] = hints(v); return acc }, {})
},
previewRules () {
if (!this.preview.colorRules) return ''
return [this.preview.colorRules, this.preview.radiiRules, 'color: var(--text)'].join(';')
if (!this.preview.rules) return ''
return [...Object.values(this.preview.rules), 'color: var(--text)'].join(';')
},
shadowsAvailable () {
return Object.keys(this.previewTheme.shadows)
},
currentShadowOverriden: {
get () {
return this.currentShadow
return !!this.currentShadow
},
set (val) {
if (val) {
set(this.shadowsLocal, this.shadowSelected, Object.assign({}, this.currentShadowFallback))
set(this.shadowsLocal, this.shadowSelected, this.currentShadowFallback.map(_ => Object.assign({}, _)))
} else {
del(this.shadowsLocal, this.shadowSelected)
}
@ -270,7 +290,12 @@ export default {
const stringified = JSON.stringify({
// To separate from other random JSON files and possible future theme formats
_pleroma_theme_version: 2,
theme: this.currentTheme
theme: {
shadows: this.shadowsLocal,
opacity: this.currentOpacity,
colors: this.currentColors,
radii: this.currentRadii
}
}, null, 2) // Pretty-print and indent with 2 spaces
// Create an invisible link with a data url and simulate a click
@ -323,47 +348,22 @@ export default {
this.$store.dispatch('setOption', {
name: 'customTheme',
value: {
...this.currentTheme,
shadows: this.shadowsLocal
shadows: this.shadowsLocal,
opacity: this.currentOpacity,
colors: this.currentColors,
radii: this.currentRadii
}
})
},
// Clears all the extra stuff when loading V1 theme
clearV1 () {
this.bgOpacityLocal = undefined
this.fgOpacityLocal = undefined
this.fgTextColorLocal = undefined
this.fgLinkColorLocal = undefined
this.btnColorLocal = undefined
this.btnTextColorLocal = undefined
this.btnOpacityLocal = undefined
this.inputColorLocal = undefined
this.inputTextColorLocal = undefined
this.inputOpacityLocal = undefined
this.panelColorLocal = undefined
this.panelTextColorLocal = undefined
this.panelFaintColorLocal = undefined
this.panelOpacityLocal = undefined
this.topBarColorLocal = undefined
this.topBarTextColorLocal = undefined
this.topBarLinkColorLocal = undefined
this.topBarOpacityLocal = undefined
this.borderColorLocal = undefined
this.borderOpacityLocal = undefined
this.faintColorLocal = undefined
this.faintOpacityLocal = undefined
this.faintLinkColorLocal = undefined
this.alertErrorColorLocal = undefined
this.badgeNotificationColorLocal = undefined
Object.keys(this.$data)
.filter(_ => _.endsWith('ColorLocal') || _.endsWith('OpacityLocal'))
.filter(_ => !v1OnlyNames.includes(_))
.forEach(key => {
set(this.$data, key, undefined)
})
},
/**

6
src/modules/config.js
View file

@ -1,5 +1,5 @@
import { set, delete as del } from 'vue'
import StyleSetter from '../services/style_setter/style_setter.js'
import { setPreset, setColors } from '../services/style_setter/style_setter.js'
const browserLocale = (window.navigator.language || 'en').split('-')[0]
@ -51,10 +51,10 @@ const config = {
commit('setOption', {name, value})
switch (name) {
case 'theme':
StyleSetter.setPreset(value, commit)
setPreset(value, commit)
break
case 'customTheme':
StyleSetter.setColors(value, commit)
setColors(value, commit)
}
}
}

4
src/modules/instance.js
View file

@ -1,5 +1,5 @@
import { set } from 'vue'
import StyleSetter from '../services/style_setter/style_setter.js'
import { setPreset } from '../services/style_setter/style_setter.js'
const defaultState = {
// Stuff from static/config.json and apiConfig
@ -54,7 +54,7 @@ const instance = {
dispatch('setPageTitle')
break
case 'theme':
StyleSetter.setPreset(value, commit)
setPreset(value, commit)
}
}
}

144
src/services/style_setter/style_setter.js
View file

@ -72,7 +72,7 @@ const getTextColor = function (bg, text, preserve) {
}
const setColors = (input, commit) => {
const { colorRules, radiiRules, shadowRules, theme } = generatePreset(input)
const { rules, theme } = generatePreset(input)
const head = document.head
const body = document.body
body.style.display = 'none'
@ -81,10 +81,11 @@ const setColors = (input, commit) => {
head.appendChild(styleEl)
const styleSheet = styleEl.sheet
console.log(rules)
styleSheet.toString()
styleSheet.insertRule(`body { ${colorRules} }`, 'index-max')
styleSheet.insertRule(`body { ${radiiRules} }`, 'index-max')
styleSheet.insertRule(`body { ${shadowRules} }`, 'index-max')
styleSheet.insertRule(`body { ${rules.radii} }`, 'index-max')
styleSheet.insertRule(`body { ${rules.colors} }`, 'index-max')
styleSheet.insertRule(`body { ${rules.shadows} }`, 'index-max')
body.style.display = 'initial'
// commit('setOption', { name: 'colors', value: htmlColors })
@ -93,7 +94,8 @@ const setColors = (input, commit) => {
commit('setOption', { name: 'colors', value: theme.colors })
}
const generateShadow = (input) => {
const getCssShadow = (input) => {
console.log(input)
// >shad
return input.map((shad) => [
shad.x,
@ -106,27 +108,8 @@ const generateShadow = (input) => {
]).join(' ')).join(', ')
}
const generatePreset = (input) => {
const radii = input.radii || {
btnRadius: input.btnRadius,
inputRadius: input.inputRadius,
panelRadius: input.panelRadius,
avatarRadius: input.avatarRadius,
avatarAltRadius: input.avatarAltRadius,
tooltipRadius: input.tooltipRadius,
attachmentRadius: input.attachmentRadius
}
const shadows = {
panel: [{
x: 1,
y: 1,
blur: 4,
spread: 0,
color: '#000000',
alpha: 0.6
}],
...(input.shadows || {})
}
const generateColors = (input) => {
console.log(input.opacity)
const colors = {}
const opacity = Object.assign({
alert: 0.5,
@ -138,7 +121,7 @@ const generatePreset = (input) => {
}
return acc
}, {}))
console.log(colors, opacity)
const col = Object.entries(input.colors || input).reduce((acc, [k, v]) => {
if (typeof v === 'object') {
acc[k] = v
@ -205,7 +188,11 @@ const generatePreset = (input) => {
colors[k + 'Link'].a = v
colors['panelFaint'].a = v
}
colors[k].a = v
if (colors[k]) {
colors[k].a = v
} else {
console.error('Wrong key ' + k)
}
})
const htmlColors = Object.entries(colors)
@ -215,20 +202,99 @@ const generatePreset = (input) => {
acc.complete[k] = typeof v.a === 'undefined' ? rgb2hex(v) : rgb2rgba(v)
return acc
}, { complete: {}, solid: {} })
return {
colorRules: Object.entries(htmlColors.complete).filter(([k, v]) => v).map(([k, v]) => `--${k}: ${v}`).join(';'),
radiiRules: Object.entries(radii).filter(([k, v]) => v).map(([k, v]) => `--${k}: ${v}px`).join(';'),
shadowRules: Object.entries(shadows).filter(([k, v]) => v).map(([k, v]) => `--${k}-shadow: ${generateShadow(v)}`).join(';'),
rules: {
colors: Object.entries(htmlColors.complete)
.filter(([k, v]) => v)
.map(([k, v]) => `--${k}: ${v}`)
.join(';')
},
theme: {
colors: htmlColors.solid,
shadows,
opacity,
opacity
}
}
}
const generateRadii = (input) => {
const inputRadii = input.radii || {
btn: input.btnRadius,
input: input.inputRadius,
panel: input.panelRadius,
avatar: input.avatarRadius,
avatarAlt: input.avatarAltRadius,
tooltip: input.tooltipRadius,
attachment: input.attachmentRadius
}
const radii = {
btn: 4,
input: 4,
panel: 10,
avatar: 5,
avatarAlt: 50,
tooltip: 2,
attachment: 5,
...inputRadii
}
return {
rules: {
radii: Object.entries(radii).filter(([k, v]) => v).map(([k, v]) => `--${k}Radius: ${v}px`).join(';')
},
theme: {
radii
}
}
}
const generateShadows = (input) => {
const shadows = {
panel: [{
x: 1,
y: 1,
blur: 4,
spread: 0,
color: '#000000',
alpha: 0.6
}],
...(input.shadows || {})
}
console.log('benis')
return {
rules: {
shadows: Object.entries(shadows).filter(([k, v]) => v).map(([k, v]) => `--${k}Shadow: ${getCssShadow(v)}`).join(';')
},
theme: {
shadows
}
}
}
const composePreset = (colors, radii, shadows) => {
return {
rules: {
...shadows.rules,
...colors.rules,
...radii.rules
},
theme: {
...shadows.theme,
...colors.theme,
...radii.theme
}
}
}
const generatePreset = (input) => {
const shadows = generateShadows(input)
const colors = generateColors(input)
const radii = generateRadii(input)
return composePreset(colors, radii, shadows)
}
const setPreset = (val, commit) => {
window.fetch('/static/styles.json')
.then((data) => data.json())
@ -267,13 +333,15 @@ const setPreset = (val, commit) => {
})
}
const StyleSetter = {
export {
setStyle,
setPreset,
setColors,
getTextColor,
generateColors,
generateRadii,
generateShadows,
generatePreset,
generateShadow
composePreset,
getCssShadow
}
export default StyleSetter