Zergling_man/moment
Zergling_man/moment
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor HButton

Browse Source
This commit is contained in:
miruka 2019-08-20 17:41:24 -04:00
parent 7e7852b51e
commit ce128d5ab5
14 changed files with 101 additions and 187 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
TODO.md
View File

@ -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)

71
src/qml/Base/HBaseButton.qml
View File

@ -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()
}
}
}

63
src/qml/Base/HButton.qml Normal file
View File

@ -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
}
}
}

2
src/qml/Base/HIcon.qml
View File

@ -1,6 +1,8 @@
import QtQuick 2.12
HImage {
visible: Boolean(svgName)
property string svgName: ""
property int dimension: 20

4
src/qml/Base/HInterfaceBox.qml
View File

@ -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

74
src/qml/Base/HUIButton.qml
View File

@ -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
}
}

2
src/qml/Chat/Banners/Banner.qml
View File

@ -68,7 +68,7 @@ HRectangle {
id: bannerRepeater
model: []
HUIButton {
HButton {
id: button
text: modelData.text
iconName: modelData.iconName

19
src/qml/Chat/RoomHeader.qml
View File

@ -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 {

4
src/qml/Pages/EditAccount/Encryption.qml
View File

@ -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")

10
src/qml/Pages/EditAccount/Profile.qml
View File

@ -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()
}
}
}

3
src/qml/Pages/SignIn.qml
View File

@ -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
}
}

10
src/qml/SidePane/DelegateAccount.qml
View File

@ -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 {} }

6
src/qml/SidePane/PaneToolBar.qml
View File

@ -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 {

16
src/themes/Default.qpl
View File

@ -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"