feat: display layout icons in the OSD popup

When switching layouts, you can now see icons in the OSD.
Bismuth-Forge · Nov 13, 2021 · b049197 · b049197
1 parent 3d1233e
commit b049197
Show file tree

Hide file tree

Showing 16 changed files with 113 additions and 47 deletions.
diff --git a/src/kwinscript/controller/index.ts b/src/kwinscript/controller/index.ts
@@ -40,9 +40,11 @@ export interface Controller {
 
   /**
    * Show a popup notification in the center of the screen.
-   * @param text notification text
+   * @param text the main text of the notification.
+   * @param icon an optional name of the icon to display in the pop-up.
+   * @param hint an optional string displayed beside the main text.
    */
-  showNotification(text: string): void;
+  showNotification(text: string, icon?: string, hint?: string): void;
 
   /**
    * React to screen focus change
@@ -200,8 +202,8 @@ export class ControllerImpl implements Controller {
     this.driver.currentSurface = value;
   }
 
-  public showNotification(text: string): void {
-    this.driver.showNotification(text);
+  public showNotification(text: string, icon?: string, hint?: string): void {
+    this.driver.showNotification(text, icon, hint);
   }
 
   public onSurfaceUpdate(comment: string): void {

diff --git a/src/kwinscript/driver/index.ts b/src/kwinscript/driver/index.ts
@@ -38,10 +38,12 @@ export interface Driver {
   currentWindow: EngineWindow | null;
 
   /**
-   * Show notification to the user
-   * @param text notification text
+   * Show a popup notification in the center of the screen.
+   * @param text the main text of the notification.
+   * @param icon an optional name of the icon to display in the pop-up.
+   * @param hint an optional string displayed beside the main text.
    */
-  showNotification(text: string): void;
+  showNotification(text: string, icon?: string, hint?: string): void;
 
   /**
    * Bind script to the various KWin events
@@ -315,8 +317,8 @@ export class DriverImpl implements Driver {
     this.controller.manageWindow(window);
   }
 
-  public showNotification(text: string): void {
-    this.qml.popupDialog.show(text);
+  public showNotification(text: string, icon?: string, hint?: string): void {
+    this.qml.popupDialog.show(text, icon, hint);
   }
 
   public bindShortcut(action: Action): void {

diff --git a/src/kwinscript/engine/index.ts b/src/kwinscript/engine/index.ts
@@ -160,10 +160,12 @@ export interface Engine {
   isLayoutMonocleAndMinimizeRest(): boolean;
 
   /**
-   * Show the notification to the user
-   * @param text the text of the notification
+   * Show a popup notification in the center of the screen.
+   * @param text the main text of the notification.
+   * @param icon an optional name of the icon to display in the pop-up.
+   * @param hint an optional string displayed beside the main text.
    */
-  showNotification(text: string): void;
+  showNotification(text: string, icon?: string, hint?: string): void;
 
   /**
    * Show the notification with the info
@@ -697,13 +699,17 @@ export class EngineImpl implements Engine {
     return closest.sort((a, b) => b.timestamp - a.timestamp)[0];
   }
 
-  public showNotification(text: string): void {
-    this.controller.showNotification(text);
+  public showNotification(text: string, icon?: string, hint?: string): void {
+    this.controller.showNotification(text, icon, hint);
   }
 
   public showLayoutNotification(): void {
     const currentLayout = this.currentLayoutOnCurrentSurface();
-    this.controller.showNotification(`Layout: ${currentLayout.description}`);
+    this.controller.showNotification(
+      currentLayout.name,
+      currentLayout.icon,
+      currentLayout.hint
+    );
   }
 
   /**

diff --git a/src/kwinscript/engine/layout/cascade_layout.ts b/src/kwinscript/engine/layout/cascade_layout.ts
@@ -30,6 +30,9 @@ export enum CascadeDirection {
 
 export default class CascadeLayout implements WindowsLayout {
   public static readonly id = "CascadeLayout";
+  public readonly classID = CascadeLayout.id;
+  public readonly name = "Cascade Layout";
+  public readonly icon = "bismuth-cascade";
 
   /** Decompose direction into vertical and horizontal steps */
   public static decomposeDirection(
@@ -55,10 +58,8 @@ export default class CascadeLayout implements WindowsLayout {
     }
   }
 
-  public readonly classID = CascadeLayout.id;
-
-  public get description(): string {
-    return `Cascade [${CascadeDirection[this.dir]}]`;
+  public get hint(): string {
+    return String(CascadeDirection[this.dir]);
   }
 
   constructor(private dir: CascadeDirection = CascadeDirection.SouthEast) {

diff --git a/src/kwinscript/engine/layout/floating_layout.ts b/src/kwinscript/engine/layout/floating_layout.ts
@@ -13,9 +13,9 @@ import { Controller } from "../../controller";
 export default class FloatingLayout implements WindowsLayout {
   public static readonly id = "FloatingLayout ";
   public static instance = new FloatingLayout();
-
   public readonly classID = FloatingLayout.id;
-  public readonly description: string = "Floating";
+  public readonly name = "Floating Layout";
+  public readonly icon = "bismuth-floating";
 
   public apply(
     _controller: Controller,

diff --git a/src/kwinscript/engine/layout/index.ts b/src/kwinscript/engine/layout/index.ts
@@ -18,8 +18,28 @@ export interface WindowsLayoutClass {
 }
 
 export interface WindowsLayout {
+  /* read-only */
+
+  /**
+   * Human-readable name of the layout.
+   */
+  readonly name: string;
+
+  /**
+   * The icon name of the layout.
+   */
+  readonly icon: string;
+
+  /**
+   * A string that can be used to show layout specific properties in the pop-up,
+   * e.g. the number of master windows.
+   */
+  readonly hint?: string;
+
+  /**
+   * The maximum number of windows, that the layout can contain.
+   */
   readonly capacity?: number;
-  readonly description: string;
 
   adjust?(
     area: Rect,

diff --git a/src/kwinscript/engine/layout/monocle_layout.ts b/src/kwinscript/engine/layout/monocle_layout.ts
@@ -24,9 +24,9 @@ import { Engine } from "..";
 
 export default class MonocleLayout implements WindowsLayout {
   public static readonly id = "MonocleLayout";
-  public readonly description: string = "Monocle";
-
   public readonly classID = MonocleLayout.id;
+  public readonly name = "Monocle Layout";
+  public readonly icon = "bismuth-monocle";
 
   private config: Config;
 

diff --git a/src/kwinscript/engine/layout/quarter_layout.ts b/src/kwinscript/engine/layout/quarter_layout.ts
@@ -15,9 +15,9 @@ import { Controller } from "../../controller";
 export default class QuarterLayout implements WindowsLayout {
   public static readonly MAX_PROPORTION = 0.8;
   public static readonly id = "QuarterLayout";
-
   public readonly classID = QuarterLayout.id;
-  public readonly description = "Quarter";
+  public readonly name = "Quarter Layout";
+  public readonly icon = "bismuth-quarter";
 
   public get capacity(): number {
     return 4;

diff --git a/src/kwinscript/engine/layout/spiral_layout.ts b/src/kwinscript/engine/layout/spiral_layout.ts
@@ -19,7 +19,8 @@ export type SpiralLayoutPart = HalfSplitLayoutPart<
 >;
 
 export default class SpiralLayout implements WindowsLayout {
-  public readonly description = "Spiral";
+  public readonly name = "Spiral Layout";
+  public readonly icon = "bismuth-spiral";
 
   private depth: number;
   private parts: SpiralLayoutPart;

diff --git a/src/kwinscript/engine/layout/spread_layout.ts b/src/kwinscript/engine/layout/spread_layout.ts
@@ -19,9 +19,9 @@ import { Engine } from "..";
 
 export default class SpreadLayout implements WindowsLayout {
   public static readonly id = "SpreadLayout";
-
   public readonly classID = SpreadLayout.id;
-  public readonly description = "Spread";
+  public readonly name = "Spread Layout";
+  public readonly icon = "bismuth-spread";
 
   private space: number; /* in ratio */
 

diff --git a/src/kwinscript/engine/layout/stair_layout.ts b/src/kwinscript/engine/layout/stair_layout.ts
@@ -19,9 +19,9 @@ import { Engine } from "..";
 
 export default class StairLayout implements WindowsLayout {
   public static readonly id = "StairLayout";
-
   public readonly classID = StairLayout.id;
-  public readonly description = "Stair";
+  public readonly name = "Stair Layout";
+  public readonly icon = "bismuth-stair";
 
   private space: number; /* in PIXELS */
 

diff --git a/src/kwinscript/engine/layout/three_column_layout.ts b/src/kwinscript/engine/layout/three_column_layout.ts
@@ -26,11 +26,12 @@ export default class ThreeColumnLayout implements WindowsLayout {
   public static readonly MIN_MASTER_RATIO = 0.2;
   public static readonly MAX_MASTER_RATIO = 0.75;
   public static readonly id = "ThreeColumnLayout";
-
   public readonly classID = ThreeColumnLayout.id;
+  public readonly name = "Three-Column Layout";
+  public readonly icon = "bismuth-column";
 
-  public get description(): string {
-    return `Three-Column [${this.masterSize}]`;
+  public get hint(): string {
+    return String(this.masterSize);
   }
 
   private masterRatio: number;

diff --git a/src/kwinscript/engine/layout/tile_layout.ts b/src/kwinscript/engine/layout/tile_layout.ts
@@ -33,11 +33,12 @@ export default class TileLayout implements WindowsLayout {
   public static readonly MIN_MASTER_RATIO = 0.2;
   public static readonly MAX_MASTER_RATIO = 0.8;
   public static readonly id = "TileLayout";
-
   public readonly classID = TileLayout.id;
+  public readonly name = "Tile Layout";
+  public readonly icon = "bismuth-tile";
 
-  public get description(): string {
-    return `Tile [${this.numMaster}]`;
+  public get hint(): string {
+    return String(this.numMaster);
   }
 
   private parts: RotateLayoutPart<

diff --git a/src/kwinscript/extern/global.d.ts b/src/kwinscript/extern/global.d.ts
@@ -23,7 +23,7 @@ declare namespace Bismuth {
     }
 
     export interface PopupDialog {
-      show(text: string): void;
+      show(text: string, icon?: string, hint?: string): void;
     }
   }
 }

diff --git a/src/kwinscript/ui/main.qml b/src/kwinscript/ui/main.qml
@@ -43,8 +43,8 @@ Item {
     Loader {
         id: popupDialog
 
-        function show(text) {
-            this.item.show(text);
+        function show(text, icon, hint) {
+            this.item.show(text, icon, hint);
         }
 
         source: "popup.qml"

diff --git a/src/kwinscript/ui/popup.qml b/src/kwinscript/ui/popup.qml
@@ -2,8 +2,7 @@
 // SPDX-FileCopyrightText: 2021 Mikhail Zolotukhin <mail@genda.life>
 // SPDX-License-Identifier: MIT
 
-import QtQuick 2.0
-import QtQuick.Controls 2.0
+import QtQuick 2.15
 import QtQuick.Layouts 1.15
 import org.kde.kwin 2.0
 import org.kde.plasma.components 3.0 as PC3
@@ -14,13 +13,16 @@ PlasmaCore.Dialog {
 
     property rect screenGeometry
 
-    function show(text) {
+    function show(text, icon, hint) {
         // Abort any previous timers
         hideTimer.stop();
         // Update current screen information
         this.screenGeometry = workspace.clientArea(KWin.FullScreenArea, workspace.activeScreen, workspace.currentDesktop);
-        // Set the text for the popup
-        messageLabel.text = text;
+        // Set the icon and text
+        messageText.text = text;
+        messageIcon.source = icon || "bismuth"; // Fallback to the default icon when undefined
+        messageHint.text = hint || ""; // Fallback to the empty string when undefined
+        // Show the popup
         this.visible = true;
         // Start popup hide timer
         hideTimer.interval = 3000;
@@ -43,18 +45,48 @@ PlasmaCore.Dialog {
         id: main
 
         // Make popup size consistent with the other Plasma OSD (e.g. PulseAudio one)
-        Layout.minimumWidth: Math.max(messageLabel.implicitWidth, PlasmaCore.Units.gridUnit * 15)
+        Layout.minimumWidth: Math.max(messageText.implicitWidth, PlasmaCore.Units.gridUnit * 15)
         Layout.minimumHeight: PlasmaCore.Units.gridUnit * 1.35
 
+        PlasmaCore.IconItem {
+            id: messageIcon
+
+            Layout.leftMargin: PlasmaCore.Units.smallSpacing
+            Layout.preferredWidth: PlasmaCore.Units.iconSizes.medium
+            Layout.preferredHeight: PlasmaCore.Units.iconSizes.medium
+            Layout.alignment: Qt.AlignVCenter
+        }
+
+        PC3.Label {
+            id: messageText
+
+            Layout.fillWidth: true
+            Layout.alignment: Qt.AlignHCenter
+            // This font size matches the one from Pulse Audio OSD for consistency
+            font.pointSize: PlasmaCore.Theme.defaultFont.pointSize * 1.2
+            horizontalAlignment: Text.AlignHCenter
+        }
+
         PC3.Label {
-            id: messageLabel
+            id: messageHint
 
+            Layout.preferredWidth: widestHintSize.width
+            Layout.rightMargin: PlasmaCore.Units.smallSpacing * 2
             Layout.alignment: Qt.AlignHCenter
             // This font size matches the one from Pulse Audio OSD for consistency
             font.pointSize: PlasmaCore.Theme.defaultFont.pointSize * 1.2
             horizontalAlignment: Text.AlignHCenter
         }
 
+        // Get the width of a two-digit number so we can size the hint
+        // to the maximum width to avoid the main text moving around
+        TextMetrics {
+          id: widestHintSize
+
+          text: i18n("10")
+          font: messageHint.font
+        }
+
         // Hides the popup window when triggered
         Timer {
             id: hideTimer