@beacon-interactive-systems-llc/beacon-platform-ui 19.0.6 → 19.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@beacon-interactive-systems-llc/beacon-platform-ui",
-  "version": "19.0.6",
+  "version": "19.0.7",
   "peerDependencies": {
     "@angular/common": "^19.2.14",
     "@angular/core": "^19.2.14",

package/styles/_gridstack.scss

@@ -2,27 +2,48 @@
 
 $platform_gridstack_contrasts: (
   light: (
+    toolbar: $beacon-white,
+    toolbarText: $beacon-black,
+    toolbarShadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.12),
+    scroller: $beacon-white,
+    scrollerShadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.22),
+    scrollerBorder: none,
+    scrollerIcon: $beacon-cyan-500,
     optionsButton: $beacon-orange-500,
     optionsButtonText: $beacon-white,
     optionsRowBorder: $beacon-gray-100,
     optionsTypeRow: $beacon-gray-100,
   ),
   dark: (
+    toolbar: $beacon-gray-700,
+    toolbarText: $beacon-gray-200,
+    toolbarShadow: none,
+    scroller: $beacon-gray-600,
+    scrollerShadow: none,
+    scrollerBorder: 0.5px solid $beacon-gray-300,
+    scrollerIcon: $beacon-cyan-600,
     optionsButton: $beacon-orange-500,
     optionsButtonText: $beacon-white,
     optionsRowBorder: $beacon-gray-300,
     optionsTypeRow: $beacon-gray-600,
   ),
   highcontrast: (
-    optionsButton: $beacon-orange-500,
+    toolbar: $beacon-black,
+    toolbarText: $beacon-white,
+    toolbarShadow: none,
+    scroller: $beacon-black,
+    scrollerShadow: none,
+    scrollerBorder: 0.5px solid $beacon-white,
+    scrollerIcon: $highcontrast-bright-blue-100,
+    optionsButton: $highcontrast-bright-orange-200,
     optionsButtonText: $beacon-white,
     optionsRowBorder: $beacon-white,
     optionsTypeRow: $beacon-gray-700,
   )
 );
 
+// Setting the column widths - number of columns must match in a corresponding GridstackOptions in the app
 .grid-stack > .grid-stack-item {
-
     $gridstack-columns: 96;
 
     @for $i from 1 through $gridstack-columns {
@@ -42,6 +63,55 @@ $platform_gridstack_contrasts: (
     }
 }
 
+.dashboard-view-toolbar {
+  @include themify($platform_gridstack_contrasts) {
+    background: apply('toolbar');
+    box-shadow: apply('toolbarShadow');
+    color: apply('toolbarText');
+  }
+  display: flex;
+  align-items: center;
+  height: 48px;
+  padding: 8px 16px;
+  margin-top: -12px;
+  margin-left: -16px;
+  margin-right: -16px;
+
+  .dashboard-buttons {
+    display: flex;
+    align-items: center;
+
+    .dashboard-scroll-btn {
+      @include themify($platform_gridstack_contrasts) {
+        background: apply('scroller');
+        box-shadow: apply('scrollerShadow');
+        border: apply('scrollerBorder');
+
+        mat-icon {
+          color: apply('scrollerIcon');
+        }
+      }
+      border-radius: 5px;
+      font-size: 24px;
+      height: 30px;
+      padding: 0px;
+      width: 32px;
+
+    }
+
+    .dashboard-select {
+      margin-left: 8px;
+      margin-right: 8px;
+      width: 255px !important;
+    }
+
+    .three-dot-menu-trigger {
+      margin-left: 12px;
+      margin-right: 12px;
+    }
+  }
+}
+
 .grid-stack {
   width: calc(100% - 40px) !important;
 
@@ -71,15 +141,10 @@ $platform_gridstack_contrasts: (
     color: apply('optionsButtonText');
   }
   border-radius: 30px;
-  display: inline-block;
-  font-size: 24px;
-  height: 40px;
-  margin: 0px 8px;
+  font-size: 16px;
+  height: 32px;
   opacity: 0.8;
-  position: absolute;
-  top: 20px;
-  right: 0px;
-  width: 40px;
+  width: 32px;
 
   &:before {
     content: "dashboard";

package/styles/_layout.scss

@@ -522,6 +522,7 @@ $detail-view-width-expanded: calc(100vw - $leftnav-collapsed-width);
   width: calc(100vw - $leftnav-width);
   min-width: 800px;
   overflow-y: scroll;
+  padding: 16px;
   transition: all 0.5s ease-in-out;
 }
 
@@ -573,4 +574,4 @@ $detail-view-width-expanded: calc(100vw - $leftnav-collapsed-width);
 
 .drawer__body.search__drawer {
   transition: all 0.5s ease-in-out;
-}
+}