Implement basic styling of material management page

CURA-8979
This commit is contained in:
casper 2022-03-09 15:26:55 +01:00
parent 01ecc799fa
commit f9a5cb33fd
4 changed files with 648 additions and 642 deletions

View File

@ -21,17 +21,6 @@ UM.Dialog
property alias swatchGridColumns: colorSwatchGrid.columns
// In this case we would like to let the content of the dialog determine the size of the dialog
// however with the current implementation of the dialog this is not possible, so instead we calculate
// the size of the dialog ourselves.
minimumWidth: content.width + 4 * margin
minimumHeight:
content.height // content height
+ buttonRow.height // button row height
+ 5 * margin // top and bottom margin and margin between buttons and content
width: minimumWidth
height: minimumHeight
property alias color: colorInput.text
property var swatchColors: [
"#2161AF", "#57AFB2", "#F7B32D", "#E33D4A", "#C088AD",

View File

@ -3,13 +3,12 @@
import QtQuick 2.7
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.3
import QtQuick.Dialogs 1.2
import UM 1.5 as UM
import Cura 1.5 as Cura
Item
UM.ManagementPage
{
id: base
@ -36,12 +35,6 @@ Item
property var extruder_position: Cura.ExtruderManager.activeExtruderIndex
property var active_root_material_id: Cura.MachineManager.currentRootMaterialId[extruder_position]
UM.I18nCatalog
{
id: catalog
name: "cura"
}
function resetExpandedActiveMaterial()
{
materialListView.expandActiveMaterial(active_root_material_id)
@ -74,57 +67,14 @@ Item
}
}
// Main layout
Label
{
id: titleLabel
anchors
{
top: parent.top
left: parent.left
right: parent.right
margins: 5 * screenScaleFactor
}
font.pointSize: 18
text: catalog.i18nc("@title:tab", "Materials")
}
title: catalog.i18nc("@title:tab", "Materials")
scrollviewCaption: catalog.i18nc("@label", "Materials compatible with active printer:") + `<br /><b>${Cura.MachineManager.activeMachine.name}</b>`
// Button Row
Row
{
id: buttonRow
anchors
{
left: parent.left
right: parent.right
top: titleLabel.bottom
}
height: childrenRect.height
// Activate button
Button
{
id: activateMenuButton
text: catalog.i18nc("@action:button", "Activate")
icon.name: "list-activate"
enabled: !isCurrentItemActivated && Cura.MachineManager.activeMachine.hasMaterials
onClicked:
{
forceActiveFocus()
// Set the current material as the one to be activated (needed to force the UI update)
base.newRootMaterialIdToSwitchTo = base.currentItem.root_material_id
const extruder_position = Cura.ExtruderManager.activeExtruderIndex
Cura.MachineManager.setMaterial(extruder_position, base.currentItem.container_node)
}
}
// Create button
Button
buttons: [
Cura.SecondaryButton
{
id: createMenuButton
text: catalog.i18nc("@action:button", "Create")
icon.name: "list-add"
text: catalog.i18nc("@action:button", "Create new")
enabled: Cura.MachineManager.activeMachine.hasMaterials
onClicked:
{
@ -132,72 +82,22 @@ Item
base.newRootMaterialIdToSwitchTo = base.materialManagementModel.createMaterial();
base.toActivateNewMaterial = true;
}
}
// Duplicate button
Button
{
id: duplicateMenuButton
text: catalog.i18nc("@action:button", "Duplicate");
icon.name: "list-add"
enabled: base.hasCurrentItem
onClicked:
{
forceActiveFocus();
base.newRootMaterialIdToSwitchTo = base.materialManagementModel.duplicateMaterial(base.currentItem.container_node);
base.toActivateNewMaterial = true;
}
}
// Remove button
Button
{
id: removeMenuButton
text: catalog.i18nc("@action:button", "Remove")
icon.name: "list-remove"
enabled: base.hasCurrentItem && !base.currentItem.is_read_only && !base.isCurrentItemActivated && base.materialManagementModel.canMaterialBeRemoved(base.currentItem.container_node)
onClicked:
{
forceActiveFocus();
confirmRemoveMaterialDialog.open();
}
}
// Import button
Button
},
Cura.SecondaryButton
{
id: importMenuButton
text: catalog.i18nc("@action:button", "Import")
icon.name: "document-import"
onClicked:
{
forceActiveFocus();
importMaterialDialog.open();
}
enabled: Cura.MachineManager.activeMachine.hasMaterials
}
// Export button
Button
{
id: exportMenuButton
text: catalog.i18nc("@action:button", "Export")
icon.name: "document-export"
onClicked:
{
forceActiveFocus();
exportMaterialDialog.open();
}
enabled: base.hasCurrentItem
}
//Sync button.
Button
},
Cura.SecondaryButton
{
id: syncMaterialsButton
text: catalog.i18nc("@action:button Sending materials to printers", "Sync with Printers")
icon.name: "sync-synchronizing"
text: catalog.i18nc("@action:button", "Sync with Printers")
onClicked:
{
forceActiveFocus();
@ -205,73 +105,15 @@ Item
}
visible: Cura.MachineManager.activeMachine.supportsMaterialExport
}
}
]
Item
{
id: contentsItem
anchors
{
top: titleLabel.bottom
left: parent.left
right: parent.right
bottom: parent.bottom
margins: 5 * screenScaleFactor
bottomMargin: 0
}
clip: true
}
onHamburgeButtonClicked: menu.popup(content_item, content_item.width - menu.width, hamburger_button.height)
Item
{
anchors
{
top: buttonRow.bottom
topMargin: UM.Theme.getSize("default_margin").height
left: parent.left
right: parent.right
bottom: parent.bottom
}
SystemPalette { id: palette }
Label
{
id: captionLabel
anchors
{
top: parent.top
left: parent.left
}
visible: text != ""
text:
{
var caption = catalog.i18nc("@action:label", "Printer") + ": " + Cura.MachineManager.activeMachine.name;
if (Cura.MachineManager.activeMachine.hasVariants)
{
var activeVariantName = ""
if(Cura.MachineManager.activeStack != null)
{
activeVariantName = Cura.MachineManager.activeStack.variant.name
}
caption += ", " + Cura.MachineManager.activeDefinitionVariantsName + ": " + activeVariantName;
}
return caption;
}
width: materialScrollView.width
elide: Text.ElideRight
}
ScrollView
listContent: ScrollView
{
id: materialScrollView
anchors
{
top: captionLabel.visible ? captionLabel.bottom : parent.top
topMargin: captionLabel.visible ? UM.Theme.getSize("default_margin").height : 0
bottom: parent.bottom
left: parent.left
}
anchors.fill: parent
anchors.margins: parent.border.width
width: (parent.width * 0.4) | 0
clip: true
@ -295,18 +137,70 @@ Item
}
}
Item
{
id: content_item
anchors.fill: parent
Cura.Menu
{
id: menu
Cura.MenuItem
{
id: activateMenuButton
text: catalog.i18nc("@action:button", "Activate")
onClicked:
{
forceActiveFocus()
// Set the current material as the one to be activated (needed to force the UI update)
base.newRootMaterialIdToSwitchTo = base.currentItem.root_material_id
const extruder_position = Cura.ExtruderManager.activeExtruderIndex
Cura.MachineManager.setMaterial(extruder_position, base.currentItem.container_node)
}
}
Cura.MenuItem
{
id: duplicateMenuButton
text: catalog.i18nc("@action:button", "Duplicate");
enabled: base.hasCurrentItem
onClicked:
{
forceActiveFocus();
base.newRootMaterialIdToSwitchTo = base.materialManagementModel.duplicateMaterial(base.currentItem.container_node);
base.toActivateNewMaterial = true;
}
}
Cura.MenuItem
{
id: removeMenuButton
text: catalog.i18nc("@action:button", "Remove")
enabled: base.hasCurrentItem && !base.currentItem.is_read_only && !base.isCurrentItemActivated && base.materialManagementModel.canMaterialBeRemoved(base.currentItem.container_node)
onClicked:
{
forceActiveFocus();
confirmRemoveMaterialDialog.open();
}
}
Cura.MenuItem
{
id: exportMenuButton
text: catalog.i18nc("@action:button", "Export")
onClicked:
{
forceActiveFocus();
exportMaterialDialog.open();
}
enabled: base.hasCurrentItem
}
}
MaterialsDetailsPanel
{
id: materialDetailsPanel
anchors
{
left: materialScrollView.right
leftMargin: UM.Theme.getSize("default_margin").width
top: parent.top
bottom: parent.bottom
right: parent.right
}
}
anchors.fill: parent
}
// Dialogs
@ -383,3 +277,4 @@ Item
}
}
}
}

View File

@ -35,10 +35,9 @@ Rectangle
{
id: swatch
color: material != null ? material.color_code : "transparent"
border.width: UM.Theme.getSize("default_lining").width
border.color: "black"
width: UM.Theme.getSize("favorites_button_icon").width
height: UM.Theme.getSize("favorites_button_icon").height
width: UM.Theme.getSize("icon_indicator").width
height: UM.Theme.getSize("icon_indicator").height
radius: width / 2
anchors.verticalCenter: materialSlot.verticalCenter
anchors.left: materialSlot.left
anchors.leftMargin: UM.Theme.getSize("default_margin").width

View File

@ -4,6 +4,7 @@
import QtQuick 2.7
import QtQuick.Controls 2.15
import QtQuick.Dialogs 1.2
import QtQuick.Layouts 1.3
import UM 1.5 as UM
import Cura 1.0 as Cura
@ -82,15 +83,32 @@ Item
}
}
Rectangle
{
color: UM.Theme.getColor("main_background")
anchors
{
top: pageSelectorTabRow.bottom
topMargin: -UM.Theme.getSize("default_lining").width
left: parent.left
right: parent.right
bottom: parent.bottom
}
border.width: UM.Theme.getSize("default_lining").width
border.color: UM.Theme.getColor("thick_lining")
visible: base.hasCurrentItem
ScrollView
{
id: informationPage
anchors
{
top: pageSelectorTabRow.bottom
left: parent.left
right: parent.right
bottom: parent.bottom
fill: parent
topMargin: UM.Theme.getSize("thin_margin").height
bottomMargin: UM.Theme.getSize("thin_margin").height
leftMargin: UM.Theme.getSize("thin_margin").width
rightMargin: UM.Theme.getSize("thin_margin").width
}
ScrollBar.vertical: UM.ScrollBar
@ -107,17 +125,13 @@ Item
clip: true
visible: pageSelectorTabRow.currentItem.activeView === "information"
property real columnWidth: (width * 0.5 - UM.Theme.getSize("default_margin").width) | 0
property real columnWidth: Math.floor(width / 2 - UM.Theme.getSize("narrow_margin").width)
property real rowHeight: UM.Theme.getSize("setting_control").height
Flow
Column
{
id: containerGrid
x: UM.Theme.getSize("default_margin").width
y: UM.Theme.getSize("default_lining").height
width: base.width
property real rowHeight: brandTextField.height + UM.Theme.getSize("default_lining").height
width: informationPage.width
spacing: UM.Theme.getSize("narrow_margin").height
Cura.MessageDialog
{
@ -147,7 +161,15 @@ Item
}
}
Label { width: informationPage.columnWidth; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Display Name") }
Row
{
spacing: UM.Theme.getSize("narrow_margin").width
UM.Label
{
height: informationPage.rowHeight
width: informationPage.columnWidth
text: catalog.i18nc("@label", "Display Name")
}
Cura.TextField
{
id: displayNameTextField;
@ -156,8 +178,17 @@ Item
enabled: base.editingEnabled;
onEditingFinished: base.updateMaterialDisplayName(properties.name, text)
}
}
Label { width: informationPage.columnWidth; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Brand") }
Row
{
spacing: UM.Theme.getSize("narrow_margin").width
UM.Label
{
height: informationPage.rowHeight
width: informationPage.columnWidth
text: catalog.i18nc("@label", "Brand")
}
Cura.TextField
{
id: brandTextField
@ -166,8 +197,17 @@ Item
enabled: base.editingEnabled
onEditingFinished: base.updateMaterialBrand(properties.brand, text)
}
}
Label { width: informationPage.columnWidth; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Material Type") }
Row
{
spacing: UM.Theme.getSize("narrow_margin").width
UM.Label
{
height: informationPage.rowHeight
width: informationPage.columnWidth
text: catalog.i18nc("@label", "Material Type")
}
Cura.TextField
{
id: materialTypeField
@ -176,26 +216,42 @@ Item
enabled: base.editingEnabled
onEditingFinished: base.updateMaterialType(properties.material, text)
}
}
Row
{
spacing: UM.Theme.getSize("narrow_margin").width
UM.Label
{
height: informationPage.rowHeight
width: informationPage.columnWidth
verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Color")
}
Label { width: informationPage.columnWidth; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Color") }
Row
{
width: informationPage.columnWidth
height: parent.rowHeight
spacing: Math.round(UM.Theme.getSize("default_margin").width / 2)
// color indicator square
Rectangle
Item
{
id: colorSelector
color: properties.color_code
width: Math.round(colorLabel.height * 0.75)
height: Math.round(colorLabel.height * 0.75)
border.width: UM.Theme.getSize("default_lining").height
anchors.verticalCenter: parent.verticalCenter
width: childrenRect.width + 2 * UM.Theme.getSize("narrow_margin").width
height: childrenRect.height + 2 * UM.Theme.getSize("narrow_margin").height
Rectangle
{
color: properties.color_code
width: UM.Theme.getSize("icon_indicator").width
height: UM.Theme.getSize("icon_indicator").height
radius: width / 2
anchors.centerIn: parent
}
// open the color selection dialog on click
MouseArea
{
@ -225,13 +281,27 @@ Item
onAccepted: base.setMetaDataEntry("color_code", properties.color_code, color)
}
}
}
Item { width: parent.width; height: UM.Theme.getSize("default_margin").height }
Label { width: parent.width; height: parent.rowHeight; font.bold: true; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Properties") }
Label { width: informationPage.columnWidth; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Density") }
UM.Label
{
width: parent.width
height: parent.rowHeight
font: UM.Theme.getFont("default_bold")
verticalAlignment: Qt.AlignVCenter
text: catalog.i18nc("@label", "Properties")
}
Row
{
height: parent.rowHeight
spacing: UM.Theme.getSize("narrow_margin").width
UM.Label
{
height: informationPage.rowHeight
width: informationPage.columnWidth
text: catalog.i18nc("@label", "Density")
}
Cura.SpinBox
{
enabled: base.editingEnabled
@ -245,8 +315,18 @@ Item
onEditingFinished: base.setMetaDataEntry("properties/density", properties.density, value)
onValueChanged: updateCostPerMeter()
}
}
Label { width: informationPage.columnWidth; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Diameter") }
Row
{
height: parent.rowHeight
spacing: UM.Theme.getSize("narrow_margin").width
UM.Label
{
height: informationPage.rowHeight
width: informationPage.columnWidth
text: catalog.i18nc("@label", "Diameter")
}
Cura.SpinBox
{
enabled: base.editingEnabled
@ -279,9 +359,18 @@ Item
}
onValueChanged: updateCostPerMeter()
}
}
Label { width: informationPage.columnWidth; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Filament Cost") }
Row
{
height: parent.rowHeight
spacing: UM.Theme.getSize("narrow_margin").width
UM.Label
{
height: informationPage.rowHeight
width: informationPage.columnWidth
text: catalog.i18nc("@label", "Filament Cost")
}
Cura.SpinBox
{
id: spoolCostSpinBox
@ -298,8 +387,18 @@ Item
updateCostPerMeter()
}
}
}
Label { width: informationPage.columnWidth; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Filament weight") }
Row
{
height: parent.rowHeight
spacing: UM.Theme.getSize("narrow_margin").width
UM.Label
{
height: informationPage.rowHeight
width: informationPage.columnWidth
text: catalog.i18nc("@label", "Filament weight")
}
Cura.SpinBox
{
id: spoolWeightSpinBox
@ -316,35 +415,53 @@ Item
updateCostPerMeter()
}
}
}
Label { width: informationPage.columnWidth; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Filament length") }
Label
Row
{
height: parent.rowHeight
spacing: UM.Theme.getSize("narrow_margin").width
UM.Label
{
height: informationPage.rowHeight
width: informationPage.columnWidth
text: catalog.i18nc("@label", "Filament length")
}
UM.Label
{
width: informationPage.columnWidth
text: "~ %1 m".arg(Math.round(base.spoolLength))
verticalAlignment: Qt.AlignVCenter
height: parent.rowHeight
height: informationPage.rowHeight
}
}
Label { width: informationPage.columnWidth; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Cost per Meter") }
Label
Row
{
height: parent.rowHeight
spacing: UM.Theme.getSize("narrow_margin").width
UM.Label
{
height: informationPage.rowHeight
width: informationPage.columnWidth
text: catalog.i18nc("@label", "Cost per Meter")
}
UM.Label
{
height: informationPage.rowHeight
width: informationPage.columnWidth
text: "~ %1 %2/m".arg(base.costPerMeter.toFixed(2)).arg(base.currency)
verticalAlignment: Qt.AlignVCenter
height: parent.rowHeight
}
}
Item { width: parent.width; height: UM.Theme.getSize("default_margin").height; visible: unlinkMaterialButton.visible }
Label
UM.Label
{
width: 2 * informationPage.columnWidth
verticalAlignment: Qt.AlignVCenter
height: parent.rowHeight
width: informationPage.width
text: catalog.i18nc("@label", "This material is linked to %1 and shares some of its properties.").arg(base.linkedMaterialNames)
wrapMode: Text.WordWrap
visible: unlinkMaterialButton.visible
}
Button
Cura.SecondaryButton
{
id: unlinkMaterialButton
text: catalog.i18nc("@label", "Unlink Material")
@ -356,15 +473,17 @@ Item
}
}
Item { width: parent.width; height: UM.Theme.getSize("default_margin").height }
Label { width: parent.width; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Description") }
UM.Label
{
width: informationPage.width
height: parent.rowHeight
text: catalog.i18nc("@label", "Description")
}
ReadOnlyTextArea
{
text: properties.description;
width: informationPage.columnWidth * 2
height: 0.75 * informationPage.columnWidth
text: properties.description
width: informationPage.width
height: 0.4 * informationPage.width
wrapMode: Text.WordWrap
readOnly: !base.editingEnabled
@ -372,20 +491,23 @@ Item
onEditingFinished: base.setMetaDataEntry("description", properties.description, text)
}
Label { width: parent.width; height: parent.rowHeight; verticalAlignment: Qt.AlignVCenter; text: catalog.i18nc("@label", "Adhesion Information") }
UM.Label
{
width: informationPage.width
height: parent.rowHeight
text: catalog.i18nc("@label", "Adhesion Information")
}
ReadOnlyTextArea
{
text: properties.adhesion_info
width: 2 * informationPage.columnWidth
width: informationPage.width
height: 0.4 * informationPage.width
wrapMode: Text.WordWrap
height: 0.75 * informationPage.columnWidth
readOnly: !base.editingEnabled
onEditingFinished: base.setMetaDataEntry("adhesion_info", properties.adhesion_info, text)
}
Item { width: parent.width; height: UM.Theme.getSize("default_margin").height }
}
}
@ -414,7 +536,7 @@ Item
width: childrenRect.width
height: childrenRect.height
text: model.description
Label
UM.Label
{
id: label
width: base.firstColumnWidth;
@ -477,6 +599,7 @@ Item
}
}
}
}
function updateCostPerMeter()
{