Rework button visuals

This commit is contained in:
Michael Zanetti 2021-05-14 23:24:46 +02:00
parent efeb8bb93f
commit 8d91d4b120
17 changed files with 26 additions and 24 deletions

View File

@ -75,13 +75,13 @@ T.Button {
// TODO: Add a proper ripple/ink effect for mouse/touch input and focus state
background: Rectangle {
implicitWidth: 64
implicitHeight: 40
implicitHeight: Style.smallDelegateHeight
// external vertical padding is 6 (to increase touch area)
y: 6
width: parent.width
height: parent.height - 12
radius: height / 2
radius: Style.smallCornerRadius
color: !control.enabled ? control.Material.buttonDisabledColor :
control.highlighted ? control.Material.highlightedButtonColor : control.Material.accentColor

View File

@ -80,7 +80,7 @@ T.Button {
y: 6
width: parent.width
height: parent.height - 12
radius: height / 2
radius: Style.smallCornerRadius
color: !control.enabled ? control.Material.buttonDisabledColor :
control.highlighted ? control.Material.highlightedButtonColor : control.Material.accentColor

View File

@ -74,13 +74,13 @@ T.Button {
// TODO: Add a proper ripple/ink effect for mouse/touch input and focus state
background: Rectangle {
implicitWidth: 64
implicitHeight: 40
implicitHeight: Style.smallDelegateHeight
// external vertical padding is 6 (to increase touch area)
y: 6
width: parent.width
height: parent.height - 12
radius: height / 2
radius: Style.smallCornerRadius
color: !control.enabled ? control.Material.buttonDisabledColor :
control.highlighted ? control.Material.highlightedButtonColor : control.Material.accentColor

View File

@ -74,13 +74,13 @@ T.Button {
// TODO: Add a proper ripple/ink effect for mouse/touch input and focus state
background: Rectangle {
implicitWidth: 64
implicitHeight: 40
implicitHeight: Style.smallDelegateHeight
// external vertical padding is 6 (to increase touch area)
y: 6
width: parent.width
height: parent.height - 12
radius: height / 2
radius: Style.smallCornerRadius
color: !control.enabled ? control.Material.buttonDisabledColor :
control.highlighted ? control.Material.highlightedButtonColor : control.Material.accentColor

View File

@ -74,13 +74,13 @@ T.Button {
// TODO: Add a proper ripple/ink effect for mouse/touch input and focus state
background: Rectangle {
implicitWidth: 64
implicitHeight: 40
implicitHeight: Style.smallDelegateHeight
// external vertical padding is 6 (to increase touch area)
y: 6
width: parent.width
height: parent.height - 12
radius: height / 2
radius: Style.smallCornerRadius
color: !control.enabled ? control.Material.buttonDisabledColor :
control.highlighted ? control.Material.highlightedButtonColor : control.Material.accentColor

View File

@ -15,7 +15,9 @@ Item {
property color tileOverlayColor: Qt.tint(backgroundColor, Qt.rgba(foregroundColor.r, foregroundColor.g, foregroundColor.b, 0.1))
property color tileOverlayForegroundColor: foregroundColor
property color tileOverlayIconColor: iconColor
property int tileRadius: 6
property int cornerRadius: 6
property int smallCornerRadius: 4
readonly property int smallMargins: 8
readonly property int margins: 16

View File

@ -66,7 +66,7 @@ Item {
id: background
anchors.fill: parent
anchors.margins: app.margins / 2
radius: Style.tileRadius
radius: Style.cornerRadius
gradient: Gradient {
GradientStop {

View File

@ -55,7 +55,7 @@ Item {
Rectangle {
id: clipRect
anchors.fill: parent
radius: Style.tileRadius
radius: Style.cornerRadius
color: Style.tileOverlayColor
}

View File

@ -25,7 +25,7 @@ Item {
Rectangle {
id: clipRect
anchors.fill: parent
radius: Style.tileRadius
radius: Style.cornerRadius
}
LinearGradient {

View File

@ -70,7 +70,7 @@ Item {
}
}
radius: Style.tileRadius
radius: Style.cornerRadius
}
Image {

View File

@ -38,7 +38,7 @@ import Nymea 1.0
ChartView {
id: chart
backgroundColor: Style.tileBackgroundColor
backgroundRoundness: Style.tileRadius
backgroundRoundness: Style.cornerRadius
theme: ChartView.ChartThemeLight
legend.labelColor: Style.foregroundColor
legend.font.pixelSize: app.smallFont

View File

@ -81,7 +81,7 @@ Item {
margins.left: 0
margins.right: 0
backgroundColor: Style.tileBackgroundColor
backgroundRoundness: Style.tileRadius
backgroundRoundness: Style.cornerRadius
legend.visible: false
legend.labelColor: Style.foregroundColor

View File

@ -123,7 +123,7 @@ ThingsListPageBase {
color: itemDelegate.tileColored ? itemDelegate.colorState.value : "#00000000"
implicitHeight: contentColumn.implicitHeight
Behavior on implicitHeight { NumberAnimation { duration: 100 } }
radius: Style.tileRadius
radius: Style.cornerRadius
ColumnLayout {
id: contentColumn
@ -253,7 +253,7 @@ ThingsListPageBase {
Layout.fillWidth: true
Layout.preferredHeight: 12
visible: itemDelegate.powerState.value === true && itemDelegate.brightnessState != null
radius: Style.tileRadius
radius: Style.cornerRadius
color: Style.tileOverlayColor
enabled: itemDelegate.isEnabled

View File

@ -150,7 +150,7 @@ ThingsListPageBase {
anchors.centerIn: parent
height: parent.width
width: parent.height
radius: Style.tileRadius
radius: Style.cornerRadius
gradient: Gradient {
GradientStop { position: 0; color: "#00FF0000" }
GradientStop { position: 0.2; color: "#15FF0000" }

View File

@ -96,7 +96,7 @@ ThingPageBase {
contentItem: Rectangle {
color: model.color
radius: Style.tileRadius
radius: Style.cornerRadius
ColorIcon {
anchors.fill: parent
@ -157,7 +157,7 @@ ThingPageBase {
Rectangle {
Layout.preferredWidth: Style.hugeIconSize
Layout.preferredHeight: width
radius: Style.tileRadius
radius: Style.cornerRadius
color: root.colorState ? root.colorState.value : "red"
// color: Qt.tint(Style.backgroundColor, Qt.rgba(Style.foregroundColor.r, Style.foregroundColor.g, Style.foregroundColor.b, 0.1))
ColorIcon {

View File

@ -195,7 +195,7 @@ ThingPageBase {
Rectangle {
id: mask
anchors.fill: parent
radius: Style.tileRadius
radius: Style.cornerRadius
color: "blue"
visible: false
}

View File

@ -83,7 +83,7 @@ MainViewBase {
legend.font.pixelSize: app.smallFont
legend.visible: false
backgroundColor: Style.tileBackgroundColor
backgroundRoundness: Style.tileRadius
backgroundRoundness: Style.cornerRadius
titleColor: Style.foregroundColor
title: qsTr("Power usage history")
@ -359,7 +359,7 @@ MainViewBase {
Layout.fillWidth: true
Layout.preferredHeight: width * .7
backgroundColor: Style.tileBackgroundColor
backgroundRoundness: Style.tileRadius
backgroundRoundness: Style.cornerRadius
meters: producers
title: qsTr("Total produced energy")
visible: producers.count > 0