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

- update minimap component - update tests for minimap component - refactor column visibility property CLOSES: #522
NationalBankBelgium · Feb 22, 2019 · 69b56f0 · 69b56f0
1 parent f4339ff
commit 69b56f0
Show file tree

Hide file tree

Showing 33 changed files with 480 additions and 833 deletions.
diff --git a/packages/stark-ui/assets/styles/_base.scss b/packages/stark-ui/assets/styles/_base.scss
@@ -1,4 +1,5 @@
 @import "~normalize.css/normalize.css";
+@import "material-fixes";
 
 html,
 body {

diff --git a/packages/stark-ui/assets/styles/_material-fixes.scss b/packages/stark-ui/assets/styles/_material-fixes.scss
@@ -6,6 +6,13 @@
   line-height: initial;
 }
 
+// Causes checkbox trigger to take up entire width/height of menu item
+.mat-menu-content div.mat-menu-item > mat-checkbox label {
+  margin: 0 -16px;
+  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/assets/theming/_material-palettes.scss b/packages/stark-ui/assets/theming/_material-palettes.scss
@@ -133,6 +133,7 @@ $warning-palette: (
 );
 
 $mat-light-theme-background: $backgrounds;
+
 $mat-light-theme-foreground: $foregrounds;
 
 @if variable-exists(stark-accent-palette) {

diff --git a/packages/stark-ui/src/modules/minimap/components.ts b/packages/stark-ui/src/modules/minimap/components.ts
@@ -1,3 +1,2 @@
 export * from "./components/minimap.component";
 export * from "./components/item-properties.intf";
-export * from "./components/item-visibility.intf";
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,134 +3,39 @@
 /* ============================================================================== */
 /* 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-primary.stark-minimap {
+  .stark-minimap-dots {
+    i {
+      background-color: mat-color($primary-palette, 500);
     }
   }
+}
 
-  & .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-accent.stark-minimap {
+  .stark-minimap-dots {
+    i {
+      background-color: mat-color($accent-palette, 500);
     }
   }
 }
 
-.stark-table {
-  & .stark-minimap {
-    & .stark-minimap-dropdown-toggle .stark-minimap-dropdown-toggle-menu {
-      box-shadow: $elevation-2;
+.stark-warning.stark-minimap {
+  .stark-minimap-dots {
+    i {
+      background-color: mat-color($warning-palette, 500);
     }
   }
 }