Merge branch 'splashscreen' into shigusegubu-themes3

initial splashscreen implementation
fixed shadow preview, added more safeguards for spread on separateInset shadows
2024-09-16 02:34:25 +03:00 · 2024-09-16 02:34:02 +03:00 · 2024-09-16 00:03:40 +03:00
16 changed files with 293 additions and 63 deletions
--- a/changelog.d/better-shadow-control.fix
+++ 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.
--- a/index.html
+++ b/index.html
@ -8,9 +8,99 @@
    <style id="pleroma-lazy-styles" type="text/css"></style>
    <!--server-generated-meta-->
  </head>
-  <body class="hidden">
+  <body style="margin: 0; padding: 0">
    <noscript>To use Pleroma, please enable JavaScript.</noscript>
-    <div id="app"></div>
+    <!-- putting styles here to avoid having to wait for styles to load up -->
+    <div id="splash" style="
+      width: 100vw;
+      height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      background: #0f161e;
+      font-family: sans-serif;
+      color: #b9b9ba;
+      position: absolute;
+      "
+    >
+      <img
+        style="
+          width: 30vh";
+          margin-top: 1vh;
+          margin-bottom: 0.5vh;
+        "
+        src="/static/pleromatan_apology_fox.png"
+      />
+      <div
+        id="throbber"
+        style='
+          --logoChunkSize: 2vh;
+          display: grid;
+          margin-top: 2.5vh;
+          margin-bottom: 0.5vh;
+          width: 30vw;
+          grid-template-rows: repeat(8, var(--logoChunkSize));
+          grid-template-columns: repeat(5, var(--logoChunkSize));
+          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";
+          width: auto;
+        '
+      >
+        <div
+          style="
+            background-color: #e2b188;
+            grid-area: P;
+            border-top-left-radius:  calc(var(--logoChunkSize) / 2);
+            box-shadow: 0.1vh 0.1vh 1vh 0 #e2b188;
+          "
+        >
+        </div>
+        <div
+          style="
+            width: 100%;
+            height: 100%;
+            background-color: #e2b188;
+            grid-area: L;
+            border-bottom-right-radius: calc(var(--logoChunkSize) / 2);
+            box-shadow: 0.1vh 0.1vh 1vh 0 #e2b188;
+          "
+        >
+        </div>
+        <div
+          style="
+            width: 100%;
+            height: 100%;
+            background-color: #e2b188;
+            grid-area: E;
+            border-bottom-right-radius: calc(var(--logoChunkSize) / 2);
+            box-shadow: 0.1vh 0.1vh 1vh 0 #e2b188;
+          "
+        >
+        </div>
+      </div>
+      <div
+        id="status"
+        class="css-ok"
+        style="
+        margin-top: 3.5vh;
+        height: 4vh;
+        line-height: 4vh;
+        font-size: 4vh;
+        width: 100%;
+        text-align: center;
+        "
+      >
+        <span class="initial-text">(｡>﹏<)</span>
+      </div>
+    </div>
+    <div id="app" class="hidden"></div>
    <div id="modal"></div>
    <!-- built files will be auto injected -->
    <div id="popovers" />
--- 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 [
        {
--- 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;
+      }
+    }
+  }
+}
--- 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
 }

--- 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)"
    />
    <div
      class="input color-input-field"
@ -28,7 +28,7 @@
        type="text"
        :value="modelValue || fallback"
        :disabled="!present || disabled"
-        @input="$emit('update:modelValue', $event.target.value)"
+        @input="updateValue($event.target.value)"
      >
      <div
        v-if="validColor"
@ -57,7 +57,7 @@
          :value="modelValue || fallback"
          :disabled="!present || disabled"
          :class="{ disabled: !present || disabled }"
-          @input="$emit('update:modelValue', $event.target.value)"
+          @input="updateValue($event.target.value)"
        >
      </label>
    </div>
@ -66,6 +66,7 @@
 <script>
 import Checkbox from '../checkbox/checkbox.vue'
 import { hex2rgb } from '../../services/color_convert/color_convert.js'
+import { throttle } from 'lodash'

 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@ -131,6 +132,11 @@ export default {
    computedColor () {
      return this.modelValue && this.modelValue.startsWith('--')
    }
+  },
+  methods: {
+    updateValue: throttle(function (value) {
+      this.$emit('update:modelValue', value)
+    }, 100)
  }
 }
 </script>
--- 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;
--- 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
      }
    },
--- 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)
--- 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 {
--- 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)"
      >
      <Checkbox
-        id="inset"
+        id="lightGrid"
        v-model="lightGrid"
        :disabled="!present"
        name="lightGrid"
@ -83,7 +83,7 @@
        </option>
      </Select>
      <div
-        class="id-control arrange-buttons"
+        class="id-control btn-group arrange-buttons"
      >
        <button
          class="btn button-default"
@ -132,12 +132,11 @@
    </div>
    <div class="shadow-tweak">
      <div
-        :disabled="!present"
        :class="{ disabled: !present }"
        class="name-control style-control"
      >
        <label
-          for="spread"
+          for="name"
          class="label"
          :class="{ faint: !present }"
        >
@ -163,7 +162,7 @@
          :disabled="!present"
          name="inset"
          class="input-inset input-boolean"
-          @input="e => updateProperty('inset', e.target.value)"
+          @input="e => updateProperty('inset', e.target.checked)"
        >
          <template #before>
            {{ $t('settings.style.shadows.inset') }}
@ -176,7 +175,7 @@
        class="blur-control style-control"
      >
        <label
-          for="spread"
+          for="blur"
          class="label"
          :class="{ faint: !present }"
        >
@ -205,22 +204,21 @@
        >
      </div>
      <div
-        :disabled="!present"
        class="spread-control style-control"
-        :class="{ disabled: !present }"
+        :class="{ disabled: !present || (separateInset && !selected?.inset) }"
      >
        <label
          for="spread"
          class="label"
-          :class="{ faint: !present }"
+          :class="{ faint: !present || (separateInset && !selected?.inset) }"
        >
          {{ $t('settings.style.shadows.spread') }}
        </label>
        <input
          id="spread"
          :value="selected?.spread"
-          :disabled="!present"
-          :class="{ disabled: !present }"
+          :disabled="!present || (separateInset && !selected?.inset)"
+          :class="{ disabled: !present || (separateInset && !selected?.inset) }"
          name="spread"
          class="input input-range"
          type="range"
@ -230,26 +228,26 @@
        >
        <input
          :value="selected?.spread"
-          :disabled="!present"
-          :class="{ disabled: !present }"
+          :disabled="{ disabled: !present || (separateInset && !selected?.inset) }"
+          :class="{ disabled: !present || (separateInset && !selected?.inset) }"
          class="input input-number"
          type="number"
          @input="e => updateProperty('spread', e.target.value)"
        >
      </div>
      <ColorInput
-        :modelValue="selected?.color"
+        :model-value="selected?.color"
        :disabled="!present"
        :label="$t('settings.style.common.color')"
        :fallback="currentFallback?.color"
        :show-optional-tickbox="false"
        name="shadow"
-        @update:modelValue="e => updateProperty('color', e.target.value)"
+        @update:modelValue="e => updateProperty('color', e)"
      />
      <OpacityInput
-        :modelValue="selected?.alpha"
+        :model-value="selected?.alpha"
        :disabled="!present"
-        @update:modelValue="e => updateProperty('alpha', e.target.value)"
+        @update:modelValue="e => updateProperty('alpha', e)"
      />
      <i18n-t
        scope="global"
@ -260,8 +258,8 @@
        <code>--variable,mod</code>
      </i18n-t>
      <Popover
-        trigger="hover"
        v-if="separateInset"
+        trigger="hover"
      >
        <template #trigger>
          <div
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@ -1405,5 +1405,16 @@
  },
  "unicode_domain_indicator": {
    "tooltip": "This domain contains non-ascii characters."
+  },
+  "splash": {
+    "loading": "Loading...",
+    "theme": "Applying theme, please wait warmly...",
+    "instance": "Getting instance info...",
+    "splines": "Reticulating splines...",
+    "almost": "Almost there!",
+    "fun_1": "Drink more water!",
+    "fun_2": "Take it easy!",
+    "fun_3": "Suya..",
+    "fun_4": "#cofe",
  }
 }
--- a/src/main.js
+++ b/src/main.js
@ -67,6 +67,8 @@ const persistedStateOptions = {
    console.error(e)
    storageError = true
  }
+  document.querySelector('#status').removeAttribute('class')
+  document.querySelector('#status').textContent = i18n.global.t('splash.loading')
  const store = createStore({
    modules: {
      i18n: {
--- a/src/modules/interface.js
+++ b/src/modules/interface.js
@ -56,9 +56,6 @@ const interfaceMod = {
      state.temporaryChangesConfirm = () => {}
      state.temporaryChangesRevert = () => {}
    },
-    setThemeApplied (state) {
-      state.themeApplied = true
-    },
    setNotificationPermission (state, permission) {
      state.notificationPermission = permission
    },
@ -120,6 +117,9 @@ const interfaceMod = {
    setPageTitle ({ rootState }, option = '') {
      document.title = `${option} ${rootState.instance.name}`
    },
+    setThemeApplied ({ state, rootGetters }) {
+      state.themeApplied = true
+    },
    settingsSaved ({ commit, dispatch }, { success, error }) {
      commit('settingsSaved', { success, error })
    },
@ -212,7 +212,7 @@ const interfaceMod = {
    setLastTimeline ({ commit }, value) {
      commit('setLastTimeline', value)
    },
-    setTheme ({ commit, rootState }, { themeName, themeData, recompile, saveData } = {}) {
+    setTheme ({ dispatch, commit, rootState }, { themeName, themeData, recompile, saveData } = {}) {
      const {
        theme: instanceThemeName
      } = rootState.instance
@ -258,7 +258,7 @@ const interfaceMod = {
      // If we're not not forced to recompile try using
      // cache (tryLoadCache return true if load successful)
      if (!forceRecompile && !themeDebug && tryLoadCache()) {
-        commit('setThemeApplied')
+        dispatch('setThemeApplied')
        return
      }

@ -342,7 +342,7 @@ const interfaceMod = {

          applyTheme(
            ruleset,
-            () => commit('setThemeApplied'),
+            () => dispatch('setThemeApplied'),
            themeDebug
          )
        })
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@ -169,7 +169,16 @@ 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
@ -222,7 +231,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 +239,6 @@ export const applyConfig = (input) => {
  }

  const head = document.head
-  const body = document.body
-  body.classList.add('hidden')

  const rules = Object
    .entries(config)
@ -252,8 +259,6 @@ export const applyConfig = (input) => {
        --roundness: var(--forcedRoundness) !important;
    }`, 'index-max')
  }
-
-  body.classList.remove('hidden')
 }

 export const getThemes = () => {
--- a/static/pleromatan_apology_fox.png
+++ b/static/pleromatan_apology_fox.png
@ -0,0 +1 @@
+/home/bocchi/Repos/Mine/pleroma-fe/src/assets/pleromatan_apology_fox.png
Author	SHA1	Message	Date
Henry Jameson	e583549718	Merge branch 'splashscreen' into shigusegubu-themes3	2024-09-16 02:34:25 +03:00
Henry Jameson	ac5a0bb0b5	initial splashscreen implementation	2024-09-16 02:34:02 +03:00
Henry Jameson	a0c303efb6	fixed shadow preview, added more safeguards for spread on separateInset shadows	2024-09-16 00:03:40 +03:00
				`@ -0,0 +1 @@`
				`Updated shadow editor, hopefully fixed long-standing bugs, added ability to specify shadow's name.`
				`@ -0,0 +1 @@`
				`/home/bocchi/Repos/Mine/pleroma-fe/src/assets/pleromatan_apology_fox.png`