Merge PR #594: Rework button visuals
This commit is contained in:
commit
d9fcb344df
@ -75,13 +75,13 @@ T.Button {
|
|||||||
// TODO: Add a proper ripple/ink effect for mouse/touch input and focus state
|
// TODO: Add a proper ripple/ink effect for mouse/touch input and focus state
|
||||||
background: Rectangle {
|
background: Rectangle {
|
||||||
implicitWidth: 64
|
implicitWidth: 64
|
||||||
implicitHeight: 40
|
implicitHeight: Style.smallDelegateHeight
|
||||||
|
|
||||||
// external vertical padding is 6 (to increase touch area)
|
// external vertical padding is 6 (to increase touch area)
|
||||||
y: 6
|
y: 6
|
||||||
width: parent.width
|
width: parent.width
|
||||||
height: parent.height - 12
|
height: parent.height - 12
|
||||||
radius: height / 2
|
radius: Style.smallCornerRadius
|
||||||
color: !control.enabled ? control.Material.buttonDisabledColor :
|
color: !control.enabled ? control.Material.buttonDisabledColor :
|
||||||
control.highlighted ? control.Material.highlightedButtonColor : control.Material.accentColor
|
control.highlighted ? control.Material.highlightedButtonColor : control.Material.accentColor
|
||||||
|
|
||||||
|
|||||||
@ -80,7 +80,7 @@ T.Button {
|
|||||||
y: 6
|
y: 6
|
||||||
width: parent.width
|
width: parent.width
|
||||||
height: parent.height - 12
|
height: parent.height - 12
|
||||||
radius: height / 2
|
radius: Style.smallCornerRadius
|
||||||
color: !control.enabled ? control.Material.buttonDisabledColor :
|
color: !control.enabled ? control.Material.buttonDisabledColor :
|
||||||
control.highlighted ? control.Material.highlightedButtonColor : control.Material.accentColor
|
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
|
// TODO: Add a proper ripple/ink effect for mouse/touch input and focus state
|
||||||
background: Rectangle {
|
background: Rectangle {
|
||||||
implicitWidth: 64
|
implicitWidth: 64
|
||||||
implicitHeight: 40
|
implicitHeight: Style.smallDelegateHeight
|
||||||
|
|
||||||
// external vertical padding is 6 (to increase touch area)
|
// external vertical padding is 6 (to increase touch area)
|
||||||
y: 6
|
y: 6
|
||||||
width: parent.width
|
width: parent.width
|
||||||
height: parent.height - 12
|
height: parent.height - 12
|
||||||
radius: height / 2
|
radius: Style.smallCornerRadius
|
||||||
color: !control.enabled ? control.Material.buttonDisabledColor :
|
color: !control.enabled ? control.Material.buttonDisabledColor :
|
||||||
control.highlighted ? control.Material.highlightedButtonColor : control.Material.accentColor
|
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
|
// TODO: Add a proper ripple/ink effect for mouse/touch input and focus state
|
||||||
background: Rectangle {
|
background: Rectangle {
|
||||||
implicitWidth: 64
|
implicitWidth: 64
|
||||||
implicitHeight: 40
|
implicitHeight: Style.smallDelegateHeight
|
||||||
|
|
||||||
// external vertical padding is 6 (to increase touch area)
|
// external vertical padding is 6 (to increase touch area)
|
||||||
y: 6
|
y: 6
|
||||||
width: parent.width
|
width: parent.width
|
||||||
height: parent.height - 12
|
height: parent.height - 12
|
||||||
radius: height / 2
|
radius: Style.smallCornerRadius
|
||||||
color: !control.enabled ? control.Material.buttonDisabledColor :
|
color: !control.enabled ? control.Material.buttonDisabledColor :
|
||||||
control.highlighted ? control.Material.highlightedButtonColor : control.Material.accentColor
|
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
|
// TODO: Add a proper ripple/ink effect for mouse/touch input and focus state
|
||||||
background: Rectangle {
|
background: Rectangle {
|
||||||
implicitWidth: 64
|
implicitWidth: 64
|
||||||
implicitHeight: 40
|
implicitHeight: Style.smallDelegateHeight
|
||||||
|
|
||||||
// external vertical padding is 6 (to increase touch area)
|
// external vertical padding is 6 (to increase touch area)
|
||||||
y: 6
|
y: 6
|
||||||
width: parent.width
|
width: parent.width
|
||||||
height: parent.height - 12
|
height: parent.height - 12
|
||||||
radius: height / 2
|
radius: Style.smallCornerRadius
|
||||||
color: !control.enabled ? control.Material.buttonDisabledColor :
|
color: !control.enabled ? control.Material.buttonDisabledColor :
|
||||||
control.highlighted ? control.Material.highlightedButtonColor : control.Material.accentColor
|
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 tileOverlayColor: Qt.tint(backgroundColor, Qt.rgba(foregroundColor.r, foregroundColor.g, foregroundColor.b, 0.1))
|
||||||
property color tileOverlayForegroundColor: foregroundColor
|
property color tileOverlayForegroundColor: foregroundColor
|
||||||
property color tileOverlayIconColor: iconColor
|
property color tileOverlayIconColor: iconColor
|
||||||
property int tileRadius: 6
|
|
||||||
|
property int cornerRadius: 6
|
||||||
|
property int smallCornerRadius: 4
|
||||||
|
|
||||||
readonly property int smallMargins: 8
|
readonly property int smallMargins: 8
|
||||||
readonly property int margins: 16
|
readonly property int margins: 16
|
||||||
|
|||||||
@ -66,7 +66,7 @@ Item {
|
|||||||
id: background
|
id: background
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
anchors.margins: app.margins / 2
|
anchors.margins: app.margins / 2
|
||||||
radius: Style.tileRadius
|
radius: Style.cornerRadius
|
||||||
|
|
||||||
gradient: Gradient {
|
gradient: Gradient {
|
||||||
GradientStop {
|
GradientStop {
|
||||||
|
|||||||
@ -55,7 +55,7 @@ Item {
|
|||||||
Rectangle {
|
Rectangle {
|
||||||
id: clipRect
|
id: clipRect
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
radius: Style.tileRadius
|
radius: Style.cornerRadius
|
||||||
color: Style.tileOverlayColor
|
color: Style.tileOverlayColor
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -25,7 +25,7 @@ Item {
|
|||||||
Rectangle {
|
Rectangle {
|
||||||
id: clipRect
|
id: clipRect
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
radius: Style.tileRadius
|
radius: Style.cornerRadius
|
||||||
}
|
}
|
||||||
|
|
||||||
LinearGradient {
|
LinearGradient {
|
||||||
|
|||||||
@ -70,7 +70,7 @@ Item {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
radius: Style.tileRadius
|
radius: Style.cornerRadius
|
||||||
}
|
}
|
||||||
|
|
||||||
Image {
|
Image {
|
||||||
|
|||||||
@ -38,7 +38,7 @@ import Nymea 1.0
|
|||||||
ChartView {
|
ChartView {
|
||||||
id: chart
|
id: chart
|
||||||
backgroundColor: Style.tileBackgroundColor
|
backgroundColor: Style.tileBackgroundColor
|
||||||
backgroundRoundness: Style.tileRadius
|
backgroundRoundness: Style.cornerRadius
|
||||||
theme: ChartView.ChartThemeLight
|
theme: ChartView.ChartThemeLight
|
||||||
legend.labelColor: Style.foregroundColor
|
legend.labelColor: Style.foregroundColor
|
||||||
legend.font.pixelSize: app.smallFont
|
legend.font.pixelSize: app.smallFont
|
||||||
|
|||||||
@ -81,7 +81,7 @@ Item {
|
|||||||
margins.left: 0
|
margins.left: 0
|
||||||
margins.right: 0
|
margins.right: 0
|
||||||
backgroundColor: Style.tileBackgroundColor
|
backgroundColor: Style.tileBackgroundColor
|
||||||
backgroundRoundness: Style.tileRadius
|
backgroundRoundness: Style.cornerRadius
|
||||||
legend.visible: false
|
legend.visible: false
|
||||||
legend.labelColor: Style.foregroundColor
|
legend.labelColor: Style.foregroundColor
|
||||||
|
|
||||||
|
|||||||
@ -123,7 +123,7 @@ ThingsListPageBase {
|
|||||||
color: itemDelegate.tileColored ? itemDelegate.colorState.value : "#00000000"
|
color: itemDelegate.tileColored ? itemDelegate.colorState.value : "#00000000"
|
||||||
implicitHeight: contentColumn.implicitHeight
|
implicitHeight: contentColumn.implicitHeight
|
||||||
Behavior on implicitHeight { NumberAnimation { duration: 100 } }
|
Behavior on implicitHeight { NumberAnimation { duration: 100 } }
|
||||||
radius: Style.tileRadius
|
radius: Style.cornerRadius
|
||||||
|
|
||||||
ColumnLayout {
|
ColumnLayout {
|
||||||
id: contentColumn
|
id: contentColumn
|
||||||
@ -253,7 +253,7 @@ ThingsListPageBase {
|
|||||||
Layout.fillWidth: true
|
Layout.fillWidth: true
|
||||||
Layout.preferredHeight: 12
|
Layout.preferredHeight: 12
|
||||||
visible: itemDelegate.powerState.value === true && itemDelegate.brightnessState != null
|
visible: itemDelegate.powerState.value === true && itemDelegate.brightnessState != null
|
||||||
radius: Style.tileRadius
|
radius: Style.cornerRadius
|
||||||
color: Style.tileOverlayColor
|
color: Style.tileOverlayColor
|
||||||
enabled: itemDelegate.isEnabled
|
enabled: itemDelegate.isEnabled
|
||||||
|
|
||||||
|
|||||||
@ -150,7 +150,7 @@ ThingsListPageBase {
|
|||||||
anchors.centerIn: parent
|
anchors.centerIn: parent
|
||||||
height: parent.width
|
height: parent.width
|
||||||
width: parent.height
|
width: parent.height
|
||||||
radius: Style.tileRadius
|
radius: Style.cornerRadius
|
||||||
gradient: Gradient {
|
gradient: Gradient {
|
||||||
GradientStop { position: 0; color: "#00FF0000" }
|
GradientStop { position: 0; color: "#00FF0000" }
|
||||||
GradientStop { position: 0.2; color: "#15FF0000" }
|
GradientStop { position: 0.2; color: "#15FF0000" }
|
||||||
|
|||||||
@ -96,7 +96,7 @@ ThingPageBase {
|
|||||||
|
|
||||||
contentItem: Rectangle {
|
contentItem: Rectangle {
|
||||||
color: model.color
|
color: model.color
|
||||||
radius: Style.tileRadius
|
radius: Style.cornerRadius
|
||||||
|
|
||||||
ColorIcon {
|
ColorIcon {
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
@ -157,7 +157,7 @@ ThingPageBase {
|
|||||||
Rectangle {
|
Rectangle {
|
||||||
Layout.preferredWidth: Style.hugeIconSize
|
Layout.preferredWidth: Style.hugeIconSize
|
||||||
Layout.preferredHeight: width
|
Layout.preferredHeight: width
|
||||||
radius: Style.tileRadius
|
radius: Style.cornerRadius
|
||||||
color: root.colorState ? root.colorState.value : "red"
|
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))
|
// color: Qt.tint(Style.backgroundColor, Qt.rgba(Style.foregroundColor.r, Style.foregroundColor.g, Style.foregroundColor.b, 0.1))
|
||||||
ColorIcon {
|
ColorIcon {
|
||||||
|
|||||||
@ -195,7 +195,7 @@ ThingPageBase {
|
|||||||
Rectangle {
|
Rectangle {
|
||||||
id: mask
|
id: mask
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
radius: Style.tileRadius
|
radius: Style.cornerRadius
|
||||||
color: "blue"
|
color: "blue"
|
||||||
visible: false
|
visible: false
|
||||||
}
|
}
|
||||||
|
|||||||
@ -83,7 +83,7 @@ MainViewBase {
|
|||||||
legend.font.pixelSize: app.smallFont
|
legend.font.pixelSize: app.smallFont
|
||||||
legend.visible: false
|
legend.visible: false
|
||||||
backgroundColor: Style.tileBackgroundColor
|
backgroundColor: Style.tileBackgroundColor
|
||||||
backgroundRoundness: Style.tileRadius
|
backgroundRoundness: Style.cornerRadius
|
||||||
titleColor: Style.foregroundColor
|
titleColor: Style.foregroundColor
|
||||||
title: qsTr("Power usage history")
|
title: qsTr("Power usage history")
|
||||||
|
|
||||||
@ -359,7 +359,7 @@ MainViewBase {
|
|||||||
Layout.fillWidth: true
|
Layout.fillWidth: true
|
||||||
Layout.preferredHeight: width * .7
|
Layout.preferredHeight: width * .7
|
||||||
backgroundColor: Style.tileBackgroundColor
|
backgroundColor: Style.tileBackgroundColor
|
||||||
backgroundRoundness: Style.tileRadius
|
backgroundRoundness: Style.cornerRadius
|
||||||
meters: producers
|
meters: producers
|
||||||
title: qsTr("Total produced energy")
|
title: qsTr("Total produced energy")
|
||||||
visible: producers.count > 0
|
visible: producers.count > 0
|
||||||
|
|||||||
Reference in New Issue
Block a user