qugalet/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/develop' into bookmark-folders

Browse source 
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak 2024-10-03 21:52:44 +02:00
parent a5689464d0 a1c3a7a742
commit 216ca52073
33 changed files with 1198 additions and 448 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
changelog.d/better-shadow-control.fix Normal file
View file

@ -0,0 +1 @@
Updated shadow editor, hopefully fixed long-standing bugs, added ability to specify shadow's name.

1
changelog.d/splashscreen.add Normal file
View file

@ -0,0 +1 @@
Splash screen + loading indicator to make process of identifying initialization issues and load performance

129
index.html
View file

@ -4,13 +4,138 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
<link rel="icon" type="image/png" href="/favicon.png"> <link rel="icon" type="image/png" href="/favicon.png">
<!-- putting styles here to avoid having to wait for styles to load up -->
<style id="splashscreen">
#splash {
--scale: 1;
width: 100vw;
height: 100vh;
display: grid;
grid-template-rows: auto;
grid-template-columns: auto;
align-content: center;
align-items: center;
justify-content: center;
justify-items: center;
flex-direction: column;
background: #0f161e;
font-family: sans-serif;
color: #b9b9ba;
position: absolute;
z-index: 9999;
font-size: calc(1vw + 1vh + 1vmin);
}
#splash-credit {
position: absolute;
font-size: 14px;
bottom: 16px;
right: 16px;
}
#splash-container {
align-items: center;
}
#mascot-container {
display: flex;
align-items: flex-end;
justify-content: center;
perspective: 60em;
perspective-origin: 0 -15em;
transform-style: preserve-3d;
}
#mascot {
width: calc(10em * var(--scale));
height: calc(10em * var(--scale));
object-fit: contain;
object-position: bottom;
transform: translateZ(-2em);
}
#throbber {
display: grid;
width: calc(5em * 0.5 * var(--scale));
height: calc(8em * 0.5 * var(--scale));
margin-left: 4.1em;
z-index: 2;
grid-template-rows: repeat(8, 1fr);
grid-template-columns: repeat(5, 1fr);
grid-template-areas: "P P . L L"
"P P . L L"
"P P . L L"
"P P . L L"
"P P . . ."
"P P . . ."
"P P . E E"
"P P . E E";
}
.chunk {
background-color: #e2b188;
box-shadow: 0.01em 0.01em 0.1em 0 #e2b188;
}
#chunk-P {
grid-area: P;
border-top-left-radius: calc(var(--logoChunkSize) / 2);
}
#chunk-L {
grid-area: L;
border-bottom-right-radius: calc(var(--logoChunkSize) / 2);
}
#chunk-E {
grid-area: E;
border-bottom-right-radius: calc(var(--logoChunkSize) / 2);
}
#status {
margin-top: 1em;
line-height: 2;
width: 100%;
text-align: center;
}
@media (prefers-reduced-motion) {
#throbber {
animation: none !important;
}
}
</style>
<style id="pleroma-eager-styles" type="text/css"></style> <style id="pleroma-eager-styles" type="text/css"></style>
<style id="pleroma-lazy-styles" type="text/css"></style> <style id="pleroma-lazy-styles" type="text/css"></style>
<!--server-generated-meta--> <!--server-generated-meta-->
</head> </head>
<body class="hidden"> <body style="margin: 0; padding: 0">
<noscript>To use Pleroma, please enable JavaScript.</noscript> <noscript>To use Pleroma, please enable JavaScript.</noscript>
<div id="app"></div> <div id="splash">
<!-- we are hiding entire graphic so no point showing credit -->
<div aria-hidden="true" id="splash-credit">
Art by pipivovott
</div>
<div id="splash-container">
<div aria-hidden="true" id="mascot-container">
<div id="throbber">
<div class="chunk" id="chunk-P">
</div>
<div class="chunk" id="chunk-L">
</div>
<div class="chunk" id="chunk-E">
</div>
</div>
<img id="mascot" src="/static/pleromatan_apology.png">
</div>
<div id="status" class="css-ok">
<!-- (｡>﹏<) -->
<!-- it's a pseudographic, don't want screenreader read out nonsense -->
<span aria-hidden="true" class="initial-text">(｡&gt;﹏&lt;)</span>
</div>
</div>
</div>
<div id="app" class="hidden"></div>
<div id="modal"></div> <div id="modal"></div>
<!-- built files will be auto injected --> <!-- built files will be auto injected -->
<div id="popovers" /> <div id="popovers" />

3
package.json
View file

@ -132,5 +132,6 @@
"engines": { "engines": {
"node": ">= 16.0.0", "node": ">= 16.0.0",
"npm": ">= 3.0.0" "npm": ">= 3.0.0"
} },
"packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
} }

22
src/App.js
View file

@ -44,16 +44,29 @@ export default {
data: () => ({ data: () => ({
mobileActivePanel: 'timeline' mobileActivePanel: 'timeline'
}), }),
watch: {
themeApplied (value) {
this.removeSplash()
}
},
created () { created () {
// Load the locale from the storage // Load the locale from the storage
const val = this.$store.getters.mergedConfig.interfaceLanguage const val = this.$store.getters.mergedConfig.interfaceLanguage
this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val }) this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
window.addEventListener('resize', this.updateMobileState) window.addEventListener('resize', this.updateMobileState)
}, },
mounted () {
if (this.$store.state.interface.themeApplied) {
this.removeSplash()
}
},
unmounted () { unmounted () {
window.removeEventListener('resize', this.updateMobileState) window.removeEventListener('resize', this.updateMobileState)
}, },
computed: { computed: {
themeApplied () {
return this.$store.state.interface.themeApplied
},
classes () { classes () {
return [ return [
{ {
@ -130,6 +143,15 @@ export default {
updateMobileState () { updateMobileState () {
this.$store.dispatch('setLayoutWidth', windowWidth()) this.$store.dispatch('setLayoutWidth', windowWidth())
this.$store.dispatch('setLayoutHeight', windowHeight()) this.$store.dispatch('setLayoutHeight', windowHeight())
},
removeSplash () {
document.querySelector('#status').textContent = this.$t('splash.fun_' + Math.ceil(Math.random() * 4))
const splashscreenRoot = document.querySelector('#splash')
splashscreenRoot.addEventListener('transitionend', () => {
splashscreenRoot.remove()
})
splashscreenRoot.classList.add('hidden')
document.querySelector('#app').classList.remove('hidden')
} }
} }
} }

166
src/App.scss
View file

@ -914,3 +914,169 @@ option {
color: var(--selectionText); color: var(--selectionText);
background-color: var(--selectionBackground); background-color: var(--selectionBackground);
} }
#splash {
pointer-events: none;
transition: opacity 2s;
opacity: 1;
&.hidden {
opacity: 0;
}
#status {
&.css-ok {
&::before {
display: inline-block;
content: "CSS OK";
}
}
.initial-text {
display: none;
}
}
#throbber {
animation-duration: 3s;
animation-name: bounce;
animation-iteration-count: infinite;
animation-direction: normal;
transform-origin: bottom center;
&.dead {
animation-name: dead;
animation-duration: 2s;
animation-iteration-count: 1;
transform: rotateX(90deg) rotateY(0) rotateZ(-45deg);
}
@keyframes dead {
0% {
transform: rotateX(0) rotateY(0) rotateZ(0);
}
5% {
transform: rotateX(0) rotateY(0) rotateZ(1deg);
}
10% {
transform: rotateX(0) rotateY(0) rotateZ(-2deg);
}
15% {
transform: rotateX(0) rotateY(0) rotateZ(3deg);
}
20% {
transform: rotateX(0) rotateY(0) rotateZ(0);
}
25% {
transform: rotateX(0) rotateY(0) rotateZ(0);
}
30% {
transform: rotateX(10deg) rotateY(0) rotateZ(0);
}
35% {
transform: rotateX(-10deg) rotateY(0) rotateZ(0);
}
40% {
transform: rotateX(10deg) rotateY(0) rotateZ(0);
}
45% {
transform: rotateX(-10deg) rotateY(0) rotateZ(0);
}
50% {
transform: rotateX(10deg) rotateY(0) rotateZ(0);
}
100% {
transform: rotateX(90deg) rotateY(0) rotateZ(-45deg);
transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); /* easeInQuint */
}
}
@keyframes bounce {
0% {
scale: 1 1;
translate: 0 0;
animation-timing-function: ease-out;
}
10% {
scale: 1.2 0.8;
translate: 0 0;
transform: rotateZ(var(--defaultZ));
animation-timing-function: ease-out;
}
30% {
scale: 0.9 1.1;
translate: 0 -40%;
transform: rotateZ(var(--defaultZ));
animation-timing-function: ease-in;
}
40% {
scale: 1.1 0.9;
translate: 0 -50%;
transform: rotateZ(var(--defaultZ));
animation-timing-function: ease-in;
}
45% {
scale: 0.9 1.1;
translate: 0 -45%;
transform: rotateZ(var(--defaultZ));
animation-timing-function: ease-in;
}
50% {
scale: 1.05 0.95;
translate: 0 -40%;
animation-timing-function: ease-in;
}
55% {
scale: 0.985 1.025;
translate: 0 -35%;
transform: rotateZ(var(--defaultZ));
animation-timing-function: ease-in;
}
60% {
scale: 1.0125 0.9985;
translate: 0 -30%;
transform: rotateZ(var(--defaultZ));
animation-timing-function: ease-in;
}
80% {
scale: 1.0063 0.9938;
translate: 0 -10%;
transform: rotateZ(var(--defaultZ));
animation-timing-function: ease-in-ou;
}
90% {
scale: 1.2 0.8;
translate: 0 0;
transform: rotateZ(var(--defaultZ));
animation-timing-function: ease-out;
}
100% {
scale: 1 1;
translate: 0 0;
transform: rotateZ(var(--defaultZ));
animation-timing-function: ease-out;
}
}
}
}

BIN
src/assets/pleromatan_apology.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 396 KiB

After

Width:  |  Height:  |  Size: 35 B

1
src/assets/pleromatan_apology.png Symbolic link
View file

@ -0,0 +1 @@
../../static/pleromatan_apology.png
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 396 KiB

After

Width:  |  Height:  |  Size: 35 B

BIN
src/assets/pleromatan_apology_fox.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 521 KiB

After

Width:  |  Height:  |  Size: 39 B

1
src/assets/pleromatan_apology_fox.png Symbolic link
View file

@ -0,0 +1 @@
../../static/pleromatan_apology_fox.png
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 521 KiB

After

Width:  |  Height:  |  Size: 39 B

21
src/boot/after_store.js
View file

@ -328,11 +328,7 @@ const setConfig = async ({ store }) => {
const checkOAuthToken = async ({ store }) => { const checkOAuthToken = async ({ store }) => {
if (store.getters.getUserToken()) { if (store.getters.getUserToken()) {
try { return store.dispatch('loginUser', store.getters.getUserToken())
await store.dispatch('loginUser', store.getters.getUserToken())
} catch (e) {
console.error(e)
}
} }
return Promise.resolve() return Promise.resolve()
} }
@ -350,19 +346,26 @@ const afterStoreSetup = async ({ store, i18n }) => {
const server = (typeof overrides.target !== 'undefined') ? overrides.target : window.location.origin const server = (typeof overrides.target !== 'undefined') ? overrides.target : window.location.origin
store.dispatch('setInstanceOption', { name: 'server', value: server }) store.dispatch('setInstanceOption', { name: 'server', value: server })
document.querySelector('#status').textContent = i18n.global.t('splash.settings')
await setConfig({ store }) await setConfig({ store })
await store.dispatch('setTheme') document.querySelector('#status').textContent = i18n.global.t('splash.theme')
try {
await store.dispatch('setTheme').catch((e) => { console.error('Error setting theme', e) })
} catch (e) {
return Promise.reject(e)
}
applyConfig(store.state.config) applyConfig(store.state.config, i18n.global)
// Now we can try getting the server settings and logging in // Now we can try getting the server settings and logging in
// Most of these are preloaded into the index.html so blocking is minimized // Most of these are preloaded into the index.html so blocking is minimized
document.querySelector('#status').textContent = i18n.global.t('splash.instance')
await Promise.all([ await Promise.all([
checkOAuthToken({ store }), checkOAuthToken({ store }),
getInstancePanel({ store }), getInstancePanel({ store }),
getNodeInfo({ store }), getNodeInfo({ store }),
getInstanceConfig({ store }) getInstanceConfig({ store })
]) ]).catch(e => Promise.reject(e))
// Start fetching things that don't need to block the UI // Start fetching things that don't need to block the UI
store.dispatch('fetchMutes') store.dispatch('fetchMutes')
@ -396,9 +399,9 @@ const afterStoreSetup = async ({ store, i18n }) => {
// remove after vue 3.3 // remove after vue 3.3
app.config.unwrapInjectedRef = true app.config.unwrapInjectedRef = true
document.querySelector('#status').textContent = i18n.global.t('splash.almost')
app.mount('#app') app.mount('#app')
return app return app
} }

11
src/components/button.style.js
View file

@ -96,6 +96,17 @@ export default {
textOpacity: 0.25, textOpacity: 0.25,
textOpacityMode: 'blend' textOpacityMode: 'blend'
} }
},
{
component: 'Icon',
parent: {
component: 'Button',
state: ['disabled']
},
directives: {
textOpacity: 0.25,
textOpacityMode: 'blend'
}
} }
] ]
} }

32
src/components/checkbox/checkbox.vue
View file

@ -3,6 +3,13 @@
class="checkbox" class="checkbox"
:class="{ disabled, indeterminate, 'indeterminate-fix': indeterminateTransitionFix }" :class="{ disabled, indeterminate, 'indeterminate-fix': indeterminateTransitionFix }"
> >
<span
v-if="!!$slots.before"
class="label -before"
:class="{ faint: disabled }"
>
<slot name="before" />
</span>
<input <input
type="checkbox" type="checkbox"
class="visible-for-screenreader-only" class="visible-for-screenreader-only"
@ -14,11 +21,13 @@
<i <i
class="input -checkbox checkbox-indicator" class="input -checkbox checkbox-indicator"
:aria-hidden="true" :aria-hidden="true"
:class="{ disabled }"
@transitionend.capture="onTransitionEnd" @transitionend.capture="onTransitionEnd"
/> />
<span <span
v-if="!!$slots.default" v-if="!!$slots.default"
class="label" class="label -after"
:class="{ faint: disabled }"
> >
<slot /> <slot />
</span> </span>
@ -93,14 +102,9 @@ export default {
box-sizing: border-box; box-sizing: border-box;
} }
&.disabled { .disabled {
.checkbox-indicator::before, .checkbox-indicator::before {
.label { background-color: var(--background);
opacity: 0.5;
}
.label {
color: var(--text);
} }
} }
@ -121,8 +125,14 @@ export default {
} }
} }
& > span { & > .label {
margin-left: 0.5em; &.-after {
margin-left: 0.5em;
}
&.-before {
margin-right: 0.5em;
}
} }
} }
</style> </style>

24
src/components/color_input/color_input.scss
View file

@ -1,12 +1,15 @@
.color-input { .color-input {
display: inline-flex; display: inline-flex;
.label {
flex: 1 1 auto;
}
&-field.input { &-field.input {
display: inline-flex; display: inline-flex;
flex: 0 0 0; flex: 0 0 0;
max-width: 9em; max-width: 9em;
align-items: stretch; align-items: stretch;
padding: 0.2em 8px;
input { input {
color: var(--text); color: var(--text);
@ -25,6 +28,7 @@
.nativeColor { .nativeColor {
cursor: pointer; cursor: pointer;
flex: 0 0 auto; flex: 0 0 auto;
padding: 0;
input { input {
appearance: none; appearance: none;
@ -41,10 +45,10 @@
.invalidIndicator, .invalidIndicator,
.transparentIndicator { .transparentIndicator {
flex: 0 0 2em; flex: 0 0 2em;
margin: 0 0.5em; margin: 0.2em 0.5em;
min-width: 2em; min-width: 2em;
align-self: stretch; align-self: stretch;
min-height: 1.5em; min-height: 1.1em;
border-radius: var(--roundness); border-radius: var(--roundness);
} }
@ -81,9 +85,17 @@
border-bottom-right-radius: var(--roundness); border-bottom-right-radius: var(--roundness);
} }
} }
}
.label { &.disabled,
flex: 1 1 auto; &:disabled {
.nativeColor input,
.computedIndicator,
.validIndicator,
.invalidIndicator,
.transparentIndicator {
/* stylelint-disable-next-line declaration-no-important */
opacity: 0.25 !important;
}
}
} }
} }

20
src/components/color_input/color_input.vue
View file

@ -6,6 +6,7 @@
<label <label
:for="name" :for="name"
class="label" class="label"
:class="{ faint: !present || disabled }"
> >
{{ label }} {{ label }}
</label> </label>
@ -14,16 +15,20 @@
:model-value="present" :model-value="present"
:disabled="disabled" :disabled="disabled"
class="opt" class="opt"
@update:modelValue="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)" @update:modelValue="update(typeof modelValue === 'undefined' ? fallback : undefined)"
/> />
<div class="input color-input-field"> <div
class="input color-input-field"
:class="{ disabled: !present || disabled }"
>
<input <input
:id="name + '-t'" :id="name + '-t'"
class="textColor unstyled" class="textColor unstyled"
:class="{ disabled: !present || disabled }"
type="text" type="text"
:value="modelValue || fallback" :value="modelValue || fallback"
:disabled="!present || disabled" :disabled="!present || disabled"
@input="$emit('update:modelValue', $event.target.value)" @input="updateValue($event.target.value)"
> >
<div <div
v-if="validColor" v-if="validColor"
@ -51,7 +56,8 @@
type="color" type="color"
:value="modelValue || fallback" :value="modelValue || fallback"
:disabled="!present || disabled" :disabled="!present || disabled"
@input="$emit('update:modelValue', $event.target.value)" :class="{ disabled: !present || disabled }"
@input="updateValue($event.target.value)"
> >
</label> </label>
</div> </div>
@ -60,6 +66,7 @@
<script> <script>
import Checkbox from '../checkbox/checkbox.vue' import Checkbox from '../checkbox/checkbox.vue'
import { hex2rgb } from '../../services/color_convert/color_convert.js' import { hex2rgb } from '../../services/color_convert/color_convert.js'
import { throttle } from 'lodash'
import { library } from '@fortawesome/fontawesome-svg-core' import { library } from '@fortawesome/fontawesome-svg-core'
import { import {
@ -125,6 +132,11 @@ export default {
computedColor () { computedColor () {
return this.modelValue && this.modelValue.startsWith('--') return this.modelValue && this.modelValue.startsWith('--')
} }
},
methods: {
updateValue: throttle(function (value) {
this.$emit('update:modelValue', value)
}, 100)
} }
} }
</script> </script>

212
src/components/component_preview/component_preview.vue Normal file
View file

@ -0,0 +1,212 @@
<template>
<div
class="ComponentPreview"
:class="{ '-shadow-controls': shadowControl }"
>
<label
class="header"
v-show="shadowControl"
:class="{ faint: disabled }"
>
{{ $t('settings.style.shadows.offset') }}
</label>
<input
v-show="shadowControl"
:value="shadow?.y"
:disabled="disabled"
:class="{ disabled }"
class="input input-number y-shift-number"
type="number"
@input="e => updateProperty('y', e.target.value)"
>
<input
v-show="shadowControl"
:value="shadow?.y"
:disabled="disabled"
:class="{ disabled }"
class="input input-range y-shift-slider"
type="range"
max="20"
min="-20"
@input="e => updateProperty('y', e.target.value)"
>
<div
class="preview-window"
:class="{ '-light-grid': lightGrid }"
>
<div
class="preview-block"
:style="previewStyle"
/>
</div>
<input
v-show="shadowControl"
:value="shadow?.x"
:disabled="disabled"
:class="{ disabled }"
class="input input-number x-shift-number"
type="number"
@input="e => updateProperty('x', e.target.value)"
>
<input
v-show="shadowControl"
:value="shadow?.x"
:disabled="disabled"
:class="{ disabled }"
class="input input-range x-shift-slider"
type="range"
max="20"
min="-20"
@input="e => updateProperty('x', e.target.value)"
>
<Checkbox
id="lightGrid"
v-model="lightGrid"
:disabled="shadow == null"
name="lightGrid"
class="input-light-grid"
>
{{ $t('settings.style.shadows.light_grid') }}
</Checkbox>
</div>
</template>
<style lang="scss">
.ComponentPreview {
display: grid;
grid-template-columns: 3em 1fr 3em;
grid-template-rows: 2em 1fr 2em;
grid-template-areas:
". header y-num "
". preview y-slide"
"x-num x-slide . "
"options options options";
grid-gap: 0.5em;
.header {
grid-area: header;
justify-self: center;
align-self: baseline;
line-height: 2;
}
.input-light-grid {
grid-area: options;
justify-self: center;
}
.input-number {
min-width: 2em;
}
.x-shift-number {
grid-area: x-num;
}
.x-shift-slider {
grid-area: x-slide;
height: auto;
align-self: start;
min-width: 10em;
}
.y-shift-number {
grid-area: y-num;
}
.y-shift-slider {
grid-area: y-slide;
writing-mode: vertical-lr;
justify-self: left;
min-height: 10em;
}
.x-shift-slider,
.y-shift-slider {
padding: 0;
}
.preview-window {
--__grid-color1: rgb(102 102 102);
--__grid-color2: rgb(153 153 153);
--__grid-color1-disabled: rgba(102 102 102 / 20%);
--__grid-color2-disabled: rgba(153 153 153 / 20%);
&.-light-grid {
--__grid-color1: rgb(205 205 205);
--__grid-color2: rgb(255 255 255);
--__grid-color1-disabled: rgba(205 205 205 / 20%);
--__grid-color2-disabled: rgba(255 255 255 / 20%);
}
grid-area: preview;
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
min-width: 10em;
min-height: 10em;
background-color: var(--__grid-color2);
background-image:
linear-gradient(45deg, var(--__grid-color1) 25%, transparent 25%),
linear-gradient(-45deg, var(--__grid-color1) 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, var(--__grid-color1) 75%),
linear-gradient(-45deg, transparent 75%, var(--__grid-color1) 75%);
background-size: 20px 20px;
background-position: 0 0, 0 10px, 10px -10px, -10px 0;
border-radius: var(--roundness);
&.disabled {
background-color: var(--__grid-color2-disabled);
background-image:
linear-gradient(45deg, var(--__grid-color1-disabled) 25%, transparent 25%),
linear-gradient(-45deg, var(--__grid-color1-disabled) 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, var(--__grid-color1-disabled) 75%),
linear-gradient(-45deg, transparent 75%, var(--__grid-color1-disabled) 75%);
}
.preview-block {
background: var(--background, var(--bg));
display: flex;
justify-content: center;
align-items: center;
min-width: 33%;
min-height: 33%;
max-width: 80%;
max-height: 80%;
border-width: 0;
border-style: solid;
border-color: var(--border);
border-radius: var(--roundness);
box-shadow: var(--shadow);
}
}
}
</style>
<script>
import Checkbox from 'src/components/checkbox/checkbox.vue'
export default {
props: [
'shadow',
'shadowControl',
'previewClass',
'previewStyle',
'disabled'
],
data () {
return {
lightGrid: false
}
},
emits: ['update:shadow'],
components: {
Checkbox
},
methods: {
updateProperty (axis, value) {
this.$emit('update:shadow', { axis, value })
}
}
}
</script>

43
src/components/input.style.js
View file

@ -10,17 +10,18 @@ const hoverGlow = {
export default { export default {
name: 'Input', name: 'Input',
selector: '.input', selector: '.input',
variant: { states: {
hover: ':hover:not(.disabled)',
focused: ':focus-within',
disabled: '.disabled'
},
variants: {
checkbox: '.-checkbox', checkbox: '.-checkbox',
radio: '.-radio' radio: '.-radio'
}, },
states: {
disabled: ':disabled',
hover: ':hover:not(:disabled)',
focused: ':focus-within'
},
validInnerComponents: [ validInnerComponents: [
'Text' 'Text',
'Icon'
], ],
defaultRules: [ defaultRules: [
{ {
@ -55,6 +56,34 @@ export default {
directives: { directives: {
shadow: [hoverGlow, '--defaultInputBevel'] shadow: [hoverGlow, '--defaultInputBevel']
} }
},
{
state: ['disabled'],
directives: {
background: '--parent'
}
},
{
component: 'Text',
parent: {
component: 'Input',
state: ['disabled']
},
directives: {
textOpacity: 0.25,
textOpacityMode: 'blend'
}
},
{
component: 'Icon',
parent: {
component: 'Input',
state: ['disabled']
},
directives: {
textOpacity: 0.25,
textOpacityMode: 'blend'
}
} }
] ]
} }

2
src/components/opacity_input/opacity_input.vue
View file

@ -6,6 +6,7 @@
<label <label
:for="name" :for="name"
class="label" class="label"
:class="{ faint: !present || disabled }"
> >
{{ $t('settings.style.common.opacity') }} {{ $t('settings.style.common.opacity') }}
</label> </label>
@ -22,6 +23,7 @@
type="number" type="number"
:value="modelValue || fallback" :value="modelValue || fallback"
:disabled="!present || disabled" :disabled="!present || disabled"
:class="{ disabled: !present || disabled }"
max="1" max="1"
min="0" min="0"
step=".05" step=".05"

35
src/components/select/select.vue
View file

@ -6,13 +6,14 @@
<select <select
:disabled="disabled" :disabled="disabled"
:value="modelValue" :value="modelValue"
v-bind="attrs" v-bind="$attrs"
@change="$emit('update:modelValue', $event.target.value)" @change="$emit('update:modelValue', $event.target.value)"
> >
<slot /> <slot />
</select> </select>
{{ ' ' }} {{ ' ' }}
<FAIcon <FAIcon
v-if="!$attrs.size && !$attrs.multiple"
class="select-down-icon" class="select-down-icon"
icon="chevron-down" icon="chevron-down"
/> />
@ -39,6 +40,38 @@ label.Select {
z-index: 1; z-index: 1;
height: 2em; height: 2em;
line-height: 16px; line-height: 16px;
&[multiple],
&[size] {
height: 100%;
padding: 0.2em;
option {
background-color: transparent;
&.-active {
color: var(--selectionText);
background-color: var(--selectionBackground);
}
}
}
}
&.disabled,
&:disabled {
background-color: var(--background);
opacity: 1; /* override browser */
color: var(--faint);
select {
&[multiple],
&[size] {
option.-active {
color: var(--faint);
background: transparent;
}
}
}
} }
.select-down-icon { .select-down-icon {

13
src/components/settings_modal/tabs/theme_tab/theme_tab.js
View file

@ -314,7 +314,18 @@ export default {
}, },
set (val) { set (val) {
if (val) { if (val) {
this.shadowsLocal[this.shadowSelected] = this.currentShadowFallback.map(_ => Object.assign({}, _)) this.shadowsLocal[this.shadowSelected] = (this.currentShadowFallback || [])
.map(s => ({
name: null,
x: 0,
y: 0,
blur: 0,
spread: 0,
inset: false,
color: '#000000',
alpha: 1,
...s
}))
} else { } else {
delete this.shadowsLocal[this.shadowSelected] delete this.shadowsLocal[this.shadowSelected]
} }

15
src/components/settings_modal/tabs/theme_tab/theme_tab.scss
View file

@ -25,7 +25,9 @@
margin-bottom: 5px; margin-bottom: 5px;
.label { .label {
margin-right: 1em;
flex: 1; flex: 1;
line-height: 2;
} }
.opt { .opt {
@ -48,15 +50,14 @@
&[type="range"] { &[type="range"] {
flex: 1; flex: 1;
min-width: 3em; min-width: 2em;
align-self: flex-start; align-self: center;
margin: 0 0.5em;
} }
}
&.disabled { &[type="checkbox"] + i {
input, height: 1.1em;
select { align-self: center;
opacity: 0.5;
} }
} }
} }

57
src/components/settings_modal/tabs/theme_tab/theme_tab.vue
View file

@ -123,10 +123,13 @@
</div> </div>
</div> </div>
<!-- eslint-disable vue/no-v-text-v-html-on-component --> <!-- eslint-disable vue/no-v-html vue/no-v-text-v-html-on-component -->
<component :is="'style'" v-html="themeV3Preview"/> <component
<!-- eslint-enable vue/no-v-text-v-html-on-component --> :is="'style'"
<preview id="theme-preview"/> v-html="themeV3Preview"
/>
<!-- eslint-enable vue/no-v-html vue/no-v-text-v-html-on-component -->
<preview id="theme-preview" />
<div> <div>
<button <button
@ -934,24 +937,14 @@
</Select> </Select>
</div> </div>
<div class="override"> <div class="override">
<label <Checkbox
for="override"
class="label"
>
{{ $t('settings.style.shadows.override') }}
</label>
{{ ' ' }}
<input
id="override" id="override"
v-model="currentShadowOverriden" v-model="currentShadowOverriden"
name="override" name="override"
class="input-override" class="input-override"
type="checkbox"
> >
<label {{ $t('settings.style.shadows.override') }}
class="checkbox-label" </Checkbox>
for="override"
/>
</div> </div>
<button <button
class="btn button-default" class="btn button-default"
@ -962,38 +955,10 @@
</div> </div>
<ShadowControl <ShadowControl
v-model="currentShadow" v-model="currentShadow"
:ready="!!currentShadowFallback" :separate-inset="shadowSelected === 'avatar' || shadowSelected === 'avatarStatus'"
:fallback="currentShadowFallback" :fallback="currentShadowFallback"
/> />
<div v-if="shadowSelected === 'avatar' || shadowSelected === 'avatarStatus'">
<i18n-t
scope="global"
keypath="settings.style.shadows.filter_hint.always_drop_shadow"
tag="p"
>
<code>filter: drop-shadow()</code>
</i18n-t>
<p>{{ $t('settings.style.shadows.filter_hint.avatar_inset') }}</p>
<i18n-t
scope="global"
keypath="settings.style.shadows.filter_hint.drop_shadow_syntax"
tag="p"
>
<code>drop-shadow</code>
<code>spread-radius</code>
<code>inset</code>
</i18n-t>
<i18n-t
scope="global"
keypath="settings.style.shadows.filter_hint.inset_classic"
tag="p"
>
<code>box-shadow</code>
</i18n-t>
<p>{{ $t('settings.style.shadows.filter_hint.spread_zero') }}</p>
</div>
</div> </div>
<div <div
:label="$t('settings.style.fonts._tab_label')" :label="$t('settings.style.fonts._tab_label')"
class="fonts-container" class="fonts-container"

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

@ -1,9 +1,12 @@
import ColorInput from '../color_input/color_input.vue' import ColorInput from 'src/components/color_input/color_input.vue'
import OpacityInput from '../opacity_input/opacity_input.vue' import OpacityInput from 'src/components/opacity_input/opacity_input.vue'
import Select from '../select/select.vue' import Select from 'src/components/select/select.vue'
import { getCssShadow } from '../../services/theme_data/theme_data.service.js' import Checkbox from 'src/components/checkbox/checkbox.vue'
import { hex2rgb } from '../../services/color_convert/color_convert.js' import Popover from 'src/components/popover/popover.vue'
import ComponentPreview from 'src/components/component_preview/component_preview.vue'
import { getCssShadow, getCssShadowFilter } from '../../services/theme_data/theme_data.service.js'
import { library } from '@fortawesome/fontawesome-svg-core' import { library } from '@fortawesome/fontawesome-svg-core'
import { throttle } from 'lodash'
import { import {
faTimes, faTimes,
faChevronDown, faChevronDown,
@ -30,93 +33,100 @@ const toModel = (object = {}) => ({
}) })
export default { export default {
// 'modelValue' and 'Fallback' can be undefined, but if they are
// initially vue won't detect it when they become something else
// therefore i'm using "ready" which should be passed as true when
// data becomes available
props: [ props: [
'modelValue', 'fallback', 'ready' 'modelValue', 'fallback', 'separateInset', 'noPreview', 'disabled'
], ],
emits: ['update:modelValue'], emits: ['update:modelValue', 'subShadowSelected'],
data () { data () {
return { return {
selectedId: 0, selectedId: 0,
// TODO there are some bugs regarding display of array (it's not getting updated when deleting for some reason) // TODO there are some bugs regarding display of array (it's not getting updated when deleting for some reason)
cValue: (this.modelValue || this.fallback || []).map(toModel) cValue: (this.modelValue ?? this.fallback ?? []).map(toModel)
} }
}, },
components: { components: {
ColorInput, ColorInput,
OpacityInput, OpacityInput,
Select Select,
Checkbox,
Popover,
ComponentPreview
},
beforeUpdate () {
this.cValue = (this.modelValue ?? this.fallback ?? []).map(toModel)
},
computed: {
selected () {
const selected = this.cValue[this.selectedId]
if (selected) {
return { ...selected }
}
return null
},
present () {
return this.selected != null && !this.usingFallback
},
shadowsAreNull () {
return this.modelValue == null
},
currentFallback () {
return this.fallback?.[this.selectedId]
},
moveUpValid () {
return this.selectedId > 0
},
moveDnValid () {
return this.selectedId < this.cValue.length - 1
},
usingFallback () {
return this.modelValue == null
},
style () {
if (this.separateInset) {
return {
filter: getCssShadowFilter(this.cValue),
boxShadow: getCssShadow(this.cValue, true)
}
}
return {
boxShadow: getCssShadow(this.cValue)
}
}
},
watch: {
selected (value) {
this.$emit('subShadowSelected', this.selectedId)
}
}, },
methods: { methods: {
updateProperty: throttle(function (prop, value) {
this.cValue[this.selectedId][prop] = value
if (prop === 'inset' && value === false && this.separateInset) {
this.cValue[this.selectedId].spread = 0
}
this.$emit('update:modelValue', this.cValue)
}, 100),
add () { add () {
this.cValue.push(toModel(this.selected)) this.cValue.push(toModel(this.selected))
this.selectedId = this.cValue.length - 1 this.selectedId = Math.max(this.cValue.length - 1, 0)
this.$emit('update:modelValue', this.cValue)
}, },
del () { del () {
this.cValue.splice(this.selectedId, 1) this.cValue.splice(this.selectedId, 1)
this.selectedId = this.cValue.length === 0 ? undefined : Math.max(this.selectedId - 1, 0) this.selectedId = this.cValue.length === 0 ? undefined : Math.max(this.selectedId - 1, 0)
this.$emit('update:modelValue', this.cValue)
}, },
moveUp () { moveUp () {
const movable = this.cValue.splice(this.selectedId, 1)[0] const movable = this.cValue.splice(this.selectedId, 1)[0]
this.cValue.splice(this.selectedId - 1, 0, movable) this.cValue.splice(this.selectedId - 1, 0, movable)
this.selectedId -= 1 this.selectedId -= 1
this.$emit('update:modelValue', this.cValue)
}, },
moveDn () { moveDn () {
const movable = this.cValue.splice(this.selectedId, 1)[0] const movable = this.cValue.splice(this.selectedId, 1)[0]
this.cValue.splice(this.selectedId + 1, 0, movable) this.cValue.splice(this.selectedId + 1, 0, movable)
this.selectedId += 1 this.selectedId += 1
} this.$emit('update:modelValue', this.cValue)
},
beforeUpdate () {
this.cValue = this.modelValue || this.fallback
},
computed: {
anyShadows () {
return this.cValue.length > 0
},
anyShadowsFallback () {
return this.fallback.length > 0
},
selected () {
if (this.ready && this.anyShadows) {
return this.cValue[this.selectedId]
} else {
return toModel({})
}
},
currentFallback () {
if (this.ready && this.anyShadowsFallback) {
return this.fallback[this.selectedId]
} else {
return toModel({})
}
},
moveUpValid () {
return this.ready && this.selectedId > 0
},
moveDnValid () {
return this.ready && this.selectedId < this.cValue.length - 1
},
present () {
return this.ready &&
typeof this.cValue[this.selectedId] !== 'undefined' &&
!this.usingFallback
},
usingFallback () {
return typeof this.modelValue === 'undefined'
},
rgb () {
return hex2rgb(this.selected.color)
},
style () {
return this.ready
? {
boxShadow: getCssShadow(this.fallback)
}
: {}
} }
} }
} }

105
src/components/shadow_control/shadow_control.scss Normal file
View file

@ -0,0 +1,105 @@
.settings-modal .settings-modal-panel .shadow-control {
display: flex;
flex-wrap: wrap;
justify-content: stretch;
grid-gap: 0.25em;
margin-bottom: 1em;
.shadow-switcher {
order: 1;
flex: 1 0 6em;
min-width: 6em;
margin-right: 0.125em;
display: flex;
flex-direction: column;
.shadow-list {
flex: 1 0 auto;
}
.arrange-buttons {
flex: 0 0 auto;
display: grid;
grid-auto-columns: 1fr;
grid-auto-flow: column;
margin-top: 0.25em;
.button-default {
margin: 0;
padding: 0;
}
}
}
.shadow-tweak {
order: 3;
flex: 2 0 10em;
min-width: 10em;
margin-left: 0.125em;
margin-right: 0.125em;
/* hack */
.input-boolean {
flex: 1;
display: flex;
.label {
flex: 1;
}
}
.input-string {
flex: 1 0 5em;
}
.id-control {
align-items: stretch;
.shadow-switcher,
.btn {
min-width: 1px;
margin-right: 5px;
}
.btn {
padding: 0 0.4em;
margin: 0 0.1em;
}
}
}
&.-no-preview {
.shadow-tweak {
order: 0;
flex: 2 0 8em;
max-width: 100%;
}
.input-range {
min-width: 5em;
}
}
.inset-alert {
padding: 0.25em 0.5em;
}
&.disabled {
.inset-alert {
opacity: 0.2;
}
}
.shadow-preview {
order: 2;
flex: 3 3 15em;
min-width: 10em;
margin-left: 0.125em;
align-self: start;
}
}
.inset-tooltip {
padding: 0.5em;
max-width: 30em;
}

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

@ -1,91 +1,51 @@
<template> <template>
<div <div
class="shadow-control" class="label shadow-control"
:class="{ disabled: !present }" :class="{ disabled: disabled || !present, '-no-preview': noPreview }"
> >
<div class="shadow-preview-container"> <ComponentPreview
<div v-if="!noPreview"
:disabled="!present" class="shadow-preview"
class="y-shift-control" :shadow-control="true"
:shadow="selected"
:preview-style="style"
:disabled="disabled || !present"
@update:shadow="({ axis, value }) => updateProperty(axis, value)"
/>
<div class="shadow-switcher">
<Select
id="shadow-list"
v-model="selectedId"
class="shadow-list"
size="10"
:disabled="shadowsAreNull"
> >
<input <option
v-model="selected.y" v-for="(shadow, index) in cValue"
:disabled="!present" :key="index"
class="input input-number" :value="index"
type="number" :class="{ '-active': index === Number(selectedId) }"
> >
<div class="wrap"> {{ shadow?.name ?? $t('settings.style.shadows.shadow_id', { value: index }) }}
<input </option>
v-model="selected.y" </Select>
:disabled="!present"
class="input input-range"
type="range"
max="20"
min="-20"
>
</div>
</div>
<div class="preview-window">
<div
class="preview-block"
:style="style"
/>
</div>
<div <div
:disabled="!present" class="id-control btn-group arrange-buttons"
class="x-shift-control"
> >
<input
v-model="selected.x"
:disabled="!present"
class="input input-number"
type="number"
>
<div class="wrap">
<input
v-model="selected.x"
:disabled="!present"
class="input input-range"
type="range"
max="20"
min="-20"
>
</div>
</div>
</div>
<div class="shadow-tweak">
<div
:disabled="usingFallback"
class="id-control style-control"
>
<Select
id="shadow-switcher"
v-model="selectedId"
class="shadow-switcher"
:disabled="!ready || usingFallback"
>
<option
v-for="(shadow, index) in cValue"
:key="index"
:value="index"
>
{{ $t('settings.style.shadows.shadow_id', { value: index }) }}
</option>
</Select>
<button <button
class="btn button-default" class="btn button-default"
:disabled="!ready || !present" :disabled="disabled || shadowsAreNull"
@click="del" @click="add"
> >
<FAIcon <FAIcon
fixed-width fixed-width
icon="times" icon="plus"
/> />
</button> </button>
<button <button
class="btn button-default" class="btn button-default"
:disabled="!moveUpValid" :disabled="disabled || !moveUpValid"
:class="{ disabled: disabled || !moveUpValid }"
@click="moveUp" @click="moveUp"
> >
<FAIcon <FAIcon
@ -95,7 +55,8 @@
</button> </button>
<button <button
class="btn button-default" class="btn button-default"
:disabled="!moveDnValid" :disabled="disabled || !moveDnValid"
:class="{ disabled: disabled || !moveDnValid }"
@click="moveDn" @click="moveDn"
> >
<FAIcon <FAIcon
@ -105,222 +66,191 @@
</button> </button>
<button <button
class="btn button-default" class="btn button-default"
:disabled="usingFallback" :disabled="disabled || !present"
@click="add" :class="{ disabled: disabled || !present }"
@click="del"
> >
<FAIcon <FAIcon
fixed-width fixed-width
icon="plus" icon="times"
/> />
</button> </button>
</div> </div>
</div>
<div class="shadow-tweak">
<div <div
:disabled="!present" :class="{ disabled: disabled || !present }"
class="inset-control style-control" class="name-control style-control"
> >
<label <label
for="inset" for="name"
class="label" class="label"
:class="{ faint: disabled || !present }"
> >
{{ $t('settings.style.shadows.inset') }} {{ $t('settings.style.shadows.name') }}
</label> </label>
<input <input
id="inset" id="name"
v-model="selected.inset" :value="selected?.name"
:disabled="!present" :disabled="disabled || !present"
name="inset" :class="{ disabled: disabled || !present }"
class="input -checkbox input-inset visible-for-screenreader-only" name="name"
type="checkbox" class="input input-string"
@input="e => updateProperty('name', e.target.value)"
> >
<label
class="checkbox-label"
for="inset"
:aria-hidden="true"
/>
</div> </div>
<div <div
:disabled="!present" :disabled="disabled || !present"
class="inset-control style-control"
>
<Checkbox
id="inset"
:value="selected?.inset"
:disabled="disabled || !present"
name="inset"
class="input-inset input-boolean"
@input="e => updateProperty('inset', e.target.checked)"
>
<template #before>
{{ $t('settings.style.shadows.inset') }}
</template>
</Checkbox>
</div>
<div
:disabled="disabled || !present"
:class="{ disabled: disabled || !present }"
class="blur-control style-control" class="blur-control style-control"
> >
<label <label
for="spread" for="blur"
class="label" class="label"
:class="{ faint: disabled || !present }"
> >
{{ $t('settings.style.shadows.blur') }} {{ $t('settings.style.shadows.blur') }}
</label> </label>
<input <input
id="blur" id="blur"
v-model="selected.blur" :value="selected?.blur"
:disabled="!present" :disabled="disabled || !present"
:class="{ disabled: disabled || !present }"
name="blur" name="blur"
class="input input-range" class="input input-range"
type="range" type="range"
max="20" max="20"
min="0" min="0"
@input="e => updateProperty('blur', e.target.value)"
> >
<input <input
v-model="selected.blur" :value="selected?.blur"
:disabled="!present" class="input input-number -small"
class="input input-number" :disabled="disabled || !present"
:class="{ disabled: disabled || !present }"
type="number" type="number"
min="0" min="0"
@input="e => updateProperty('blur', e.target.value)"
> >
</div> </div>
<div <div
:disabled="!present"
class="spread-control style-control" class="spread-control style-control"
:class="{ disabled: disabled || !present || (separateInset && !selected?.inset) }"
> >
<label <label
for="spread" for="spread"
class="label" class="label"
:class="{ faint: disabled || !present || (separateInset && !selected?.inset) }"
> >
{{ $t('settings.style.shadows.spread') }} {{ $t('settings.style.shadows.spread') }}
</label> </label>
<input <input
id="spread" id="spread"
v-model="selected.spread" :value="selected?.spread"
:disabled="!present" :disabled="disabled || !present || (separateInset && !selected?.inset)"
:class="{ disabled: disabled || !present || (separateInset && !selected?.inset) }"
name="spread" name="spread"
class="input input-range" class="input input-range"
type="range" type="range"
max="20" max="20"
min="-20" min="-20"
@input="e => updateProperty('spread', e.target.value)"
> >
<input <input
v-model="selected.spread" :value="selected?.spread"
:disabled="!present" class="input input-number -small"
class="input input-number" :class="{ disabled: disabled || !present || (separateInset && !selected?.inset) }"
:disabled="{ disabled: disabled || !present || (separateInset && !selected?.inset) }"
type="number" type="number"
@input="e => updateProperty('spread', e.target.value)"
> >
</div> </div>
<ColorInput <ColorInput
v-model="selected.color" :model-value="selected?.color"
:disabled="!present" :disabled="disabled || !present"
:label="$t('settings.style.common.color')" :label="$t('settings.style.common.color')"
:fallback="currentFallback.color" :fallback="currentFallback?.color"
:show-optional-tickbox="false" :show-optional-tickbox="false"
name="shadow" name="shadow"
@update:modelValue="e => updateProperty('color', e)"
/> />
<OpacityInput <OpacityInput
v-model="selected.alpha" :model-value="selected?.alpha"
:disabled="!present" :disabled="disabled || !present"
@update:modelValue="e => updateProperty('alpha', e)"
/> />
<i18n-t <i18n-t
scope="global" scope="global"
keypath="settings.style.shadows.hintV3" keypath="settings.style.shadows.hintV3"
:class="{ faint: disabled || !present }"
tag="p" tag="p"
> >
<code>--variable,mod</code> <code>--variable,mod</code>
</i18n-t> </i18n-t>
<Popover
v-if="separateInset"
trigger="hover"
>
<template #trigger>
<div
class="inset-alert alert warning"
>
<FAIcon icon="exclamation-triangle" />
&nbsp;
{{ $t('settings.style.shadows.filter_hint.avatar_inset_short') }}
</div>
</template>
<template #content>
<div class="inset-tooltip">
<i18n-t
scope="global"
keypath="settings.style.shadows.filter_hint.always_drop_shadow"
tag="p"
>
<code>filter: drop-shadow()</code>
</i18n-t>
<p>{{ $t('settings.style.shadows.filter_hint.avatar_inset') }}</p>
<i18n-t
scope="global"
keypath="settings.style.shadows.filter_hint.drop_shadow_syntax"
tag="p"
>
<code>drop-shadow</code>
<code>spread-radius</code>
<code>inset</code>
</i18n-t>
<i18n-t
scope="global"
keypath="settings.style.shadows.filter_hint.inset_classic"
tag="p"
>
<code>box-shadow</code>
</i18n-t>
<p>{{ $t('settings.style.shadows.filter_hint.spread_zero') }}</p>
</div>
</template>
</Popover>
</div> </div>
</div> </div>
</template> </template>
<script src="./shadow_control.js"></script> <script src="./shadow_control.js"></script>
<style lang="scss"> <style src="./shadow_control.scss" lang="scss"></style>
.shadow-control {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 1em;
.shadow-preview-container,
.shadow-tweak {
margin: 5px 6px 0 0;
}
.shadow-preview-container {
flex: 0;
display: flex;
flex-wrap: wrap;
input[type="number"] {
width: 5em;
min-width: 2em;
}
.x-shift-control,
.y-shift-control {
display: flex;
flex: 0;
&[disabled="disabled"] * {
opacity: 0.5;
}
}
.x-shift-control {
align-items: flex-start;
}
.x-shift-control .wrap,
input[type="range"] {
margin: 0;
width: 15em;
height: 2em;
}
.y-shift-control {
flex-direction: column;
align-items: flex-end;
.wrap {
width: 2em;
height: 15em;
}
input[type="range"] {
transform-origin: 1em 1em;
transform: rotate(90deg);
}
}
.preview-window {
flex: 1;
background-color: #999;
display: flex;
align-items: center;
justify-content: center;
background-image:
linear-gradient(45deg, #666 25%, transparent 25%),
linear-gradient(-45deg, #666 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #666 75%),
linear-gradient(-45deg, transparent 75%, #666 75%);
background-size: 20px 20px;
background-position: 0 0, 0 10px, 10px -10px, -10px 0;
border-radius: var(--roundness);
.preview-block {
width: 33%;
height: 33%;
border-radius: var(--roundness);
}
}
}
.shadow-tweak {
flex: 1;
min-width: 280px;
.id-control {
align-items: stretch;
.shadow-switcher {
flex: 1;
}
.shadow-switcher,
.btn {
min-width: 1px;
margin-right: 5px;
}
.btn {
padding: 0 0.4em;
margin: 0 0.1em;
}
}
}
}
</style>

16
src/i18n/en.json
View file

@ -876,6 +876,9 @@
"component": "Component", "component": "Component",
"override": "Override", "override": "Override",
"shadow_id": "Shadow #{value}", "shadow_id": "Shadow #{value}",
"offset": "Shadow offset",
"light_grid": "Use light checkerboard",
"name": "Name",
"blur": "Blur", "blur": "Blur",
"spread": "Spread", "spread": "Spread",
"inset": "Inset", "inset": "Inset",
@ -883,6 +886,7 @@
"filter_hint": { "filter_hint": {
"always_drop_shadow": "Warning, this shadow always uses {0} when browser supports it.", "always_drop_shadow": "Warning, this shadow always uses {0} when browser supports it.",
"drop_shadow_syntax": "{0} does not support {1} parameter and {2} keyword.", "drop_shadow_syntax": "{0} does not support {1} parameter and {2} keyword.",
"avatar_inset_short": "Separate inset shadow",
"avatar_inset": "Please note that combining both inset and non-inset shadows on avatars might give unexpected results with transparent avatars.", "avatar_inset": "Please note that combining both inset and non-inset shadows on avatars might give unexpected results with transparent avatars.",
"spread_zero": "Shadows with spread > 0 will appear as if it was set to zero", "spread_zero": "Shadows with spread > 0 will appear as if it was set to zero",
"inset_classic": "Inset shadows will be using {0}" "inset_classic": "Inset shadows will be using {0}"
@ -1408,6 +1412,18 @@
"unicode_domain_indicator": { "unicode_domain_indicator": {
"tooltip": "This domain contains non-ascii characters." "tooltip": "This domain contains non-ascii characters."
}, },
"splash": {
"loading": "Loading...",
"theme": "Applying theme, please wait warmly...",
"instance": "Getting instance info...",
"settings": "Applying settings...",
"almost": "Reticulating splines...",
"fun_1": "Drink more water",
"fun_2": "Take it easy!",
"fun_3": "Suya...",
"fun_4": "My Pleroma machine is full power!",
"error": "Something went wrong"
},
"bookmark_folders": { "bookmark_folders": {
"select_folder": "Select bookmark folder", "select_folder": "Select bookmark folder",
"creating_folder": "Creating bookmark folder", "creating_folder": "Creating bookmark folder",

43
src/i18n/nan-TW.json
View file

@ -190,7 +190,8 @@
"mobile_notifications_close": "關掉通知", "mobile_notifications_close": "關掉通知",
"announcements": "公告", "announcements": "公告",
"search": "Tshuē", "search": "Tshuē",
"mobile_notifications_mark_as_seen": "Lóng 標做有讀" "mobile_notifications_mark_as_seen": "Lóng 標做有讀",
"quotes": "引用"
}, },
"notifications": { "notifications": {
"broken_favorite": "狀態毋知影，leh tshiau-tshuē……", "broken_favorite": "狀態毋知影，leh tshiau-tshuē……",
@ -212,7 +213,8 @@
"unread_follow_requests": "{num}ê新ê跟tuè請求", "unread_follow_requests": "{num}ê新ê跟tuè請求",
"configuration_tip": "用{theSettings}，lí通自訂siánn物佇tsia顯示。{dismiss}", "configuration_tip": "用{theSettings}，lí通自訂siánn物佇tsia顯示。{dismiss}",
"configuration_tip_settings": "設定", "configuration_tip_settings": "設定",
"configuration_tip_dismiss": "Mài koh顯示" "configuration_tip_dismiss": "Mài koh顯示",
"subscribed_status": "有發送ê"
}, },
"polls": { "polls": {
"add_poll": "開投票", "add_poll": "開投票",
@ -252,7 +254,8 @@
}, },
"load_all_hint": "載入頭前 {saneAmount} ê 繪文字，規个攏載入效能可能 ē khah 食力。", "load_all_hint": "載入頭前 {saneAmount} ê 繪文字，規个攏載入效能可能 ē khah 食力。",
"load_all": "Kā {emojiAmount} ê 繪文字攏載入", "load_all": "Kā {emojiAmount} ê 繪文字攏載入",
"regional_indicator": "地區指引 {letter}" "regional_indicator": "地區指引 {letter}",
"hide_custom_emoji": "Khàm掉自訂ê繪文字"
}, },
"errors": { "errors": {
"storage_unavailable": "Pleroma buē-tàng the̍h 著瀏覽器儲存 ê。Lí ê 登入狀態抑是局部設定 buē 儲存，mā 凡勢 tú 著意料外 ê 問題。拍開 cookie 看māi。" "storage_unavailable": "Pleroma buē-tàng the̍h 著瀏覽器儲存 ê。Lí ê 登入狀態抑是局部設定 buē 儲存，mā 凡勢 tú 著意料外 ê 問題。拍開 cookie 看māi。"
@ -263,7 +266,8 @@
"emoji_reactions": "繪文字 ê 反應", "emoji_reactions": "繪文字 ê 反應",
"reports": "檢舉", "reports": "檢舉",
"moves": "用者 ê 移民", "moves": "用者 ê 移民",
"load_older": "載入 koh khah 早 ê 互動" "load_older": "載入 koh khah 早 ê 互動",
"statuses": "訂ê"
}, },
"post_status": { "post_status": {
"edit_status": "編輯狀態", "edit_status": "編輯狀態",
@ -935,7 +939,34 @@
"notification_extra_chats": "顯示bô讀ê開講", "notification_extra_chats": "顯示bô讀ê開講",
"notification_extra_announcements": "顯示bô讀ê公告", "notification_extra_announcements": "顯示bô讀ê公告",
"notification_extra_follow_requests": "顯示新ê跟tuè請求", "notification_extra_follow_requests": "顯示新ê跟tuè請求",
"notification_extra_tip": "顯示自訂其他通知ê撇步" "notification_extra_tip": "顯示自訂其他通知ê撇步",
"confirm_new_setting": "Lí敢確認新ê設定？",
"text_size_tip": "用 {0} 做絕對值，{1} ē根據瀏覽器ê標準文字sài-suh放大縮小。",
"theme_debug": "佇處理透明ê時，顯示背景主題ia̋n-jín 所假使ê（DEBUG）",
"units": {
"time": {
"s": "秒鐘",
"m": "分鐘",
"h": "點鐘",
"d": "工"
}
},
"actor_type": "Tsit ê口座是：",
"actor_type_Person": "一般ê用者",
"actor_type_description": "標記lí ê口座做群組，ē hōo自動轉送提起伊ê狀態。",
"actor_type_Group": "群組",
"actor_type_Service": "機器lâng",
"appearance": "外觀",
"confirm_new_question": "Tse看起來kám好？設定ē佇10秒鐘後改轉去。",
"revert": "改轉去",
"confirm": "確認",
"text_size": "文字kap界面ê sài-suh",
"text_size_tip2": "毋是 {0} ê值可能ē破壞一寡物件kap主題",
"emoji_size": "繪文字ê sài-suh",
"navbar_size": "頂 liâu-á êsài-suh",
"panel_header_size": "面pang標題ê sài-suh",
"visual_tweaks": "細細ê外觀調整",
"scale_and_layout": "界面ê sài-suh kap排列"
}, },
"status": { "status": {
"favorites": "收藏", "favorites": "收藏",
@ -1001,7 +1032,7 @@
"show_only_conversation_under_this": "Kan-ta顯示tsit ê狀態ê回應", "show_only_conversation_under_this": "Kan-ta顯示tsit ê狀態ê回應",
"status_history": "狀態ê歷史", "status_history": "狀態ê歷史",
"reaction_count_label": "{num}ê lâng用表情反應", "reaction_count_label": "{num}ê lâng用表情反應",
"hide_quote": "Khàm條引用ê狀態", "hide_quote": "Khàm掉引用ê狀態",
"display_quote": "顯示引用ê狀態", "display_quote": "顯示引用ê狀態",
"invisible_quote": "引用ê狀態bē當用：{link}", "invisible_quote": "引用ê狀態bē當用：{link}",
"more_actions": "佇tsit ê狀態ê其他動作" "more_actions": "佇tsit ê狀態ê其他動作"

114
src/main.js
View file

@ -58,56 +58,76 @@ const persistedStateOptions = {
}; };
(async () => { (async () => {
let storageError = false const isFox = Math.floor(Math.random() * 2) > 0 ? '_fox' : ''
const plugins = [pushNotifications]
const splashError = (i18n, e) => {
const throbber = document.querySelector('#throbber')
throbber.addEventListener('animationend', () => {
document.querySelector('#mascot').src = `/static/pleromatan_orz${isFox}.png`
})
throbber.classList.add('dead')
document.querySelector('#status').textContent = i18n.global.t('splash.error')
console.error('PleromaFE failed to initialize: ', e)
}
try { try {
const persistedState = await createPersistedState(persistedStateOptions) let storageError
plugins.push(persistedState) const plugins = [pushNotifications]
} catch (e) { try {
console.error(e) const persistedState = await createPersistedState(persistedStateOptions)
storageError = true plugins.push(persistedState)
} } catch (e) {
const store = createStore({ console.error('Storage error', e)
modules: { storageError = e
i18n: { }
getters: { document.querySelector('#mascot').src = `/static/pleromatan_apology${isFox}.png`
i18n: () => i18n.global document.querySelector('#status').removeAttribute('class')
} document.querySelector('#status').textContent = i18n.global.t('splash.loading')
document.querySelector('#splash-credit').textContent = i18n.global.t('update.art_by', { linkToArtist: 'pipivovott' })
const store = createStore({
modules: {
i18n: {
getters: {
i18n: () => i18n.global
}
},
interface: interfaceModule,
instance: instanceModule,
// TODO refactor users/statuses modules, they depend on each other
users: usersModule,
statuses: statusesModule,
notifications: notificationsModule,
lists: listsModule,
api: apiModule,
config: configModule,
profileConfig: profileConfigModule,
serverSideStorage: serverSideStorageModule,
adminSettings: adminSettingsModule,
shout: shoutModule,
oauth: oauthModule,
authFlow: authFlowModule,
mediaViewer: mediaViewerModule,
oauthTokens: oauthTokensModule,
reports: reportsModule,
polls: pollsModule,
postStatus: postStatusModule,
editStatus: editStatusModule,
statusHistory: statusHistoryModule,
chats: chatsModule,
announcements: announcementsModule,
bookmarkFolders: bookmarkFoldersModule
}, },
interface: interfaceModule, plugins,
instance: instanceModule, strict: false // Socket modifies itself, let's ignore this for now.
// TODO refactor users/statuses modules, they depend on each other // strict: process.env.NODE_ENV !== 'production'
users: usersModule, })
statuses: statusesModule, if (storageError) {
notifications: notificationsModule, store.dispatch('pushGlobalNotice', { messageKey: 'errors.storage_unavailable', level: 'error' })
lists: listsModule, }
api: apiModule, return await afterStoreSetup({ store, i18n })
config: configModule, } catch (e) {
profileConfig: profileConfigModule, splashError(i18n, e)
serverSideStorage: serverSideStorageModule,
adminSettings: adminSettingsModule,
shout: shoutModule,
oauth: oauthModule,
authFlow: authFlowModule,
mediaViewer: mediaViewerModule,
oauthTokens: oauthTokensModule,
reports: reportsModule,
polls: pollsModule,
postStatus: postStatusModule,
editStatus: editStatusModule,
statusHistory: statusHistoryModule,
chats: chatsModule,
announcements: announcementsModule,
bookmarkFolders: bookmarkFoldersModule
},
plugins,
strict: false // Socket modifies itself, let's ignore this for now.
// strict: process.env.NODE_ENV !== 'production'
})
if (storageError) {
store.dispatch('pushGlobalNotice', { messageKey: 'errors.storage_unavailable', level: 'error' })
} }
afterStoreSetup({ store, i18n })
})() })()
// These are inlined by webpack's DefinePlugin // These are inlined by webpack's DefinePlugin

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

@ -43,16 +43,16 @@ const adoptStyleSheets = (styles) => {
// is nothing to do here. // is nothing to do here.
} }
export const generateTheme = async (inputRuleset, callbacks, debug) => { export const generateTheme = (inputRuleset, callbacks, debug) => {
const { const {
onNewRule = (rule, isLazy) => {}, onNewRule = (rule, isLazy) => {},
onLazyFinished = () => {}, onLazyFinished = () => {},
onEagerFinished = () => {} onEagerFinished = () => {}
} = callbacks } = callbacks
// Assuming that "worst case scenario background" is panel background since it's the most likely one
const themes3 = init({ const themes3 = init({
inputRuleset, inputRuleset,
// Assuming that "worst case scenario background" is panel background since it's the most likely one
ultimateBackgroundColor: inputRuleset[0].directives['--bg'].split('|')[1].trim(), ultimateBackgroundColor: inputRuleset[0].directives['--bg'].split('|')[1].trim(),
debug debug
}) })
@ -146,11 +146,11 @@ export const tryLoadCache = () => {
} }
} }
export const applyTheme = async (input, onFinish = (data) => {}, debug) => { export const applyTheme = (input, onFinish = (data) => {}, debug) => {
const eagerStyles = createStyleSheet(EAGER_STYLE_ID) const eagerStyles = createStyleSheet(EAGER_STYLE_ID)
const lazyStyles = createStyleSheet(LAZY_STYLE_ID) const lazyStyles = createStyleSheet(LAZY_STYLE_ID)
const { lazyProcessFunc } = await generateTheme( const { lazyProcessFunc } = generateTheme(
input, input,
{ {
onNewRule (rule, isLazy) { onNewRule (rule, isLazy) {
@ -169,15 +169,22 @@ export const applyTheme = async (input, onFinish = (data) => {}, debug) => {
adoptStyleSheets([eagerStyles, lazyStyles]) adoptStyleSheets([eagerStyles, lazyStyles])
const cache = { engineChecksum: getEngineChecksum(), data: [eagerStyles.rules, lazyStyles.rules] } const cache = { engineChecksum: getEngineChecksum(), data: [eagerStyles.rules, lazyStyles.rules] }
onFinish(cache) onFinish(cache)
localStorage.setItem('pleroma-fe-theme-cache', JSON.stringify(cache)) try {
localStorage.setItem('pleroma-fe-theme-cache', JSON.stringify(cache))
} catch (e) {
localStorage.removeItem('pleroma-fe-theme-cache')
try {
localStorage.setItem('pleroma-fe-theme-cache', JSON.stringify(cache))
} catch (e) {
console.warn('cannot save cache!', e)
}
}
} }
}, },
debug debug
) )
setTimeout(lazyProcessFunc, 0) setTimeout(lazyProcessFunc, 0)
return Promise.resolve()
} }
const extractStyleConfig = ({ const extractStyleConfig = ({
@ -222,7 +229,7 @@ const extractStyleConfig = ({
const defaultStyleConfig = extractStyleConfig(defaultState) const defaultStyleConfig = extractStyleConfig(defaultState)
export const applyConfig = (input) => { export const applyConfig = (input, i18n) => {
const config = extractStyleConfig(input) const config = extractStyleConfig(input)
if (config === defaultStyleConfig) { if (config === defaultStyleConfig) {
@ -230,8 +237,6 @@ export const applyConfig = (input) => {
} }
const head = document.head const head = document.head
const body = document.body
body.classList.add('hidden')
const rules = Object const rules = Object
.entries(config) .entries(config)
@ -252,8 +257,6 @@ export const applyConfig = (input) => {
--roundness: var(--forcedRoundness) !important; --roundness: var(--forcedRoundness) !important;
}`, 'index-max') }`, 'index-max')
} }
body.classList.remove('hidden')
} }
export const getThemes = () => { export const getThemes = () => {

2
src/services/theme_data/theme_data.service.js
View file

@ -452,7 +452,7 @@ export const getCssShadow = (input, usesDropShadow) => {
]).join(' ')).join(', ') ]).join(' ')).join(', ')
} }
const getCssShadowFilter = (input) => { export const getCssShadowFilter = (input) => {
if (input.length === 0) { if (input.length === 0) {
return 'none' return 'none'
} }

36
src/services/theme_data/theme_data_3.service.js
View file

@ -182,7 +182,7 @@ export const init = ({
const rulesetUnsorted = [ const rulesetUnsorted = [
...Object.values(components) ...Object.values(components)
.map(c => (c.defaultRules || []).map(r => ({ component: c.name, ...r, source: 'Built-in' }))) .map(c => (c.defaultRules || []).map(r => ({ source: 'Built-in', component: c.name, ...r })))
.reduce((acc, arr) => [...acc, ...arr], []), .reduce((acc, arr) => [...acc, ...arr], []),
...inputRuleset ...inputRuleset
].map(rule => { ].map(rule => {
@ -198,18 +198,33 @@ export const init = ({
const ruleset = rulesetUnsorted const ruleset = rulesetUnsorted
.map((data, index) => ({ data, index })) .map((data, index) => ({ data, index }))
.sort(({ data: a, index: ai }, { data: b, index: bi }) => { .toSorted(({ data: a, index: ai }, { data: b, index: bi }) => {
const parentsA = unroll(a).length const parentsA = unroll(a).length
const parentsB = unroll(b).length const parentsB = unroll(b).length
if (parentsA === parentsB) { let aScore = 0
if (a.component === 'Text') return -1 let bScore = 0
if (b.component === 'Text') return 1
aScore += parentsA * 1000
bScore += parentsB * 1000
aScore += a.variant !== 'normal' ? 100 : 0
bScore += b.variant !== 'normal' ? 100 : 0
aScore += a.state.filter(x => x !== 'normal').length * 1000
bScore += b.state.filter(x => x !== 'normal').length * 1000
aScore += a.component === 'Text' ? 1 : 0
bScore += b.component === 'Text' ? 1 : 0
// Debug
a.specifityScore = aScore
b.specifityScore = bScore
if (aScore === bScore) {
return ai - bi return ai - bi
} }
if (parentsA === 0 && parentsB !== 0) return -1 return aScore - bScore
if (parentsB === 0 && parentsA !== 0) return 1
return parentsA - parentsB
}) })
.map(({ data }) => data) .map(({ data }) => data)
@ -235,7 +250,10 @@ export const init = ({
// Inheriting all of the applicable rules // Inheriting all of the applicable rules
const existingRules = ruleset.filter(findRules(combination)) const existingRules = ruleset.filter(findRules(combination))
const computedDirectives = existingRules.map(r => r.directives).reduce((acc, directives) => ({ ...acc, ...directives }), {}) const computedDirectives =
existingRules
.map(r => r.directives)
.reduce((acc, directives) => ({ ...acc, ...directives }), {})
const computedRule = { const computedRule = {
...combination, ...combination,
directives: computedDirectives directives: computedDirectives

BIN
static/pleromatan_apology.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 396 KiB

BIN
static/pleromatan_apology_fox.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 521 KiB

BIN
static/pleromatan_orz.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
static/pleromatan_orz_fox.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.2 MiB