Merge branch 'themes3-fixes' into 'develop'

Themes 3 fixes

Closes #1301 and #1303

See merge request pleroma/pleroma-fe!1906

changelog.d/themes3-fixes.fix

@@ -0,0 +1 @@
+fix color inputs and some in-development themes3 issues

src/App.scss

@@ -14,6 +14,9 @@
   --ZI_navbar_popovers: 7500;
   --ZI_navbar: 7000;
   --ZI_popovers: 6000;
+
+  // Fallback for when stuff is loading
+  --background: var(--bg);
 }
 
 html {
@@ -370,6 +373,7 @@ nav {
   border: none;
   border-radius: var(--roundness);
   cursor: pointer;
+  background-color: var(--background);
   box-shadow: var(--shadow);
   font-size: 1em;
   font-family: sans-serif;
@@ -406,6 +410,7 @@ nav {
   width: 100%;
   line-height: var(--__line-height);
   padding: var(--__vertical-gap) var(--__horizontal-gap);
+  background: transparent;
 
   --__line-height: 1.5em;
   --__horizontal-gap: 0.75em;
@@ -470,6 +475,7 @@ nav {
   font-size: 100%;
   font-family: inherit;
   box-shadow: var(--shadow);
+  background-color: transparent;
   padding: 0;
   line-height: unset;
   cursor: pointer;
@@ -502,6 +508,8 @@ textarea {
 
   border: none;
   border-radius: var(--roundness);
+  background-color: var(--background);
+  color: var(--text);
   box-shadow: var(--shadow);
   font-family: var(--font);
   font-size: 1em;

src/App.vue

@@ -1,5 +1,6 @@
 <template>
   <div
+    v-show="$store.state.interface.themeApplied"
     id="app-loaded"
     :style="bgStyle"
   >

src/boot/after_store.js

@@ -363,6 +363,7 @@ const afterStoreSetup = async ({ store, i18n }) => {
     } else {
       applyTheme(customTheme)
     }
+    store.commit('setThemeApplied')
   } else if (theme) {
     // do nothing, it will load asynchronously
   } else {

src/components/color_input/color_input.scss

@@ -9,6 +9,7 @@
     padding: 0.2em 8px;
 
     input {
+      color: var(--text);
       background: none;
       border: none;
       padding: 0;
@@ -19,21 +20,38 @@
         min-width: 3em;
         padding: 0;
       }
+    }
 
-      &.nativeColor {
-        flex: 0 0 2em;
-        min-width: 2em;
-        align-self: stretch;
-        min-height: 100%;
+    .nativeColor {
+      cursor: pointer;
+      flex: 0 0 auto;
+
+      input {
+        appearance: none;
+        max-width: 0;
+        min-width: 0;
+        max-height: 0;
+        /* stylelint-disable-next-line declaration-no-important */
+        opacity: 0 !important;
       }
     }
 
     .computedIndicator,
+    .validIndicator,
+    .invalidIndicator,
     .transparentIndicator {
       flex: 0 0 2em;
+      margin: 0 0.5em;
       min-width: 2em;
       align-self: stretch;
-      min-height: 100%;
+      min-height: 1.5em;
+      border-radius: var(--roundness);
+    }
+
+    .invalidIndicator {
+      background: transparent;
+      box-sizing: border-box;
+      border: 2px solid var(--cRed);
     }
 
     .transparentIndicator {
@@ -54,11 +72,13 @@
       &::after {
         top: 0;
         left: 0;
+        border-top-left-radius: var(--roundness);
       }
 
       &::before {
         bottom: 0;
         right: 0;
+        border-bottom-right-radius: var(--roundness);
       }
     }
   }

src/components/color_input/color_input.vue

@@ -25,30 +25,51 @@
         :disabled="!present || disabled"
         @input="$emit('update:modelValue', $event.target.value)"
       >
-      <input
+      <div
         v-if="validColor"
+        class="validIndicator"
+        :style="{backgroundColor: modelValue || fallback}"
+      />
+      <div
+        v-else-if="transparentColor"
+        class="transparentIndicator"
+      />
+      <div
+        v-else-if="computedColor"
+        class="computedIndicator"
+        :style="{backgroundColor: fallback}"
+      />
+      <div
+        v-else
+        class="invalidIndicator"
+      />
+      <label class="nativeColor">
+        <FAIcon icon="eye-dropper" />
+        <input
           :id="name"
-        class="nativeColor unstyled"
+          class="unstyled"
           type="color"
           :value="modelValue || fallback"
           :disabled="!present || disabled"
           @input="$emit('update:modelValue', $event.target.value)"
         >
-      <div
-        v-if="transparentColor"
-        class="transparentIndicator"
-      />
-      <div
-        v-if="computedColor"
-        class="computedIndicator"
-        :style="{backgroundColor: fallback}"
-      />
+      </label>
     </div>
   </div>
 </template>
 <script>
 import Checkbox from '../checkbox/checkbox.vue'
 import { hex2rgb } from '../../services/color_convert/color_convert.js'
+
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faEyeDropper
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faEyeDropper
+)
+
 export default {
   components: {
     Checkbox
@@ -108,12 +129,3 @@ export default {
 }
 </script>
 <style lang="scss" src="./color_input.scss"></style>
-
-<style lang="scss">
-.color-control {
-  input.text-input {
-    max-width: 7em;
-    flex: 1;
-  }
-}
-</style>

src/components/conversation/conversation.vue

@@ -81,7 +81,7 @@
               :replies="getReplies(status.id)"
               :in-profile="inProfile"
               :profile-user-id="profileUserId"
-              class="conversation-status status-fadein"
+              class="conversation-status status-fadein panel-body"
 
               :simple-tree="treeViewIsSimple"
               :toggle-thread-display="toggleThreadDisplay"
@@ -186,7 +186,7 @@
             :replies="getReplies(status.id)"
             :in-profile="inProfile"
             :profile-user-id="profileUserId"
-            class="conversation-status status-fadein"
+            class="conversation-status status-fadein panel-body"
 
             :toggle-thread-display="toggleThreadDisplay"
             :thread-display-status="threadDisplayStatus"

src/components/popover/popover.vue

@@ -71,6 +71,7 @@
   border-color: var(--border);
   border-style: solid;
   border-width: 1px;
+  background-color: var(--background);
 }
 
 .dropdown-menu {
@@ -82,6 +83,7 @@
   max-width: 100vw;
   z-index: var(--ZI_popover_override, var(--ZI_popovers));
   white-space: nowrap;
+  background-color: var(--background);
 
   .dropdown-divider {
     height: 0;

src/components/rich_content/rich_content.scss

@@ -83,3 +83,8 @@
     color: var(--funtextCyantext);
   }
 }
+
+a .RichContent {
+  /* stylelint-disable-next-line declaration-no-important */
+  color: var(--link) !important;
+}

src/components/shout_panel/shout_panel.vue

@@ -5,7 +5,7 @@
   >
     <div class="panel panel-default">
       <div
-        class="panel-heading timeline-heading"
+        class="panel-heading"
         :class="{ 'shout-heading': floating }"
         @click.stop.prevent="togglePanel"
       >
@@ -18,7 +18,7 @@
           />
         </div>
       </div>
-      <div class="shout-window">
+      <div class="panel-body shout-window">
         <div
           v-for="message in messages"
           :key="message.id"
@@ -41,10 +41,10 @@
           </div>
         </div>
       </div>
-      <div class="shout-input">
+      <div class="panel-body shout-input">
         <textarea
           v-model="currentMessage"
-          class="shout-input-textarea"
+          class="shout-input-textarea input"
           rows="1"
           @keyup.enter="submit(currentMessage)"
         />

src/components/tab_switcher/tab_switcher.scss

@@ -174,6 +174,7 @@
     font-size: 1em;
     font-family: var(--font);
     border-radius: var(--roundness);
+    background-color: var(--background);
     position: relative;
     white-space: nowrap;
     padding: 6px 1em;

src/components/user_card/user_card.scss

@@ -204,6 +204,11 @@
 
     --emoji-size: 1.7em;
 
+    .RichContent {
+      /* stylelint-disable-next-line declaration-no-important */
+      --link: var(--text) !important;
+    }
+
     .top-line,
     .bottom-line {
       display: flex;

src/modules/instance.js

@@ -386,6 +386,7 @@ const instance = {
           } else {
             applyTheme(themeData.theme)
           }
+          commit('setThemeApplied')
         })
     },
     fetchEmoji ({ dispatch, state }) {

src/modules/interface.js

@@ -1,4 +1,5 @@
 const defaultState = {
+  themeApplied: false,
   settingsModalState: 'hidden',
   settingsModalLoadedUser: false,
   settingsModalLoadedAdmin: false,
@@ -35,6 +36,9 @@ const interfaceMod = {
         state.settings.currentSaveStateNotice = { error: true, errorData: error }
       }
     },
+    setThemeApplied (state) {
+      state.themeApplied = true
+    },
     setNotificationPermission (state, permission) {
       state.notificationPermission = permission
     },

src/services/style_setter/style_setter.js

@@ -6,7 +6,13 @@ import { getCssRules } from '../theme_data/css_utils.js'
 import { defaultState } from '../../modules/config.js'
 import { chunk } from 'lodash'
 
-export const applyTheme = async (input) => {
+export const generateTheme = async (input, callbacks) => {
+  const {
+    onNewRule = (rule, isLazy) => {},
+    onLazyFinished = () => {},
+    onEagerFinished = () => {}
+  } = callbacks
+
   let extraRules
   if (input.themeFileVersion === 1) {
     extraRules = convertTheme2To3(input)
@@ -17,11 +23,6 @@ export const applyTheme = async (input) => {
 
   // Assuming that "worst case scenario background" is panel background since it's the most likely one
   const themes3 = init(extraRules, extraRules[0].directives['--bg'].split('|')[1].trim())
-  const body = document.body
-
-  const styleSheet = new CSSStyleSheet()
-  document.adoptedStyleSheets = [styleSheet]
-  body.classList.add('hidden')
 
   getCssRules(themes3.eager, themes3.staticVars).forEach(rule => {
     // Hacks to support multiple selectors on same component
@@ -37,13 +38,12 @@ export const applyTheme = async (input) => {
         parts[1],
         '}'
       ].join('')
-      styleSheet.insertRule(newRule, 'index-max')
+      onNewRule(newRule, false)
     } else {
-      styleSheet.insertRule(rule, 'index-max')
+      onNewRule(rule, false)
     }
   })
-
-  body.classList.remove('hidden')
+  onEagerFinished()
 
   // Optimization - instead of processing all lazy rules in one go, process them in small chunks
   // so that UI can do other things and be somewhat responsive while less important rules are being
@@ -61,13 +61,15 @@ export const applyTheme = async (input) => {
             parts[0],
             ', ',
             parts[0].replace(/\.modal-view/, '#modal'),
+            ', ',
+            parts[0].replace(/\.modal-view/, '.shout-panel'),
             ' {',
             parts[1],
             '}'
           ].join('')
-          styleSheet.insertRule(newRule, 'index-max')
+          onNewRule(newRule, true)
         } else {
-          styleSheet.insertRule(rule, 'index-max')
+          onNewRule(rule, true)
         }
       })
       // const t1 = performance.now()
@@ -76,10 +78,39 @@ export const applyTheme = async (input) => {
       counter += 1
       if (counter < chunks.length) {
         setTimeout(processChunk, 0)
+      } else {
+        onLazyFinished()
       }
     })
   }
-  setTimeout(processChunk, 0)
+
+  return { lazyProcessFunc: processChunk }
+}
+
+export const applyTheme = async (input) => {
+  const styleSheet = new CSSStyleSheet()
+  const lazyStyleSheet = new CSSStyleSheet()
+
+  const { lazyProcessFunc } = await generateTheme(
+    input,
+    {
+      onNewRule (rule, isLazy) {
+        if (isLazy) {
+          lazyStyleSheet.insertRule(rule, 'index-max')
+        } else {
+          styleSheet.insertRule(rule, 'index-max')
+        }
+      },
+      onEagerFinished () {
+        document.adoptedStyleSheets = [styleSheet]
+      },
+      onLazyFinished () {
+        document.adoptedStyleSheets = [styleSheet, lazyStyleSheet]
+      }
+    }
+  )
+
+  setTimeout(lazyProcessFunc, 0)
 
   return Promise.resolve()
 }

src/services/theme_data/theme2_keys.js

@@ -158,12 +158,12 @@ export default [
   'alertPopupNeutral',
   'alertPopupNeutralText',
 
-  'badgeNotification',
-  'badgeNotificationText',
-
   'badgeNeutral',
   'badgeNeutralText',
 
+  'badgeNotification',
+  'badgeNotificationText',
+
   'chatBg',
 
   'chatMessageIncomingBg',

src/services/theme_data/theme2_to_theme3.js

@@ -517,6 +517,8 @@ export const convertTheme2To3 = (data) => {
       } else if (newRule.component === 'Badge') {
         if (newRule.variant === 'notification') {
           return [newRule, { component: 'Root', directives: { '--badgeNotification': 'color | ' + newRule.directives.background } }]
+        } else if (newRule.variant === 'neutral') {
+          return [{ ...newRule, variant: 'normal' }]
         } else {
           return [newRule]
         }