fixed a17-button triggering twice and some styling issues related to …

…slots
area17 · Apr 22, 2024 · 978f240 · 978f240
1 parent 7b24e02
commit 978f240
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 19 deletions.
diff --git a/frontend/js/components/Button.vue b/frontend/js/components/Button.vue
@@ -69,9 +69,9 @@
     render: function () {
       const elOpts = {
         class: this.buttonClasses,
-        onClick: (event) => {
-          this.onClick(event)
-        }
+        // onClick: (event) => {
+        //   this.onClick(event)
+        // }
       }
 
       // button
@@ -183,7 +183,7 @@
     font-weight:600;
     padding: 0 15px;
 
-    .icon {
+    :deep(.icon) {
       vertical-align: baseline;
       top: 3px;
       position: relative;
@@ -382,7 +382,7 @@
     color: $color__icons;
     @include monospaced-figures('off'); // dont use monospaced figures here
 
-    .icon {
+    :deep(.icon) {
       transition: color .25s linear;
     }
 
@@ -391,12 +391,12 @@
       border-color: $color__text;
       color: $color__text;
 
-      .icon {
+      :deep(.icon) {
         color: $color__text;
       }
     }
 
-    .icon {
+    :deep(.icon) {
       // vertical-align: top;
       // height: 100%;
       display: block;
@@ -420,7 +420,7 @@
       color: $color__button_greyed;
       background: $color__button_greyed--bg;
 
-      .icon {
+      :deep(.icon) {
         color: $color__button_greyed;
       }
 

diff --git a/frontend/js/components/ButtonBar.vue b/frontend/js/components/ButtonBar.vue
@@ -41,8 +41,8 @@
     border-radius: 2px;
     display: flex;
 
-    > a,
-    > button {
+    > :slotted(a),
+    > :slotted(button) {
       @include btn-reset;
       height: $toolbar__height - 2px;
       line-height: $toolbar__height - 2px;
@@ -80,14 +80,14 @@
       }
     }
 
-    > a:first-child,
-    > button:first-child {
+    > :slotted(a):first-child,
+    > :slotted(button):first-child {
       border-top-left-radius: $border__radius;
       border-bottom-left-radius: $border__radius;
     }
 
-    > a:last-child,
-    > button:last-child {
+    > :slotted(a):last-child,
+    > :slotted(button):last-child {
       border-top-right-radius: $border__radius;
       border-bottom-right-radius: $border__radius;
       border-right: 0 none;

diff --git a/frontend/js/components/CheckboxGroup.vue b/frontend/js/components/CheckboxGroup.vue
@@ -31,6 +31,11 @@
         default: function () { return [] }
       }
     },
+    data () {
+      return {
+        hasLocale: false
+      }
+    },
     mixins: [InputframeMixin, CheckboxMixin, FormStoreMixin],
     computed: {
       checkboxClasses: function () {

diff --git a/frontend/js/components/Filter.vue b/frontend/js/components/Filter.vue
@@ -177,7 +177,7 @@
       margin-left:9px;
     }
 
-    div {
+    :slotted(div) {
       display:inline-block;
 
       button:not(.button--validate), a{

diff --git a/frontend/js/components/StickyNav.vue b/frontend/js/components/StickyNav.vue
@@ -231,7 +231,7 @@
     }
   }
 
-  .stickyNav__actions > div {
+  .stickyNav__actions > :slotted(div) {
     display:flex;
 
     .button {

diff --git a/frontend/js/components/blocks/BlockEditorItem.vue b/frontend/js/components/blocks/BlockEditorItem.vue
@@ -280,6 +280,7 @@
     }
 
     > button,
+    > :slotted(button),
     .dropdown,
     .dropdown > button {
       display: inline-block;
@@ -289,7 +290,8 @@
   }
 
   .block__actions {
-    button[data-action] {
+    button[data-action],
+    :slotted(button)[data-action] {
       visibility: hidden;
     }
 
@@ -308,15 +310,17 @@
       }
     }
 
-    button[data-action] {
+    button[data-action],
+    :slotted(button)[data-action] {
       visibility: visible;
       display: inline-block;
     }
   }
 
   .block__header:hover,
   .block--focus .block__header {
-    button[data-action] {
+    button[data-action],
+    :slotted(button)[data-action] {
       display: inline-block;
     }
   }