Shadows work now

src/components/settings_modal/tabs/style_tab/style_tab.js

@@ -259,6 +259,7 @@ export default {
       }
     })
 
+    // All the editable stuff for the component
     const editedBackgroundColor = getEditedElement(null, 'background')
     const editedOpacity = getEditedElement(null, 'opacity')
     const editedTextColor = getEditedElement('Text', 'textColor')
@@ -267,6 +268,34 @@ export default {
     const editedIconColor = getEditedElement('Icon', 'textColor')
     const editedShadow = getEditedElement(null, 'shadow')
 
+    // Shadow is partially edited outside the ShadowControl
+    // for better space utilization
+    const editedSubShadowId = ref(null)
+    const editedSubShadow = computed(() => {
+      if (editedShadow.value == null || editedSubShadowId.value == null) return null
+      return editedShadow.value[editedSubShadowId.value]
+    })
+
+    const updateSubShadow = (axis, value) => {
+      if (!editedSubShadow.value || editedSubShadowId.value == null) return
+      const newEditedShadow = [...editedShadow.value]
+
+      newEditedShadow[editedSubShadowId.value] = {
+        ...newEditedShadow[editedSubShadowId.value],
+        [axis]: value
+      }
+
+      editedShadow.value = newEditedShadow
+    }
+
+    const onSubShadow = (id) => {
+      if (id != null) {
+        editedSubShadowId.value = id
+      } else {
+        editedSubShadow.value = null
+      }
+    }
+
     const isBackgroundColorPresent = isElementPresent(null, 'background', '#FFFFFF')
     const isOpacityPresent = isElementPresent(null, 'opacity', 1)
     const isTextColorPresent = isElementPresent('Text', 'textColor', '#000000')
@@ -293,7 +322,6 @@ export default {
               directives: stateData.directives || {}
             }
 
-            console.log('PARENT', parent)
             if (parent) {
               result.parent = {
                 component: parent
@@ -311,8 +339,6 @@ export default {
       }
 
       convert(selectedComponentName.value, allEditedRules[selectedComponentName.value])
-      console.log(toValue(allEditedRules))
-      console.log(toValue(resultRules))
 
       return resultRules
     })
@@ -351,13 +377,13 @@ export default {
     // TODO this is VERY primitive right now, need to make it
     // support variables, fallbacks etc.
     const getContrast = (bg, text) => {
-      console.log('CONTRAST', bg, text)
       try {
         const bgRgb = hex2rgb(bg)
         const textRgb = hex2rgb(text)
 
         const ratio = getContrastRatio(bgRgb, textRgb)
         return {
+          // TODO this ideally should be part of <ContractRatio />
           ratio,
           text: ratio.toPrecision(3) + ':1',
           // AA level, AAA level
@@ -406,6 +432,9 @@ export default {
       editedLinkColor,
       editedIconColor,
       editedShadow,
+      editedSubShadow,
+      onSubShadow,
+      updateSubShadow,
       getContrast,
       isBackgroundColorPresent,
       isOpacityPresent,

src/components/settings_modal/tabs/style_tab/style_tab.vue

@@ -123,11 +123,11 @@
           class="component-preview"
           :showText="componentHas('Text')"
           :shadowControl="isShadowTabOpen"
-          :shadow="editedShadow"
           :previewClass="previewClass"
           :previewStyle="editorHintStyle"
-          :disabled="!isShadowPresent"
-          @update:shadow="({ axis, value }) => updateProperty(axis, value)"
+          :disabled="!editedSubShadow"
+          :shadow="editedSubShadow"
+          @update:shadow="({ axis, value }) => updateSubShadow(axis, value)"
         />
       </div>
       <tab-switcher
@@ -156,7 +156,7 @@
           <OpacityInput
             v-model="editedOpacity"
             :disabled="!isOpacityPresent"
-           :label="$t('settings.style.themes3.editor.opacity')"
+            :label="$t('settings.style.themes3.editor.opacity')"
           />
           <Popover trigger="hover">
             <template #trigger>
@@ -187,7 +187,7 @@
             <label
               for="textAuto"
               class="label"
-              :class="{ faint: disabled || !present }"
+              :class="{ faint: !isTextAutoPresent }"
             >
               {{ $t('settings.style.themes3.editor.text_auto.label') }}
             </label>
@@ -275,6 +275,7 @@
             :disabled="!isShadowPresent"
             :no-preview="true"
             :separate-inset="shadowSelected === 'avatar' || shadowSelected === 'avatarStatus'"
+            @subShadowSelected="onSubShadow"
           />
         </div>
       </tab-switcher>

src/services/theme_data/css_utils.js

@@ -84,6 +84,9 @@ export const getCssRules = (rules, debug) => rules.map(rule => {
         ].join(';\n  ')
       }
       case 'shadow': {
+        if (!rule.dynamicVars.shadow) {
+          return ''
+        }
         return '  ' + [
           '--shadow: ' + getCssShadow(rule.dynamicVars.shadow),
           '--shadowFilter: ' + getCssShadowFilter(rule.dynamicVars.shadow),