From ce128d5ab55ad057067910ab1c2a2668d1f94843 Mon Sep 17 00:00:00 2001 From: miruka Date: Tue, 20 Aug 2019 17:41:24 -0400 Subject: [PATCH] Refactor HButton --- TODO.md | 4 +- src/qml/Base/HBaseButton.qml | 71 ----------------------- src/qml/Base/HButton.qml | 63 ++++++++++++++++++++ src/qml/Base/HIcon.qml | 2 + src/qml/Base/HInterfaceBox.qml | 4 +- src/qml/Base/HUIButton.qml | 74 ------------------------ src/qml/Chat/Banners/Banner.qml | 2 +- src/qml/Chat/RoomHeader.qml | 19 +++--- src/qml/Pages/EditAccount/Encryption.qml | 4 +- src/qml/Pages/EditAccount/Profile.qml | 10 ++-- src/qml/Pages/SignIn.qml | 3 +- src/qml/SidePane/DelegateAccount.qml | 10 ++-- src/qml/SidePane/PaneToolBar.qml | 6 +- src/themes/Default.qpl | 16 ++--- 14 files changed, 101 insertions(+), 187 deletions(-) delete mode 100644 src/qml/Base/HBaseButton.qml create mode 100644 src/qml/Base/HButton.qml delete mode 100644 src/qml/Base/HUIButton.qml diff --git a/TODO.md b/TODO.md index 1944c886..a169d394 100644 --- a/TODO.md +++ b/TODO.md @@ -6,8 +6,8 @@ - Make the icon blue in EditAccount when hovering and no avatar set - HButton - - Control: hovered, visualFocus, enabled - - Border and pressed color in theme / checkbox theming + - visualFocus + - Checkbox theming - `^property type name$` - Use [Animators](https://doc.qt.io/qt-5/qml-qtquick-animator.html) diff --git a/src/qml/Base/HBaseButton.qml b/src/qml/Base/HBaseButton.qml deleted file mode 100644 index d2d36e47..00000000 --- a/src/qml/Base/HBaseButton.qml +++ /dev/null @@ -1,71 +0,0 @@ -import QtQuick 2.12 -import QtQuick.Controls 2.12 -import QtQuick.Layouts 1.12 - -Button { - property bool circle: false - - property color backgroundColor: theme.controls.button.background - property alias overlayOpacity: buttonBackgroundOverlay.opacity - property bool checkedLightens: false - - signal canceled - signal clicked - signal doubleClicked - signal entered - signal exited - signal pressAndHold - signal pressed - signal released - - id: button - - background: Rectangle { - id: buttonBackground - color: - enabled ? - (checked ? - theme.controls.button.checkedBackground : backgroundColor) : - theme.controls.button.disabledBackground - radius: circle ? height : 0 - - Behavior on color { HColorAnimation { factor: 0.5 } } - - Rectangle { - id: buttonBackgroundOverlay - anchors.fill: parent - radius: parent.radius - color: theme.controls.button.hoveredOverlay - opacity: 0 - - Behavior on opacity { HNumberAnimation { factor: 0.5 } } - } - } - - MouseArea { - anchors.fill: parent - hoverEnabled: true - - onCanceled: button.canceled() - onClicked: button.clicked() - onDoubleClicked: button.doubleClicked() - onEntered: { - overlayOpacity = checked ? 0 : 0.15 - button.entered() - } - onExited: { - overlayOpacity = 0 - button.exited() - } - onPressAndHold: button.pressAndHold() - onPressed: { - overlayOpacity += 0.15 - button.pressed() - } - onReleased: { - if (checkable) { checked = ! checked } - overlayOpacity = checked ? 0 : 0.15 - button.released() - } - } -} diff --git a/src/qml/Base/HButton.qml b/src/qml/Base/HButton.qml new file mode 100644 index 00000000..4653f241 --- /dev/null +++ b/src/qml/Base/HButton.qml @@ -0,0 +1,63 @@ +import QtQuick 2.12 +import QtQuick.Controls 2.12 +import QtQuick.Layouts 1.12 + +Button { + id: button + opacity: enabled ? 1 : theme.controls.button.disabledOpacity + onVisibleChanged: if (! visible) loading = false + + + readonly property alias ico: ico + readonly property alias label: label + + property string iconName: "" + property color backgroundColor: theme.controls.button.background + property bool loading: false + property bool circle: false + + + background: HRectangle { + 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 ? + theme.controls.button.hoveredOverlay : + + "transparent" + + Behavior on color { HColorAnimation { factor: 0.5 } } + } + } + + contentItem: HRowLayout { + spacing: button.spacing + + HIcon { + id: ico + x: button.leftPadding + y: button.topPadding + button.availableHeight / 2 - height / 2 + svgName: loading ? "hourglass" : iconName + } + + HLabel { + id: label + text: button.text + visible: Boolean(text) + color: theme.controls.button.text + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + + Layout.fillWidth: true + } + } +} diff --git a/src/qml/Base/HIcon.qml b/src/qml/Base/HIcon.qml index c0591ec9..52c5d1ee 100644 --- a/src/qml/Base/HIcon.qml +++ b/src/qml/Base/HIcon.qml @@ -1,6 +1,8 @@ import QtQuick 2.12 HImage { + visible: Boolean(svgName) + property string svgName: "" property int dimension: 20 diff --git a/src/qml/Base/HInterfaceBox.qml b/src/qml/Base/HInterfaceBox.qml index 57ede4fc..83194103 100644 --- a/src/qml/Base/HInterfaceBox.qml +++ b/src/qml/Base/HInterfaceBox.qml @@ -68,13 +68,13 @@ HRectangle { id: interfaceButtonsRepeater model: [] - HUIButton { + HButton { property string name: modelData.name id: button text: modelData.text iconName: modelData.iconName || "" - enabled: modelData.enabled === false ? false : true + enabled: modelData.enabled onClicked: buttonCallbacks[modelData.name](button) Layout.fillWidth: true diff --git a/src/qml/Base/HUIButton.qml b/src/qml/Base/HUIButton.qml deleted file mode 100644 index c677ebdc..00000000 --- a/src/qml/Base/HUIButton.qml +++ /dev/null @@ -1,74 +0,0 @@ -import QtQuick 2.12 -import QtQuick.Controls 2.12 -import QtQuick.Layouts 1.12 -import QtGraphicalEffects 1.12 - -HBaseButton { - property int contentWidth: 0 - property int horizontalMargin: 0 - property int verticalMargin: 0 - property int fontSize: theme.fontSize.normal - - property string iconName: "" - property var iconDimension: null - property var iconTransform: null - - property bool loading: false - - readonly property alias visibility: button.visible - onVisibilityChanged: if (! visibility) { loading = false } - - id: button - - Component { - id: buttonContent - - HRowLayout { - id: contentLayout - spacing: button.text && iconName ? theme.spacing : 0 - Component.onCompleted: contentWidth = implicitWidth - - HIcon { - svgName: loading ? "hourglass" : iconName - dimension: iconDimension || contentLayout.height - transform: iconTransform - opacity: button.enabled ? 1 : 0.7 - Behavior on opacity { HNumberAnimation {} } - - Layout.topMargin: verticalMargin - Layout.bottomMargin: verticalMargin - Layout.leftMargin: horizontalMargin - Layout.rightMargin: horizontalMargin - } - - HLabel { - visible: Boolean(text) - text: button.text - font.pixelSize: fontSize - horizontalAlignment: Text.AlignHCenter - verticalAlignment: Text.AlignVCenter - color: button.enabled ? - theme.controls.button.text : - theme.controls.button.disabledText - - Layout.fillWidth: true - } - } - } - - Component { - id: loadingOverlay - HRowLayout { - HIcon { - svgName: "hourglass" - Layout.preferredWidth: contentWidth || -1 - Layout.alignment: Qt.AlignCenter - } - } - } - - contentItem: HLoader { - sourceComponent: - loading && ! iconName ? loadingOverlay : buttonContent - } -} diff --git a/src/qml/Chat/Banners/Banner.qml b/src/qml/Chat/Banners/Banner.qml index 5ab31a72..0a0c3715 100644 --- a/src/qml/Chat/Banners/Banner.qml +++ b/src/qml/Chat/Banners/Banner.qml @@ -68,7 +68,7 @@ HRectangle { id: bannerRepeater model: [] - HUIButton { + HButton { id: button text: modelData.text iconName: modelData.iconName diff --git a/src/qml/Chat/RoomHeader.qml b/src/qml/Chat/RoomHeader.qml index badce981..3676200f 100644 --- a/src/qml/Chat/RoomHeader.qml +++ b/src/qml/Chat/RoomHeader.qml @@ -73,14 +73,15 @@ HRectangle { model: [ "members", "files", "notifications", "history", "settings" ] - HUIButton { - backgroundColor: theme.chat.selectViewBar.background + HButton { + backgroundColor: "transparent" iconName: "room-view-" + modelData - iconDimension: 22 + ico.dimension: 22 + height: parent.height autoExclusive: true checked: activeButton == modelData - onClicked: activeButton = activeButton == modelData ? - null : modelData + onClicked: activeButton = + activeButton == modelData ? null : modelData } } @@ -90,16 +91,16 @@ HRectangle { } } - HUIButton { + HButton { id: expandButton z: 1 - width: theme.controls.avatar.size - height: width + width: height + height: parent.height anchors.right: parent.right opacity: collapseButtons ? 1 : 0 visible: opacity > 0 - backgroundColor: theme.chat.selectViewBar.background + backgroundColor: "transparent" iconName: "reduced-room-buttons" Behavior on opacity { diff --git a/src/qml/Pages/EditAccount/Encryption.qml b/src/qml/Pages/EditAccount/Encryption.qml index 1dab2249..d6ee0e4a 100644 --- a/src/qml/Pages/EditAccount/Encryption.qml +++ b/src/qml/Pages/EditAccount/Encryption.qml @@ -31,7 +31,7 @@ HColumnLayout { } HRowLayout { - HUIButton { + HButton { id: exportButton iconName: "export-keys" text: qsTr("Export") @@ -41,7 +41,7 @@ HColumnLayout { Layout.alignment: Qt.AlignBottom } - HUIButton { + HButton { id: importButton iconName: "import-keys" text: qsTr("Import") diff --git a/src/qml/Pages/EditAccount/Profile.qml b/src/qml/Pages/EditAccount/Profile.qml index a175650a..a3d0ff94 100644 --- a/src/qml/Pages/EditAccount/Profile.qml +++ b/src/qml/Pages/EditAccount/Profile.qml @@ -173,7 +173,7 @@ HGridLayout { HRowLayout { Layout.alignment: Qt.AlignBottom - HUIButton { + HButton { property bool nameChangeRunning: false property bool avatarChangeRunning: false @@ -183,22 +183,20 @@ HGridLayout { loading: nameChangeRunning || avatarChangeRunning enabled: nameField.changed || aliasField.changed || avatar.changed + onClicked: applyChanges() Layout.fillWidth: true Layout.alignment: Qt.AlignBottom - - onClicked: applyChanges() } - HUIButton { + HButton { iconName: "cancel" text: qsTr("Cancel") enabled: saveButton.enabled && ! saveButton.loading + onClicked: cancelChanges() Layout.fillWidth: true Layout.alignment: Qt.AlignBottom - - onClicked: cancelChanges() } } } diff --git a/src/qml/Pages/SignIn.qml b/src/qml/Pages/SignIn.qml index aaca006d..05be13b2 100644 --- a/src/qml/Pages/SignIn.qml +++ b/src/qml/Pages/SignIn.qml @@ -62,13 +62,12 @@ HPage { Repeater { model: ["username", "email", "phone"] - HUIButton { + HButton { iconName: modelData circle: true checked: loginWith == modelData enabled: modelData == "username" autoExclusive: true - checkedLightens: true onClicked: loginWith = modelData } } diff --git a/src/qml/SidePane/DelegateAccount.qml b/src/qml/SidePane/DelegateAccount.qml index 3c509cc8..1f862cb1 100644 --- a/src/qml/SidePane/DelegateAccount.qml +++ b/src/qml/SidePane/DelegateAccount.qml @@ -102,10 +102,10 @@ HInteractiveRectangle { Layout.fillHeight: true } - HUIButton { + HButton { id: expandButton iconName: "expand" - iconDimension: 16 + ico.dimension: 16 backgroundColor: "transparent" leftPadding: sidePane.currentSpacing rightPadding: leftPadding @@ -118,9 +118,9 @@ HInteractiveRectangle { 1 Behavior on opacity { HNumberAnimation {} } - iconTransform: Rotation { - origin.x: expandButton.iconDimension / 2 - origin.y: expandButton.iconDimension / 2 + ico.transform: Rotation { + origin.x: expandButton.ico.dimension / 2 + origin.y: expandButton.ico.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 02c05787..27661df6 100644 --- a/src/qml/SidePane/PaneToolBar.qml +++ b/src/qml/SidePane/PaneToolBar.qml @@ -11,12 +11,12 @@ HRowLayout { Layout.fillWidth: true Layout.preferredHeight: theme.baseElementsHeight - HUIButton { + HButton { iconName: "add-account" backgroundColor: theme.sidePane.settingsButton.background - Layout.preferredHeight: parent.height - onClicked: pageLoader.showPage("SignIn") + + Layout.preferredHeight: parent.height } HTextField { diff --git a/src/themes/Default.qpl b/src/themes/Default.qpl index cbe9cbcc..53c1923d 100644 --- a/src/themes/Default.qpl +++ b/src/themes/Default.qpl @@ -88,14 +88,13 @@ controls: color background: colors.strongBackground button: - color background: colors.inputBackground - color checkedBackground: colors.accentBackground - color disabledBackground: - hsluv(0, 0, colors.intensity * 2, Math.min(0.6, opacity)) - - color hoveredOverlay: hsluv(0, 0, 100) + color background: colors.inputBackground color text: colors.text - color disabledText: colors.dimmerText + real disabledOpacity: 0.3 + + color hoveredOverlay: hsluv(0, 0, 50, 0.3) + color pressedOverlay: hsluv(0, 0, 50, 0.6) + color checkedOverlay: colors.accentBackground interactiveRectangle: color background: "transparent" @@ -191,9 +190,6 @@ chat: roomSidePane: color background: colors.mediumBackground - selectViewBar: - color background: chat.roomHeader.background - eventList: int ownEventsOnRightUnderWidth: 768 color background: "transparent"