feat: 💄 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.
This commit is contained in:
Mikhail Zolotukhin 2021-10-22 22:07:45 +03:00
parent c7e272af82
commit 8d6a3747e6
2 changed files with 29 additions and 18 deletions

View File

@ -22,7 +22,7 @@ Item {
function show(text) { function show(text) {
var area = workspace.clientArea(KWin.FullScreenArea, workspace.activeScreen, workspace.currentDesktop); var area = workspace.clientArea(KWin.FullScreenArea, workspace.activeScreen, workspace.currentDesktop);
this.item.show(text, area, 1000); this.item.show(text, area);
} }
} }

View File

@ -1,17 +1,20 @@
// SPDX-FileCopyrightText: 2018-2019 Eon S. Jeon <esjeon@hyunmu.am> // SPDX-FileCopyrightText: 2018-2019 Eon S. Jeon <esjeon@hyunmu.am>
// SPDX-FileCopyrightText: 2021 Mikhail Zolotukhin <mail@genda.life>
// //
// SPDX-License-Identifier: MIT // SPDX-License-Identifier: MIT
import QtQuick 2.0 import QtQuick 2.0
import QtQuick.Controls 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.core 2.0 as PlasmaCore;
import org.kde.plasma.components 3.0 as PC3
/* /*
* Component Documentation * Component Documentation
* - PlasmaCore global `theme` object: * - 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: * - 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 { PlasmaCore.Dialog {
@ -23,20 +26,21 @@ PlasmaCore.Dialog {
visible: false visible: false
mainItem: Item { mainItem: RowLayout {
width: messageLabel.implicitWidth id: main
height: messageLabel.implicitHeight // 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 id: messageLabel
padding: 10 anchors.fill: parent
// This font size matches the one from Pulse Audio OSD for consistency
// TODO: customizable font & size ???? font.pointSize: PlasmaCore.Theme.defaultFont.pointSize * 1.2
font.pointSize: Math.round(theme.defaultFont.pointSize * 2) horizontalAlignment: Text.AlignHCenter
font.weight: Font.Bold
} }
/* hides the popup window when triggered */ // Hides the popup window when triggered
Timer { Timer {
id: hideTimer id: hideTimer
repeat: false repeat: false
@ -48,20 +52,27 @@ PlasmaCore.Dialog {
} }
Component.onCompleted: { 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); KWin.registerWindow(this);
} }
function show(text, area, duration) { function show(text, area) {
// Abort any previous timers
hideTimer.stop(); hideTimer.stop();
// Set the text for the popup
messageLabel.text = text; messageLabel.text = text;
this.x = (area.x + area.width / 2) - this.width / 2; // Width and height are not computed before the popup is visible
this.y = (area.y + area.height / 2) - this.height / 2; // therefore we need to make is visible sooner
this.visible = true; 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(); hideTimer.start();
} }
} }