Notify about widget active/not-active state (#64)

* Notify about widget active/not-active state Also consider the active state in the styling to avoid jarring colors for selection while inactive. Fixes eclipse-glsp/glsp#184
eclipse-glsp · Feb 8, 2021 · f6b0375 · f6b0375
1 parent 55d820d
commit f6b0375
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 3 deletions.
diff --git a/packages/theia-integration/css/diagram.css b/packages/theia-integration/css/diagram.css
@@ -36,6 +36,14 @@
     stroke: var(--theia-menu-selectionBackground);
 }
 
+.inactive .sprotty-node.selected {
+    stroke: var(--theia-editor-inactiveSelectionBackground);
+}
+
 .sprotty-resize-handle.active {
     fill: var(--theia-menu-selectionBackground);
 }
+
+.inactive .sprotty-resize-handle {
+    fill: var(--theia-tab-unfocusedInactiveForeground);
+}
diff --git a/packages/theia-integration/css/tool-palette.css b/packages/theia-integration/css/tool-palette.css
@@ -30,6 +30,10 @@
     border-top: 2px solid var(--theia-focusBorder);
 }
 
+.inactive .tool-palette .palette-header {
+    border-top: 2px solid var(--theia-tab-unfocusedInactiveForeground);
+}
+
 .tool-palette .palette-header .header-icon {
     font-size: var(--theia-ui-font-size1);
     float: left;
@@ -55,6 +59,10 @@
     background: var(--theia-inputOption-activeBackground);
 }
 
+.inactive .tool-palette .palette-header .header-tools .clicked {
+    background: var(--theia-menubar-selectionBackground);
+}
+
 .tool-palette .palette-body {
     border: 0;
     box-shadow: none;
@@ -82,6 +90,11 @@
     color: var(--theia-menu-selectionForeground);
 }
 
+.inactive .tool-palette .tool-button.clicked {
+    background: var(--theia-list-hoverBackground);
+    color: var(--theia-titleBar-activeForeground);
+}
+
 .search-input {
     background: var(--theia-input-background);
     color: var(--theia-input-foreground);

diff --git a/packages/theia-integration/src/browser/diagram/glsp-diagram-manager.ts b/packages/theia-integration/src/browser/diagram/glsp-diagram-manager.ts
@@ -15,6 +15,7 @@
  ********************************************************************************/
 import { EditMode, GLSPActionDispatcher } from "@eclipse-glsp/client";
 import {
+    ApplicationShell,
     FrontendApplicationContribution,
     NavigatableWidgetOptions,
     OpenHandler,
@@ -55,6 +56,9 @@ export abstract class GLSPDiagramManager extends DiagramManager {
     @inject(GLSPDiagramContextKeyService)
     protected readonly contextKeyService: GLSPDiagramContextKeyService;
 
+    @inject(ApplicationShell)
+    protected readonly shell: ApplicationShell;
+
     abstract get fileExtensions(): string[];
 
     async doOpen(widget: DiagramWidget, options?: WidgetOpenerOptions) {
@@ -75,7 +79,9 @@ export abstract class GLSPDiagramManager extends DiagramManager {
             const widgetId = this.createWidgetId(options);
             const config = this.getDiagramConfiguration(options);
             const diContainer = config.createContainer(clientId);
-            return new GLSPDiagramWidget(options, widgetId, diContainer, this.editorPreferences, this.diagramConnector);
+            const widget = new GLSPDiagramWidget(options, widgetId, diContainer, this.editorPreferences, this.diagramConnector);
+            widget.listenToFocusState(this.shell);
+            return widget;
         }
         throw Error('DiagramWidgetFactory needs DiagramWidgetOptions but got ' + JSON.stringify(options));
     }

diff --git a/packages/theia-integration/src/browser/diagram/glsp-diagram-widget.ts b/packages/theia-integration/src/browser/diagram/glsp-diagram-widget.ts
@@ -19,6 +19,7 @@ import {
     DisposeClientSessionAction,
     EditorContextService,
     EnableToolPaletteAction,
+    FocusStateChangedAction,
     GLSP_TYPES,
     IActionDispatcher,
     ICopyPasteHandler,
@@ -31,7 +32,7 @@ import {
     TYPES
 } from "@eclipse-glsp/client";
 import { Message } from "@phosphor/messaging/lib";
-import { Saveable, SaveableSource } from "@theia/core/lib/browser";
+import { ApplicationShell, Saveable, SaveableSource } from "@theia/core/lib/browser";
 import { Disposable, DisposableCollection, Emitter, Event, MaybePromise } from "@theia/core/lib/common";
 import { EditorPreferences } from "@theia/editor/lib/browser";
 import { Container } from "inversify";
@@ -98,6 +99,16 @@ export class GLSPDiagramWidget extends DiagramWidget implements SaveableSource {
         }
     }
 
+    listenToFocusState(shell: ApplicationShell) {
+        this.toDispose.push(shell.onDidChangeActiveWidget((event) => {
+            if (event.newValue === undefined || (event.newValue && event.newValue.id !== this.id)) {
+                this.actionDispatcher.dispatch(new FocusStateChangedAction(false));
+            } else if ((event.newValue && event.newValue.id === this.id)) {
+                this.actionDispatcher.dispatch(new FocusStateChangedAction(true));
+            }
+        }));
+    }
+
     get diagramType(): string {
         return this.options.diagramType;
     }

diff --git a/yarn.lock b/yarn.lock
@@ -833,7 +833,7 @@
     "@eclipse-glsp/client" "0.9.0-next.83b3785f"
     balloon-css "^0.5.0"
 
-"@eclipse-glsp/client@0.9.0-next.83b3785f", "@eclipse-glsp/client@next":
+"@eclipse-glsp/client@0.9.0-next.83b3785f":
   version "0.9.0-next.83b3785f"
   resolved "https://registry.yarnpkg.com/@eclipse-glsp/client/-/client-0.9.0-next.83b3785f.tgz#d0dc9064438ec4ada87e821526d301931f62a813"
   integrity sha512-0A9V6kQwbcsxvqA+0YXL//3MNQrM5IEa17Rpfdv3TNDOPUfkC7AAQzAIlc7RRyuwSgiBQ/DyopmF8GDb0gOi7g==
@@ -842,6 +842,23 @@
     autocompleter "5.1.0"
     sprotty next
 
+"@eclipse-glsp/client@next":
+  version "0.9.0-next.4fc0d719"
+  resolved "https://registry.yarnpkg.com/@eclipse-glsp/client/-/client-0.9.0-next.4fc0d719.tgz#a24c90bf3ad56b9ecac7733e29eaae209fcfe97a"
+  integrity sha512-I6fz9WkUHPz/RTKnL2TJeTk8ajUMEpZ1LyXljhGI1JKgrzOGigdx94qIWhEqTfmGsexSs3m953YZOCdxdaPtAw==
+  dependencies:
+    "@eclipse-glsp/protocol" "0.9.0-next.4fc0d719"
+    autocompleter "5.1.0"
+    sprotty next
+
+"@eclipse-glsp/protocol@0.9.0-next.4fc0d719":
+  version "0.9.0-next.4fc0d719"
+  resolved "https://registry.yarnpkg.com/@eclipse-glsp/protocol/-/protocol-0.9.0-next.4fc0d719.tgz#78fd38bb8b8f9a799602699c706af9bb8b0dbed8"
+  integrity sha512-+XV0fz80/7Z0cYj5pSfrlTdZAG4X/FRDc99yyB6fZo5XysKXvCKAL2QYmrub4MHx1xmn2u/pBHqaa5z0NEFV7Q==
+  dependencies:
+    uuid "7.0.3"
+    vscode-ws-jsonrpc "0.2.0"
+
 "@eclipse-glsp/protocol@0.9.0-next.83b3785f", "@eclipse-glsp/protocol@next":
   version "0.9.0-next.83b3785f"
   resolved "https://registry.yarnpkg.com/@eclipse-glsp/protocol/-/protocol-0.9.0-next.83b3785f.tgz#c26b3943560051a6468421df880429ee4dcb5766"