From dfed2350bd43e32448d2c7815c70ba52f97bb17e Mon Sep 17 00:00:00 2001 From: Akos Kitta Date: Mon, 20 Jul 2020 10:28:50 +0200 Subject: [PATCH] pimped the status bar: boards+port. Fixed HC theme Signed-off-by: Akos Kitta --- .../browser/arduino-frontend-contribution.tsx | 32 +++++++++++++++++-- .../src/browser/style/index.css | 1 + .../src/browser/style/main.css | 16 ++++++++-- .../src/browser/style/status-bar.css | 7 ++++ 4 files changed, 50 insertions(+), 6 deletions(-) create mode 100644 arduino-ide-extension/src/browser/style/status-bar.css diff --git a/arduino-ide-extension/src/browser/arduino-frontend-contribution.tsx b/arduino-ide-extension/src/browser/arduino-frontend-contribution.tsx index 446bfa47..d9d8f632 100644 --- a/arduino-ide-extension/src/browser/arduino-frontend-contribution.tsx +++ b/arduino-ide-extension/src/browser/arduino-frontend-contribution.tsx @@ -4,7 +4,7 @@ import URI from '@theia/core/lib/common/uri'; import { MessageService } from '@theia/core/lib/common/message-service'; import { CommandContribution, CommandRegistry } from '@theia/core/lib/common/command'; import { TabBarToolbarContribution, TabBarToolbarRegistry } from '@theia/core/lib/browser/shell/tab-bar-toolbar'; -import { BoardsService, BoardsServiceClient, CoreService, SketchesService, ToolOutputServiceClient } from '../common/protocol'; +import { BoardsService, BoardsServiceClient, CoreService, SketchesService, ToolOutputServiceClient, Port } from '../common/protocol'; import { ArduinoCommands } from './arduino-commands'; import { BoardsServiceClientImpl } from './boards/boards-service-client-impl'; import { SelectionService, MenuContribution, MenuModelRegistry, MAIN_MENU_BAR } from '@theia/core'; @@ -145,11 +145,19 @@ export class ArduinoFrontendContribution implements FrontendApplicationContribut // tslint:disable-next-line:max-line-length this.messageService.warn('You appear to be offline. Without an Internet connection, the Arduino CLI might not be able to download the required resources and could cause malfunction. Please connect to the Internet and restart the application.'); } - const updateStatusBar = (config: BoardsConfig.Config) => { + const updateStatusBar = ({ selectedBoard, selectedPort }: BoardsConfig.Config) => { this.statusBar.setElement('arduino-selected-board', { alignment: StatusBarAlignment.RIGHT, - text: BoardsConfig.Config.toString(config) + text: selectedBoard ? `$(microchip) ${selectedBoard.name}` : '$(close) no board selected', + className: 'arduino-selected-board' }); + if (selectedBoard) { + this.statusBar.setElement('arduino-selected-port', { + alignment: StatusBarAlignment.RIGHT, + text: selectedPort ? `on ${Port.toString(selectedPort)}` : '[not connected]', + className: 'arduino-selected-port' + }); + } } this.boardsServiceClientImpl.onBoardsConfigChanged(updateStatusBar); updateStatusBar(this.boardsServiceClientImpl.boardsConfig); @@ -290,6 +298,24 @@ export class ArduinoFrontendContribution implements FrontendApplicationContribut hc: 'editorWidget.background' }, description: 'Color of the Arduino Pro IDE foreground which is used for dialogs, such as the Select Board dialog.' + }, + { + id: 'arduino.toolbar.background', + defaults: { + dark: 'button.background', + light: 'button.background', + hc: 'activityBar.inactiveForeground' + }, + description: 'Background color of the toolbar items. Such as Upload, Verify, etc.' + }, + { + id: 'arduino.toolbar.hoverBackground', + defaults: { + dark: 'button.hoverBackground', + light: 'button.hoverBackground', + hc: 'activityBar.inactiveForeground' + }, + description: 'Background color of the toolbar items when hovering over them. Such as Upload, Verify, etc.' } ); } diff --git a/arduino-ide-extension/src/browser/style/index.css b/arduino-ide-extension/src/browser/style/index.css index ac5b5756..849e5bdd 100644 --- a/arduino-ide-extension/src/browser/style/index.css +++ b/arduino-ide-extension/src/browser/style/index.css @@ -3,6 +3,7 @@ @import './main.css'; @import './monitor.css'; @import './arduino-select.css'; +@import './status-bar.css'; .theia-input.warning:focus { outline-width: 1px; diff --git a/arduino-ide-extension/src/browser/style/main.css b/arduino-ide-extension/src/browser/style/main.css index 8ebb074d..d47e4728 100644 --- a/arduino-ide-extension/src/browser/style/main.css +++ b/arduino-ide-extension/src/browser/style/main.css @@ -21,11 +21,11 @@ align-items: center; height: 24px; width: 24px; - background: var(--theia-button-background); + background: var(--theia-arduino-toolbar-background); } .p-TabBar-toolbar .item.arduino-tool-item > div:hover { - background: var(--theia-button-hoverBackground); + background: (--theia-arduino-toolbar-hoverBackground); } .arduino-verify-sketch--toolbar, @@ -123,7 +123,17 @@ display: flex; justify-content: center; align-items: center; - color: var(--theia-titleBar-activeBackground);; + color: var(--theia-titleBar-activeBackground); +} + +.arduino-open-boards-control-icon { + mask: none; + -webkit-mask: none; + background: none; + display: flex; + justify-content: center; + align-items: center; + color: var(--theia-titleBar-activeBackground); } .monaco-editor .margin { diff --git a/arduino-ide-extension/src/browser/style/status-bar.css b/arduino-ide-extension/src/browser/style/status-bar.css new file mode 100644 index 00000000..de464c24 --- /dev/null +++ b/arduino-ide-extension/src/browser/style/status-bar.css @@ -0,0 +1,7 @@ +#theia-statusBar .area .element.arduino-selected-port { + margin-left: 0px; +} + +#theia-statusBar .area .element.arduino-selected-board > *:last-child { + margin-right: 0px; +}