Merge branch 'ui_rework_4_0' of github.com:Ultimaker/Cura into CURA-5785-Restyle_stage_menu

This commit is contained in:
Jaime van Kessel 2018-11-12 14:32:06 +01:00
commit f14687a749
14 changed files with 234 additions and 166 deletions

View file

@ -21,15 +21,12 @@ Item
property color lowerHandleColor: UM.Theme.getColor("slider_handle")
property color rangeHandleColor: UM.Theme.getColor("slider_groove_fill")
property color handleActiveColor: UM.Theme.getColor("slider_handle_active")
property real handleLabelWidth: UM.Theme.getSize("slider_layerview_background").width
property var activeHandle: upperHandle
// Track properties
property real trackThickness: UM.Theme.getSize("slider_groove").width // width of the slider track
property real trackRadius: trackThickness / 2
property real trackRadius: UM.Theme.getSize("slider_groove_radius").width
property color trackColor: UM.Theme.getColor("slider_groove")
property real trackBorderWidth: 1
property color trackBorderColor: UM.Theme.getColor("slider_groove_border")
// value properties
property real maximumValue: 100
@ -90,8 +87,6 @@ Item
radius: sliderRoot.trackRadius
anchors.centerIn: sliderRoot
color: sliderRoot.trackColor
border.width: sliderRoot.trackBorderWidth
border.color: sliderRoot.trackBorderColor
visible: sliderRoot.layersVisible
}
@ -140,9 +135,10 @@ Item
Rectangle
{
width: sliderRoot.trackThickness - 2 * sliderRoot.trackBorderWidth
width: sliderRoot.trackThickness
height: parent.height + sliderRoot.handleSize
anchors.centerIn: parent
radius: sliderRoot.trackRadius
color: sliderRoot.rangeHandleColor
}

View file

@ -23,10 +23,8 @@ Item
// track properties
property real trackThickness: UM.Theme.getSize("slider_groove").width
property real trackRadius: trackThickness / 2
property real trackRadius: UM.Theme.getSize("slider_groove_radius").width
property color trackColor: UM.Theme.getColor("slider_groove")
property real trackBorderWidth: 1 // width of the slider track border
property color trackBorderColor: UM.Theme.getColor("slider_groove_border")
// value properties
property real maximumValue: 100
@ -68,8 +66,6 @@ Item
radius: sliderRoot.trackRadius
anchors.centerIn: sliderRoot
color: sliderRoot.trackColor
border.width: sliderRoot.trackBorderWidth
border.color: sliderRoot.trackBorderColor
visible: sliderRoot.pathsVisible
}
@ -86,9 +82,10 @@ Item
Rectangle
{
height: sliderRoot.trackThickness - 2 * sliderRoot.trackBorderWidth
height: sliderRoot.trackThickness
width: parent.width + sliderRoot.handleSize
anchors.centerIn: parent
radius: sliderRoot.trackRadius
color: sliderRoot.rangeColor
}
}

View file

@ -18,7 +18,7 @@ Item
{
id: pathSlider
height: UM.Theme.getSize("slider_handle").width
width: UM.Theme.getSize("layerview_menu_size").width
width: UM.Theme.getSize("slider_layerview_size").height
anchors.bottom: parent.bottom
anchors.bottomMargin: UM.Theme.getSize("default_margin").height
@ -166,7 +166,7 @@ Item
id: layerSlider
width: UM.Theme.getSize("slider_handle").width
height: UM.Theme.getSize("layerview_menu_size").height
height: UM.Theme.getSize("slider_layerview_size").height
anchors
{

View file

@ -51,6 +51,9 @@ Button
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
opacity: opened ? 1 : 0
Behavior on opacity { NumberAnimation { duration: 100 } }
contentItem: AccountDetails
{
id: panel
@ -61,8 +64,6 @@ Button
background: UM.PointingRectangle
{
opacity: visible ? 1 : 0
Behavior on opacity { NumberAnimation { duration: 100 } }
color: UM.Theme.getColor("tool_panel_background")
borderColor: UM.Theme.getColor("lining")
borderWidth: UM.Theme.getSize("default_lining").width

View file

@ -23,7 +23,6 @@ Rectangle
border.width: UM.Theme.getSize("default_lining").width
border.color: UM.Theme.getColor("lining")
radius: UM.Theme.getSize("default_radius").width
visible: CuraApplication.platformActivity
property bool outputAvailable: UM.Backend.state == UM.Backend.Done || UM.Backend.state == UM.Backend.Disabled

View file

@ -102,6 +102,8 @@ Column
Cura.ActionButton
{
id: previewStageShortcut
leftPadding: UM.Theme.getSize("default_margin").width
rightPadding: UM.Theme.getSize("default_margin").width
height: UM.Theme.getSize("action_panel_button").height
@ -111,11 +113,12 @@ Column
textColor: UM.Theme.getColor("primary")
textHoverColor: UM.Theme.getColor("text")
onClicked: UM.Controller.setActiveStage("PreviewStage")
visible: UM.Controller.activeStage != null && UM.Controller.activeStage.stageId != "PreviewStage"
}
Cura.OutputDevicesActionButton
{
width: UM.Theme.getSize("action_panel_button").width
width: previewStageShortcut.visible ? UM.Theme.getSize("action_panel_button").width : parent.width
height: UM.Theme.getSize("action_panel_button").height
}
}

View file

@ -7,29 +7,30 @@ import QtQuick.Controls 2.1
import UM 1.1 as UM
import Cura 1.0 as Cura
Button
UM.RecolorImage
{
id: widget
implicitHeight: UM.Theme.getSize("section_icon").height
implicitWidth: UM.Theme.getSize("section_icon").width
//implicitHeight: UM.Theme.getSize("section_icon").height
//implicitWidth: UM.Theme.getSize("section_icon").width
background: UM.RecolorImage
source: UM.Theme.getIcon("info")
width: UM.Theme.getSize("section_icon").width
height: UM.Theme.getSize("section_icon").height
sourceSize.width: width
sourceSize.height: height
color: popup.opened ? UM.Theme.getColor("primary") : UM.Theme.getColor("text_medium")
MouseArea
{
id: moreInformationIcon
source: UM.Theme.getIcon("info")
width: UM.Theme.getSize("section_icon").width
height: UM.Theme.getSize("section_icon").height
sourceSize.width: width
sourceSize.height: height
color: widget.hovered ? UM.Theme.getColor("primary") : UM.Theme.getColor("text_medium")
anchors.fill: parent
hoverEnabled: true
onEntered: popup.open()
onExited: popup.close()
}
onClicked: popup.opened ? popup.close() : popup.open()
Popup
{
id: popup
@ -39,6 +40,9 @@ Button
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
opacity: opened ? 1 : 0
Behavior on opacity { NumberAnimation { duration: 100 } }
contentItem: PrintJobInformation
{
id: printJobInformation
@ -47,8 +51,6 @@ Button
background: UM.PointingRectangle
{
opacity: visible ? 1 : 0
Behavior on opacity { NumberAnimation { duration: 100 } }
color: UM.Theme.getColor("tool_panel_background")
borderColor: UM.Theme.getColor("lining")
borderWidth: UM.Theme.getSize("default_lining").width

View file

@ -186,6 +186,7 @@ UM.MainWindow
verticalCenter: parent.verticalCenter
left: parent.left
}
visible: CuraApplication.platformActivity
}
ObjectsList
@ -235,6 +236,7 @@ UM.MainWindow
anchors.bottom: parent.bottom
anchors.rightMargin: UM.Theme.getSize("thick_margin").width
anchors.bottomMargin: UM.Theme.getSize("thick_margin").height
visible: CuraApplication.platformActivity
}
Loader

View file

@ -15,37 +15,36 @@ Button
text: catalog.i18ncp("@label %1 is filled in with the name of an extruder", "Print Selected Model with %1", "Print Selected Models with %1", UM.Selection.selectionCount).arg(extruder.name)
style: UM.Theme.styles.tool_button;
style: UM.Theme.styles.toolbar_button
iconSource: UM.Theme.getIcon("extruder_button")
checked: Cura.ExtruderManager.selectedObjectExtruders.indexOf(extruder.id) != -1
enabled: UM.Selection.hasSelection && extruder.stack.isEnabled
property color customColor: base.hovered ? UM.Theme.getColor("button_hover") : UM.Theme.getColor("button");
Rectangle
{
anchors.fill: parent
anchors.margins: UM.Theme.getSize("default_lining").width;
color: "transparent"
border.width: base.checked ? UM.Theme.getSize("default_lining").width : 0;
border.color: UM.Theme.getColor("button_text")
}
Item
{
anchors.centerIn: parent
width: UM.Theme.getSize("default_margin").width
height: UM.Theme.getSize("default_margin").height
opacity: !base.enabled ? 0.2 : 1.0
Label
{
anchors.centerIn: parent;
text: index + 1;
color: parent.enabled ? UM.Theme.getColor("button_text") : UM.Theme.getColor("button_disabled_text")
font: UM.Theme.getFont("default_bold");
anchors.centerIn: parent
text: index + 1
color:
{
if (base.checked)
{
return UM.Theme.getColor("toolbar_button_text_active")
}
else if(base.hovered)
{
return UM.Theme.getColor("toolbar_button_text_hover")
}
return UM.Theme.getColor("toolbar_button_text")
}
font: UM.Theme.getFont("default_bold")
}
}

View file

@ -86,7 +86,7 @@ Item
Menu
{
id: plugin_menu
title: catalog.i18nc("@title:menu menubar:toplevel", "&Toolbox")
title: catalog.i18nc("@title:menu menubar:toplevel", "&Marketplace")
MenuItem { action: Cura.Actions.browsePackages }
}

View file

@ -11,75 +11,113 @@ import Cura 1.0 as Cura
Item
{
id: base;
id: base
width: buttons.width;
width: buttons.width
height: buttons.height
property int activeY
Column
Item
{
id: buttons;
id: buttons
width: parent.visible ? toolButtons.width : 0
height: childrenRect.height
anchors.bottom: parent.bottom
anchors.left: parent.left
spacing: UM.Theme.getSize("button_lining").width
Behavior on width { NumberAnimation { duration: 100 } }
Repeater
// Used to create a rounded rectangle behind the toolButtons
Rectangle
{
id: repeat
anchors.fill: toolButtons
anchors.leftMargin: -radius
radius: UM.Theme.getSize("default_radius").width
border.width: UM.Theme.getSize("default_lining").width
border.color: UM.Theme.getColor("lining")
color: UM.Theme.getColor("toolbar_background")
}
model: UM.ToolModel { }
width: childrenRect.width
height: childrenRect.height
Button
Column
{
id: toolButtons
anchors.top: parent.top
anchors.right: parent.right
spacing: UM.Theme.getSize("button_lining").width
Repeater
{
text: model.name + (model.shortcut ? (" (" + model.shortcut + ")") : "")
iconSource: (UM.Theme.getIcon(model.icon) != "") ? UM.Theme.getIcon(model.icon) : "file:///" + model.location + "/" + model.icon
checkable: true
checked: model.active
enabled: model.enabled && UM.Selection.hasSelection && UM.Controller.toolsEnabled
style: UM.Theme.styles.tool_button
id: repeat
onCheckedChanged:
model: UM.ToolModel { }
width: childrenRect.width
height: childrenRect.height
Button
{
if (checked)
{
base.activeY = y;
}
}
text: model.name + (model.shortcut ? (" (" + model.shortcut + ")") : "")
iconSource: (UM.Theme.getIcon(model.icon) != "") ? UM.Theme.getIcon(model.icon) : "file:///" + model.location + "/" + model.icon
checkable: true
checked: model.active
enabled: model.enabled && UM.Selection.hasSelection && UM.Controller.toolsEnabled
style: UM.Theme.styles.toolbar_button
//Workaround since using ToolButton's onClicked would break the binding of the checked property, instead
//just catch the click so we do not trigger that behaviour.
MouseArea
{
anchors.fill: parent;
onClicked:
onCheckedChanged:
{
forceActiveFocus() //First grab focus, so all the text fields are updated
if(parent.checked)
if (checked)
{
UM.Controller.setActiveTool(null);
base.activeY = y;
}
else
}
//Workaround since using ToolButton's onClicked would break the binding of the checked property, instead
//just catch the click so we do not trigger that behaviour.
MouseArea
{
anchors.fill: parent;
onClicked:
{
UM.Controller.setActiveTool(model.id);
forceActiveFocus() //First grab focus, so all the text fields are updated
if(parent.checked)
{
UM.Controller.setActiveTool(null);
}
else
{
UM.Controller.setActiveTool(model.id);
}
}
}
}
}
}
Item { height: UM.Theme.getSize("default_margin").height; width: UM.Theme.getSize("default_lining").width; visible: extruders.count > 0 }
Repeater
// Used to create a rounded rectangle behind the extruderButtons
Rectangle
{
id: extruders
width: childrenRect.width
height: childrenRect.height
property var _model: Cura.ExtrudersModel { id: extrudersModel }
model: _model.items.length > 1 ? _model : 0
ExtruderButton { extruder: model }
anchors.fill: extruderButtons
anchors.leftMargin: -radius
radius: UM.Theme.getSize("default_radius").width
border.width: UM.Theme.getSize("default_lining").width
border.color: UM.Theme.getColor("lining")
color: UM.Theme.getColor("toolbar_background")
}
Column
{
id: extruderButtons
anchors.topMargin: UM.Theme.getSize("default_margin").height
anchors.top: toolButtons.bottom
anchors.right: parent.right
Repeater
{
id: extruders
width: childrenRect.width
height: childrenRect.height
property var _model: Cura.ExtrudersModel { id: extrudersModel }
model: _model.items.length > 1 ? _model : 0
ExtruderButton { extruder: model }
}
}
}
@ -91,7 +129,7 @@ Item
anchors.leftMargin: UM.Theme.getSize("default_margin").width;
anchors.top: base.top;
anchors.topMargin: base.activeY
z: buttons.z -1
z: buttons.z - 1
target: Qt.point(parent.right, base.activeY + Math.round(UM.Theme.getSize("button").height/2))
arrowSize: UM.Theme.getSize("default_arrow").width

View file

@ -135,7 +135,6 @@
"slider_handle": [255, 255, 255, 255],
"slider_handle_hover": [77, 182, 226, 255],
"slider_handle_active": [68, 192, 255, 255],
"slider_handle_border": [39, 44, 48, 255],
"slider_text_background": [255, 255, 255, 255],
"checkbox": [43, 48, 52, 255],

View file

@ -171,6 +171,81 @@ QtObject
}
}
property Component toolbar_button: Component
{
ButtonStyle
{
background: Item
{
implicitWidth: Theme.getSize("button").width;
implicitHeight: Theme.getSize("button").height;
UM.PointingRectangle
{
id: button_tooltip
anchors.left: parent.right
anchors.leftMargin: Theme.getSize("button_tooltip_arrow").width * 2
anchors.verticalCenter: parent.verticalCenter
target: Qt.point(parent.x, y + Math.round(height/2))
arrowSize: Theme.getSize("button_tooltip_arrow").width
color: Theme.getColor("button_tooltip")
opacity: control.hovered ? 1.0 : 0.0;
visible: control.text != ""
width: control.hovered ? button_tip.width + Theme.getSize("button_tooltip").width : 0
height: Theme.getSize("button_tooltip").height
Behavior on width { NumberAnimation { duration: 100; } }
Behavior on opacity { NumberAnimation { duration: 100; } }
Label
{
id: button_tip
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter;
text: control.text;
font: Theme.getFont("button_tooltip");
color: Theme.getColor("tooltip_text");
}
}
}
label: Item
{
UM.RecolorImage
{
anchors.centerIn: parent;
opacity: !control.enabled ? 0.2 : 1.0
source: control.iconSource;
width: Theme.getSize("button_icon").width;
height: Theme.getSize("button_icon").height;
color:
{
if (control.checked && control.hovered)
{
return Theme.getColor("toolbar_button_text_active_hover");
}
else if (control.checked)
{
return Theme.getColor("toolbar_button_text_active");
}
else if(control.hovered)
{
return Theme.getColor("toolbar_button_text_hover");
}
return Theme.getColor("toolbar_button_text");
}
sourceSize: Theme.getSize("button_icon")
}
}
}
}
property Component tool_button: Component
{
ButtonStyle
@ -915,47 +990,6 @@ QtObject
}
}
property Component slider: Component
{
SliderStyle
{
groove: Rectangle
{
implicitWidth: control.width
implicitHeight: Theme.getSize("slider_groove").height
color: Theme.getColor("slider_groove")
border.width: Theme.getSize("default_lining").width
border.color: Theme.getColor("slider_groove_border")
radius: Math.round(width / 2)
Rectangle
{
anchors
{
left: parent.left
top: parent.top
bottom: parent.bottom
}
color: Theme.getColor("slider_groove_fill");
width: Math.round((control.value / (control.maximumValue - control.minimumValue)) * parent.width);
radius: Math.round(width / 2);
}
}
handle: Rectangle
{
width: Theme.getSize("slider_handle").width;
height: Theme.getSize("slider_handle").height;
color: control.hovered ? Theme.getColor("slider_handle_hover") : Theme.getColor("slider_handle");
border.width: Theme.getSize("default_lining").width
border.color: control.hovered ? Theme.getColor("slider_handle_hover_border") : Theme.getColor("slider_handle_border")
radius: Math.round(Theme.getSize("slider_handle").width / 2); //Round.
Behavior on color { ColorAnimation { duration: 50; } }
}
}
}
property Component text_field: Component
{
TextFieldStyle

View file

@ -105,6 +105,8 @@
"action_panel_secondary": [27, 95, 202, 255],
"toolbar_background": [255, 255, 255, 255],
"text": [0, 0, 0, 255],
"text_detail": [174, 174, 174, 128],
"text_link": [50, 130, 255, 255],
@ -120,6 +122,11 @@
"error": [255, 140, 0, 255],
"warning": [255, 190, 35, 255],
"toolbar_button_text": [10, 8, 80, 255],
"toolbar_button_text_hover": [50, 130, 255, 255],
"toolbar_button_text_active": [50, 130, 255, 255],
"toolbar_button_text_active_hover": [50, 130, 255, 255],
"button": [31, 36, 39, 255],
"button_hover": [68, 72, 75, 255],
"button_active": [68, 72, 75, 255],
@ -128,14 +135,12 @@
"button_text_hover": [255, 255, 255, 255],
"button_text_active": [255, 255, 255, 255],
"button_text_active_hover": [255, 255, 255, 255],
"button_disabled": [31, 36, 39, 255],
"button_disabled_text": [255, 255, 255, 101],
"small_button": [31, 36, 39, 0],
"small_button_hover": [68, 72, 75, 255],
"small_button_active": [68, 72, 75, 255],
"small_button_active_hover": [68, 72, 75, 255],
"small_button_text": [31, 36, 39, 197],
"small_button": [0, 0, 0, 0],
"small_button_hover": [10, 8, 80, 255],
"small_button_active": [10, 8, 80, 255],
"small_button_active_hover": [10, 8, 80, 255],
"small_button_text": [171, 171, 191, 255],
"small_button_text_hover": [255, 255, 255, 255],
"small_button_text_active": [255, 255, 255, 255],
"small_button_text_active_hover": [255, 255, 255, 255],
@ -215,13 +220,11 @@
"progressbar_background": [245, 245, 245, 255],
"progressbar_control": [50, 130, 255, 255],
"slider_groove": [245, 245, 245, 255],
"slider_groove_border": [127, 127, 127, 255],
"slider_groove_fill": [127, 127, 127, 255],
"slider_handle": [0, 0, 0, 255],
"slider_groove": [223, 223, 223, 255],
"slider_groove_fill": [10, 8, 80, 255],
"slider_handle": [10, 8, 80, 255],
"slider_handle_hover": [77, 182, 226, 255],
"slider_handle_active": [68, 192, 255, 255],
"slider_handle_border": [39, 44, 48, 255],
"slider_handle_active": [50, 130, 255, 255],
"slider_text_background": [255, 255, 255, 255],
"quality_slider_unavailable": [179, 179, 179, 255],
@ -449,17 +452,12 @@
"scrollbar": [0.75, 0.5],
"quality_slider_bar": [1, 0.2],
"slider_groove": [0.3, 0.3],
"slider_handle": [1.0, 1.0],
"slider_layerview_size": [1.0, 22.0],
"slider_layerview_background": [4.0, 0.0],
"slider_layerview_margin": [1.0, 1.5],
"slider_groove": [0.5, 0.5],
"slider_groove_radius": [0.15, 0.15],
"slider_handle": [1.5, 1.5],
"slider_layerview_size": [1.0, 26.0],
"layerview_menu_size": [15, 20],
"layerview_menu_size_material_color_mode": [15, 16],
"layerview_menu_size_collapsed": [15, 6],
"layerview_legend_size": [1.0, 1.0],
"layerview_row": [11.0, 1.5],
"layerview_row_spacing": [0.0, 0.5],