Re-format main button bar.

Show / hide buttons on both sides of screen.

CHANGELOG.md

@@ -1,5 +1,9 @@
 # CHANGELOG: Freeboard
 
+### v2.6.0
+
+- **Added**: Ability to show/hide toolbar buttons on both sides of the screen.
+
 ### v2.5.0
 
 - **Added**: In the chart list, toggle the display of the bounds of all available charts on the map.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@signalk/freeboard-sk",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "description": "Openlayers chart plotter implementation for Signal K",
   "keywords": [
     "signalk-webapp",

src/app/app.component.css

@@ -20,21 +20,13 @@ mat-nav-list {
     overflow: hidden;  
 }
 
-.mainToolBar {
-    top: 0;
-	bottom: 0;
-	left: 0;
-    overflow: auto;
-    position: fixed;
-    background: linear-gradient(0deg, rgba(253,253,253,.5) 0%, rgba(0,0,0,1) 26%);
-}
-
 .view {
     top: 0;
 	bottom: 0;
     right: 0;
-	left: 48px;
+	left: 0px;
     overflow: auto;
+    scrollbar-width: none;
     position: fixed;
 	border-top: silver 0px solid;
 }
@@ -44,25 +36,48 @@ mat-nav-list {
     top: 0;
     left: 0;
     bottom: 0;
-    padding-left: 40px;
+    padding-left: 0px;
     z-index: 5000; 
     background-color: rgba(200,200,200,.4);
 }
 
-.rightUtilsPanel { 
+.buttonPanel { 
     max-width:48px; 
     z-index: 200;
     position: absolute;
+    padding: 5px 2px 2px 2px;
+    overflow: auto;
+    scrollbar-width: none;
+}
+
+.buttonPanel.rightTop { 
+    right: 0px;
     top: 0px;
+    padding: 9px 2px 10px 2px;
+}
+
+.buttonPanel.leftTop { 
+    left: 0px;
+    top: 0px;
+    padding: 9px 2px 10px 2px;
+}
+
+.buttonPanel.left { 
+    top: 60px;
+    left: 0px;
+    bottom: 0px;
+}
+
+.buttonPanel.right { 
+    top: 60px;
     right: 0px;
     bottom: 0px;
-    padding: 0px 2px 2px 2px;
-    overflow: auto;
-    scrollbar-width: none;
 }
-.rightUtilsPanel div {
+
+.buttonPanel .buttonPanelItem {
     text-align: center;
-    height: 60px;
+    height: 48px;
+    padding: 5px 0 5px 0;
 }
 
 .mapButton {
@@ -82,7 +97,7 @@ mat-nav-list {
     position: absolute;
     z-index: 4900;
     bottom: 150px; 
-    left: 10px; 
+    left: 48px; 
     top: auto; 
     width:100px; 
     border: gray 1px solid;
@@ -95,7 +110,7 @@ mat-nav-list {
     position: absolute;
     z-index: 4901;
     bottom: 30px;
-    left: 0;
+    left: 48px;
     max-width:100%;
     max-height: 100px;
     text-align: center;
@@ -132,7 +147,7 @@ mat-nav-list {
     margin: 20px;
   }
 
-.ol-mouse-position {
+  .ol-mouse-position {
     position: fixed; 
     bottom:10px; 
     right:45%; 
@@ -143,15 +158,15 @@ mat-nav-list {
 
 .ol-zoom {
     position: fixed; 
-    top:10px; 
+    top:10px;
     left:100px; 
     color: rgb(30,30,30);
     font-family:roboto; 
     background-color: transparent;  
     height: 45px;
 }
 
-.instrumentsBtn {
+.instrumentPanelToggle {
     display: block;
 } 
 
@@ -163,7 +178,7 @@ mat-nav-list {
 }
 
 @media only screen and (max-width: 800px) { 
-    .instrumentsBtn {
+    .instrumentPanelToggle {
         display: none;
     }     
 }