Merge branch 'develop' into feature/new-user-routes
This commit is contained in:
Maxim Filippov
commit
2211c533dd
93 changed files with 5123 additions and 894 deletions
|
|
@ -1,6 +1,15 @@
|
|||
import { map } from 'lodash'
|
||||
|
||||
const rgb2hex = (r, g, b) => {
|
||||
if (r === null || typeof r === 'undefined') {
|
||||
return undefined
|
||||
}
|
||||
if (r[0] === '#') {
|
||||
return r
|
||||
}
|
||||
if (typeof r === 'object') {
|
||||
({ r, g, b } = r)
|
||||
}
|
||||
[r, g, b] = map([r, g, b], (val) => {
|
||||
val = Math.ceil(val)
|
||||
val = val < 0 ? 0 : val
|
||||
|
|
@ -10,6 +19,91 @@ const rgb2hex = (r, g, b) => {
|
|||
return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`
|
||||
}
|
||||
|
||||
/**
|
||||
* Converts 8-bit RGB component into linear component
|
||||
* https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
|
||||
* https://www.w3.org/TR/2008/REC-WCAG20-20081211/relative-luminance.xml
|
||||
* https://en.wikipedia.org/wiki/SRGB#The_reverse_transformation
|
||||
*
|
||||
* @param {Number} bit - color component [0..255]
|
||||
* @returns {Number} linear component [0..1]
|
||||
*/
|
||||
const c2linear = (bit) => {
|
||||
// W3C gives 0.03928 while wikipedia states 0.04045
|
||||
// what those magical numbers mean - I don't know.
|
||||
// something about gamma-correction, i suppose.
|
||||
// Sticking with W3C example.
|
||||
const c = bit / 255
|
||||
if (c < 0.03928) {
|
||||
return c / 12.92
|
||||
} else {
|
||||
return Math.pow((c + 0.055) / 1.055, 2.4)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Converts sRGB into linear RGB
|
||||
* @param {Object} srgb - sRGB color
|
||||
* @returns {Object} linear rgb color
|
||||
*/
|
||||
const srgbToLinear = (srgb) => {
|
||||
return 'rgb'.split('').reduce((acc, c) => { acc[c] = c2linear(srgb[c]); return acc }, {})
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculates relative luminance for given color
|
||||
* https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
|
||||
* https://www.w3.org/TR/2008/REC-WCAG20-20081211/relative-luminance.xml
|
||||
*
|
||||
* @param {Object} srgb - sRGB color
|
||||
* @returns {Number} relative luminance
|
||||
*/
|
||||
const relativeLuminance = (srgb) => {
|
||||
const {r, g, b} = srgbToLinear(srgb)
|
||||
return 0.2126 * r + 0.7152 * g + 0.0722 * b
|
||||
}
|
||||
|
||||
/**
|
||||
* Generates color ratio between two colors. Order is unimporant
|
||||
* https://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef
|
||||
*
|
||||
* @param {Object} a - sRGB color
|
||||
* @param {Object} b - sRGB color
|
||||
* @returns {Number} color ratio
|
||||
*/
|
||||
const getContrastRatio = (a, b) => {
|
||||
const la = relativeLuminance(a)
|
||||
const lb = relativeLuminance(b)
|
||||
const [l1, l2] = la > lb ? [la, lb] : [lb, la]
|
||||
|
||||
return (l1 + 0.05) / (l2 + 0.05)
|
||||
}
|
||||
|
||||
/**
|
||||
* This performs alpha blending between solid background and semi-transparent foreground
|
||||
*
|
||||
* @param {Object} fg - top layer color
|
||||
* @param {Number} fga - top layer's alpha
|
||||
* @param {Object} bg - bottom layer color
|
||||
* @returns {Object} sRGB of resulting color
|
||||
*/
|
||||
const alphaBlend = (fg, fga, bg) => {
|
||||
if (fga === 1 || typeof fga === 'undefined') return fg
|
||||
return 'rgb'.split('').reduce((acc, c) => {
|
||||
// Simplified https://en.wikipedia.org/wiki/Alpha_compositing#Alpha_blending
|
||||
// for opaque bg and transparent fg
|
||||
acc[c] = (fg[c] * fga + bg[c] * (1 - fga))
|
||||
return acc
|
||||
}, {})
|
||||
}
|
||||
|
||||
const invert = (rgb) => {
|
||||
return 'rgb'.split('').reduce((acc, c) => {
|
||||
acc[c] = 255 - rgb[c]
|
||||
return acc
|
||||
}, {})
|
||||
}
|
||||
|
||||
const hex2rgb = (hex) => {
|
||||
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
|
||||
return result ? {
|
||||
|
|
@ -19,16 +113,18 @@ const hex2rgb = (hex) => {
|
|||
} : null
|
||||
}
|
||||
|
||||
const rgbstr2hex = (rgb) => {
|
||||
if (rgb[0] === '#') {
|
||||
return rgb
|
||||
}
|
||||
rgb = rgb.match(/\d+/g)
|
||||
return `#${((Number(rgb[0]) << 16) + (Number(rgb[1]) << 8) + Number(rgb[2])).toString(16)}`
|
||||
const mixrgb = (a, b) => {
|
||||
return Object.keys(a).reduce((acc, k) => {
|
||||
acc[k] = (a[k] + b[k]) / 2
|
||||
return acc
|
||||
}, {})
|
||||
}
|
||||
|
||||
export {
|
||||
rgb2hex,
|
||||
hex2rgb,
|
||||
rgbstr2hex
|
||||
mixrgb,
|
||||
invert,
|
||||
getContrastRatio,
|
||||
alphaBlend
|
||||
}
|
||||
|
|
|
|||
17
src/services/file_size_format/file_size_format.js
Normal file
17
src/services/file_size_format/file_size_format.js
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
const fileSizeFormat = (num) => {
|
||||
var exponent
|
||||
var unit
|
||||
var units = ['B', 'KiB', 'MiB', 'GiB', 'TiB']
|
||||
if (num < 1) {
|
||||
return num + ' ' + units[0]
|
||||
}
|
||||
|
||||
exponent = Math.min(Math.floor(Math.log(num) / Math.log(1024)), units.length - 1)
|
||||
num = (num / Math.pow(1024, exponent)).toFixed(2) * 1
|
||||
unit = units[exponent]
|
||||
return {num: num, unit: unit}
|
||||
}
|
||||
const fileSizeFormatService = {
|
||||
fileSizeFormat
|
||||
}
|
||||
export default fileSizeFormatService
|
||||
69
src/services/push/push.js
Normal file
69
src/services/push/push.js
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
import runtime from 'serviceworker-webpack-plugin/lib/runtime'
|
||||
|
||||
function urlBase64ToUint8Array (base64String) {
|
||||
const padding = '='.repeat((4 - base64String.length % 4) % 4)
|
||||
const base64 = (base64String + padding)
|
||||
.replace(/-/g, '+')
|
||||
.replace(/_/g, '/')
|
||||
|
||||
const rawData = window.atob(base64)
|
||||
return Uint8Array.from([...rawData].map((char) => char.charCodeAt(0)))
|
||||
}
|
||||
|
||||
function isPushSupported () {
|
||||
return 'serviceWorker' in navigator && 'PushManager' in window
|
||||
}
|
||||
|
||||
function registerServiceWorker () {
|
||||
return runtime.register()
|
||||
.catch((err) => console.error('Unable to register service worker.', err))
|
||||
}
|
||||
|
||||
function subscribe (registration, isEnabled, vapidPublicKey) {
|
||||
if (!isEnabled) return Promise.reject(new Error('Web Push is disabled in config'))
|
||||
if (!vapidPublicKey) return Promise.reject(new Error('VAPID public key is not found'))
|
||||
|
||||
const subscribeOptions = {
|
||||
userVisibleOnly: true,
|
||||
applicationServerKey: urlBase64ToUint8Array(vapidPublicKey)
|
||||
}
|
||||
return registration.pushManager.subscribe(subscribeOptions)
|
||||
}
|
||||
|
||||
function sendSubscriptionToBackEnd (subscription, token) {
|
||||
return window.fetch('/api/v1/push/subscription/', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${token}`
|
||||
},
|
||||
body: JSON.stringify({
|
||||
subscription,
|
||||
data: {
|
||||
alerts: {
|
||||
follow: true,
|
||||
favourite: true,
|
||||
mention: true,
|
||||
reblog: true
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
.then((response) => {
|
||||
if (!response.ok) throw new Error('Bad status code from server.')
|
||||
return response.json()
|
||||
})
|
||||
.then((responseData) => {
|
||||
if (!responseData.id) throw new Error('Bad response from server.')
|
||||
return responseData
|
||||
})
|
||||
}
|
||||
|
||||
export default function registerPushNotifications (isEnabled, vapidPublicKey, token) {
|
||||
if (isPushSupported()) {
|
||||
registerServiceWorker()
|
||||
.then((registration) => subscribe(registration, isEnabled, vapidPublicKey))
|
||||
.then((subscription) => sendSubscriptionToBackEnd(subscription, token))
|
||||
.catch((e) => console.warn(`Failed to setup Web Push Notifications: ${e.message}`))
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
import { times } from 'lodash'
|
||||
import { rgb2hex, hex2rgb } from '../color_convert/color_convert.js'
|
||||
import { brightness, invertLightness, convert, contrastRatio } from 'chromatism'
|
||||
import { rgb2hex, hex2rgb, mixrgb, getContrastRatio, alphaBlend } from '../color_convert/color_convert.js'
|
||||
|
||||
// While this is not used anymore right now, I left it in if we want to do custom
|
||||
// styles that aren't just colors, so user can pick from a few different distinct
|
||||
|
|
@ -39,8 +40,6 @@ const setStyle = (href, commit) => {
|
|||
colors[name] = color
|
||||
})
|
||||
|
||||
commit('setOption', { name: 'colors', value: colors })
|
||||
|
||||
body.removeChild(baseEl)
|
||||
|
||||
const styleEl = document.createElement('style')
|
||||
|
|
@ -53,7 +52,27 @@ const setStyle = (href, commit) => {
|
|||
cssEl.addEventListener('load', setDynamic)
|
||||
}
|
||||
|
||||
const setColors = (col, commit) => {
|
||||
const rgb2rgba = function (rgba) {
|
||||
return `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})`
|
||||
}
|
||||
|
||||
const getTextColor = function (bg, text, preserve) {
|
||||
const bgIsLight = convert(bg).hsl.l > 50
|
||||
const textIsLight = convert(text).hsl.l > 50
|
||||
|
||||
if ((bgIsLight && textIsLight) || (!bgIsLight && !textIsLight)) {
|
||||
const base = typeof text.a !== 'undefined' ? { a: text.a } : {}
|
||||
const result = Object.assign(base, invertLightness(text).rgb)
|
||||
if (!preserve && getContrastRatio(bg, result) < 4.5) {
|
||||
return contrastRatio(bg, text).rgb
|
||||
}
|
||||
return result
|
||||
}
|
||||
return text
|
||||
}
|
||||
|
||||
const applyTheme = (input, commit) => {
|
||||
const { rules, theme } = generatePreset(input)
|
||||
const head = document.head
|
||||
const body = document.body
|
||||
body.style.display = 'none'
|
||||
|
|
@ -62,56 +81,411 @@ const setColors = (col, commit) => {
|
|||
head.appendChild(styleEl)
|
||||
const styleSheet = styleEl.sheet
|
||||
|
||||
const isDark = (col.text.r + col.text.g + col.text.b) > (col.bg.r + col.bg.g + col.bg.b)
|
||||
let colors = {}
|
||||
let radii = {}
|
||||
|
||||
const mod = isDark ? -10 : 10
|
||||
|
||||
colors.bg = rgb2hex(col.bg.r, col.bg.g, col.bg.b) // background
|
||||
colors.lightBg = rgb2hex((col.bg.r + col.fg.r) / 2, (col.bg.g + col.fg.g) / 2, (col.bg.b + col.fg.b) / 2) // hilighted bg
|
||||
colors.btn = rgb2hex(col.fg.r, col.fg.g, col.fg.b) // panels & buttons
|
||||
colors.input = `rgba(${col.fg.r}, ${col.fg.g}, ${col.fg.b}, .5)`
|
||||
colors.border = rgb2hex(col.fg.r - mod, col.fg.g - mod, col.fg.b - mod) // borders
|
||||
colors.faint = `rgba(${col.text.r}, ${col.text.g}, ${col.text.b}, .5)`
|
||||
colors.fg = rgb2hex(col.text.r, col.text.g, col.text.b) // text
|
||||
colors.lightFg = rgb2hex(col.text.r - mod * 5, col.text.g - mod * 5, col.text.b - mod * 5) // strong text
|
||||
|
||||
colors['base07'] = rgb2hex(col.text.r - mod * 2, col.text.g - mod * 2, col.text.b - mod * 2)
|
||||
|
||||
colors.link = rgb2hex(col.link.r, col.link.g, col.link.b) // links
|
||||
colors.icon = rgb2hex((col.bg.r + col.text.r) / 2, (col.bg.g + col.text.g) / 2, (col.bg.b + col.text.b) / 2) // icons
|
||||
|
||||
colors.cBlue = col.cBlue && rgb2hex(col.cBlue.r, col.cBlue.g, col.cBlue.b)
|
||||
colors.cRed = col.cRed && rgb2hex(col.cRed.r, col.cRed.g, col.cRed.b)
|
||||
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)
|
||||
|
||||
colors.cAlertRed = col.cRed && `rgba(${col.cRed.r}, ${col.cRed.g}, ${col.cRed.b}, .5)`
|
||||
|
||||
radii.btnRadius = col.btnRadius
|
||||
radii.inputRadius = col.inputRadius
|
||||
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).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')
|
||||
styleSheet.insertRule(`body { ${rules.radii} }`, 'index-max')
|
||||
styleSheet.insertRule(`body { ${rules.colors} }`, 'index-max')
|
||||
styleSheet.insertRule(`body { ${rules.shadows} }`, 'index-max')
|
||||
styleSheet.insertRule(`body { ${rules.fonts} }`, 'index-max')
|
||||
body.style.display = 'initial'
|
||||
|
||||
commit('setOption', { name: 'colors', value: colors })
|
||||
commit('setOption', { name: 'radii', value: radii })
|
||||
commit('setOption', { name: 'customTheme', value: col })
|
||||
// commit('setOption', { name: 'colors', value: htmlColors })
|
||||
// commit('setOption', { name: 'radii', value: radii })
|
||||
commit('setOption', { name: 'customTheme', value: input })
|
||||
commit('setOption', { name: 'colors', value: theme.colors })
|
||||
}
|
||||
|
||||
const getCssShadow = (input, usesDropShadow) => {
|
||||
if (input.length === 0) {
|
||||
return 'none'
|
||||
}
|
||||
|
||||
return input
|
||||
.filter(_ => usesDropShadow ? _.inset : _)
|
||||
.map((shad) => [
|
||||
shad.x,
|
||||
shad.y,
|
||||
shad.blur,
|
||||
shad.spread
|
||||
].map(_ => _ + 'px').concat([
|
||||
getCssColor(shad.color, shad.alpha),
|
||||
shad.inset ? 'inset' : ''
|
||||
]).join(' ')).join(', ')
|
||||
}
|
||||
|
||||
const getCssShadowFilter = (input) => {
|
||||
if (input.length === 0) {
|
||||
return 'none'
|
||||
}
|
||||
|
||||
return input
|
||||
// drop-shadow doesn't support inset or spread
|
||||
.filter((shad) => !shad.inset && Number(shad.spread) === 0)
|
||||
.map((shad) => [
|
||||
shad.x,
|
||||
shad.y,
|
||||
// drop-shadow's blur is twice as strong compared to box-shadow
|
||||
shad.blur / 2
|
||||
].map(_ => _ + 'px').concat([
|
||||
getCssColor(shad.color, shad.alpha)
|
||||
]).join(' '))
|
||||
.map(_ => `drop-shadow(${_})`)
|
||||
.join(' ')
|
||||
}
|
||||
|
||||
const getCssColor = (input, a) => {
|
||||
let rgb = {}
|
||||
if (typeof input === 'object') {
|
||||
rgb = input
|
||||
} else if (typeof input === 'string') {
|
||||
if (input.startsWith('#')) {
|
||||
rgb = hex2rgb(input)
|
||||
} else if (input.startsWith('--')) {
|
||||
return `var(${input})`
|
||||
} else {
|
||||
return input
|
||||
}
|
||||
}
|
||||
return rgb2rgba({ ...rgb, a })
|
||||
}
|
||||
|
||||
const generateColors = (input) => {
|
||||
const colors = {}
|
||||
const opacity = Object.assign({
|
||||
alert: 0.5,
|
||||
input: 0.5,
|
||||
faint: 0.5
|
||||
}, Object.entries(input.opacity || {}).reduce((acc, [k, v]) => {
|
||||
if (typeof v !== 'undefined') {
|
||||
acc[k] = v
|
||||
}
|
||||
return acc
|
||||
}, {}))
|
||||
const col = Object.entries(input.colors || input).reduce((acc, [k, v]) => {
|
||||
if (typeof v === 'object') {
|
||||
acc[k] = v
|
||||
} else {
|
||||
acc[k] = hex2rgb(v)
|
||||
}
|
||||
return acc
|
||||
}, {})
|
||||
|
||||
const isLightOnDark = convert(col.bg).hsl.l < convert(col.text).hsl.l
|
||||
const mod = isLightOnDark ? 1 : -1
|
||||
|
||||
colors.text = col.text
|
||||
colors.lightText = brightness(20 * mod, colors.text).rgb
|
||||
colors.link = col.link
|
||||
colors.faint = col.faint || Object.assign({}, col.text)
|
||||
|
||||
colors.bg = col.bg
|
||||
colors.lightBg = col.lightBg || brightness(5, colors.bg).rgb
|
||||
|
||||
colors.fg = col.fg
|
||||
colors.fgText = col.fgText || getTextColor(colors.fg, colors.text)
|
||||
colors.fgLink = col.fgLink || getTextColor(colors.fg, colors.link, true)
|
||||
|
||||
colors.border = col.border || brightness(2 * mod, colors.fg).rgb
|
||||
|
||||
colors.btn = col.btn || Object.assign({}, col.fg)
|
||||
colors.btnText = col.btnText || getTextColor(colors.btn, colors.fgText)
|
||||
|
||||
colors.input = col.input || Object.assign({}, col.fg)
|
||||
colors.inputText = col.inputText || getTextColor(colors.input, colors.lightText)
|
||||
|
||||
colors.panel = col.panel || Object.assign({}, col.fg)
|
||||
colors.panelText = col.panelText || getTextColor(colors.panel, colors.fgText)
|
||||
colors.panelLink = col.panelLink || getTextColor(colors.panel, colors.fgLink)
|
||||
colors.panelFaint = col.panelFaint || getTextColor(colors.panel, colors.faint)
|
||||
|
||||
colors.topBar = col.topBar || Object.assign({}, col.fg)
|
||||
colors.topBarText = col.topBarText || getTextColor(colors.topBar, colors.fgText)
|
||||
colors.topBarLink = col.topBarLink || getTextColor(colors.topBar, colors.fgLink)
|
||||
|
||||
colors.faintLink = col.faintLink || Object.assign({}, col.link)
|
||||
|
||||
colors.icon = mixrgb(colors.bg, colors.text)
|
||||
|
||||
colors.cBlue = col.cBlue || hex2rgb('#0000FF')
|
||||
colors.cRed = col.cRed || hex2rgb('#FF0000')
|
||||
colors.cGreen = col.cGreen || hex2rgb('#00FF00')
|
||||
colors.cOrange = col.cOrange || hex2rgb('#E3FF00')
|
||||
|
||||
colors.alertError = col.alertError || Object.assign({}, colors.cRed)
|
||||
colors.alertErrorText = getTextColor(alphaBlend(colors.alertError, opacity.alert, colors.bg), colors.text)
|
||||
colors.alertErrorPanelText = getTextColor(alphaBlend(colors.alertError, opacity.alert, colors.panel), colors.panelText)
|
||||
|
||||
colors.badgeNotification = col.badgeNotification || Object.assign({}, colors.cRed)
|
||||
colors.badgeNotificationText = contrastRatio(colors.badgeNotification).rgb
|
||||
|
||||
Object.entries(opacity).forEach(([ k, v ]) => {
|
||||
if (typeof v === 'undefined') return
|
||||
if (k === 'alert') {
|
||||
colors.alertError.a = v
|
||||
return
|
||||
}
|
||||
if (k === 'faint') {
|
||||
colors[k + 'Link'].a = v
|
||||
colors['panelFaint'].a = v
|
||||
}
|
||||
if (k === 'bg') {
|
||||
colors['lightBg'].a = v
|
||||
}
|
||||
if (colors[k]) {
|
||||
colors[k].a = v
|
||||
} else {
|
||||
console.error('Wrong key ' + k)
|
||||
}
|
||||
})
|
||||
|
||||
const htmlColors = Object.entries(colors)
|
||||
.reduce((acc, [k, v]) => {
|
||||
if (!v) return acc
|
||||
acc.solid[k] = rgb2hex(v)
|
||||
acc.complete[k] = typeof v.a === 'undefined' ? rgb2hex(v) : rgb2rgba(v)
|
||||
return acc
|
||||
}, { complete: {}, solid: {} })
|
||||
return {
|
||||
rules: {
|
||||
colors: Object.entries(htmlColors.complete)
|
||||
.filter(([k, v]) => v)
|
||||
.map(([k, v]) => `--${k}: ${v}`)
|
||||
.join(';')
|
||||
},
|
||||
theme: {
|
||||
colors: htmlColors.solid,
|
||||
opacity
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const generateRadii = (input) => {
|
||||
let inputRadii = input.radii || {}
|
||||
// v1 -> v2
|
||||
if (typeof input.btnRadius !== 'undefined') {
|
||||
inputRadii = Object
|
||||
.entries(input)
|
||||
.filter(([k, v]) => k.endsWith('Radius'))
|
||||
.reduce((acc, e) => { acc[e[0].split('Radius')[0]] = e[1]; return acc }, {})
|
||||
}
|
||||
const radii = Object.entries(inputRadii).filter(([k, v]) => v).reduce((acc, [k, v]) => {
|
||||
acc[k] = v
|
||||
return acc
|
||||
}, {
|
||||
btn: 4,
|
||||
input: 4,
|
||||
checkbox: 2,
|
||||
panel: 10,
|
||||
avatar: 5,
|
||||
avatarAlt: 50,
|
||||
tooltip: 2,
|
||||
attachment: 5
|
||||
})
|
||||
|
||||
return {
|
||||
rules: {
|
||||
radii: Object.entries(radii).filter(([k, v]) => v).map(([k, v]) => `--${k}Radius: ${v}px`).join(';')
|
||||
},
|
||||
theme: {
|
||||
radii
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const generateFonts = (input) => {
|
||||
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] = v
|
||||
return acc
|
||||
}, acc[k])
|
||||
return acc
|
||||
}, {
|
||||
interface: {
|
||||
family: 'sans-serif'
|
||||
},
|
||||
input: {
|
||||
family: 'inherit'
|
||||
},
|
||||
post: {
|
||||
family: 'inherit'
|
||||
},
|
||||
postCode: {
|
||||
family: 'monospace'
|
||||
}
|
||||
})
|
||||
|
||||
return {
|
||||
rules: {
|
||||
fonts: Object
|
||||
.entries(fonts)
|
||||
.filter(([k, v]) => v)
|
||||
.map(([k, v]) => `--${k}Font: ${v.family}`).join(';')
|
||||
},
|
||||
theme: {
|
||||
fonts
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const generateShadows = (input) => {
|
||||
const border = (top, shadow) => ({
|
||||
x: 0,
|
||||
y: top ? 1 : -1,
|
||||
blur: 0,
|
||||
spread: 0,
|
||||
color: shadow ? '#000000' : '#FFFFFF',
|
||||
alpha: 0.2,
|
||||
inset: true
|
||||
})
|
||||
const buttonInsetFakeBorders = [border(true, false), border(false, true)]
|
||||
const inputInsetFakeBorders = [border(true, true), border(false, false)]
|
||||
const hoverGlow = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
blur: 4,
|
||||
spread: 0,
|
||||
color: '--faint',
|
||||
alpha: 1
|
||||
}
|
||||
|
||||
const shadows = {
|
||||
panel: [{
|
||||
x: 1,
|
||||
y: 1,
|
||||
blur: 4,
|
||||
spread: 0,
|
||||
color: '#000000',
|
||||
alpha: 0.6
|
||||
}],
|
||||
topBar: [{
|
||||
x: 0,
|
||||
y: 0,
|
||||
blur: 4,
|
||||
spread: 0,
|
||||
color: '#000000',
|
||||
alpha: 0.6
|
||||
}],
|
||||
popup: [{
|
||||
x: 2,
|
||||
y: 2,
|
||||
blur: 3,
|
||||
spread: 0,
|
||||
color: '#000000',
|
||||
alpha: 0.5
|
||||
}],
|
||||
avatar: [{
|
||||
x: 0,
|
||||
y: 1,
|
||||
blur: 8,
|
||||
spread: 0,
|
||||
color: '#000000',
|
||||
alpha: 0.7
|
||||
}],
|
||||
avatarStatus: [],
|
||||
panelHeader: [],
|
||||
button: [{
|
||||
x: 0,
|
||||
y: 0,
|
||||
blur: 2,
|
||||
spread: 0,
|
||||
color: '#000000',
|
||||
alpha: 1
|
||||
}, ...buttonInsetFakeBorders],
|
||||
buttonHover: [hoverGlow, ...buttonInsetFakeBorders],
|
||||
buttonPressed: [hoverGlow, ...inputInsetFakeBorders],
|
||||
input: [...inputInsetFakeBorders, {
|
||||
x: 0,
|
||||
y: 0,
|
||||
blur: 2,
|
||||
inset: true,
|
||||
spread: 0,
|
||||
color: '#000000',
|
||||
alpha: 1
|
||||
}],
|
||||
...(input.shadows || {})
|
||||
}
|
||||
|
||||
return {
|
||||
rules: {
|
||||
shadows: Object
|
||||
.entries(shadows)
|
||||
// TODO for v2.1: if shadow doesn't have non-inset shadows with spread > 0 - optionally
|
||||
// convert all non-inset shadows into filter: drop-shadow() to boost performance
|
||||
.map(([k, v]) => [
|
||||
`--${k}Shadow: ${getCssShadow(v)}`,
|
||||
`--${k}ShadowFilter: ${getCssShadowFilter(v)}`,
|
||||
`--${k}ShadowInset: ${getCssShadow(v, true)}`
|
||||
].join(';'))
|
||||
.join(';')
|
||||
},
|
||||
theme: {
|
||||
shadows
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const composePreset = (colors, radii, shadows, fonts) => {
|
||||
return {
|
||||
rules: {
|
||||
...shadows.rules,
|
||||
...colors.rules,
|
||||
...radii.rules,
|
||||
...fonts.rules
|
||||
},
|
||||
theme: {
|
||||
...shadows.theme,
|
||||
...colors.theme,
|
||||
...radii.theme,
|
||||
...fonts.theme
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const generatePreset = (input) => {
|
||||
const shadows = generateShadows(input)
|
||||
const colors = generateColors(input)
|
||||
const radii = generateRadii(input)
|
||||
const fonts = generateFonts(input)
|
||||
|
||||
return composePreset(colors, radii, shadows, fonts)
|
||||
}
|
||||
|
||||
const getThemes = () => {
|
||||
return window.fetch('/static/styles.json')
|
||||
.then((data) => data.json())
|
||||
.then((themes) => {
|
||||
return Promise.all(Object.entries(themes).map(([k, v]) => {
|
||||
if (typeof v === 'object') {
|
||||
return Promise.resolve([k, v])
|
||||
} else if (typeof v === 'string') {
|
||||
return window.fetch(v)
|
||||
.then((data) => data.json())
|
||||
.then((theme) => {
|
||||
return [k, theme]
|
||||
})
|
||||
.catch((e) => {
|
||||
console.error(e)
|
||||
return []
|
||||
})
|
||||
}
|
||||
}))
|
||||
})
|
||||
.then((promises) => {
|
||||
return promises
|
||||
.filter(([k, v]) => v)
|
||||
.reduce((acc, [k, v]) => {
|
||||
acc[k] = v
|
||||
return acc
|
||||
}, {})
|
||||
})
|
||||
}
|
||||
|
||||
const setPreset = (val, commit) => {
|
||||
window.fetch('/static/styles.json')
|
||||
.then((data) => data.json())
|
||||
.then((themes) => {
|
||||
const theme = themes[val] ? themes[val] : themes['pleroma-dark']
|
||||
getThemes().then((themes) => {
|
||||
const theme = themes[val] ? themes[val] : themes['pleroma-dark']
|
||||
const isV1 = Array.isArray(theme)
|
||||
const data = isV1 ? {} : theme.theme
|
||||
|
||||
if (isV1) {
|
||||
const bgRgb = hex2rgb(theme[1])
|
||||
const fgRgb = hex2rgb(theme[2])
|
||||
const textRgb = hex2rgb(theme[3])
|
||||
|
|
@ -122,7 +496,7 @@ const setPreset = (val, commit) => {
|
|||
const cBlueRgb = hex2rgb(theme[7] || '#0000FF')
|
||||
const cOrangeRgb = hex2rgb(theme[8] || '#E3FF00')
|
||||
|
||||
const col = {
|
||||
data.colors = {
|
||||
bg: bgRgb,
|
||||
fg: fgRgb,
|
||||
text: textRgb,
|
||||
|
|
@ -132,23 +506,32 @@ const setPreset = (val, commit) => {
|
|||
cGreen: cGreenRgb,
|
||||
cOrange: cOrangeRgb
|
||||
}
|
||||
}
|
||||
|
||||
// This is a hack, this function is only called during initial load.
|
||||
// We want to cancel loading the theme from config.json if we're already
|
||||
// loading a theme from the persisted state.
|
||||
// Needed some way of dealing with the async way of things.
|
||||
// load config -> set preset -> wait for styles.json to load ->
|
||||
// load persisted state -> set colors -> styles.json loaded -> set colors
|
||||
if (!window.themeLoaded) {
|
||||
setColors(col, commit)
|
||||
}
|
||||
})
|
||||
// This is a hack, this function is only called during initial load.
|
||||
// We want to cancel loading the theme from config.json if we're already
|
||||
// loading a theme from the persisted state.
|
||||
// Needed some way of dealing with the async way of things.
|
||||
// load config -> set preset -> wait for styles.json to load ->
|
||||
// load persisted state -> set colors -> styles.json loaded -> set colors
|
||||
if (!window.themeLoaded) {
|
||||
applyTheme(data, commit)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const StyleSetter = {
|
||||
export {
|
||||
setStyle,
|
||||
setPreset,
|
||||
setColors
|
||||
applyTheme,
|
||||
getTextColor,
|
||||
generateColors,
|
||||
generateRadii,
|
||||
generateShadows,
|
||||
generateFonts,
|
||||
generatePreset,
|
||||
getThemes,
|
||||
composePreset,
|
||||
getCssShadow,
|
||||
getCssShadowFilter
|
||||
}
|
||||
|
||||
export default StyleSetter
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ const highlightStyle = (prefs) => {
|
|||
if (type === 'striped') {
|
||||
return {
|
||||
backgroundImage: [
|
||||
'repeating-linear-gradient(-45deg,',
|
||||
'repeating-linear-gradient(135deg,',
|
||||
`${tintColor} ,`,
|
||||
`${tintColor} 20px,`,
|
||||
`${tintColor2} 20px,`,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue