Rework button visuals
This commit is contained in:
parent
efeb8bb93f
commit
8d91d4b120
@ -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
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
@ -66,7 +66,7 @@ Item {
|
||||
id: background
|
||||
anchors.fill: parent
|
||||
anchors.margins: app.margins / 2
|
||||
radius: Style.tileRadius
|
||||
radius: Style.cornerRadius
|
||||
|
||||
gradient: Gradient {
|
||||
GradientStop {
|
||||
|
||||
@ -55,7 +55,7 @@ Item {
|
||||
Rectangle {
|
||||
id: clipRect
|
||||
anchors.fill: parent
|
||||
radius: Style.tileRadius
|
||||
radius: Style.cornerRadius
|
||||
color: Style.tileOverlayColor
|
||||
}
|
||||
|
||||
|
||||
@ -25,7 +25,7 @@ Item {
|
||||
Rectangle {
|
||||
id: clipRect
|
||||
anchors.fill: parent
|
||||
radius: Style.tileRadius
|
||||
radius: Style.cornerRadius
|
||||
}
|
||||
|
||||
LinearGradient {
|
||||
|
||||
@ -70,7 +70,7 @@ Item {
|
||||
}
|
||||
}
|
||||
|
||||
radius: Style.tileRadius
|
||||
radius: Style.cornerRadius
|
||||
}
|
||||
|
||||
Image {
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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" }
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -195,7 +195,7 @@ ThingPageBase {
|
||||
Rectangle {
|
||||
id: mask
|
||||
anchors.fill: parent
|
||||
radius: Style.tileRadius
|
||||
radius: Style.cornerRadius
|
||||
color: "blue"
|
||||
visible: false
|
||||
}
|
||||
|
||||
@ -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
|
||||
|
||||
Reference in New Issue
Block a user