Merge pull request #10044 from Ultimaker/CURA-8013_Adjust_sizes_of_header_and_toolbar

CURA-8013: Adjust sizes of header and toolbar
This commit is contained in:
Remco Burema 2021-06-30 14:49:34 +02:00 committed by GitHub
commit 5ac389a005
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 136 additions and 94 deletions

View File

@ -53,6 +53,9 @@ class ExtrudersModel(ListModel):
EnabledRole = Qt.UserRole + 11
"""Is the extruder enabled?"""
MaterialTypeRole = Qt.UserRole + 12
"""The type of the material (e.g. PLA, ABS, PETG, etc.)."""
defaultColors = ["#ffc924", "#86ec21", "#22eeee", "#245bff", "#9124ff", "#ff24c8"]
"""List of colours to display if there is no material or the material has no known colour. """
@ -75,6 +78,7 @@ class ExtrudersModel(ListModel):
self.addRoleName(self.StackRole, "stack")
self.addRoleName(self.MaterialBrandRole, "material_brand")
self.addRoleName(self.ColorNameRole, "color_name")
self.addRoleName(self.MaterialTypeRole, "material_type")
self._update_extruder_timer = QTimer()
self._update_extruder_timer.setInterval(100)
self._update_extruder_timer.setSingleShot(True)
@ -193,7 +197,8 @@ class ExtrudersModel(ListModel):
"variant": extruder.variant.getName() if extruder.variant else "", # e.g. print core
"stack": extruder,
"material_brand": material_brand,
"color_name": color_name
"color_name": color_name,
"material_type": extruder.material.getMetaDataEntry("material") if extruder.material else "",
}
items.append(item)
@ -218,6 +223,7 @@ class ExtrudersModel(ListModel):
"stack": None,
"material_brand": "",
"color_name": "",
"material_type": "",
}
items.append(item)
if self._items != items:

View File

@ -8,7 +8,6 @@ import QtQuick.Controls 2.3
import UM 1.3 as UM
import Cura 1.1 as Cura
import QtGraphicalEffects 1.0 // For the dropshadow
Item
{
@ -42,42 +41,34 @@ Item
anchors.left: openFileButton.right
anchors.right: parent.right
anchors.leftMargin: UM.Theme.getSize("default_margin").width
property int machineSelectorWidth: Math.round((width - printSetupSelectorItem.width) / 3)
height: parent.height
spacing: 0
// This is a trick to make sure that the borders of the two adjacent buttons' borders overlap. Otherwise
// there will be double border (one from each button)
spacing: -UM.Theme.getSize("default_lining").width
Cura.MachineSelector
{
id: machineSelection
headerCornerSide: Cura.RoundedRectangle.Direction.Left
Layout.minimumWidth: UM.Theme.getSize("machine_selector_widget").width
Layout.maximumWidth: UM.Theme.getSize("machine_selector_widget").width
headerBackgroundBorder.width: UM.Theme.getSize("default_lining").width
headerBackgroundBorder.color: UM.Theme.getColor("lining")
enableHeaderShadow: false
Layout.preferredWidth: parent.machineSelectorWidth
Layout.fillWidth: true
Layout.fillHeight: true
}
// Separator line
Rectangle
{
height: parent.height
width: UM.Theme.getSize("default_lining").width
color: UM.Theme.getColor("lining")
}
Cura.ConfigurationMenu
{
id: printerSetup
enableHeaderShadow: false
headerBackgroundBorder.width: UM.Theme.getSize("default_lining").width
headerBackgroundBorder.color: UM.Theme.getColor("lining")
Layout.fillHeight: true
Layout.fillWidth: true
Layout.preferredWidth: itemRow.width - machineSelection.width - printSetupSelectorItem.width - 2 * UM.Theme.getSize("default_lining").width
}
// Separator line
Rectangle
{
height: parent.height
width: UM.Theme.getSize("default_lining").width
color: UM.Theme.getColor("lining")
Layout.preferredWidth: parent.machineSelectorWidth * 2
}
Item
@ -120,24 +111,12 @@ Item
id: background
height: UM.Theme.getSize("stage_menu").height
width: UM.Theme.getSize("stage_menu").height
border.color: UM.Theme.getColor("lining")
border.width: UM.Theme.getSize("default_lining").width
radius: UM.Theme.getSize("default_radius").width
color: openFileButton.hovered ? UM.Theme.getColor("action_button_hovered") : UM.Theme.getColor("action_button")
}
DropShadow
{
id: shadow
// Don't blur the shadow
radius: 0
anchors.fill: background
source: background
verticalOffset: 2
visible: true
color: UM.Theme.getColor("action_button_shadow")
// Should always be drawn behind the background.
z: background.z - 1
}
}
}
}

View File

@ -56,6 +56,8 @@ Item
// How much padding is needed around the header & button
property alias headerPadding: background.padding
property alias headerBackgroundBorder: background.border
// What icon should be displayed on the right.
property alias iconSource: collapseButton.source

View File

@ -50,6 +50,8 @@ Item
// How much padding is needed around the header & button
property alias headerPadding: background.padding
property alias headerBackgroundBorder: background.border
// What icon should be displayed on the right.
property alias iconSource: collapseButton.source

View File

@ -56,16 +56,27 @@ Cura.ExpandablePopup
id: extruderIcon
materialColor: model.color
extruderEnabled: model.enabled
height: parent.height
width: height
width: UM.Theme.getSize("button_icon").width
anchors.verticalCenter: parent.verticalCenter
}
Item
{
height: childrenRect.height
anchors
{
left: extruderIcon.right
leftMargin: UM.Theme.getSize("default_margin").width
verticalCenter: parent.verticalCenter
right: parent.right
rightMargin: UM.Theme.getSize("default_margin").width
}
// Label for the brand of the material
Label
{
id: typeAndBrandNameLabel
id: materialBrandColorTypeLabel
text: model.material_brand + " " + model.material
text: model.material_brand == model.color_name ? model.color_name + " " + model.material_type : model.material_brand + " " + model.color_name + " " + model.material_type
elide: Text.ElideRight
font: UM.Theme.getFont("default")
color: UM.Theme.getColor("text")
@ -73,12 +84,50 @@ Cura.ExpandablePopup
anchors
{
top: extruderIcon.top
left: extruderIcon.right
leftMargin: UM.Theme.getSize("default_margin").width
top: parent.top
left: parent.left
right: parent.right
rightMargin: UM.Theme.getSize("default_margin").width
}
visible: !truncated
}
Label
{
id: materialColorTypeLabel
text: model.color_name + " " + model.material_type
elide: Text.ElideRight
font: UM.Theme.getFont("default")
color: UM.Theme.getColor("text")
renderType: Text.NativeRendering
anchors
{
top: parent.top
left: parent.left
right: parent.right
}
visible: !materialBrandColorTypeLabel.visible && !truncated
}
Label
{
id: materialTypeLabel
text: model.material_type
elide: Text.ElideRight
font: UM.Theme.getFont("default")
color: UM.Theme.getColor("text")
renderType: Text.NativeRendering
anchors
{
top: parent.top
left: parent.left
right: parent.right
}
visible: !materialBrandColorTypeLabel.visible && !materialColorTypeLabel.visible
}
// Label that shows the name of the variant
Label
@ -95,11 +144,10 @@ Cura.ExpandablePopup
anchors
{
left: extruderIcon.right
leftMargin: UM.Theme.getSize("default_margin").width
top: typeAndBrandNameLabel.bottom
left: parent.left
top: materialBrandColorTypeLabel.bottom
right: parent.right
rightMargin: UM.Theme.getSize("default_margin").width
}
}
}
}

View File

@ -17,6 +17,9 @@ Cura.ExpandableComponent
contentPadding: UM.Theme.getSize("default_lining").width
contentHeaderTitle: catalog.i18nc("@label", "Print settings")
enableHeaderShadow: false
headerBackgroundBorder.width: UM.Theme.getSize("default_lining").width
headerBackgroundBorder.color: UM.Theme.getColor("lining")
enabled: !preSlicedData
disabledText: catalog.i18nc("@label shown when we load a Gcode file", "Print setup disabled. G-code file can not be modified.")

View File

@ -44,7 +44,6 @@ Item
anchors.top: parent.top
anchors.right: parent.right
spacing: UM.Theme.getSize("default_lining").height
Repeater
{
@ -69,7 +68,7 @@ Item
source: UM.Theme.getIcon(model.icon) != "" ? UM.Theme.getIcon(model.icon) : "file:///" + model.location + "/" + model.icon
color: UM.Theme.getColor("icon")
sourceSize: UM.Theme.getSize("button_icon")
sourceSize: Math.round(UM.Theme.getSize("button") / 2)
}
onCheckedChanged:
@ -131,7 +130,6 @@ 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
{

View File

@ -25,22 +25,7 @@ Button
{
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")
}
color: UM.Theme.getColor("toolbar_background")
radius: UM.Theme.getSize("default_radius").width
Rectangle
@ -84,16 +69,35 @@ Button
color: parent.color
}
}
contentItem: Item
contentItem: Rectangle
{
opacity: parent.enabled ? 1.0 : 0.2
implicitWidth: Math.round(UM.Theme.getSize("button").width * 0.75)
implicitHeight: Math.round(UM.Theme.getSize("button").height * 0.75)
radius: Math.round(width * 0.5)
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")
}
Loader
{
id: contentItemLoader
anchors.centerIn: parent
width: UM.Theme.getSize("button_icon").width
height: UM.Theme.getSize("button_icon").height
width: Math.round(UM.Theme.getSize("button").width / 2)
height: Math.round(UM.Theme.getSize("button").height / 2)
}
}