mirror of
https://github.com/Ultimaker/Cura.git
synced 2025-07-11 08:47:50 -06:00
Updated action button
CURA-5941
This commit is contained in:
parent
56f20648f5
commit
0fdaebaaf8
2 changed files with 33 additions and 41 deletions
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
{
|
{
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue