From ed96409645b45571513c3ae20c2a5eca90982b04 Mon Sep 17 00:00:00 2001 From: miruka Date: Wed, 21 Aug 2019 15:45:13 -0400 Subject: [PATCH] Split HButton components, add HMenu/HMenuItem --- src/qml/Base/HButton.qml | 58 +++++------------------- src/qml/Base/HButtonBackground.qml | 29 ++++++++++++ src/qml/Base/HButtonContent.qml | 41 +++++++++++++++++ src/qml/Base/HInterfaceBox.qml | 2 +- src/qml/Base/HMenuItem.qml | 22 +++++++++ src/qml/Chat/Banners/Banner.qml | 2 +- src/qml/Chat/RoomHeader.qml | 6 +-- src/qml/Pages/EditAccount/Encryption.qml | 4 +- src/qml/Pages/EditAccount/Profile.qml | 4 +- src/qml/Pages/SignIn.qml | 4 +- src/qml/SidePane/DelegateAccount.qml | 8 ++-- src/qml/SidePane/PaneToolBar.qml | 2 +- src/themes/Default.qpl | 12 ++++- 13 files changed, 129 insertions(+), 65 deletions(-) create mode 100644 src/qml/Base/HButtonBackground.qml create mode 100644 src/qml/Base/HButtonContent.qml diff --git a/src/qml/Base/HButton.qml b/src/qml/Base/HButton.qml index 8fd7d74f..fe81affa 100644 --- a/src/qml/Base/HButton.qml +++ b/src/qml/Base/HButton.qml @@ -9,65 +9,29 @@ Button { rightPadding: spacing / 1.5 topPadding: spacing / 2 bottomPadding: spacing / 2 - opacity: enabled ? 1 : theme.disabledElementsOpacity + iconItem.svgName: loading ? "hourglass" : icon.name + onVisibleChanged: if (! visible) loading = false - readonly property alias ico: ico - readonly property alias label: label + readonly property alias iconItem: contentItem.icon + readonly property alias label: contentItem.label - property string iconName: "" property color backgroundColor: theme.controls.button.background property bool loading: false property bool circle: false - Behavior on opacity { HNumberAnimation {} } - - - background: HRectangle { + background: HButtonBackground { + button: button + buttonTheme: theme.controls.button radius: circle ? height : 0 color: backgroundColor - - HRectangle { - anchors.fill: parent - radius: parent.radius - color: button.checked ? - theme.controls.button.checkedOverlay : - - button.enabled && button.pressed ? - theme.controls.button.pressedOverlay : - - (button.enabled && button.hovered) || button.visualFocus ? - theme.controls.button.hoveredOverlay : - - "transparent" - - Behavior on color { HColorAnimation { factor: 0.5 } } - } } - contentItem: HRowLayout { - spacing: button.spacing - - HIcon { - id: ico - svgName: loading ? "hourglass" : iconName - - Layout.fillHeight: true - Layout.alignment: Qt.AlignCenter - } - - HLabel { - id: label - text: button.text - visible: Boolean(text) - color: theme.controls.button.text - horizontalAlignment: Text.AlignHCenter - verticalAlignment: Text.AlignVCenter - - Layout.fillWidth: true - Layout.fillHeight: true - } + contentItem: HButtonContent { + id: contentItem + button: button + buttonTheme: theme.controls.button } } diff --git a/src/qml/Base/HButtonBackground.qml b/src/qml/Base/HButtonBackground.qml new file mode 100644 index 00000000..b9ee24cb --- /dev/null +++ b/src/qml/Base/HButtonBackground.qml @@ -0,0 +1,29 @@ +import QtQuick 2.12 +import QtQuick.Controls 2.12 + +HRectangle { + opacity: enabled ? 1 : theme.disabledElementsOpacity + + + property AbstractButton button + property QtObject buttonTheme + + + Behavior on opacity { HNumberAnimation {} } + + + HRectangle { + anchors.fill: parent + radius: parent.radius + color: button.checked ? buttonTheme.checkedOverlay : + + button.enabled && button.pressed ? buttonTheme.pressedOverlay : + + (button.enabled && button.hovered) || button.visualFocus ? + buttonTheme.hoveredOverlay : + + "transparent" + + Behavior on color { HColorAnimation { factor: 0.5 } } + } +} diff --git a/src/qml/Base/HButtonContent.qml b/src/qml/Base/HButtonContent.qml new file mode 100644 index 00000000..e5e4b8da --- /dev/null +++ b/src/qml/Base/HButtonContent.qml @@ -0,0 +1,41 @@ +import QtQuick 2.12 +import QtQuick.Controls 2.12 +import QtQuick.Layouts 1.12 + +HRowLayout { + spacing: button.spacing + opacity: enabled ? 1 : theme.disabledElementsOpacity + + + property AbstractButton button + property QtObject buttonTheme + + readonly property alias icon: icon + readonly property alias label: label + + + Behavior on opacity { HNumberAnimation {} } + + + HIcon { + id: icon + svgName: button.icon.name + colorize: button.icon.color + cache: button.icon.cache + + Layout.fillHeight: true + Layout.alignment: Qt.AlignCenter + } + + HLabel { + id: label + text: button.text + visible: Boolean(text) + color: buttonTheme.text + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + + Layout.fillWidth: true + Layout.fillHeight: true + } +} diff --git a/src/qml/Base/HInterfaceBox.qml b/src/qml/Base/HInterfaceBox.qml index 83194103..076432b5 100644 --- a/src/qml/Base/HInterfaceBox.qml +++ b/src/qml/Base/HInterfaceBox.qml @@ -73,7 +73,7 @@ HRectangle { id: button text: modelData.text - iconName: modelData.iconName || "" + icon.name: modelData.iconName || "" enabled: modelData.enabled onClicked: buttonCallbacks[modelData.name](button) diff --git a/src/qml/Base/HMenuItem.qml b/src/qml/Base/HMenuItem.qml index 243dd848..0aafb816 100644 --- a/src/qml/Base/HMenuItem.qml +++ b/src/qml/Base/HMenuItem.qml @@ -2,4 +2,26 @@ import QtQuick 2.12 import QtQuick.Controls 2.12 MenuItem { + id: menuItem + spacing: theme.spacing + leftPadding: spacing / 1.5 + rightPadding: spacing / 1.5 + topPadding: spacing / 2 + bottomPadding: spacing / 2 + + + readonly property alias iconItem: contentItem.icon + readonly property alias label: contentItem.label + + + background: HButtonBackground { + button: menuItem + buttonTheme: theme.controls.menuItem + } + + contentItem: HButtonContent { + id: contentItem + button: menuItem + buttonTheme: theme.controls.menuItem + } } diff --git a/src/qml/Chat/Banners/Banner.qml b/src/qml/Chat/Banners/Banner.qml index 0a0c3715..8e453b92 100644 --- a/src/qml/Chat/Banners/Banner.qml +++ b/src/qml/Chat/Banners/Banner.qml @@ -71,7 +71,7 @@ HRectangle { HButton { id: button text: modelData.text - iconName: modelData.iconName + icon.name: modelData.iconName onClicked: buttonCallbacks[modelData.name](button) Layout.preferredHeight: theme.baseElementsHeight diff --git a/src/qml/Chat/RoomHeader.qml b/src/qml/Chat/RoomHeader.qml index 3676200f..02276eee 100644 --- a/src/qml/Chat/RoomHeader.qml +++ b/src/qml/Chat/RoomHeader.qml @@ -75,8 +75,8 @@ HRectangle { ] HButton { backgroundColor: "transparent" - iconName: "room-view-" + modelData - ico.dimension: 22 + icon.name: "room-view-" + modelData + iconItem.dimension: 22 height: parent.height autoExclusive: true checked: activeButton == modelData @@ -101,7 +101,7 @@ HRectangle { visible: opacity > 0 backgroundColor: "transparent" - iconName: "reduced-room-buttons" + icon.name: "reduced-room-buttons" Behavior on opacity { HNumberAnimation { duration: buttonsAnimation.duration * 2 } diff --git a/src/qml/Pages/EditAccount/Encryption.qml b/src/qml/Pages/EditAccount/Encryption.qml index d6ee0e4a..6e4da196 100644 --- a/src/qml/Pages/EditAccount/Encryption.qml +++ b/src/qml/Pages/EditAccount/Encryption.qml @@ -33,7 +33,7 @@ HColumnLayout { HRowLayout { HButton { id: exportButton - iconName: "export-keys" + icon.name: "export-keys" text: qsTr("Export") enabled: false @@ -43,7 +43,7 @@ HColumnLayout { HButton { id: importButton - iconName: "import-keys" + icon.name: "import-keys" text: qsTr("Import") Layout.fillWidth: true diff --git a/src/qml/Pages/EditAccount/Profile.qml b/src/qml/Pages/EditAccount/Profile.qml index a3d0ff94..7687c4b4 100644 --- a/src/qml/Pages/EditAccount/Profile.qml +++ b/src/qml/Pages/EditAccount/Profile.qml @@ -178,7 +178,7 @@ HGridLayout { property bool avatarChangeRunning: false id: saveButton - iconName: "apply" + icon.name: "apply" text: qsTr("Apply") loading: nameChangeRunning || avatarChangeRunning enabled: @@ -190,7 +190,7 @@ HGridLayout { } HButton { - iconName: "cancel" + icon.name: "cancel" text: qsTr("Cancel") enabled: saveButton.enabled && ! saveButton.loading onClicked: cancelChanges() diff --git a/src/qml/Pages/SignIn.qml b/src/qml/Pages/SignIn.qml index 1fe7e48b..43d12abf 100644 --- a/src/qml/Pages/SignIn.qml +++ b/src/qml/Pages/SignIn.qml @@ -63,8 +63,8 @@ HPage { model: ["username", "email", "phone"] HButton { - iconName: modelData - ico.dimension: 24 + icon.name: modelData + iconItem.dimension: 24 circle: true checked: loginWith == modelData enabled: modelData == "username" diff --git a/src/qml/SidePane/DelegateAccount.qml b/src/qml/SidePane/DelegateAccount.qml index 2d01773f..1cb45e37 100644 --- a/src/qml/SidePane/DelegateAccount.qml +++ b/src/qml/SidePane/DelegateAccount.qml @@ -51,7 +51,7 @@ HTileDelegate { HButton { id: expand - iconName: "expand" + icon.name: "expand" backgroundColor: "transparent" padding: sidePane.currentSpacing / 1.5 rightPadding: leftPadding @@ -60,9 +60,9 @@ HTileDelegate { visible: opacity > 0 opacity: accountDelegate.forceExpand ? 0 : 1 - ico.transform: Rotation { - origin.x: expand.ico.dimension / 2 - origin.y: expand.ico.dimension / 2 + iconItem.transform: Rotation { + origin.x: expand.iconItem.dimension / 2 + origin.y: expand.iconItem.dimension / 2 angle: collapsed ? 180 : 90 Behavior on angle { HNumberAnimation {} } diff --git a/src/qml/SidePane/PaneToolBar.qml b/src/qml/SidePane/PaneToolBar.qml index 27661df6..1fedece1 100644 --- a/src/qml/SidePane/PaneToolBar.qml +++ b/src/qml/SidePane/PaneToolBar.qml @@ -12,7 +12,7 @@ HRowLayout { Layout.preferredHeight: theme.baseElementsHeight HButton { - iconName: "add-account" + icon.name: "add-account" backgroundColor: theme.sidePane.settingsButton.background onClicked: pageLoader.showPage("SignIn") diff --git a/src/themes/Default.qpl b/src/themes/Default.qpl index 7453564a..04f573fa 100644 --- a/src/themes/Default.qpl +++ b/src/themes/Default.qpl @@ -96,15 +96,23 @@ controls: color pressedOverlay: hsluv(0, 0, 50, 0.6) color checkedOverlay: colors.accentBackground + menuItem: + color background: controls.button.background + color text: controls.button.text + + color hoveredOverlay: controls.button.hoveredOverlay + color pressedOverlay: controls.button.hoveredOverlay + color checkedOverlay: controls.button.hoveredOverlay + checkBox: color checkIconColor: colors.strongAccentBackground - color boxBackground: colors.inputBackground + color boxBackground: controls.button.background color boxBorder: hsluv(0, 0, 50, 0.3) color boxHoveredBorder: colors.accentBackground color boxPressedBorder: colors.strongAccentBackground - color text: colors.text + color text: controls.button.text listView: color highlight: hsluv(0, 0, 50, 0.3)