PATCH: fix(icons): fix icon rotation

bimdata · Jan 6, 2022 · b46a05e · b46a05e
1 parent 5b4d5f1
commit b46a05e
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 34 deletions.
diff --git a/src/BIMDataComponents/BIMDataDropdownList/BIMDataDropdownList.vue b/src/BIMDataComponents/BIMDataDropdownList/BIMDataDropdownList.vue
@@ -21,7 +21,7 @@
         width="21px"
         height="21px"
       >
-        <BIMDataIcon name="chevron" size="xxxs" />
+        <BIMDataIcon name="chevron" size="xxxs" :rotate="iconRotation" />
       </BIMDataButton>
       <slot name="contentAfterBtn"></slot>
     </div>
@@ -114,6 +114,9 @@ export default {
         "min-height": `${this.height}`,
       };
     },
+    iconRotation() {
+      return this.displayed ? (this.directionClass === "up" ? -90 : 90) : 0;
+    },
   },
   methods: {
     onHeaderClick() {

diff --git a/src/BIMDataComponents/BIMDataDropdownList/_BIMDataDropdownList.scss b/src/BIMDataComponents/BIMDataDropdownList/_BIMDataDropdownList.scss
@@ -28,11 +28,6 @@
       background-color: var(--color-white);
       border: 1px solid transparent;
       box-shadow: var(--box-shadow);
-      .bimdata-btn {
-        svg {
-          transform: rotate(90deg);
-        }
-      }
     }
 
     &.disabled {
@@ -45,31 +40,6 @@
     }
   }
 
-  &[direction*="up"] {
-    .bimdata-dropdown-list__content {
-      &.active {
-        .bimdata-btn {
-          svg {
-            transform: rotate(-90deg);
-          }
-        }
-      }
-    }
-  }
-
-  &[direction*="right"],
-  &[direction*="left"] {
-    .bimdata-dropdown-list__content {
-      &.active {
-        .bimdata-btn {
-          svg {
-            transform: none;
-          }
-        }
-      }
-    }
-  }
-
   .bimdata-paginated-list {
     &__elements {
       font-size: 11px;

diff --git a/src/BIMDataComponents/BIMDataIcon/BIMDataIcon.vue b/src/BIMDataComponents/BIMDataIcon/BIMDataIcon.vue
@@ -103,10 +103,8 @@ export default {
         height: `${pixelSize}px`,
         minHeight: `${pixelSize}px`,
         margin: `${this.margin}`,
+        transform: `rotate(${this.rotate}deg)`,
       };
-      if (this.rotation > 0) {
-        style.transform = `rotate(${this.rotate}deg)`;
-      }
       return style;
     },
   },