Merge pull request #4780 from Ultimaker/toolbar_4_0

Toolbar 4.0
This commit is contained in:
alekseisasin 2018-11-12 13:20:27 +01:00 committed by GitHub
commit 5094e45331
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 185 additions and 67 deletions

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

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

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

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

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,8 +135,6 @@
"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": [0, 0, 0, 0],
"small_button_hover": [10, 8, 80, 255],