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

fixes, cleanup

Browse source
This commit is contained in:
Henry Jameson 2020-01-12 04:00:41 +02:00
parent f31ed7e5a8
commit a9a1fc37f5
2 changed files with 17 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,15 +1,20 @@
import { rgb2hex, hex2rgb, getContrastRatio, getContrastRatioLayers, alphaBlend } from '../../services/color_convert/color_convert.js'
import { set, delete as del } from 'vue' import { set, delete as del } from 'vue'
import { merge } from 'lodash' import {
rgb2hex,
hex2rgb,
getContrastRatio,
getContrastRatioLayers,
alphaBlend
} from '../../services/color_convert/color_convert.js'
import { import {
generateColors, generateColors,
generateShadows, generateShadows,
generateRadii, generateRadii,
generateFonts, generateFonts,
composePreset, composePreset,
getThemes, getThemes
CURRENT_VERSION
} from '../../services/style_setter/style_setter.js' } from '../../services/style_setter/style_setter.js'
import { CURRENT_VERSION } from '../../services/theme_data/theme_data.service.js'
import ColorInput from '../color_input/color_input.vue' import ColorInput from '../color_input/color_input.vue'
import RangeInput from '../range_input/range_input.vue' import RangeInput from '../range_input/range_input.vue'
import OpacityInput from '../opacity_input/opacity_input.vue' import OpacityInput from '../opacity_input/opacity_input.vue'

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

@ -114,7 +114,7 @@ const getCssShadowFilter = (input) => {
.join(' ') .join(' ')
} }
const generateColors = (themeData) => { export const generateColors = (themeData) => {
const rawOpacity = Object.assign({ const rawOpacity = Object.assign({
panel: 1, panel: 1,
btn: 1, btn: 1,
@ -182,6 +182,7 @@ const generateColors = (themeData) => {
} }
if (k === 'badge') { if (k === 'badge') {
colors['badgeNotification'].a = v colors['badgeNotification'].a = v
return
} }
if (colors[k]) { if (colors[k]) {
colors[k].a = v colors[k].a = v
@ -211,7 +212,7 @@ const generateColors = (themeData) => {
} }
} }
const generateRadii = (input) => { export const generateRadii = (input) => {
let inputRadii = input.radii || {} let inputRadii = input.radii || {}
// v1 -> v2 // v1 -> v2
if (typeof input.btnRadius !== 'undefined') { if (typeof input.btnRadius !== 'undefined') {
@ -244,7 +245,7 @@ const generateRadii = (input) => {
} }
} }
const generateFonts = (input) => { export const generateFonts = (input) => {
const fonts = Object.entries(input.fonts || {}).filter(([k, v]) => v).reduce((acc, [k, v]) => { const fonts = Object.entries(input.fonts || {}).filter(([k, v]) => v).reduce((acc, [k, v]) => {
acc[k] = Object.entries(v).filter(([k, v]) => v).reduce((acc, [k, v]) => { acc[k] = Object.entries(v).filter(([k, v]) => v).reduce((acc, [k, v]) => {
acc[k] = v acc[k] = v
@ -279,7 +280,7 @@ const generateFonts = (input) => {
} }
} }
const generateShadows = (input) => { export const generateShadows = (input) => {
const border = (top, shadow) => ({ const border = (top, shadow) => ({
x: 0, x: 0,
y: top ? 1 : -1, y: top ? 1 : -1,
@ -376,7 +377,7 @@ const generateShadows = (input) => {
} }
} }
const composePreset = (colors, radii, shadows, fonts) => { export const composePreset = (colors, radii, shadows, fonts) => {
return { return {
rules: { rules: {
...shadows.rules, ...shadows.rules,
@ -393,14 +394,14 @@ const composePreset = (colors, radii, shadows, fonts) => {
} }
} }
const generatePreset = (input) => composePreset( export const generatePreset = (input) => composePreset(
generateColors(input), generateColors(input),
generateRadii(input), generateRadii(input),
generateShadows(input), generateShadows(input),
generateFonts(input) generateFonts(input)
) )
const getThemes = () => { export const getThemes = () => {
return window.fetch('/static/styles.json') return window.fetch('/static/styles.json')
.then((data) => data.json()) .then((data) => data.json())
.then((themes) => { .then((themes) => {