mirror of
https://git.mirrors.martin98.com/https://github.com/Ultimaker/Cura
synced 2025-08-18 04:45:53 +08:00
Merge pull request #4893 from Ultimaker/fix_toolbar_style
Fix toolbar style
This commit is contained in:
Jaime van Kessel
GitHub
commit
1d013dc1e7
@ -7,7 +7,7 @@ import QtQuick.Controls 2.0
|
||||
import UM 1.2 as UM
|
||||
import Cura 1.0 as Cura
|
||||
|
||||
Button
|
||||
Cura.ToolbarButton
|
||||
{
|
||||
id: base
|
||||
|
||||
@ -18,22 +18,16 @@ Button
|
||||
checked: Cura.ExtruderManager.selectedObjectExtruders.indexOf(extruder.id) != -1
|
||||
enabled: UM.Selection.hasSelection && extruder.stack.isEnabled
|
||||
|
||||
background: Item {}
|
||||
contentItem: Item
|
||||
toolItem: ExtruderIcon
|
||||
{
|
||||
// For some reason if the extruder icon is not enclosed to the item, the size changes to fill the size of the button
|
||||
ExtruderIcon
|
||||
{
|
||||
anchors.centerIn: parent
|
||||
materialColor: model.color
|
||||
extruderEnabled: extruder.stack.isEnabled
|
||||
property int index: extruder.index
|
||||
}
|
||||
materialColor: extruder.color
|
||||
extruderEnabled: extruder.stack.isEnabled
|
||||
property int index: extruder.index
|
||||
}
|
||||
|
||||
onClicked:
|
||||
{
|
||||
forceActiveFocus() //First grab focus, so all the text fields are updated
|
||||
CuraActions.setExtruderForSelection(extruder.id);
|
||||
CuraActions.setExtruderForSelection(extruder.id)
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,9 +2,7 @@
|
||||
// Cura is released under the terms of the LGPLv3 or higher.
|
||||
|
||||
import QtQuick 2.2
|
||||
import QtQuick.Controls 1.1
|
||||
import QtQuick.Controls.Styles 1.1
|
||||
import QtQuick.Layouts 1.1
|
||||
import QtQuick.Controls 2.3
|
||||
|
||||
import UM 1.2 as UM
|
||||
import Cura 1.0 as Cura
|
||||
@ -55,17 +53,24 @@ Item
|
||||
model: UM.ToolModel { id: toolsModel }
|
||||
width: childrenRect.width
|
||||
height: childrenRect.height
|
||||
Button
|
||||
|
||||
delegate: ToolbarButton
|
||||
{
|
||||
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
|
||||
|
||||
property bool isFirstElement: toolsModel.getItem(0).id == model.id
|
||||
property bool isLastElement: toolsModel.getItem(toolsModel.rowCount() - 1).id == model.id
|
||||
isTopElement: toolsModel.getItem(0).id == model.id
|
||||
isBottomElement: toolsModel.getItem(toolsModel.rowCount() - 1).id == model.id
|
||||
|
||||
toolItem: UM.RecolorImage
|
||||
{
|
||||
source: UM.Theme.getIcon(model.icon) != "" ? UM.Theme.getIcon(model.icon) : "file:///" + model.location + "/" + model.icon
|
||||
color: UM.Theme.getColor("toolbar_button_text")
|
||||
|
||||
sourceSize: UM.Theme.getSize("button_icon")
|
||||
}
|
||||
|
||||
onCheckedChanged:
|
||||
{
|
||||
@ -128,11 +133,12 @@ Item
|
||||
height: childrenRect.height
|
||||
property var _model: Cura.ExtrudersModel { id: extrudersModel }
|
||||
model: _model.items.length > 1 ? _model : 0
|
||||
ExtruderButton
|
||||
|
||||
delegate: ExtruderButton
|
||||
{
|
||||
extruder: model
|
||||
height: UM.Theme.getSize("button").width
|
||||
width: UM.Theme.getSize("button").width
|
||||
isTopElement: extrudersModel.getItem(0).id == model.id
|
||||
isBottomElement: extrudersModel.getItem(extrudersModel.rowCount() - 1).id == model.id
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
99
resources/qml/ToolbarButton.qml
Normal file
99
resources/qml/ToolbarButton.qml
Normal file
@ -0,0 +1,99 @@
|
||||
// Copyright (c) 2018 Ultimaker B.V.
|
||||
// Cura is released under the terms of the LGPLv3 or higher.
|
||||
|
||||
import QtQuick 2.7
|
||||
import QtQuick.Controls 2.3
|
||||
|
||||
import UM 1.2 as UM
|
||||
import Cura 1.0 as Cura
|
||||
|
||||
Button
|
||||
{
|
||||
id: base
|
||||
|
||||
property alias toolItem: contentItemLoader.sourceComponent
|
||||
|
||||
// These two properties indicate whether the toolbar button is at the top of the toolbar column or at the bottom.
|
||||
// If it is somewhere in the middle, then both has to be false. If there is only one element in the column, then
|
||||
// both properties have to be set to true. This is used to create a rounded corner.
|
||||
property bool isTopElement: false
|
||||
property bool isBottomElement: false
|
||||
|
||||
hoverEnabled: true
|
||||
|
||||
background: Rectangle
|
||||
{
|
||||
implicitWidth: UM.Theme.getSize("button").width
|
||||
implicitHeight: UM.Theme.getSize("button").height
|
||||
color:
|
||||
{
|
||||
if (base.checked && base.hovered)
|
||||
{
|
||||
return UM.Theme.getColor("toolbar_button_active_hover")
|
||||
}
|
||||
else if (base.checked)
|
||||
{
|
||||
return UM.Theme.getColor("toolbar_button_active")
|
||||
}
|
||||
else if(base.hovered)
|
||||
{
|
||||
return UM.Theme.getColor("toolbar_button_hover")
|
||||
}
|
||||
return UM.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: parent.color
|
||||
visible: !base.isTopElement
|
||||
}
|
||||
|
||||
Rectangle
|
||||
{
|
||||
id: bottomSquare
|
||||
anchors
|
||||
{
|
||||
left: parent.left
|
||||
right: parent.right
|
||||
bottom: parent.bottom
|
||||
}
|
||||
height: parent.radius
|
||||
color: parent.color
|
||||
visible: !base.isBottomElement
|
||||
}
|
||||
|
||||
Rectangle
|
||||
{
|
||||
id: leftSquare
|
||||
anchors
|
||||
{
|
||||
left: parent.left
|
||||
top: parent.top
|
||||
bottom: parent.bottom
|
||||
}
|
||||
width: parent.radius
|
||||
color: parent.color
|
||||
}
|
||||
}
|
||||
|
||||
contentItem: Item
|
||||
{
|
||||
opacity: parent.enabled ? 1.0 : 0.2
|
||||
Loader
|
||||
{
|
||||
id: contentItemLoader
|
||||
anchors.centerIn: parent
|
||||
width: UM.Theme.getSize("button_icon").width
|
||||
height: UM.Theme.getSize("button_icon").height
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -13,3 +13,4 @@ OutputDevicesActionButton 1.0 OutputDevicesActionButton.qml
|
||||
ExpandableComponent 1.0 ExpandableComponent.qml
|
||||
PrinterTypeLabel 1.0 PrinterTypeLabel.qml
|
||||
ViewsSelector 1.0 ViewsSelector.qml
|
||||
ToolbarButton 1.0 ToolbarButton.qml
|
||||
@ -171,123 +171,6 @@ QtObject
|
||||
}
|
||||
}
|
||||
|
||||
property Component toolbar_button: Component
|
||||
{
|
||||
ButtonStyle
|
||||
{
|
||||
background: Rectangle
|
||||
{
|
||||
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
|
||||
|
||||
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: Theme.getColor("toolbar_button_text");
|
||||
|
||||
sourceSize: Theme.getSize("button_icon")
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
property Component tool_button: Component
|
||||
{
|
||||
ButtonStyle
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user