feature(stark-ui): add show/hide functionality to tables

- refactor minimap component CLOSES: NationalBankBelgium#522
carlo-nomes · Feb 19, 2019 · 67ee1b7 · 67ee1b7
1 parent b56c285
commit 67ee1b7
Show file tree

Hide file tree

Showing 15 changed files with 181 additions and 737 deletions.
diff --git a/packages/stark-ui/assets/stark-ui-bundle.scss b/packages/stark-ui/assets/stark-ui-bundle.scss
@@ -1,5 +1,6 @@
 /* Stark styles */
 @import "../assets/styles/base";
+@import "../assets/styles/material-fixes";
 @import "../assets/theming/base-theme";
 @import "../assets/styles/components/button";
 @import "../assets/styles/components/button-theme";

diff --git a/packages/stark-ui/assets/styles/_material-fixes.scss b/packages/stark-ui/assets/styles/_material-fixes.scss
@@ -6,6 +6,15 @@
   line-height: initial;
 }
 
+// Causes checkbox trigger to take up entire width/height of menu item
+.mat-menu-content div.mat-menu-item {
+  padding: 0;
+  & > mat-checkbox label {
+    padding: 0 16px;
+    display: block;
+  }
+}
+
 // FIXME: Remove after https://github.com/angular/material2/pull/11801 is merged
 // See: https://github.com/angular/material2/issues/11609
 /** IE 11 fixes */

diff --git a/packages/stark-ui/src/modules/minimap/components/_minimap-theme.scss b/packages/stark-ui/src/modules/minimap/components/_minimap-theme.scss
@@ -3,136 +3,17 @@
 /* ============================================================================== */
 /* stark-ui: src/modules/minimap/components/minimap-theme.scss */
 
-.compact-minimap {
-  & .stark-minimap-dots {
-    & i {
+.stark-minimap {
+  .stark-minimap-dots {
+    i {
       background-color: $secondary-dark-text-color;
       opacity: 0.2;
     }
 
-    & li.selected i {
+    .selected i {
       opacity: 1;
     }
   }
-
-  & .stark-minimap-dropdown-toggle {
-    & .stark-minimap-dropdown-toggle-menu {
-      box-shadow: $elevation-4;
-
-      & mat-checkbox.mat-checked .mat-icon {
-        background-color: $md-accent;
-      }
-    }
-
-    & .mat-button.mat-icon-button {
-      & svg {
-        fill: #000;
-      }
-
-      border: 1px solid mat-color($grey-palette, 300);
-      background-color: $md-primary-alpha-05;
-    }
-
-    & mat-icon {
-      fill: $md-primary;
-    }
-
-    & .stark-minimap-dropdown-toggle-menu {
-      border-color: mat-color($grey-palette, 500);
-      box-shadow: 0 1px 2px mat-color($grey-palette, 300);
-      background-color: #fff;
-
-      & mat-checkbox {
-        &:hover {
-          background: $md-primary-alpha-05;
-        }
-
-        & ._mat-icon {
-          &::after {
-            border-color: mat-color($grey-palette, 50);
-          }
-        }
-
-        & .stark-minimap-dropdown {
-          & mat-checkbox.stark-minimap-column-checkbox {
-            &.mat-checked ._mat-icon {
-              background-color: $md-primary-200-alpha-38;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-.full-minimap {
-  & .stark-minimap-dots {
-    & i {
-      background-color: $secondary-dark-text-color;
-      opacity: 0.2;
-    }
-
-    & li.selected i {
-      opacity: 1;
-    }
-  }
-
-  & .stark-minimap-dropdown-toggle {
-    & .stark-minimap-dropdown-toggle-menu {
-      box-shadow: $elevation-4;
-
-      & mat-checkbox.mat-checked .mat-icon {
-        background-color: $md-accent;
-      }
-    }
-
-    & .mat-button.mat-icon-button {
-      & svg {
-        fill: #000;
-      }
-
-      border: 1px solid mat-color($grey-palette, 300);
-      background-color: $md-primary-alpha-05;
-    }
-
-    & mat-icon {
-      fill: $md-primary;
-    }
-
-    & .stark-minimap-dropdown-toggle-menu {
-      border-color: mat-color($grey-palette, 500);
-      box-shadow: 0 1px 2px mat-color($grey-palette, 300);
-      background-color: #fff;
-
-      & mat-checkbox {
-        &:hover {
-          background: $md-primary-alpha-05;
-        }
-
-        & ._mat-icon {
-          &::after {
-            border-color: mat-color($grey-palette, 50);
-          }
-        }
-
-        & .stark-minimap-dropdown {
-          & mat-checkbox.stark-minimap-column-checkbox {
-            &.mat-checked ._mat-icon {
-              background-color: $md-primary-200-alpha-38;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-.stark-table {
-  & .stark-minimap {
-    & .stark-minimap-dropdown-toggle .stark-minimap-dropdown-toggle-menu {
-      box-shadow: $elevation-2;
-    }
-  }
 }
 
 /* End stark-ui: src/modules/minimap/components/minimap-theme.scss */