diff --git a/changelog.d/better-shadow-control.fix b/changelog.d/better-shadow-control.fix new file mode 100644 index 000000000..585ef6d26 --- /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/index.html b/index.html index 6d9c4ce5c..85371c8b1 100644 --- a/index.html +++ b/index.html @@ -8,9 +8,99 @@ - + -
+ +
+ +
+
+
+
+
+
+
+
+
+ (｡>﹏<) +
+
+
diff --git a/src/App.js b/src/App.js index b7eb2f72e..6f140612a 100644 --- a/src/App.js +++ b/src/App.js @@ -44,6 +44,13 @@ export default { data: () => ({ mobileActivePanel: 'timeline' }), + watch: { + themeApplied (value) { + document.querySelector('#app').classList.remove('hidden') + document.querySelector('#splash').className = 'hidden' + document.querySelector('#status').textContent = this.$t('splash.fun_' + Math.ceil(Math.random() * 4)) + } + }, created () { // Load the locale from the storage const val = this.$store.getters.mergedConfig.interfaceLanguage @@ -54,6 +61,9 @@ export default { window.removeEventListener('resize', this.updateMobileState) }, computed: { + themeApplied () { + return this.$store.state.interface.themeApplied + }, classes () { return [ { diff --git a/src/App.scss b/src/App.scss index 9d1ce77a6..408ba402b 100644 --- a/src/App.scss +++ b/src/App.scss @@ -914,3 +914,103 @@ option { color: var(--selectionText); background-color: var(--selectionBackground); } + +#splash { + pointer-events: none; + transition: opacity 2s; + opacity: 1; + z-index: 9999999999999999999999999999; + + &.hidden { + opacity: 0; + } + + #status { + &.css-ok { + &::before { + display: inline-block; + content: "CSS OK"; + } + } + + .initial-text { + display: none; + } + } + + #throbber { + animation-duration: 2s; + animation-name: bounce; + animation-iteration-count: infinite; + animation-direction: normal; + transform-origin: bottom center; + + @keyframes bounce { + 0% { + scale: 1 1; + translate: 0 0; + animation-timing-function: ease-out; + } + + 10% { + scale: 1.2 0.8; + translate: 0 0; + animation-timing-function: ease-out; + } + + 30% { + scale: 0.9 1.1; + translate: 0 -40%; + animation-timing-function: ease-in; + } + + 40% { + scale: 1.1 0.9; + translate: 0 -50%; + animation-timing-function: ease-in; + } + + 45% { + scale: 0.9 1.1; + translate: 0 -45%; + 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%; + animation-timing-function: ease-in; + } + + 60% { + scale: 1.0125 0.9985; + translate: 0 -30%; + animation-timing-function: ease-in; + } + + 80% { + scale: 1.0063 0.9938; + translate: 0 -10%; + animation-timing-function: ease-in-ou; + } + + 90% { + scale: 1.2 0.8; + translate: 0 0; + animation-timing-function: ease-out; + } + + 100% { + scale: 1 1; + translate: 0 0; + animation-timing-function: ease-out; + } + } + } +} diff --git a/src/boot/after_store.js b/src/boot/after_store.js index 6cad05f62..6691ff3eb 100644 --- a/src/boot/after_store.js +++ b/src/boot/after_store.js @@ -352,10 +352,12 @@ const afterStoreSetup = async ({ store, i18n }) => { await setConfig({ store }) await store.dispatch('setTheme') - applyConfig(store.state.config) + document.querySelector('#status').textContent = i18n.global.t('splash.theme') + 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 }), @@ -395,9 +397,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/color_input/color_input.vue b/src/components/color_input/color_input.vue index 6725fcda5..b6e84629f 100644 --- a/src/components/color_input/color_input.vue +++ b/src/components/color_input/color_input.vue @@ -15,7 +15,7 @@ :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)" />
@@ -66,6 +66,7 @@ diff --git a/src/components/select/select.vue b/src/components/select/select.vue index 7494f7d3c..39d3ca647 100644 --- a/src/components/select/select.vue +++ b/src/components/select/select.vue @@ -27,11 +27,6 @@ label.Select { padding: 0; - &.disabled, - &:disabled { - background-color: var(--background); - } - select { appearance: none; background: transparent; @@ -52,7 +47,7 @@ label.Select { padding: 0.2em; option { - background: transparent; + background-color: transparent; &.-active { color: var(--selectionText); @@ -62,6 +57,22 @@ label.Select { } } + &.disabled, + &:disabled { + background-color: var(--background); + opacity: 1; /* override browser */ + + select { + &[multiple], + &[size] { + option.-active { + color: var(--text); + background: transparent; + } + } + } + } + .select-down-icon { position: absolute; top: 0; 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 a295e880e..64de28bc3 100644 --- a/src/components/settings_modal/tabs/theme_tab/theme_tab.js +++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.js @@ -339,7 +339,6 @@ export default { return this.shadowsLocal[this.shadowSelected] }, set (v) { - console.log('TT', v) this.shadowsLocal[this.shadowSelected] = v } }, diff --git a/src/components/shadow_control/shadow_control.js b/src/components/shadow_control/shadow_control.js index 4d26a539b..ab1df53c2 100644 --- a/src/components/shadow_control/shadow_control.js +++ b/src/components/shadow_control/shadow_control.js @@ -4,8 +4,8 @@ import Select from 'src/components/select/select.vue' import Checkbox from 'src/components/checkbox/checkbox.vue' import Popover from 'src/components/popover/popover.vue' import { getCssShadow, getCssShadowFilter } from '../../services/theme_data/theme_data.service.js' -import { hex2rgb } from '../../services/color_convert/color_convert.js' import { library } from '@fortawesome/fontawesome-svg-core' +import { throttle } from 'lodash' import { faTimes, faChevronDown, @@ -41,7 +41,7 @@ export default { lightGrid: false, 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: { @@ -52,7 +52,7 @@ export default { Popover }, beforeUpdate () { - this.cValue = (this.modelValue || this.fallback || []).map(toModel) + this.cValue = (this.modelValue ?? this.fallback ?? []).map(toModel) }, computed: { selected () { @@ -68,12 +68,6 @@ export default { shadowsAreNull () { return this.modelValue == null }, - anyShadows () { - return this.cValue.length > 0 - }, - anyShadowsFallback () { - return this.fallback.length > 0 - }, currentFallback () { return this.fallback?.[this.selectedId] }, @@ -86,27 +80,28 @@ export default { usingFallback () { return this.modelValue == null }, - rgb () { - return hex2rgb(this.selected.color) - }, style () { - if (!this.ready) return {} + console.log(this.separateInset) if (this.separateInset) { return { - filter: getCssShadowFilter(this.fallback), - boxShadow: getCssShadow(this.fallback, true) + filter: getCssShadowFilter(this.cValue), + boxShadow: getCssShadow(this.cValue, true) } } return { - boxShadow: getCssShadow(this.fallback) + boxShadow: getCssShadow(this.cValue) } } }, methods: { - updateProperty (prop, value) { + updateProperty: throttle(function (prop, value) { + console.log(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 = Math.max(this.cValue.length - 1, 0) diff --git a/src/components/shadow_control/shadow_control.scss b/src/components/shadow_control/shadow_control.scss index d7bc15c4e..19009a3d7 100644 --- a/src/components/shadow_control/shadow_control.scss +++ b/src/components/shadow_control/shadow_control.scss @@ -22,7 +22,6 @@ display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; - grid-gap: 0.125em; margin-top: 0.25em; .button-default { diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue index 8e2133ee0..6a7829c5f 100644 --- a/src/components/shadow_control/shadow_control.vue +++ b/src/components/shadow_control/shadow_control.vue @@ -56,7 +56,7 @@ @input="e => updateProperty('x', e.target.value)" >