3D-printing/Cura
1
0
Fork 0
mirror of https://github.com/Ultimaker/Cura.git synced 2025-07-24 23:23:57 -06:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

Improve the toolbar style by modifying the rectangles and the behavior

Browse source 
to get a rounded rectangle on the right-top and right-bottom.

Contributes to CURA-5962.
This commit is contained in:
Diego Prado Gesto 2018-11-20 16:28:21 +01:00
parent 895590c3d0
commit 669648d3e1
4 changed files with 92 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

16
resources/qml/ExtruderButton.qml
View file

@ -21,6 +21,9 @@ Button
checked: Cura.ExtruderManager.selectedObjectExtruders.indexOf(extruder.id) != -1
enabled: UM.Selection.hasSelection && extruder.stack.isEnabled
property bool isFirstElement: extrudersModel.getItem(0).name == model.name
property bool isLastElement: extrudersModel.getItem(extrudersModel.rowCount() - 1).name == model.name
Item
{
anchors.centerIn: parent
@ -32,18 +35,7 @@ Button
{
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")
}
color: UM.Theme.getColor("toolbar_button_text")
font: UM.Theme.getFont("default_bold")
}
}

36
resources/qml/Toolbar.qml
View file

@ -28,12 +28,16 @@ Item
// Used to create a rounded rectangle behind the toolButtons
Rectangle
{
anchors.fill: toolButtons
anchors.leftMargin: -radius
anchors
{
fill: toolButtons
leftMargin: -radius - border.width
rightMargin: -border.width
topMargin: -border.width
bottomMargin: -border.width
}
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")
color: UM.Theme.getColor("lining")
}
Column
@ -42,13 +46,13 @@ Item
anchors.top: parent.top
anchors.right: parent.right
spacing: UM.Theme.getSize("button_lining").width
spacing: UM.Theme.getSize("default_lining").height
Repeater
{
id: repeat
model: UM.ToolModel { }
model: UM.ToolModel { id: toolsModel }
width: childrenRect.width
height: childrenRect.height
Button
@ -60,6 +64,9 @@ Item
enabled: model.enabled && UM.Selection.hasSelection && UM.Controller.toolsEnabled
style: UM.Theme.styles.toolbar_button
property bool isFirstElement: toolsModel.getItem(0).id == model.id
property bool isLastElement: toolsModel.getItem(toolsModel.rowCount() - 1).id == model.id
onCheckedChanged:
{
if (checked)
@ -93,12 +100,16 @@ Item
// Used to create a rounded rectangle behind the extruderButtons
Rectangle
{
anchors.fill: extruderButtons
anchors.leftMargin: -radius
anchors
{
fill: extruderButtons
leftMargin: -radius - border.width
rightMargin: -border.width
topMargin: -border.width
bottomMargin: -border.width
}
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")
color: UM.Theme.getColor("lining")
}
Column
@ -108,6 +119,7 @@ Item
anchors.topMargin: UM.Theme.getSize("default_margin").height
anchors.top: toolButtons.bottom
anchors.right: parent.right
spacing: UM.Theme.getSize("default_lining").height
Repeater
{

80
resources/themes/cura-light/styles.qml
View file

@ -175,11 +175,68 @@ QtObject
{
ButtonStyle
{
background: Item
background: Rectangle
{
implicitWidth: Theme.getSize("button").width;
implicitHeight: Theme.getSize("button").height;
implicitWidth: Theme.getSize("button").width
implicitHeight: Theme.getSize("button").height
color:
{
if (control.checked && control.hovered)
{
return Theme.getColor("toolbar_button_active_hover")
}
else if (control.checked)
{
return Theme.getColor("toolbar_button_active")
}
else if(control.hovered)
{
return Theme.getColor("toolbar_button_hover")
}
return Theme.getColor("toolbar_background")
}
radius: UM.Theme.getSize("default_radius").width
Rectangle
{
id: topSquare
anchors
{
left: parent.left
right: parent.right
top: parent.top
}
height: parent.radius
color: control.isFirstElement ? "transparent" : parent.color
}
Rectangle
{
id: bottomSquare
anchors
{
left: parent.left
right: parent.right
bottom: parent.bottom
}
height: parent.radius
color: control.isLastElement ? "transparent" : parent.color
}
Rectangle
{
id: leftSquare
anchors
{
left: parent.left
top: parent.top
bottom: parent.bottom
}
width: parent.radius
color: parent.color
}
// This is the tooltip
UM.PointingRectangle
{
id: button_tooltip
@ -223,22 +280,7 @@ QtObject
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");
}
color: Theme.getColor("toolbar_button_text");
sourceSize: Theme.getSize("button_icon")
}

6
resources/themes/cura-light/theme.json
View file

@ -123,9 +123,9 @@
"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],
"toolbar_button_hover": [232, 242, 252, 255],
"toolbar_button_active": [232, 242, 252, 255],
"toolbar_button_active_hover": [232, 242, 252, 255],
"button": [31, 36, 39, 255],
"button_hover": [68, 72, 75, 255],