Updated action button

CURA-5941
This commit is contained in:
Aleksei S 2018-11-28 13:51:54 +01:00
parent 56f20648f5
commit 0fdaebaaf8
2 changed files with 33 additions and 41 deletions

View file

@ -1,22 +1,17 @@
// Copyright (c) 2018 Ultimaker B.V. // Copyright (c) 2018 Ultimaker B.V.
// Cura is released under the terms of the LGPLv3 or higher. // Cura is released under the terms of the LGPLv3 or higher.
import QtQuick 2.7 import QtQuick 2.7
import QtQuick.Controls 2.1 import QtQuick.Controls 2.1
import QtGraphicalEffects 1.0 // For the dropshadow import QtGraphicalEffects 1.0 // For the dropshadow
import UM 1.1 as UM import UM 1.1 as UM
Button Button
{ {
id: button id: button
property alias iconSource: buttonIcon.source property alias iconSource: buttonIconLeft.source
property alias iconSourceRight: buttonIconRight.source property var iconOnRightSide: false
property alias textFont: buttonText.font property alias textFont: buttonText.font
property alias cornerRadius: backgroundRect.radius property alias cornerRadius: backgroundRect.radius
property alias tooltip: tooltip.text property alias tooltip: tooltip.text
property color color: UM.Theme.getColor("primary") property color color: UM.Theme.getColor("primary")
property color hoverColor: UM.Theme.getColor("primary_hover") property color hoverColor: UM.Theme.getColor("primary_hover")
property color disabledColor: color property color disabledColor: color
@ -26,33 +21,31 @@ Button
property color outlineColor: color property color outlineColor: color
property color outlineHoverColor: hoverColor property color outlineHoverColor: hoverColor
property color outlineDisabledColor: outlineColor property color outlineDisabledColor: outlineColor
hoverEnabled: true hoverEnabled: true
property alias shadowColor: shadow.color property alias shadowColor: shadow.color
property alias shadowEnabled: shadow.visible property alias shadowEnabled: shadow.visible
// This property is used to indicate whether the button has a fixed width or the width would depend on the contents // This property is used to indicate whether the button has a fixed width or the width would depend on the contents
// Be careful when using fixedWidthMode, the translated texts can be too long that they won't fit. In any case, // Be careful when using fixedWidthMode, the translated texts can be too long that they won't fit. In any case,
// we elide the text to the right so the text will be cut off with the three dots at the end. // we elide the text to the right so the text will be cut off with the three dots at the end.
property var fixedWidthMode: false property var fixedWidthMode: false
leftPadding: UM.Theme.getSize("default_margin").width
width: buttonIcon.width + buttonText.width + buttonIconRight.width rightPadding: UM.Theme.getSize("default_margin").width
contentItem: Item height: UM.Theme.getSize("action_button").height
contentItem: Row
{ {
//Icon if displayed on the left side.
UM.RecolorImage UM.RecolorImage
{ {
id: buttonIcon id: buttonIconLeft
source: "" source: ""
height: Math.round(0.6 * parent.height) height: buttonText.height
width: height width: visible ? height : 0
sourceSize.width: width sourceSize.width: width
sourceSize.height: height sourceSize.height: height
color: button.hovered ? button.textHoverColor : button.textColor color: button.hovered ? button.textHoverColor : button.textColor
visible: source != "" visible: source != "" && !button.iconOnRightSide
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
} }
Label Label
{ {
id: buttonText id: buttonText
@ -66,22 +59,21 @@ Button
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
elide: Text.ElideRight elide: Text.ElideRight
} }
//Icon if displayed on the right side.
UM.RecolorImage UM.RecolorImage
{ {
id: buttonIconRight id: buttonIconRight
source: "" source: buttonIconLeft.source
height: Math.round(0.6 * parent.height) anchors.right: parent.right
width: height height: buttonText.height
width: visible ? height : 0
sourceSize.width: width sourceSize.width: width
sourceSize.height: height sourceSize.height: height
color: button.hovered ? button.textHoverColor : button.textColor color: buttonIconLeft.color
visible: source != "" visible: source != "" && button.iconOnRightSide
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: buttonIconLeft.verticalCenter
anchors.right: source != "" ? parent.right : undefined
} }
} }
background: Rectangle background: Rectangle
{ {
id: backgroundRect id: backgroundRect
@ -90,7 +82,6 @@ Button
border.width: UM.Theme.getSize("default_lining").width border.width: UM.Theme.getSize("default_lining").width
border.color: button.enabled ? (button.hovered ? button.outlineHoverColor : button.outlineColor) : button.outlineDisabledColor border.color: button.enabled ? (button.hovered ? button.outlineHoverColor : button.outlineColor) : button.outlineDisabledColor
} }
DropShadow DropShadow
{ {
id: shadow id: shadow
@ -103,7 +94,6 @@ Button
// Should always be drawn behind the background. // Should always be drawn behind the background.
z: backgroundRect.z - 1 z: backgroundRect.z - 1
} }
ToolTip ToolTip
{ {
id: tooltip id: tooltip
@ -111,4 +101,4 @@ Button
delay: 500 delay: 500
visible: text != "" && button.hovered visible: text != "" && button.hovered
} }
} }

View file

@ -323,18 +323,9 @@ Cura.ExpandableComponent
Cura.ActionButton Cura.ActionButton
{ {
id: settingControlButton id: settingControlButton
leftPadding: UM.Theme.getSize("default_margin").width
rightPadding: UM.Theme.getSize("default_margin").width
height: UM.Theme.getSize("action_panel_button").height
text: catalog.i18nc("@button", "Custom")
color: UM.Theme.getColor("secondary")
hoverColor: UM.Theme.getColor("secondary")
textColor: UM.Theme.getColor("primary")
textHoverColor: UM.Theme.getColor("text")
iconSourceRight: UM.Theme.getIcon("arrow_right")
width: UM.Theme.getSize("print_setup_action_button").width
fixedWidthMode: true
visible: currentModeIndex == 0 visible: currentModeIndex == 0
text: catalog.i18nc("@button", "Custom")
width: UM.Theme.getSize("print_setup_action_button").width
anchors anchors
{ {
top: parent.top top: parent.top
@ -344,6 +335,13 @@ Cura.ExpandableComponent
rightMargin: UM.Theme.getSize("narrow_margin").height rightMargin: UM.Theme.getSize("narrow_margin").height
} }
color: UM.Theme.getColor("secondary")
hoverColor: UM.Theme.getColor("secondary")
textColor: UM.Theme.getColor("primary")
textHoverColor: UM.Theme.getColor("text")
iconSource: UM.Theme.getIcon("arrow_right")
iconOnRightSide: true
onClicked: currentModeIndex = 1 onClicked: currentModeIndex = 1
} }
@ -351,13 +349,17 @@ Cura.ExpandableComponent
{ {
height: UM.Theme.getSize("action_panel_button").height height: UM.Theme.getSize("action_panel_button").height
text: catalog.i18nc("@button", "Recommended") text: catalog.i18nc("@button", "Recommended")
color: UM.Theme.getColor("secondary") color: UM.Theme.getColor("secondary")
hoverColor: UM.Theme.getColor("secondary") hoverColor: UM.Theme.getColor("secondary")
textColor: UM.Theme.getColor("primary") textColor: UM.Theme.getColor("primary")
textHoverColor: UM.Theme.getColor("text") textHoverColor: UM.Theme.getColor("text")
iconSource: UM.Theme.getIcon("arrow_left") iconSource: UM.Theme.getIcon("arrow_left")
width: UM.Theme.getSize("print_setup_action_button").width width: UM.Theme.getSize("print_setup_action_button").width
fixedWidthMode: true fixedWidthMode: true
visible: currentModeIndex == 1 visible: currentModeIndex == 1
anchors anchors
{ {