Merge branch 'themes-3-1' into 'develop'

Themes 3.1: You can (not) overthink

See merge request pleroma/pleroma-fe!2209

changelog.d/weight-loss.change

@@ -0,0 +1 @@
+Reduced time taken processing theme by half

src/components/attachment/attachment.style.js

@@ -1,27 +0,0 @@
-export default {
-  name: 'Attachment',
-  selector: '.Attachment',
-  notEditable: true,
-  validInnerComponents: [
-    'Border',
-    'Button',
-    'Input'
-  ],
-  defaultRules: [
-    {
-      directives: {
-        roundness: 3
-      }
-    },
-    {
-      component: 'Button',
-      parent: {
-        component: 'Attachment'
-      },
-      directives: {
-        background: '#FFFFFF',
-        opacity: 0.5
-      }
-    }
-  ]
-}

src/components/attachment/attachment.vue

@@ -23,7 +23,7 @@
     >
       <button
         v-if="remove"
-        class="button-default attachment-button"
+        class="button-default attachment-button -transparent"
         @click.prevent="onRemove"
       >
         <FAIcon icon="trash-alt" />
@@ -81,7 +81,7 @@
       >
         <button
           v-if="type === 'flash' && flashLoaded"
-          class="button-default attachment-button"
+          class="button-default attachment-button -transparent"
           :title="$t('status.attachment_stop_flash')"
           @click.prevent="stopFlash"
         >
@@ -89,7 +89,7 @@
         </button>
         <button
           v-if="attachment.description && size !== 'small' && !edit && type !== 'unknown'"
-          class="button-default attachment-button"
+          class="button-default attachment-button -transparent"
           :title="$t('status.show_attachment_description')"
           @click.prevent="toggleDescription"
         >
@@ -97,7 +97,7 @@
         </button>
         <button
           v-if="!useModal && type !== 'unknown'"
-          class="button-default attachment-button"
+          class="button-default attachment-button -transparent"
           :title="$t('status.show_attachment_in_modal')"
           @click.prevent="openModalForce"
         >
@@ -105,7 +105,7 @@
         </button>
         <button
           v-if="nsfw && hideNsfwLocal"
-          class="button-default attachment-button"
+          class="button-default attachment-button -transparent"
           :title="$t('status.hide_attachment')"
           @click.prevent="toggleHidden"
         >
@@ -113,7 +113,7 @@
         </button>
         <button
           v-if="shiftUp"
-          class="button-default attachment-button"
+          class="button-default attachment-button -transparent"
           :title="$t('status.move_up')"
           @click.prevent="onShiftUp"
         >
@@ -121,7 +121,7 @@
         </button>
         <button
           v-if="shiftDn"
-          class="button-default attachment-button"
+          class="button-default attachment-button -transparent"
           :title="$t('status.move_down')"
           @click.prevent="onShiftDn"
         >
@@ -129,7 +129,7 @@
         </button>
         <button
           v-if="remove"
-          class="button-default attachment-button"
+          class="button-default attachment-button -transparent"
           :title="$t('status.remove_attachment')"
           @click.prevent="onRemove"
         >

src/components/button.style.js

@@ -10,7 +10,7 @@ export default {
     // normal: '' // normal state is implicitly added, it is always included
     toggled: '.toggled',
     focused: ':focus-within',
-    pressed: ':focus:active',
+    pressed: ':active',
     hover: ':is(:hover, :focus-visible):not(:disabled)',
     disabled: ':disabled'
   },
@@ -18,7 +18,8 @@ export default {
   variants: {
     // Variants save on computation time since adding new variant just adds one more "set".
     // normal: '', // you can override normal variant, it will be appenended to the main class
-    danger: '.danger'
+    danger: '.-danger',
+    transparent: '.-transparent'
     // Overall the compuation difficulty is N*((1/6)M^3+M) where M is number of distinct states and N is number of variants.
     // This (currently) is further multipled by number of places where component can exist.
   },
@@ -51,6 +52,18 @@ export default {
         roundness: 3
       }
     },
+    {
+      variant: 'danger',
+      directives: {
+        background: '--cRed'
+      }
+    },
+    {
+      variant: 'transparent',
+      directives: {
+        opacity: 0.5
+      }
+    },
     {
       state: ['hover'],
       directives: {

src/components/chat_message/chat_message.style.js

@@ -8,9 +8,6 @@ export default {
     'Text',
     'Icon',
     'Border',
-    'Button',
-    'RichContent',
-    'Attachment',
     'PollGraph'
   ],
   defaultRules: [

src/components/list/list_item.style.js

@@ -1,48 +0,0 @@
-export default {
-  name: 'ListItem',
-  selector: '.list-item',
-  states: {
-    active: '.-active',
-    hover: ':is(:hover, :focus-visible, :has(:focus-visible)):not(.-non-interactive)'
-  },
-  validInnerComponents: [
-    'Text',
-    'Link',
-    'Icon',
-    'Border',
-    'Button',
-    'ButtonUnstyled',
-    'RichContent',
-    'Input',
-    'Avatar'
-  ],
-  defaultRules: [
-    {
-      directives: {
-        background: '--bg',
-        opacity: 0
-      }
-    },
-    {
-      state: ['active'],
-      directives: {
-        background: '--inheritedBackground, 10',
-        opacity: 1
-      }
-    },
-    {
-      state: ['hover'],
-      directives: {
-        background: '--inheritedBackground, 10',
-        opacity: 1
-      }
-    },
-    {
-      state: ['hover', 'active'],
-      directives: {
-        background: '--inheritedBackground, 20',
-        opacity: 1
-      }
-    }
-  ]
-}

src/components/menu_item.style.js

@@ -4,11 +4,7 @@ export default {
   validInnerComponents: [
     'Text',
     'Icon',
-    'Input',
+    'Border'
-    'Border',
-    'ButtonUnstyled',
-    'Badge',
-    'Avatar'
   ],
   states: {
     hover: ':is(:hover, :focus-visible, :has(:focus-visible)):not(.disabled)',

src/components/mobile_drawer.style.js

@@ -2,18 +2,7 @@ export default {
   name: 'MobileDrawer',
   selector: '.mobile-drawer',
   validInnerComponents: [
-    'Text',
+    'MenuItem'
-    'Link',
-    'Icon',
-    'Border',
-    'Button',
-    'ButtonUnstyled',
-    'Input',
-    'PanelHeader',
-    'MenuItem',
-    'Notification',
-    'Alert',
-    'UserCard'
   ],
   defaultRules: [
     {
@@ -21,21 +10,6 @@ export default {
         background: '--bg',
         backgroundNoCssColor: 'yes'
       }
-    },
-    {
-      component: 'PanelHeader',
-      parent: { component: 'MobileDrawer' },
-      directives: {
-        background: '--fg',
-        shadow: [{
-          x: 0,
-          y: 0,
-          blur: 4,
-          spread: 0,
-          color: '#000000',
-          alpha: 0.6
-        }]
-      }
     }
   ]
 }

src/components/notification/notification.style.js

@@ -6,12 +6,7 @@ export default {
     'Link',
     'Icon',
     'Border',
-    'Button',
-    'ButtonUnstyled',
-    'RichContent',
-    'Input',
     'Avatar',
-    'Attachment',
     'PollGraph'
   ],
   defaultRules: []

src/components/panel.style.js

@@ -6,29 +6,17 @@ export default {
     'Link',
     'Icon',
     'Border',
-    'Button',
-    'ButtonUnstyled',
-    'Input',
     'PanelHeader',
-    'MenuItem',
     'Post',
     'Notification',
-    'Alert',
+    'MenuItem'
-    'UserCard',
-    'Chat',
-    'Attachment',
-    'Tab',
-    'ListItem'
   ],
   validInnerComponentsLite: [
     'Text',
     'Link',
     'Icon',
     'Border',
-    'Button',
+    'PanelHeader'
-    'Input',
-    'PanelHeader',
-    'Alert'
   ],
   defaultRules: [
     {

src/components/panel_header.style.js

@@ -7,9 +7,7 @@ export default {
     'Icon',
     'Button',
     'ButtonUnstyled',
-    'Badge',
+    'Alert'
-    'Alert',
-    'Avatar'
   ],
   defaultRules: [
     {

src/components/popover.style.js

@@ -6,16 +6,7 @@ export default {
     modal: '.modal'
   },
   validInnerComponents: [
-    'Text',
+    'MenuItem'
-    'Link',
-    'Icon',
-    'Border',
-    'Button',
-    'ButtonUnstyled',
-    'Input',
-    'MenuItem',
-    'Post',
-    'UserCard'
   ],
   defaultRules: [
     {

src/components/rich_content/rich_content.scss

@@ -2,6 +2,7 @@
   font-family: var(--font);
 
   &.-faint {
+    color: var(--text);
     /* stylelint-disable declaration-no-important */
     --text: var(--textFaint) !important;
     --link: var(--linkFaint) !important;

src/components/rich_content/rich_content.style.js

@@ -1,20 +0,0 @@
-export default {
-  name: 'RichContent',
-  selector: '.RichContent',
-  notEditable: true,
-  transparent: true,
-  validInnerComponents: [
-    'Text',
-    'FunText',
-    'Link'
-  ],
-  defaultRules: [
-    {
-      directives: {
-        '--font': 'generic | inherit',
-        '--monoFont': 'generic | monospace',
-        textNoCssColor: 'yes'
-      }
-    }
-  ]
-}

src/components/status/post.style.js

@@ -9,23 +9,9 @@ export default {
     'Link',
     'Icon',
     'Border',
-    'Button',
-    'ButtonUnstyled',
-    'RichContent',
-    'Input',
     'Avatar',
-    'Attachment',
     'PollGraph'
   ],
-  validInnerComponentsLite: [
-    'Text',
-    'Link',
-    'Icon',
-    'Border',
-    'ButtonUnstyled',
-    'RichContent',
-    'Avatar'
-  ],
   defaultRules: [
     {
       directives: {

src/components/top_bar.style.js

@@ -5,6 +5,7 @@ export default {
     'Link',
     'Text',
     'Icon',
+    // Optimization: don't put heavy components unless needed
     'Button',
     'ButtonUnstyled',
     'Input',

src/components/user_card/user_card.scss

@@ -111,15 +111,20 @@
     }
   }
 
-  .banner-overlay,
+  .header-overlay {
-  .banner-image {
     position: absolute;
     inset: 0;
     right: -1.2em;
     left: -1.2em;
     top: -1.4em;
-    padding: 0;
     mask: linear-gradient(to top, transparent 0, white 5em) bottom no-repeat;
+  }
+
+  .banner-overlay,
+  .banner-image {
+    position: absolute;
+    inset: 0;
+    padding: 0;
     border-top-left-radius: calc(var(--roundness) - 1px);
     border-top-right-radius: calc(var(--roundness) - 1px);
   }
@@ -136,6 +141,7 @@
 
   .banner-overlay {
     background-color: var(--profileTint);
+    opacity: 0.5;
     pointer-events: none; // let user copy bg url
     z-index: -1;
   }

src/components/user_card/user_card.style.js

@@ -2,40 +2,10 @@ export default {
   name: 'UserCard',
   selector: '.user-card',
   notEditable: true,
-  validInnerComponents: [
-    'Text',
-    'Link',
-    'Icon',
-    'Button',
-    'ButtonUnstyled',
-    'Input',
-    'RichContent',
-    'Alert'
-  ],
   defaultRules: [
     {
       directives: {
-        background: '--bg',
+        '--profileTint': 'color | $alpha(--background 1)'
-        opacity: 0,
-        roundness: 3,
-        shadow: [{
-          x: 1,
-          y: 1,
-          blur: 4,
-          spread: 0,
-          color: '#000000',
-          alpha: 0.6
-        }],
-        '--profileTint': 'color | $alpha(--background 0.5)'
-      }
-    },
-    {
-      parent: {
-        component: 'UserCard'
-      },
-      component: 'RichContent',
-      directives: {
-        opacity: 0
       }
     }
   ]

src/components/user_card/user_card.vue

@@ -3,16 +3,18 @@
     <div class="user-card-inner">
       <div class="user-info">
         <div class="user-identity">
-          <div class="banner-image">
+          <div class="header-overlay">
-            <img
+            <div class="banner-image">
-              :src="bannerImgSrc"
+              <img
+                :src="bannerImgSrc"
+                :class="{ 'hide-bio': hideBio }"
+              >
+            </div>
+            <div
+              class="banner-overlay"
               :class="{ 'hide-bio': hideBio }"
-            >
+            />
           </div>
-          <div
-            class="banner-overlay"
-            :class="{ 'hide-bio': hideBio }"
-          />
           <a
             v-if="avatarAction === 'zoom'"
             class="user-info-avatar -link"

src/services/style_setter/style_setter.js

@@ -42,6 +42,7 @@ export const createStyleSheet = (id, priority = 1000) => {
 
 
 export const adoptStyleSheets = throttle(() => {
+  console.log('adopt')
   if (supportsAdoptedStyleSheets) {
     document.adoptedStyleSheets = Object
       .values(stylesheets)
@@ -137,8 +138,7 @@ export const tryLoadCache = async () => {
       eagerStyles.ready = true
       lazyStyles.ready = true
 
-      // Don't do this, we need to wait until config adopts its styles first
+      adoptStyleSheets()
-      //adoptStyleSheets()
 
       console.info(`Loaded theme from cache`)
       return true
@@ -253,6 +253,7 @@ export const applyConfig = (input) => {
 
   const styleSheet = createStyleSheet('theme-holder', 30)
 
+  styleSheet.clear()
   styleSheet.addRule(`:root { ${rules} }`)
 
   // TODO find a way to make this not apply to theme previews

src/services/theme_data/theme2_to_theme3.js

@@ -244,9 +244,6 @@ export const convertTheme2To3 = (data) => {
         case 'tooltip':
           rule.component = 'Popover'
           break
-        case 'attachment':
-          rule.component = 'Attachment'
-          break
         case 'ChatMessage':
           rule.component = 'Button'
           break

src/services/theme_data/theme_data_3.service.js

@@ -33,7 +33,6 @@ const components = {
   Icon: null,
   Border: null,
   PanelHeader: null,
-  Attachment: null,
   Panel: null,
   Chat: null,
   ChatMessage: null,

src/stores/interface.js

@@ -515,6 +515,7 @@ export const useInterfaceStore = defineStore('interface', {
     async applyTheme (
       { recompile = false } = {}
     ) {
+      console.log('Apply')
       const {
         forceThemeRecompilation,
         themeDebug,