diff --git a/changelog.d/better-shadow-control.fix b/changelog.d/better-shadow-control.fix new file mode 100644 index 00000000..585ef6d2 --- /dev/null +++ b/changelog.d/better-shadow-control.fix @@ -0,0 +1 @@ +Updated shadow editor, hopefully fixed long-standing bugs, added ability to specify shadow's name. diff --git a/changelog.d/splashscreen.add b/changelog.d/splashscreen.add new file mode 100644 index 00000000..f1f56551 --- /dev/null +++ b/changelog.d/splashscreen.add @@ -0,0 +1 @@ +Splash screen + loading indicator to make process of identifying initialization issues and load performance diff --git a/index.html b/index.html index 6d9c4ce5..461f5acc 100644 --- a/index.html +++ b/index.html @@ -4,13 +4,138 @@ + + - + -
+
+ + +
+ +
+ + + +
+
+
+
diff --git a/package.json b/package.json index 61db87d2..403a2b23 100644 --- a/package.json +++ b/package.json @@ -132,5 +132,6 @@ "engines": { "node": ">= 16.0.0", "npm": ">= 3.0.0" - } + }, + "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e" } diff --git a/src/App.js b/src/App.js index b7eb2f72..e87108dd 100644 --- a/src/App.js +++ b/src/App.js @@ -44,16 +44,29 @@ export default { data: () => ({ mobileActivePanel: 'timeline' }), + watch: { + themeApplied (value) { + this.removeSplash() + } + }, created () { // Load the locale from the storage const val = this.$store.getters.mergedConfig.interfaceLanguage this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val }) window.addEventListener('resize', this.updateMobileState) }, + mounted () { + if (this.$store.state.interface.themeApplied) { + this.removeSplash() + } + }, unmounted () { window.removeEventListener('resize', this.updateMobileState) }, computed: { + themeApplied () { + return this.$store.state.interface.themeApplied + }, classes () { return [ { @@ -130,6 +143,15 @@ export default { updateMobileState () { this.$store.dispatch('setLayoutWidth', windowWidth()) 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') } } } diff --git a/src/App.scss b/src/App.scss index 9d1ce77a..f52ba06b 100644 --- a/src/App.scss +++ b/src/App.scss @@ -914,3 +914,169 @@ option { color: var(--selectionText); 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; + } + } + } +} diff --git a/src/assets/pleromatan_apology.png b/src/assets/pleromatan_apology.png deleted file mode 100644 index 36ad7aeb..00000000 Binary files a/src/assets/pleromatan_apology.png and /dev/null differ diff --git a/src/assets/pleromatan_apology.png b/src/assets/pleromatan_apology.png new file mode 120000 index 00000000..a7f6191f --- /dev/null +++ b/src/assets/pleromatan_apology.png @@ -0,0 +1 @@ +../../static/pleromatan_apology.png \ No newline at end of file diff --git a/src/assets/pleromatan_apology_fox.png b/src/assets/pleromatan_apology_fox.png deleted file mode 100644 index 17f87694..00000000 Binary files a/src/assets/pleromatan_apology_fox.png and /dev/null differ diff --git a/src/assets/pleromatan_apology_fox.png b/src/assets/pleromatan_apology_fox.png new file mode 120000 index 00000000..b3db4af3 --- /dev/null +++ b/src/assets/pleromatan_apology_fox.png @@ -0,0 +1 @@ +../../static/pleromatan_apology_fox.png \ No newline at end of file diff --git a/src/boot/after_store.js b/src/boot/after_store.js index 5b610dd3..9a6964d1 100644 --- a/src/boot/after_store.js +++ b/src/boot/after_store.js @@ -328,11 +328,7 @@ const setConfig = async ({ store }) => { const checkOAuthToken = async ({ store }) => { if (store.getters.getUserToken()) { - try { - await store.dispatch('loginUser', store.getters.getUserToken()) - } catch (e) { - console.error(e) - } + return store.dispatch('loginUser', store.getters.getUserToken()) } return Promise.resolve() } @@ -350,19 +346,26 @@ const afterStoreSetup = async ({ store, i18n }) => { const server = (typeof overrides.target !== 'undefined') ? overrides.target : window.location.origin store.dispatch('setInstanceOption', { name: 'server', value: server }) + document.querySelector('#status').textContent = i18n.global.t('splash.settings') 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 // 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([ checkOAuthToken({ store }), getInstancePanel({ store }), getNodeInfo({ store }), getInstanceConfig({ store }) - ]) + ]).catch(e => Promise.reject(e)) // Start fetching things that don't need to block the UI store.dispatch('fetchMutes') @@ -396,9 +399,9 @@ const afterStoreSetup = async ({ store, i18n }) => { // remove after vue 3.3 app.config.unwrapInjectedRef = true + document.querySelector('#status').textContent = i18n.global.t('splash.almost') app.mount('#app') - return app } diff --git a/src/components/button.style.js b/src/components/button.style.js index 1bee8f8e..1423d5c7 100644 --- a/src/components/button.style.js +++ b/src/components/button.style.js @@ -96,6 +96,17 @@ export default { textOpacity: 0.25, textOpacityMode: 'blend' } + }, + { + component: 'Icon', + parent: { + component: 'Button', + state: ['disabled'] + }, + directives: { + textOpacity: 0.25, + textOpacityMode: 'blend' + } } ] } diff --git a/src/components/checkbox/checkbox.vue b/src/components/checkbox/checkbox.vue index 6261bf3a..8ffcc63b 100644 --- a/src/components/checkbox/checkbox.vue +++ b/src/components/checkbox/checkbox.vue @@ -3,6 +3,13 @@ class="checkbox" :class="{ disabled, indeterminate, 'indeterminate-fix': indeterminateTransitionFix }" > + + + @@ -93,14 +102,9 @@ export default { box-sizing: border-box; } - &.disabled { - .checkbox-indicator::before, - .label { - opacity: 0.5; - } - - .label { - color: var(--text); + .disabled { + .checkbox-indicator::before { + background-color: var(--background); } } @@ -121,8 +125,14 @@ export default { } } - & > span { - margin-left: 0.5em; + & > .label { + &.-after { + margin-left: 0.5em; + } + + &.-before { + margin-right: 0.5em; + } } } diff --git a/src/components/color_input/color_input.scss b/src/components/color_input/color_input.scss index b0fc879f..19c88a69 100644 --- a/src/components/color_input/color_input.scss +++ b/src/components/color_input/color_input.scss @@ -1,12 +1,15 @@ .color-input { display: inline-flex; + .label { + flex: 1 1 auto; + } + &-field.input { display: inline-flex; flex: 0 0 0; max-width: 9em; align-items: stretch; - padding: 0.2em 8px; input { color: var(--text); @@ -25,6 +28,7 @@ .nativeColor { cursor: pointer; flex: 0 0 auto; + padding: 0; input { appearance: none; @@ -41,10 +45,10 @@ .invalidIndicator, .transparentIndicator { flex: 0 0 2em; - margin: 0 0.5em; + margin: 0.2em 0.5em; min-width: 2em; align-self: stretch; - min-height: 1.5em; + min-height: 1.1em; border-radius: var(--roundness); } @@ -81,9 +85,17 @@ border-bottom-right-radius: var(--roundness); } } - } - .label { - flex: 1 1 auto; + &.disabled, + &:disabled { + .nativeColor input, + .computedIndicator, + .validIndicator, + .invalidIndicator, + .transparentIndicator { + /* stylelint-disable-next-line declaration-no-important */ + opacity: 0.25 !important; + } + } } } diff --git a/src/components/color_input/color_input.vue b/src/components/color_input/color_input.vue index 66ee9d53..b6e84629 100644 --- a/src/components/color_input/color_input.vue +++ b/src/components/color_input/color_input.vue @@ -6,6 +6,7 @@ @@ -14,16 +15,20 @@ :model-value="present" :disabled="disabled" class="opt" - @update:modelValue="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)" + @update:modelValue="update(typeof modelValue === 'undefined' ? fallback : undefined)" /> -
+
@@ -60,6 +66,7 @@ diff --git a/src/components/component_preview/component_preview.vue b/src/components/component_preview/component_preview.vue new file mode 100644 index 00000000..3b2cf63b --- /dev/null +++ b/src/components/component_preview/component_preview.vue @@ -0,0 +1,212 @@ + + + + diff --git a/src/components/input.style.js b/src/components/input.style.js index 7302cd6d..6ad6cf90 100644 --- a/src/components/input.style.js +++ b/src/components/input.style.js @@ -10,17 +10,18 @@ const hoverGlow = { export default { name: 'Input', selector: '.input', - variant: { + states: { + hover: ':hover:not(.disabled)', + focused: ':focus-within', + disabled: '.disabled' + }, + variants: { checkbox: '.-checkbox', radio: '.-radio' }, - states: { - disabled: ':disabled', - hover: ':hover:not(:disabled)', - focused: ':focus-within' - }, validInnerComponents: [ - 'Text' + 'Text', + 'Icon' ], defaultRules: [ { @@ -55,6 +56,34 @@ export default { directives: { 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' + } } ] } diff --git a/src/components/opacity_input/opacity_input.vue b/src/components/opacity_input/opacity_input.vue index a45bdd92..5a80b100 100644 --- a/src/components/opacity_input/opacity_input.vue +++ b/src/components/opacity_input/opacity_input.vue @@ -6,6 +6,7 @@ @@ -22,6 +23,7 @@ type="number" :value="modelValue || fallback" :disabled="!present || disabled" + :class="{ disabled: !present || disabled }" max="1" min="0" step=".05" diff --git a/src/components/select/select.vue b/src/components/select/select.vue index 32832126..0fb6fcc0 100644 --- a/src/components/select/select.vue +++ b/src/components/select/select.vue @@ -6,13 +6,14 @@ {{ ' ' }} @@ -39,6 +40,38 @@ label.Select { z-index: 1; height: 2em; 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 { diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.js b/src/components/settings_modal/tabs/theme_tab/theme_tab.js index 25836559..64de28bc 100644 --- a/src/components/settings_modal/tabs/theme_tab/theme_tab.js +++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.js @@ -314,7 +314,18 @@ export default { }, set (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 { delete this.shadowsLocal[this.shadowSelected] } diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss index 84933fb8..e86e61da 100644 --- a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss +++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss @@ -25,7 +25,9 @@ margin-bottom: 5px; .label { + margin-right: 1em; flex: 1; + line-height: 2; } .opt { @@ -48,15 +50,14 @@ &[type="range"] { flex: 1; - min-width: 3em; - align-self: flex-start; + min-width: 2em; + align-self: center; + margin: 0 0.5em; } - } - &.disabled { - input, - select { - opacity: 0.5; + &[type="checkbox"] + i { + height: 1.1em; + align-self: center; } } } diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue index 4498c143..00a55832 100644 --- a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue +++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue @@ -123,10 +123,13 @@
- - - - + + + +
- - {{ ' ' }} - -
-
({ }) 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: [ - 'modelValue', 'fallback', 'ready' + 'modelValue', 'fallback', 'separateInset', 'noPreview', 'disabled' ], - emits: ['update:modelValue'], + emits: ['update:modelValue', 'subShadowSelected'], data () { return { selectedId: 0, // 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: { ColorInput, 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: { + 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 () { 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 () { this.cValue.splice(this.selectedId, 1) this.selectedId = this.cValue.length === 0 ? undefined : Math.max(this.selectedId - 1, 0) + this.$emit('update:modelValue', this.cValue) }, moveUp () { const movable = this.cValue.splice(this.selectedId, 1)[0] this.cValue.splice(this.selectedId - 1, 0, movable) this.selectedId -= 1 + this.$emit('update:modelValue', this.cValue) }, moveDn () { const movable = this.cValue.splice(this.selectedId, 1)[0] this.cValue.splice(this.selectedId + 1, 0, movable) this.selectedId += 1 - } - }, - 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) - } - : {} + this.$emit('update:modelValue', this.cValue) } } } diff --git a/src/components/shadow_control/shadow_control.scss b/src/components/shadow_control/shadow_control.scss new file mode 100644 index 00000000..dd049023 --- /dev/null +++ b/src/components/shadow_control/shadow_control.scss @@ -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; +} diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue index c3b956cd..e1d20191 100644 --- a/src/components/shadow_control/shadow_control.vue +++ b/src/components/shadow_control/shadow_control.vue @@ -1,91 +1,51 @@ - + diff --git a/src/i18n/en.json b/src/i18n/en.json index cc55a6d0..74cddea8 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -876,6 +876,9 @@ "component": "Component", "override": "Override", "shadow_id": "Shadow #{value}", + "offset": "Shadow offset", + "light_grid": "Use light checkerboard", + "name": "Name", "blur": "Blur", "spread": "Spread", "inset": "Inset", @@ -883,6 +886,7 @@ "filter_hint": { "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.", + "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.", "spread_zero": "Shadows with spread > 0 will appear as if it was set to zero", "inset_classic": "Inset shadows will be using {0}" @@ -1408,6 +1412,18 @@ "unicode_domain_indicator": { "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": { "select_folder": "Select bookmark folder", "creating_folder": "Creating bookmark folder", diff --git a/src/i18n/nan-TW.json b/src/i18n/nan-TW.json index 782a75f5..44a693dd 100644 --- a/src/i18n/nan-TW.json +++ b/src/i18n/nan-TW.json @@ -190,7 +190,8 @@ "mobile_notifications_close": "關掉通知", "announcements": "公告", "search": "Tshuē", - "mobile_notifications_mark_as_seen": "Lóng 標做有讀" + "mobile_notifications_mark_as_seen": "Lóng 標做有讀", + "quotes": "引用" }, "notifications": { "broken_favorite": "狀態毋知影，leh tshiau-tshuē……", @@ -212,7 +213,8 @@ "unread_follow_requests": "{num}ê新ê跟tuè請求", "configuration_tip": "用{theSettings}，lí通自訂siánn物佇tsia顯示。{dismiss}", "configuration_tip_settings": "設定", - "configuration_tip_dismiss": "Mài koh顯示" + "configuration_tip_dismiss": "Mài koh顯示", + "subscribed_status": "有發送ê" }, "polls": { "add_poll": "開投票", @@ -252,7 +254,8 @@ }, "load_all_hint": "載入頭前 {saneAmount} ê 繪文字，規个攏載入效能可能 ē khah 食力。", "load_all": "Kā {emojiAmount} ê 繪文字攏載入", - "regional_indicator": "地區指引 {letter}" + "regional_indicator": "地區指引 {letter}", + "hide_custom_emoji": "Khàm掉自訂ê繪文字" }, "errors": { "storage_unavailable": "Pleroma buē-tàng the̍h 著瀏覽器儲存 ê。Lí ê 登入狀態抑是局部設定 buē 儲存，mā 凡勢 tú 著意料外 ê 問題。拍開 cookie 看māi。" @@ -263,7 +266,8 @@ "emoji_reactions": "繪文字 ê 反應", "reports": "檢舉", "moves": "用者 ê 移民", - "load_older": "載入 koh khah 早 ê 互動" + "load_older": "載入 koh khah 早 ê 互動", + "statuses": "訂ê" }, "post_status": { "edit_status": "編輯狀態", @@ -935,7 +939,34 @@ "notification_extra_chats": "顯示bô讀ê開講", "notification_extra_announcements": "顯示bô讀ê公告", "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": { "favorites": "收藏", @@ -1001,7 +1032,7 @@ "show_only_conversation_under_this": "Kan-ta顯示tsit ê狀態ê回應", "status_history": "狀態ê歷史", "reaction_count_label": "{num}ê lâng用表情反應", - "hide_quote": "Khàm條引用ê狀態", + "hide_quote": "Khàm掉引用ê狀態", "display_quote": "顯示引用ê狀態", "invisible_quote": "引用ê狀態bē當用：{link}", "more_actions": "佇tsit ê狀態ê其他動作" diff --git a/src/main.js b/src/main.js index 60f4d06f..bcfc80b0 100644 --- a/src/main.js +++ b/src/main.js @@ -58,56 +58,76 @@ const persistedStateOptions = { }; (async () => { - let storageError = false - const plugins = [pushNotifications] + const isFox = Math.floor(Math.random() * 2) > 0 ? '_fox' : '' + + 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 { - const persistedState = await createPersistedState(persistedStateOptions) - plugins.push(persistedState) - } catch (e) { - console.error(e) - storageError = true - } - const store = createStore({ - modules: { - i18n: { - getters: { - i18n: () => i18n.global - } + let storageError + const plugins = [pushNotifications] + try { + const persistedState = await createPersistedState(persistedStateOptions) + plugins.push(persistedState) + } catch (e) { + console.error('Storage error', e) + storageError = e + } + document.querySelector('#mascot').src = `/static/pleromatan_apology${isFox}.png` + 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, - 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 - }, - 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' }) + 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' }) + } + return await afterStoreSetup({ store, i18n }) + } catch (e) { + splashError(i18n, e) } - afterStoreSetup({ store, i18n }) })() // These are inlined by webpack's DefinePlugin diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index e54a95bf..c1603f39 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -43,16 +43,16 @@ const adoptStyleSheets = (styles) => { // is nothing to do here. } -export const generateTheme = async (inputRuleset, callbacks, debug) => { +export const generateTheme = (inputRuleset, callbacks, debug) => { const { onNewRule = (rule, isLazy) => {}, onLazyFinished = () => {}, onEagerFinished = () => {} } = callbacks - // Assuming that "worst case scenario background" is panel background since it's the most likely one const themes3 = init({ 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(), 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 lazyStyles = createStyleSheet(LAZY_STYLE_ID) - const { lazyProcessFunc } = await generateTheme( + const { lazyProcessFunc } = generateTheme( input, { onNewRule (rule, isLazy) { @@ -169,15 +169,22 @@ export const applyTheme = async (input, onFinish = (data) => {}, debug) => { adoptStyleSheets([eagerStyles, lazyStyles]) const cache = { engineChecksum: getEngineChecksum(), data: [eagerStyles.rules, lazyStyles.rules] } 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 ) setTimeout(lazyProcessFunc, 0) - - return Promise.resolve() } const extractStyleConfig = ({ @@ -222,7 +229,7 @@ const extractStyleConfig = ({ const defaultStyleConfig = extractStyleConfig(defaultState) -export const applyConfig = (input) => { +export const applyConfig = (input, i18n) => { const config = extractStyleConfig(input) if (config === defaultStyleConfig) { @@ -230,8 +237,6 @@ export const applyConfig = (input) => { } const head = document.head - const body = document.body - body.classList.add('hidden') const rules = Object .entries(config) @@ -252,8 +257,6 @@ export const applyConfig = (input) => { --roundness: var(--forcedRoundness) !important; }`, 'index-max') } - - body.classList.remove('hidden') } export const getThemes = () => { diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js index 2dddfa04..ef7ec645 100644 --- a/src/services/theme_data/theme_data.service.js +++ b/src/services/theme_data/theme_data.service.js @@ -452,7 +452,7 @@ export const getCssShadow = (input, usesDropShadow) => { ]).join(' ')).join(', ') } -const getCssShadowFilter = (input) => { +export const getCssShadowFilter = (input) => { if (input.length === 0) { return 'none' } diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js index 39c8b74f..3c2f8a63 100644 --- a/src/services/theme_data/theme_data_3.service.js +++ b/src/services/theme_data/theme_data_3.service.js @@ -182,7 +182,7 @@ export const init = ({ const rulesetUnsorted = [ ...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], []), ...inputRuleset ].map(rule => { @@ -198,18 +198,33 @@ export const init = ({ const ruleset = rulesetUnsorted .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 parentsB = unroll(b).length - if (parentsA === parentsB) { - if (a.component === 'Text') return -1 - if (b.component === 'Text') return 1 + let aScore = 0 + let bScore = 0 + + 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 } - if (parentsA === 0 && parentsB !== 0) return -1 - if (parentsB === 0 && parentsA !== 0) return 1 - return parentsA - parentsB + return aScore - bScore }) .map(({ data }) => data) @@ -235,7 +250,10 @@ export const init = ({ // Inheriting all of the applicable rules 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 = { ...combination, directives: computedDirectives diff --git a/static/pleromatan_apology.png b/static/pleromatan_apology.png new file mode 100644 index 00000000..36ad7aeb Binary files /dev/null and b/static/pleromatan_apology.png differ diff --git a/static/pleromatan_apology_fox.png b/static/pleromatan_apology_fox.png new file mode 100644 index 00000000..17f87694 Binary files /dev/null and b/static/pleromatan_apology_fox.png differ diff --git a/static/pleromatan_orz.png b/static/pleromatan_orz.png new file mode 100644 index 00000000..aa54411f Binary files /dev/null and b/static/pleromatan_orz.png differ diff --git a/static/pleromatan_orz_fox.png b/static/pleromatan_orz_fox.png new file mode 100644 index 00000000..936e42f1 Binary files /dev/null and b/static/pleromatan_orz_fox.png differ