Merge branch 'CURA-5941_restyle_setting_dropdown' of github.com:Ultimaker/Cura into CURA-5941_restyle_setting_dropdown

This commit is contained in:
Diego Prado Gesto 2018-11-29 14:03:39 +01:00
commit f67c725b2a
5 changed files with 118 additions and 105 deletions

View File

@ -3,19 +3,18 @@
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 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
@ -25,12 +24,9 @@ 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.
@ -38,16 +34,17 @@ Button
contentItem: Row 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
} }
@ -64,6 +61,20 @@ Button
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
elide: Text.ElideRight elide: Text.ElideRight
} }
//Icon if displayed on the right side.
UM.RecolorImage
{
id: buttonIconRight
source: buttonIconLeft.source
height: buttonText.height
width: visible ? height : 0
sourceSize.width: width
sourceSize.height: height
color: buttonIconLeft.color
visible: source != "" && button.iconOnRightSide
anchors.verticalCenter: buttonIconLeft.verticalCenter
}
} }
background: Rectangle background: Rectangle
@ -95,4 +106,4 @@ Button
delay: 500 delay: 500
visible: text != "" && button.hovered visible: text != "" && button.hovered
} }
} }

View File

@ -0,0 +1,89 @@
// Copyright (c) 2018 Ultimaker B.V.
// Cura is released under the terms of the LGPLv3 or higher.
import QtQuick 2.7
import QtQuick.Controls 1.1
import QtQuick.Controls.Styles 1.1
import QtQuick.Layouts 1.2
import UM 1.2 as UM
import Cura 1.0 as Cura
import "Menus"
Item
{
id: globalProfileRow
height: UM.Theme.getSize("print_setup_item").height
Label
{
id: globalProfileLabel
text: catalog.i18nc("@label","Profile:")
textFormat: Text.PlainText
width: Math.round(parent.width * 0.45 - UM.Theme.getSize("thick_margin").width - 2)
font: UM.Theme.getFont("default")
color: UM.Theme.getColor("text")
verticalAlignment: Text.AlignVCenter
anchors.top: parent.top
anchors.bottom: parent.bottom
}
ToolButton
{
id: globalProfileSelection
text: generateActiveQualityText()
width: Math.round(parent.width * 0.55)
height: UM.Theme.getSize("setting_control").height
anchors.left: globalProfileLabel.right
anchors.right: parent.right
tooltip: Cura.MachineManager.activeQualityOrQualityChangesName
style: UM.Theme.styles.sidebar_header_button
activeFocusOnPress: true
menu: ProfileMenu { }
function generateActiveQualityText () {
var result = Cura.MachineManager.activeQualityOrQualityChangesName;
if (Cura.MachineManager.isActiveQualitySupported) {
if (Cura.MachineManager.activeQualityLayerHeight > 0) {
result += " <font color=\"" + UM.Theme.getColor("text_detail") + "\">"
result += " - "
result += Cura.MachineManager.activeQualityLayerHeight + "mm"
result += "</font>"
}
}
return result
}
UM.SimpleButton
{
id: customisedSettings
visible: Cura.MachineManager.hasUserSettings
height: Math.round(parent.height * 0.6)
width: Math.round(parent.height * 0.6)
anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right
anchors.rightMargin: Math.round(UM.Theme.getSize("setting_preferences_button_margin").width - UM.Theme.getSize("thick_margin").width)
color: hovered ? UM.Theme.getColor("setting_control_button_hover") : UM.Theme.getColor("setting_control_button");
iconSource: UM.Theme.getIcon("star");
onClicked:
{
forceActiveFocus();
Cura.Actions.manageProfiles.trigger()
}
onEntered:
{
var content = catalog.i18nc("@tooltip","Some setting/override values are different from the values stored in the profile.\n\nClick to open the profile manager.")
base.showTooltip(globalProfileRow, Qt.point(-UM.Theme.getSize("thick_margin").width, 0), content)
}
onExited: base.hideTooltip()
}
}
}

View File

@ -12,8 +12,8 @@ Button
id: base id: base
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right anchors.right: parent.right
anchors.leftMargin: UM.Theme.getSize("thick_margin").width anchors.leftMargin: UM.Theme.getSize("default_margin").width
anchors.rightMargin: UM.Theme.getSize("thick_margin").width anchors.rightMargin: UM.Theme.getSize("default_margin").width * 3
hoverEnabled: true hoverEnabled: true
background: Rectangle background: Rectangle

View File

@ -108,7 +108,7 @@ Item {
id: label; id: label;
anchors.left: parent.left; anchors.left: parent.left;
anchors.leftMargin: doDepthIndentation ? Math.round((UM.Theme.getSize("section_icon_column").width + 5) + ((definition.depth - 1) * UM.Theme.getSize("setting_control_depth_margin").width)) : 0 anchors.leftMargin: doDepthIndentation ? Math.round((UM.Theme.getSize("section_icon_column").width / 1.2) + ((definition.depth - 1) * UM.Theme.getSize("setting_control_depth_margin").width)) : 0
anchors.right: settingControls.left; anchors.right: settingControls.left;
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
@ -290,7 +290,7 @@ Item {
enabled: propertyProvider.isValueUsed enabled: propertyProvider.isValueUsed
anchors.right: parent.right; anchors.right: parent.right;
anchors.rightMargin: UM.Theme.getSize("thick_margin").width anchors.rightMargin: UM.Theme.getSize("default_margin").width * 3
anchors.verticalCenter: parent.verticalCenter; anchors.verticalCenter: parent.verticalCenter;
width: UM.Theme.getSize("setting_control").width; width: UM.Theme.getSize("setting_control").width;
height: UM.Theme.getSize("setting_control").height height: UM.Theme.getSize("setting_control").height

View File

@ -21,92 +21,6 @@ Item
signal showTooltip(Item item, point location, string text) signal showTooltip(Item item, point location, string text)
signal hideTooltip() signal hideTooltip()
Item
{
id: globalProfileRow
height: UM.Theme.getSize("print_setup_item").height
anchors
{
top: parent.top
left: parent.left
leftMargin: Math.round(UM.Theme.getSize("thick_margin").width)
right: parent.right
rightMargin: Math.round(UM.Theme.getSize("thick_margin").width)
}
Label
{
id: globalProfileLabel
text: catalog.i18nc("@label","Profile:")
textFormat: Text.PlainText
width: Math.round(parent.width * 0.45 - UM.Theme.getSize("thick_margin").width - 2)
font: UM.Theme.getFont("default")
color: UM.Theme.getColor("text")
verticalAlignment: Text.AlignVCenter
anchors.top: parent.top
anchors.bottom: parent.bottom
}
ToolButton
{
id: globalProfileSelection
text: generateActiveQualityText()
width: Math.round(parent.width * 0.55)
height: UM.Theme.getSize("setting_control").height
anchors.left: globalProfileLabel.right
anchors.right: parent.right
tooltip: Cura.MachineManager.activeQualityOrQualityChangesName
style: UM.Theme.styles.sidebar_header_button
activeFocusOnPress: true
menu: ProfileMenu { }
function generateActiveQualityText () {
var result = Cura.MachineManager.activeQualityOrQualityChangesName;
if (Cura.MachineManager.isActiveQualitySupported) {
if (Cura.MachineManager.activeQualityLayerHeight > 0) {
result += " <font color=\"" + UM.Theme.getColor("text_detail") + "\">"
result += " - "
result += Cura.MachineManager.activeQualityLayerHeight + "mm"
result += "</font>"
}
}
return result
}
UM.SimpleButton
{
id: customisedSettings
visible: Cura.MachineManager.hasUserSettings
height: Math.round(parent.height * 0.6)
width: Math.round(parent.height * 0.6)
anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right
anchors.rightMargin: Math.round(UM.Theme.getSize("setting_preferences_button_margin").width - UM.Theme.getSize("thick_margin").width)
color: hovered ? UM.Theme.getColor("setting_control_button_hover") : UM.Theme.getColor("setting_control_button");
iconSource: UM.Theme.getIcon("star");
onClicked:
{
forceActiveFocus();
Cura.Actions.manageProfiles.trigger()
}
onEntered:
{
var content = catalog.i18nc("@tooltip","Some setting/override values are different from the values stored in the profile.\n\nClick to open the profile manager.")
base.showTooltip(globalProfileRow, Qt.point(-UM.Theme.getSize("thick_margin").width, 0), content)
}
onExited: base.hideTooltip()
}
}
}
ToolButton ToolButton
{ {
id: settingVisibilityMenu id: settingVisibilityMenu
@ -115,7 +29,6 @@ Item
height: UM.Theme.getSize("setting_control").height height: UM.Theme.getSize("setting_control").height
anchors anchors
{ {
top: globalProfileRow.bottom
topMargin: UM.Theme.getSize("thick_margin").height topMargin: UM.Theme.getSize("thick_margin").height
right: parent.right right: parent.right
rightMargin: UM.Theme.getSize("thick_margin").width rightMargin: UM.Theme.getSize("thick_margin").width
@ -168,10 +81,9 @@ Item
anchors anchors
{ {
top: globalProfileRow.bottom
topMargin: UM.Theme.getSize("thick_margin").height topMargin: UM.Theme.getSize("thick_margin").height
left: parent.left left: parent.left
leftMargin: UM.Theme.getSize("thick_margin").width leftMargin: UM.Theme.getSize("default_margin").width
right: settingVisibilityMenu.left right: settingVisibilityMenu.left
rightMargin: Math.floor(UM.Theme.getSize("default_margin").width / 2) rightMargin: Math.floor(UM.Theme.getSize("default_margin").width / 2)
} }
@ -289,6 +201,7 @@ Item
anchors.right: parent.right; anchors.right: parent.right;
anchors.left: parent.left; anchors.left: parent.left;
anchors.topMargin: UM.Theme.getSize("thick_margin").height anchors.topMargin: UM.Theme.getSize("thick_margin").height
anchors.rightMargin: UM.Theme.getSize("narrow_margin").height / 3
style: UM.Theme.styles.scrollview; style: UM.Theme.styles.scrollview;
flickableItem.flickableDirection: Flickable.VerticalFlick; flickableItem.flickableDirection: Flickable.VerticalFlick;