feat(stark-ui): implementation of minimap component

ISSUES CLOSED: #758
NationalBankBelgium · Nov 5, 2018 · fa15c2e · fa15c2e
1 parent 2ba3d6e
commit fa15c2e
Show file tree

Hide file tree

Showing 32 changed files with 1,185 additions and 12 deletions.
diff --git a/greenkeeper.json b/greenkeeper.json
@@ -12,11 +12,5 @@
       ]
     }
   },
-  "ignore": [
-    "@angular/flex-layout",
-    "@types/node",
-    "class-validator",
-    "typescript",
-    "tslint-sonarts"
-  ]
+  "ignore": ["@angular/flex-layout", "@types/node", "class-validator", "typescript", "tslint-sonarts"]
 }
diff --git a/packages/stark-core/src/modules/settings/settings.module.ts b/packages/stark-core/src/modules/settings/settings.module.ts
@@ -6,10 +6,7 @@ import { STARK_SETTINGS_SERVICE, StarkSettingsServiceImpl } from "./services";
 import { StarkSettingsEffects } from "./effects";
 
 @NgModule({
-    imports: [
-		StoreModule.forFeature("StarkSettings", starkSettingsReducers),
-		EffectsModule.forFeature([StarkSettingsEffects])
-	]
+	imports: [StoreModule.forFeature("StarkSettings", starkSettingsReducers), EffectsModule.forFeature([StarkSettingsEffects])]
 })
 export class StarkSettingsModule {
 	/**

diff --git a/packages/stark-ui/assets/styles/_old-variables.scss b/packages/stark-ui/assets/styles/_old-variables.scss
@@ -49,6 +49,7 @@ $md-primary-100: #b2d5ee; /* rgb(178, 213, 238) */
 $md-primary: mat-color(map-get($base-theme, primary-palette));
 $md-primary-600: mat-color(map-get($base-theme, primary-palette), 600); /* rgb(0, 106, 180) */
 $md-primary-700: mat-color(map-get($base-theme, primary-palette), 700); /* rgb(0, 94, 160) */
+$md-primary-alpha-05: rgba(0, 118, 200, 0.05);
 $md-primary-alpha-10: rgba(0, 118, 200, 0.1);
 $md-primary-alpha-26: rgba(0, 118, 200, 0.26);
 $md-primary-alpha-50: rgba(0, 118, 200, 0.5);
@@ -77,3 +78,5 @@ $md-warn-alpha-87: rgba(255, 87, 34, 0.87);
 $md-warn-200-alpha-38: rgba(255, 171, 145, 0.38);
 
 $cash2-offwhite: #f6f9fa;
+
+$checkbox-size: 15px;
diff --git a/packages/stark-ui/src/modules.ts b/packages/stark-ui/src/modules.ts
@@ -11,6 +11,7 @@ export * from "./modules/date-range-picker";
 export * from "./modules/dropdown";
 export * from "./modules/keyboard-directives";
 export * from "./modules/language-selector";
+export * from "./modules/minimap";
 export * from "./modules/pagination";
 export * from "./modules/pretty-print";
 export * from "./modules/session-ui";

diff --git a/packages/stark-ui/src/modules/app-menu/components/_app-menu.component.scss b/packages/stark-ui/src/modules/app-menu/components/_app-menu.component.scss
@@ -44,4 +44,4 @@
   }
 }
 
-/* END stark-ui: src/modules/dropdown/components/dropdown/_dropdown.component.scss */
+/* END stark-ui: src/modules/dropdown/components/app-menu/_app-menu.component.scss */
diff --git a/packages/stark-ui/src/modules/minimap.ts b/packages/stark-ui/src/modules/minimap.ts
@@ -0,0 +1,2 @@
+export * from "./minimap/minimap.module";
+export * from "./minimap/components";
diff --git a/packages/stark-ui/src/modules/minimap/components.ts b/packages/stark-ui/src/modules/minimap/components.ts
@@ -0,0 +1,3 @@
+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
@@ -0,0 +1,196 @@
+/* ============================================================================== */
+/*  S t a r k   M i n i m a p                                                     */
+/* ============================================================================== */
+/* stark-ui: src/modules/minimap/components/minimap-theme.scss */
+
+.compact-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: mat-color($grey-palette, 50);
+      & 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;
+            }
+          }
+        }
+      }
+    }
+
+    @media #{$desktop-query} {
+      & .stark-minimap-dropdown-toggle-menu {
+        font-size: 16px;
+        & mat-checkbox {
+          padding: 3px 16px;
+          & ._mat-container {
+            width: $checkbox-size;
+            height: $checkbox-size;
+            top: 10px;
+            left: 16px;
+          }
+          & ._mat-icon {
+            width: $checkbox-size;
+            height: $checkbox-size;
+          }
+          & ._mat-label {
+            width: 100%;
+            padding: 0 0 0 26px;
+            font-size: 12px;
+            & span {
+              max-width: 400px;
+            }
+          }
+          &.mat-checked ._mat-icon::after {
+            width: 8px;
+            height: 10px;
+            top: 2px;
+            left: 4px;
+          }
+          &:first-child {
+            margin-top: 8px;
+          }
+          &:last-child {
+            margin-bottom: 8px;
+          }
+        }
+      }
+    }
+  }
+}
+
+.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: mat-color($grey-palette, 50);
+      & 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;
+            }
+          }
+        }
+      }
+    }
+
+    @media #{$desktop-query} {
+      & .stark-minimap-dropdown-toggle-menu {
+        font-size: 16px;
+        & mat-checkbox {
+          padding: 3px 16px;
+          & ._mat-container {
+            width: $checkbox-size;
+            height: $checkbox-size;
+            top: 10px;
+            left: 16px;
+          }
+          & ._mat-icon {
+            width: $checkbox-size;
+            height: $checkbox-size;
+          }
+          & ._mat-label {
+            width: 100%;
+            padding: 0 0 0 26px;
+            font-size: 12px;
+            & span {
+              max-width: 400px;
+            }
+          }
+          &.mat-checked ._mat-icon::after {
+            width: 8px;
+            height: 10px;
+            top: 2px;
+            left: 4px;
+          }
+          &:first-child {
+            margin-top: 8px;
+          }
+          &:last-child {
+            margin-bottom: 8px;
+          }
+        }
+      }
+    }
+  }
+}
+
+.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 */