From cdd74706c57785a1b96d0749356888abc49b9723 Mon Sep 17 00:00:00 2001
From: David Lechner <david@pybricks.com>
Date: Mon, 1 Feb 2021 12:34:17 -0600
Subject: [PATCH] toolbar is not a navbar

This adds custom styling for the toolbar (inspired by blueprintsjs
navbar). But this lets us use the correct role and not fight the
navbar styling so much.
---
 src/app/app.scss         |  2 +-
 src/toolbar/Toolbar.tsx  | 65 +++++++++++++++++-----------------------
 src/toolbar/toolbar.scss | 30 +++++++++++++++++--
 src/variables.scss       |  5 +---
 4 files changed, 57 insertions(+), 45 deletions(-)

diff --git a/src/app/app.scss b/src/app/app.scss
index b8f24411..ad0510f6 100644
--- a/src/app/app.scss
+++ b/src/app/app.scss
@@ -8,7 +8,7 @@
 .pb-app-body {
     // height makes everything fit without scrolling
     height: calc(
-        var(--pb-vh, 100vh) - #{$pt-navbar-height} - #{$pb-status-bar-height}
+        var(--pb-vh, 100vh) - #{$pb-toolbar-height} - #{$pb-status-bar-height}
     ) !important;
 }
 
diff --git a/src/toolbar/Toolbar.tsx b/src/toolbar/Toolbar.tsx
index 951538a6..20365166 100644
--- a/src/toolbar/Toolbar.tsx
+++ b/src/toolbar/Toolbar.tsx
@@ -1,7 +1,7 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) 2020 The Pybricks Authors
 
-import { Alignment, ButtonGroup, Navbar } from '@blueprintjs/core';
+import { ButtonGroup } from '@blueprintjs/core';
 import React from 'react';
 import OpenButton from '../editor/OpenButton';
 import SaveAsButton from '../editor/SaveAsButton';
@@ -22,44 +22,35 @@ class Toolbar extends React.Component {
 
     render(): JSX.Element {
         return (
-            <Navbar
+            <div
+                role="toolbar"
                 onContextMenu={(e): void => e.preventDefault()}
-                className="no-box-shadow"
+                className="pb-toolbar no-box-shadow"
             >
-                <Navbar.Group>
-                    <ButtonGroup>
-                        <OpenButton id="open" />
-                        <SaveAsButton id="saveAs" />
-                    </ButtonGroup>
-                    <Navbar.Divider />
-                    <ButtonGroup>
-                        <RunButton id="run" keyboardShortcut="F5" />
-                        <StopButton id="stop" keyboardShortcut="F6" />
-                        <ReplButton id="repl" />
-                    </ButtonGroup>
-                    <Navbar.Divider />
-                    <ButtonGroup>
-                        <FlashButton id="flash" />
-                        <BluetoothButton id="bluetooth" />
-                    </ButtonGroup>
-                </Navbar.Group>
-                <Navbar.Group align={Alignment.RIGHT}>
-                    <ButtonGroup>
-                        <SettingsButton
-                            id="settings"
-                            onAction={() =>
-                                this.setState({ settingsDrawerIsOpen: true })
-                            }
-                        />
-                        <SettingsDrawer
-                            isOpen={this.state.settingsDrawerIsOpen}
-                            onClose={() =>
-                                this.setState({ settingsDrawerIsOpen: false })
-                            }
-                        />
-                    </ButtonGroup>
-                </Navbar.Group>
-            </Navbar>
+                <ButtonGroup className="pb-toolbar-group pb-align-left">
+                    <OpenButton id="open" />
+                    <SaveAsButton id="saveAs" />
+                </ButtonGroup>
+                <ButtonGroup className="pb-toolbar-group pb-align-left">
+                    <RunButton id="run" keyboardShortcut="F5" />
+                    <StopButton id="stop" keyboardShortcut="F6" />
+                    <ReplButton id="repl" />
+                </ButtonGroup>
+                <ButtonGroup className="pb-toolbar-group pb-align-left">
+                    <FlashButton id="flash" />
+                    <BluetoothButton id="bluetooth" />
+                </ButtonGroup>
+                <ButtonGroup className="pb-toolbar-group pb-align-right">
+                    <SettingsButton
+                        id="settings"
+                        onAction={() => this.setState({ settingsDrawerIsOpen: true })}
+                    />
+                    <SettingsDrawer
+                        isOpen={this.state.settingsDrawerIsOpen}
+                        onClose={() => this.setState({ settingsDrawerIsOpen: false })}
+                    />
+                </ButtonGroup>
+            </div>
         );
     }
 }
diff --git a/src/toolbar/toolbar.scss b/src/toolbar/toolbar.scss
index 02a29f4a..7f2ae0e4 100644
--- a/src/toolbar/toolbar.scss
+++ b/src/toolbar/toolbar.scss
@@ -5,7 +5,31 @@
 
 @import '../variables.scss';
 
-.#{$ns}-navbar-divider {
-    // don't draw vertical line since we are just using button groups
-    border-left: unset;
+.#{$ns}-dark .pb-toolbar {
+    background-color: $pt-dark-app-background-color;
+}
+
+.pb-toolbar {
+    height: $pb-toolbar-height;
+    background-color: $pt-app-background-color;
+    padding: 0 $pt-grid-size * 1.5;
+    position: relative;
+    width: 100%;
+    z-index: $pt-z-index-content;
+}
+
+.pb-toolbar-group {
+    align-items: center;
+    display: flex;
+    height: $pb-toolbar-height;
+
+    &.pb-align-left {
+        float: left;
+        margin-right: $pt-grid-size * 2;
+    }
+
+    &.pb-align-right {
+        float: right;
+        margin-left: $pt-grid-size * 2;
+    }
 }
diff --git a/src/variables.scss b/src/variables.scss
index d94d51f5..b6b0f9da 100644
--- a/src/variables.scss
+++ b/src/variables.scss
@@ -10,13 +10,10 @@ $pt-font-size: $pt-grid-size * 1.6;
 $pt-font-size-large: $pt-grid-size * 1.8;
 $pt-font-size-small: $pt-grid-size * 1.4;
 
-$pt-navbar-height: 72px;
+$pb-toolbar-height: 72px;
 $pb-status-bar-height: 24px;
 
 $pb-pybricks-blue: #0088ce;
 $pt-app-background-color: #e8e8e8;
 $pt-intent-primary: $pb-pybricks-blue;
 $pt-outline-color: rgba($pb-pybricks-blue, 0.6);
-
-$navbar-background-color: $pt-app-background-color;
-$dark-navbar-background-color: $pt-dark-app-background-color;