From 9cd44c8db87d64cdb6434a02d802400b16ffe221 Mon Sep 17 00:00:00 2001 From: Florian RICHER Date: Tue, 9 Sep 2025 12:52:55 +0000 Subject: [PATCH] Fix Settings Buttons alignements and width When we use languages with long text translation, the width is > width screen and the alignment is bad with multiple line. --- containments/homescreens/folio/CMakeLists.txt | 1 + .../folio/qml/settings/SettingsButton.qml | 42 ++++++++++ .../folio/qml/settings/SettingsComponent.qml | 76 +++---------------- 3 files changed, 53 insertions(+), 66 deletions(-) create mode 100644 containments/homescreens/folio/qml/settings/SettingsButton.qml diff --git a/containments/homescreens/folio/CMakeLists.txt b/containments/homescreens/folio/CMakeLists.txt index 73597a5b..c20c75df 100644 --- a/containments/homescreens/folio/CMakeLists.txt +++ b/containments/homescreens/folio/CMakeLists.txt @@ -65,6 +65,7 @@ ecm_target_qml_sources(org.kde.plasma.mobile.homescreen.folio SOURCES ecm_target_qml_sources(org.kde.plasma.mobile.homescreen.folio SOURCES qml/settings/AppletListViewer.qml + qml/settings/SettingsButton.qml qml/settings/SettingsComponent.qml qml/settings/SettingsWindow.qml PATH settings diff --git a/containments/homescreens/folio/qml/settings/SettingsButton.qml b/containments/homescreens/folio/qml/settings/SettingsButton.qml new file mode 100644 index 00000000..f96d03ac --- /dev/null +++ b/containments/homescreens/folio/qml/settings/SettingsButton.qml @@ -0,0 +1,42 @@ +// SPDX-FileCopyrightText: 2025 Florian Richer +// SPDX-License-Identifier: LGPL-2.0-or-later + +import QtQuick +import QtQuick.Layouts +import QtQuick.Controls as QQC2 + +import org.kde.plasma.components as PC3 +import org.kde.kirigami as Kirigami + +PC3.ToolButton { + id: root + opacity: 0.9 + implicitHeight: Kirigami.Units.gridUnit * 4 + implicitWidth: Kirigami.Units.gridUnit * 5 + + property string iconName + property string textLabel + + contentItem: ColumnLayout { + spacing: Kirigami.Units.largeSpacing + uniformCellSizes: true + + Kirigami.Icon { + Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter + implicitWidth: Kirigami.Units.iconSizes.smallMedium + implicitHeight: Kirigami.Units.iconSizes.smallMedium + Layout.fillHeight: true + source: iconName + } + + QQC2.Label { + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignTop + text: textLabel + font.bold: true + Layout.fillWidth: true + Layout.fillHeight: true + wrapMode: Text.WordWrap + } + } +} diff --git a/containments/homescreens/folio/qml/settings/SettingsComponent.qml b/containments/homescreens/folio/qml/settings/SettingsComponent.qml index 0709057a..ab3f7ec6 100644 --- a/containments/homescreens/folio/qml/settings/SettingsComponent.qml +++ b/containments/homescreens/folio/qml/settings/SettingsComponent.qml @@ -59,59 +59,22 @@ Item { GridLayout { id: settingsOptions flow: folio.HomeScreenState.favouritesBarLocation === Folio.HomeScreenState.Bottom ? GridLayout.LeftToRight : GridLayout.TopToBottom + uniformCellWidths: true anchors.centerIn: parent - PC3.ToolButton { - opacity: 0.9 - implicitHeight: Kirigami.Units.gridUnit * 4 - implicitWidth: Kirigami.Units.gridUnit * 5 - - contentItem: ColumnLayout { - spacing: Kirigami.Units.largeSpacing - - Kirigami.Icon { - Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom - implicitWidth: Kirigami.Units.iconSizes.smallMedium - implicitHeight: Kirigami.Units.iconSizes.smallMedium - source: 'edit-image' - } - - QQC2.Label { - Layout.alignment: Qt.AlignHCenter | Qt.AlignTop - text: i18n("Wallpapers") - font.bold: true - } - } - + SettingsButton { + iconName: 'edit-image' + textLabel: i18n("Wallpapers") onClicked: { homeScreen.wallpaperSelectorTriggered(); folio.HomeScreenState.closeSettingsView(); } } - PC3.ToolButton { - opacity: 0.9 - implicitHeight: Kirigami.Units.gridUnit * 4 - implicitWidth: Kirigami.Units.gridUnit * 5 - - contentItem: ColumnLayout { - spacing: Kirigami.Units.largeSpacing - - Kirigami.Icon { - Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom - implicitWidth: Kirigami.Units.iconSizes.smallMedium - implicitHeight: Kirigami.Units.iconSizes.smallMedium - source: 'settings-configure' - } - - QQC2.Label { - Layout.alignment: Qt.AlignHCenter | Qt.AlignTop - text: i18n("Settings") - font.bold: true - } - } - + SettingsButton { + iconName: 'settings-configure' + textLabel: i18n("Settings") onClicked: { // ensure that if the window is already opened, it gets raised to the top settingsWindow.hide(); @@ -119,28 +82,9 @@ Item { } } - PC3.ToolButton { - opacity: 0.9 - implicitHeight: Kirigami.Units.gridUnit * 4 - implicitWidth: Kirigami.Units.gridUnit * 5 - - contentItem: ColumnLayout { - spacing: Kirigami.Units.largeSpacing - - Kirigami.Icon { - Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom - implicitWidth: Kirigami.Units.iconSizes.smallMedium - implicitHeight: Kirigami.Units.iconSizes.smallMedium - source: 'widget-alternatives' - } - - QQC2.Label { - Layout.alignment: Qt.AlignHCenter | Qt.AlignTop - text: i18n("Widgets") - font.bold: true - } - } - + SettingsButton { + iconName: 'widget-alternatives' + textLabel: i18n("Widgets") onClicked: { appletListViewerLoader.active = true; }