Merge PR #594: Rework button visuals

This commit is contained in:
Jenkins nymea 2021-05-19 16:21:29 +02:00
commit d9fcb344df
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 // 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

View File

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

View File

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

View File

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

View File

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

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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