From 8d6a3747e640c4bd418e361b342f1cb0745a3ff0 Mon Sep 17 00:00:00 2001
From: Mikhail Zolotukhin <mail@genda.life>
Date: Fri, 22 Oct 2021 22:07:45 +0300
Subject: [PATCH] feat: :lipstick: make the popup more consistent with the
 Plasma OSDs

Now the popup spawns a little bit lower the center of the screen, with
smaller text and constant width.
---
 res/ui/main.qml  |  2 +-
 res/ui/popup.qml | 45 ++++++++++++++++++++++++++++-----------------
 2 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/res/ui/main.qml b/res/ui/main.qml
index a63ea5a0..21d28c63 100644
--- a/res/ui/main.qml
+++ b/res/ui/main.qml
@@ -22,7 +22,7 @@ Item {
 
         function show(text) {
             var area = workspace.clientArea(KWin.FullScreenArea, workspace.activeScreen, workspace.currentDesktop);
-            this.item.show(text, area, 1000);
+            this.item.show(text, area);
         }
     }
 
diff --git a/res/ui/popup.qml b/res/ui/popup.qml
index 2bcc1e4f..ddf48b0e 100644
--- a/res/ui/popup.qml
+++ b/res/ui/popup.qml
@@ -1,17 +1,20 @@
 // SPDX-FileCopyrightText: 2018-2019 Eon S. Jeon <esjeon@hyunmu.am>
+// SPDX-FileCopyrightText: 2021 Mikhail Zolotukhin <mail@genda.life>
 //
 // SPDX-License-Identifier: MIT
 
 import QtQuick 2.0
 import QtQuick.Controls 2.0
+import QtQuick.Layouts 1.15
 import org.kde.plasma.core 2.0 as PlasmaCore;
+import org.kde.plasma.components 3.0 as PC3
 
 /* 
  * Component Documentation
  *  - PlasmaCore global `theme` object:
- *      https://techbase.kde.org/Development/Tutorials/Plasma2/QML2/API#Plasma_Themes
+ *      https://api.kde.org/frameworks/plasma-framework/html/classPlasma_1_1Theme.html
  *  - PlasmaCore.Dialog:
- *      https://techbase.kde.org/Development/Tutorials/Plasma2/QML2/API#Top_Level_windows
+ *      https://api.kde.org/frameworks/plasma-framework/html/classPlasmaQuick_1_1Dialog.html
  */
 
 PlasmaCore.Dialog {
@@ -23,20 +26,21 @@ PlasmaCore.Dialog {
 
     visible: false
 
-    mainItem: Item {
-        width: messageLabel.implicitWidth
-        height: messageLabel.implicitHeight
+    mainItem: RowLayout {
+        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.minimumHeight: PlasmaCore.Units.gridUnit * 1.35
 
-        Label {
+        PC3.Label {
             id: messageLabel
-            padding: 10
-
-            // TODO: customizable font & size ????
-            font.pointSize: Math.round(theme.defaultFont.pointSize * 2)
-            font.weight: Font.Bold
+            anchors.fill: parent
+            // This font size matches the one from Pulse Audio OSD for consistency
+            font.pointSize: PlasmaCore.Theme.defaultFont.pointSize * 1.2
+            horizontalAlignment: Text.AlignHCenter
         }
 
-        /* hides the popup window when triggered */
+        // Hides the popup window when triggered
         Timer {
             id: hideTimer
             repeat: false
@@ -48,20 +52,27 @@ PlasmaCore.Dialog {
     }
 
     Component.onCompleted: {
-        /* NOTE: IDK what this is, but this is necessary to keep the window working. */
+        // NOTE: IDK what this is, but this is necessary to keep the window working.
         KWin.registerWindow(this);
     }
 
-    function show(text, area, duration) {
+    function show(text, area) {
+        // Abort any previous timers
         hideTimer.stop();
 
+        // Set the text for the popup
         messageLabel.text = text;
 
-        this.x = (area.x + area.width / 2) - this.width / 2;
-        this.y = (area.y + area.height / 2) - this.height / 2;
+        // Width and height are not computed before the popup is visible
+        // therefore we need to make is visible sooner
         this.visible = true;
 
-        hideTimer.interval = duration;
+        // Spawn popup a little bit lower than the center of the screen for consistency
+        this.x = (area.x + area.width / 2) - this.width / 2;
+        this.y = (area.y + area.height * 2 / 3) - this.height / 2;
+
+        // Start popup hide timer
+        hideTimer.interval = 3000;
         hideTimer.start();
     }
 }