From fb580627fb98601e6621e797e6a08b8c5c8725bc Mon Sep 17 00:00:00 2001 From: Arjen Hiemstra Date: Thu, 26 Mar 2015 14:33:10 +0100 Subject: [PATCH] Start implementing new Cura design --- qml/OutputGCodeButton.qml | 44 ++++---- qml/Printer.qml | 126 ++++++++++++----------- qml/PrinterActions.qml | 2 +- qml/PrinterButton.qml | 10 ++ qml/PrinterToolbar.qml | 134 +----------------------- qml/Sidebar.qml | 54 ++++++++++ qml/SidebarAdvanced.qml | 186 ++++++++++++++++++++++++++++++++++ qml/SidebarCategoryHeader.qml | 46 +++++++++ qml/SidebarHeader.qml | 117 +++++++++++++++++++++ qml/SidebarSimple.qml | 43 ++++++++ 10 files changed, 544 insertions(+), 218 deletions(-) create mode 100644 qml/PrinterButton.qml create mode 100644 qml/Sidebar.qml create mode 100644 qml/SidebarAdvanced.qml create mode 100644 qml/SidebarCategoryHeader.qml create mode 100644 qml/SidebarHeader.qml create mode 100644 qml/SidebarSimple.qml diff --git a/qml/OutputGCodeButton.qml b/qml/OutputGCodeButton.qml index 52af6ee4be..6fe152a214 100644 --- a/qml/OutputGCodeButton.qml +++ b/qml/OutputGCodeButton.qml @@ -8,18 +8,31 @@ import UM 1.0 as UM Rectangle { id: base; - color: UM.Styles.primaryColor; - border.width: 1; - border.color: UM.Styles.borderColor; + color: UM.Theme.colors.primary; signal saveRequested(); signal saveToSDRequested(); + Image { + id: icon; + + anchors.left: parent.left; + anchors.top: parent.top; + anchors.bottom: parent.bottom; + + width: height; + + sourceSize.width: width; + sourceSize.height: height; + + source: UM.Theme.icons.save; + } + Label { id: label; anchors.verticalCenter: parent.verticalCenter; - anchors.left: parent.left; - anchors.right: icon.left; + anchors.left: icon.left; + anchors.right: parent.right; horizontalAlignment: Text.AlignHCenter; font.pointSize: UM.Styles.largeTextSize; color: "white"; @@ -28,27 +41,6 @@ Rectangle { text: qsTr("Save"); } - Rectangle { - id: icon; - - anchors.right: parent.right; - anchors.top: parent.top; - anchors.bottom: parent.bottom; - anchors.margins: 1; - - color: "white"; - - width: height; - - Rectangle { - anchors { left: parent.left; top: parent.top; bottom: parent.bottom; } - width: 1; - color: UM.Styles.borderColor; - } - - UM.RecolorImage { id: iconImage; anchors.centerIn: parent; width: 32; height: 32; source: UM.Resources.getIcon('save.png'); color: '#000'; } - } - MouseArea { anchors.fill: parent; diff --git a/qml/Printer.qml b/qml/Printer.qml index a1b476fbe2..d1cf43a0f0 100644 --- a/qml/Printer.qml +++ b/qml/Printer.qml @@ -68,9 +68,8 @@ UM.MainWindow { MenuSeparator { } - MenuItem { action: actions.addMachine; } - MenuItem { action: actions.settings; } + MenuItem { action: actions.configureMachines; } } Menu { @@ -117,70 +116,20 @@ UM.MainWindow { } } - PrinterToolbar { - id: toolbar; + Sidebar { + id: sidebar; anchors { - left: parent.left; - right: parent.right; top: parent.top; + bottom: parent.bottom; + right: parent.right; + rightMargin: UM.Theme.sizes.window_margin.width; } - undo: actions.undo; - redo: actions.redo; - settings: actions.settings; - } + width: UM.Theme.sizes.panel.width; - FilePane { - id: files; - - anchors.left: parent.left; - anchors.leftMargin: UM.Styles.windowLeftMargin; - anchors.top: toolbar.bottom; - anchors.topMargin: -1; - - border.width: 1; - border.color: UM.Styles.borderColor; - - width: UM.Styles.panelWidth; - height: base.height / 2 - UM.Styles.toolbarHeight; - - onRequestOpenFile: actions.open.trigger(); - onOpenFile: UM.Controller.addMesh(file); - } - - SettingsPane { - id: settings; - - anchors.right: parent.right; - anchors.rightMargin: UM.Styles.windowRightMargin; - anchors.top: toolbar.bottom; - anchors.topMargin: -1; - - border.width: 1; - border.color: UM.Styles.borderColor; - - width: UM.Styles.panelWidth; - - expandedHeight: base.height; - - onShowDescription: { - descriptionPane.show(text, x, y - contentItem.y); - } - } - - OutputGCodeButton { - anchors.right: parent.right; - anchors.rightMargin: UM.Styles.windowRightMargin; - - anchors.bottom: parent.bottom; - anchors.bottomMargin: -1; - - width: UM.Styles.panelWidth; - height: 40; - - onSaveRequested: actions.save.trigger(); - onSaveToSDRequested: Printer.saveToSD() + addMachineAction: actions.addMachine; + configureMachinesAction: actions.configureMachines; } UM.MessageStack { @@ -194,6 +143,61 @@ UM.MainWindow { id: descriptionPane; anchors.right: settings.left; } + + PrinterButton { + id: openFileButton; + + iconSource: UM.Theme.icons.open; + + anchors { + top: parent.top; + topMargin: UM.Theme.sizes.window_margin.height; + left: parent.left; + leftMargin: UM.Theme.sizes.window_margin.width; + } + + action: actions.open; + } + + PrinterButton { + anchors { + top: parent.top; + topMargin: UM.Theme.sizes.window_margin.height; + right: sidebar.left; + rightMargin: UM.Theme.sizes.window_margin.width; + } + + //: View Mode toolbar button + text: qsTr("View Mode"); + iconSource: UM.Theme.icons.viewmode; + + menu: Menu { + id: viewMenu; + Instantiator { + model: UM.Models.viewModel; + MenuItem { + text: model.name; + checkable: true; + checked: model.active; + exclusiveGroup: viewMenuGroup; + onTriggered: UM.Controller.setActiveView(model.id); + } + onObjectAdded: viewMenu.insertItem(index, object) + onObjectRemoved: viewMenu.removeItem(object) + } + + ExclusiveGroup { id: viewMenuGroup; } + } + } + + PrinterToolbar { + anchors { + left: parent.left; + leftMargin: UM.Theme.sizes.window_margin.width; + bottom: parent.bottom; + bottomMargin: UM.Theme.sizes.window_margin.height; + } + } } } @@ -249,7 +253,7 @@ UM.MainWindow { addMachine.onTriggered: addMachine.visible = true; preferences.onTriggered: preferences.visible = true; - settings.onTriggered: { preferences.visible = true; preferences.setPage(1); } + configureMachines.onTriggered: { preferences.visible = true; preferences.setPage(1); } } Menu { diff --git a/qml/PrinterActions.qml b/qml/PrinterActions.qml index 019a796d18..ce54e4f88c 100644 --- a/qml/PrinterActions.qml +++ b/qml/PrinterActions.qml @@ -22,7 +22,7 @@ Item { property alias resetAll: resetAllAction; property alias addMachine: addMachineAction; - property alias settings: settingsAction; + property alias configureMachines: settingsAction; property alias preferences: preferencesAction; property alias help: helpAction; diff --git a/qml/PrinterButton.qml b/qml/PrinterButton.qml new file mode 100644 index 0000000000..48ecaa64e7 --- /dev/null +++ b/qml/PrinterButton.qml @@ -0,0 +1,10 @@ +import QtQuick 2.2 +import QtQuick.Controls 1.1 +import QtQuick.Controls.Styles 1.1 +import QtQuick.Layouts 1.1 + +import UM 1.0 as UM + +Button { + style: UM.Theme.styles.tool_button; +} diff --git a/qml/PrinterToolbar.qml b/qml/PrinterToolbar.qml index bf40ad64c1..04fbda0bf7 100644 --- a/qml/PrinterToolbar.qml +++ b/qml/PrinterToolbar.qml @@ -5,44 +5,19 @@ import QtQuick.Layouts 1.1 import UM 1.0 as UM -UM.Toolbar { +RowLayout { id: base; - property Action undo; - property Action redo; - property Action settings; - - Item { width: UM.Styles.windowLeftMargin; } - - Item { - width: UM.Styles.panelWidth; - Image { anchors.centerIn: parent; source: UM.Resources.getIcon("cura_logo.png"); } - } - - Item { width: UM.Styles.toolbarSpacing; } - - ToolButton { style: UM.ToolbarButtonStyle { } action: base.undo; iconSource: UM.Resources.getIcon('undo.png'); } - ToolButton { style: UM.ToolbarButtonStyle { } action: base.redo; iconSource: UM.Resources.getIcon('redo.png'); } - - // Item { width: 10; } - - // ToolButton { text: "3D"; onClicked: UM.Scene.setActiveCamera('3d'); } - // ToolButton { text: "Left"; onClicked: UM.Scene.setActiveCamera('left'); } - // ToolButton { text: "Top"; onClicked: UM.Scene.setActiveCamera('top'); } - // ToolButton { text: "Front"; onClicked: UM.Scene.setActiveCamera('front'); } - - Item { Layout.fillWidth: true; } + spacing: UM.Theme.sizes.default_margin.width * 2; Repeater { id: repeat model: UM.Models.toolModel - ToolButton { - style: UM.ToolbarButtonStyle { } - + PrinterButton { text: model.name; - iconSource: UM.Resources.getIcon(model.icon); + iconSource: UM.Theme.icons[model.icon]; tooltip: model.description; checkable: true; @@ -56,105 +31,4 @@ UM.Toolbar { } } } - - Item { Layout.fillWidth: true; } - - ToolButton { - //: View Mode toolbar button - text: qsTr("View Mode"); - iconSource: UM.Resources.getIcon("viewmode.png"); - - style: UM.ToolbarButtonStyle { } - - menu: Menu { - id: viewMenu; - Instantiator { - model: UM.Models.viewModel; - MenuItem { - text: model.name; - checkable: true; - checked: model.active; - exclusiveGroup: viewMenuGroup; - onTriggered: UM.Controller.setActiveView(model.id); - } - onObjectAdded: viewMenu.insertItem(index, object) - onObjectRemoved: viewMenu.removeItem(object) - } - - ExclusiveGroup { id: viewMenuGroup; } - } - } - - Item { width: UM.Styles.toolbarSpacing; } - - ToolButton { - id: machineButton; - width: UM.Styles.panelWidth - UM.Styles.toolbarButtonWidth - 1; - height: UM.Styles.toolbarButtonHeight; - text: UM.Application.machineName; - - style: UM.ToolbarButtonStyle { - backgroundColor: "white"; - backgroundHighlightColor: "#eee"; - - label: Item { - anchors.fill: parent; - Label { - anchors { - top: parent.top; - topMargin: 2; - left: parent.left; - right: parent.right; - } - text: control.text; - elide: Text.ElideRight; - fontSizeMode: Text.HorizontalFit; - minimumPointSize: UM.Styles.smallTextSize; - font.pointSize: UM.Styles.largeTextSize; - - verticalAlignment: Text.AlignBottom; - } - Label { - anchors.bottom: parent.bottom; - anchors.bottomMargin: 2; - anchors.left: parent.left; - //: Machine toolbar button - text: qsTr("Machine"); - font.pointSize: UM.Styles.tinyTextSize; - font.capitalization: Font.AllUppercase; - } - } - } - - menu: Menu { - id: machineMenu; - Instantiator { - model: UM.Models.machinesModel - MenuItem { - text: model.name; - checkable: true; - checked: model.active; - exclusiveGroup: machineMenuGroup; - onTriggered: UM.Models.machinesModel.setActive(index) - } - onObjectAdded: machineMenu.insertItem(index, object) - onObjectRemoved: machineMenu.removeItem(object) - } - - ExclusiveGroup { id: machineMenuGroup; } - } - } - - ToolButton { - style: UM.ToolbarButtonStyle { - backgroundColor: "white"; - foregroundColor: "black"; - backgroundHighlightColor: "#eee"; - foregroundHighlightColor: "black"; - } - action: base.settings; - iconSource: UM.Resources.getIcon("settings.png"); - } - - Item { width: UM.Styles.windowRightMargin; } } diff --git a/qml/Sidebar.qml b/qml/Sidebar.qml new file mode 100644 index 0000000000..d7fc4562b5 --- /dev/null +++ b/qml/Sidebar.qml @@ -0,0 +1,54 @@ +import QtQuick 2.2 +import QtQuick.Controls 1.1 +import QtQuick.Controls.Styles 1.1 +import QtQuick.Layouts 1.1 + +import UM 1.0 as UM + +Rectangle { + id: base; + + property Action addMachineAction; + property Action configureMachinesAction; + + MouseArea { + anchors.fill: parent + acceptedButtons: Qt.AllButtons; + + onWheel: { + wheel.accepted = true; + } + } + + ColumnLayout { + anchors.fill: parent; + anchors.topMargin: UM.Theme.sizes.default_margin.height; + anchors.bottomMargin: UM.Theme.sizes.default_margin.height; + + spacing: UM.Theme.sizes.default_margin.height; + + SidebarHeader { + id: header; + + Layout.fillWidth: true; + + addMachineAction: base.addMachineAction; + configureMachinesAction: base.configureMachinesAction; + } + + Loader { + id: sidebarContents; + + Layout.fillWidth: true; + Layout.fillHeight: true; + + source: header.currentModeFile; + } + + OutputGCodeButton { + Layout.preferredWidth: base.width - UM.Theme.sizes.default_margin.width * 2; + Layout.preferredHeight: UM.Theme.sizes.section.height; + Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter; + } + } +} diff --git a/qml/SidebarAdvanced.qml b/qml/SidebarAdvanced.qml new file mode 100644 index 0000000000..40fb4ee683 --- /dev/null +++ b/qml/SidebarAdvanced.qml @@ -0,0 +1,186 @@ +import QtQuick 2.2 +import QtQuick.Controls 1.1 +import QtQuick.Controls.Styles 1.1 +import QtQuick.Layouts 1.1 + +import UM 1.0 as UM + +UM.SettingsView { + id: settingsView; + + onShowDescription: base.showDescription(text, x, y); +} +// +// Rectangle { +// id: base; +// +// height: childrenRect.height; +// +// signal showDescription(string text, real x, real y); +// +// +// +// Column { +// id: contents; +// +// anchors { +// left: parent.left; +// leftMargin: UM.Theme.defaultMargin; +// right: parent.right; +// rightMargin: UM.Theme.defaultMargin; +// } +// +// //: Print Settings panel title +// Label { text: qsTr("Print Settings"); width: parent.width; font.capitalization: Font.AllUppercase; font.pointSize: UM.Theme.smallTextSize; } +// +// Item { +// width: parent.width; +// height: 24; +// +// Row { +// anchors.fill: parent; +// spacing: UM.Theme.defaultMargin; +// +// //: Material selection combo box label +// Label { text: qsTr("Material"); horizontalAlignment: Text.AlignRight; width: base.width * 0.5; } +// ComboBox { +// width: parent.width * 0.35; +// model: ListModel { +// ListElement { text: "PLA"; } +// ListElement { text: "ABS"; } +// } +// style: ComboBoxStyle { } +// } +// } +// } +// +// Item { +// width: parent.width; +// height: 24; +// +// Row { +// anchors.fill: parent; +// spacing: UM.Theme.defaultMargin; +// //: Time display label +// Label { text: qsTr("Time"); width: base.width * 0.5; horizontalAlignment: Text.AlignRight; } +// Label { text: Qt.formatTime(new Date(timeSlider.value * 60000)); width: base.width * 0.35; horizontalAlignment: Text.AlignLeft; } +// } +// } +// +// Rectangle { color: "black"; height: 1; width: parent.width; } +// +// Item { +// id: speedSlider; +// +// width: parent.width; +// height: 60; +// +// Slider { +// id: timeSlider; +// anchors.left: parent.left; +// anchors.right: parent.right; +// height: 20; +// +// minimumValue: 60; +// maximumValue: 600; +// stepSize: 10; +// +// style: SliderStyle { +// groove: Rectangle { +// height: 1; +// color: "black"; +// +// Rectangle { +// anchors.left: parent.left; +// anchors.verticalCenter: parent.verticalCenter; +// width: 1; +// height: control.height; +// color: "black"; +// } +// Rectangle { +// anchors.right: parent.right; +// anchors.verticalCenter: parent.verticalCenter; +// width: 1; +// height: control.height; +// color: "black"; +// } +// } +// handle: Rectangle { width: 5; height: control.height; color: UM.Theme.primaryColor; } +// } +// } +// +// Column { +// anchors.left: parent.left; +// anchors.bottom: parent.bottom; +// +// Label { text: Qt.formatTime(new Date(timeSlider.minimumValue * 60000)); } +// //: Low quality display label +// Label { text: qsTr("Low Quality"); } +// } +// +// Column { +// anchors.right: parent.right; +// anchors.bottom: parent.bottom; +// +// Label { text: Qt.formatTime(new Date(timeSlider.maximumValue * 60000)); anchors.right: parent.right; } +// //: High quality display label +// Label { text: qsTr("High Quality"); } +// } +// } +// +// UM.SettingsView { +// id: settingsView; +// +// width: parent.width; +// height: 0; +// opacity: 0; +// visible: false; +// +// onShowDescription: base.showDescription(text, x, y); +// } +// +// Rectangle { color: "black"; height: 1; width: parent.width; } +// +// Item { +// Layout.columnSpan: 2; +// height: childrenRect.height; +// width: parent.width; +// +// ToolButton { +// anchors.horizontalCenter: parent.horizontalCenter; +// iconSource: UM.Resources.getIcon('expand.png'); +// onClicked: base.collapsed = !base.collapsed +// } +// } +// } +// +// states: [ +// State { +// name: 'expanded'; +// when: !base.collapsed; +// +// PropertyChanges { target: speedSlider; opacity: 0; height: 0; visible: false; } +// PropertyChanges { +// target: settingsView; +// opacity: 1; +// height: Math.min(settingsView.listHeight, base.expandedHeight * 0.6); +// visible: true; +// } +// } +// ] +// +// transitions: [ +// Transition { +// to: 'expanded'; +// reversible: true; +// SequentialAnimation { +// NumberAnimation { target: speedSlider; property: 'opacity'; duration: 100; } +// PropertyAction { target: settingsView; property: 'visible'; } +// NumberAnimation { property: 'height'; duration: 200; } +// PropertyAction { target: speedSlider; property: 'visible'; } +// NumberAnimation { target: settingsView; property: 'opacity'; duration: 100; } +// } +// } +// ] +// } +// diff --git a/qml/SidebarCategoryHeader.qml b/qml/SidebarCategoryHeader.qml new file mode 100644 index 0000000000..7a193a65ca --- /dev/null +++ b/qml/SidebarCategoryHeader.qml @@ -0,0 +1,46 @@ +import QtQuick 2.2 +import QtQuick.Controls 1.1 +import QtQuick.Controls.Styles 1.1 +import QtQuick.Layouts 1.1 + +import UM 1.0 as UM + +Rectangle { + Layout.preferredHeight: UM.Theme.sizes.section.height; + Layout.preferredWidth: UM.Theme.sizes.section.width; + + color: UM.Theme.colors.primary; + + property alias icon: iconImage.source; + property alias text: label.text; + + Image { + id: iconImage; + anchors { + left: parent.left; + leftMargin: UM.Theme.sizes.default_margin.width; + verticalCenter: parent.verticalCenter; + } + + width: UM.Theme.sizes.section_icon.width; + height: UM.Theme.sizes.section_icon.width; + + sourceSize.width: width; + sourceSize.height: height; + } + + Label { + id: label + + anchors { + left: iconImage.right; + leftMargin: UM.Theme.sizes.default_margin.width; + right: parent.right; + rightMargin: UM.Theme.sizes.default_margin.width; + verticalCenter: parent.verticalCenter; + } + + font: UM.Theme.fonts.large; + color: UM.Theme.colors.primary_text; + } +} diff --git a/qml/SidebarHeader.qml b/qml/SidebarHeader.qml new file mode 100644 index 0000000000..88a7ba6e63 --- /dev/null +++ b/qml/SidebarHeader.qml @@ -0,0 +1,117 @@ +import QtQuick 2.2 +import QtQuick.Controls 1.1 +import QtQuick.Controls.Styles 1.1 +import QtQuick.Layouts 1.1 + +import UM 1.0 as UM + +Column { + id: base; + + property string currentModeFile: modeModel.get(modeMenu.currentIndex).file; + property Action addMachineAction; + property Action configureMachinesAction; + + spacing: UM.Theme.sizes.default_margin.height; + + RowLayout { + anchors.horizontalCenter: parent.horizontalCenter; + + width: parent.width - UM.Theme.sizes.default_margin.width * 2; + height: UM.Theme.sizes.line.height; + + Label { + text: qsTr("Mode:"); + + font: UM.Theme.fonts.sidebar_header; + color: UM.Theme.colors.text_inactive; + } + + ToolButton { + text: qsTr(modeModel.get(modeMenu.currentIndex).text); + + style: UM.Theme.styles.sidebar_header_button; + + Layout.preferredWidth: base.width * 0.25; + + menu: Menu { + id: modeMenu; + + property int currentIndex: 0; + + Instantiator { + model: ListModel { + id: modeModel; + ListElement { text: QT_TR_NOOP("Simple"); file: "SidebarSimple.qml" } + ListElement { text: QT_TR_NOOP("Advanced"); file: "SidebarAdvanced.qml" } + } + + MenuItem { + text: qsTr(model.text); + checkable: true; + checked: modeMenu.currentIndex == index; + exclusiveGroup: modeMenuGroup; + onTriggered: modeMenu.currentIndex = index; + } + onObjectAdded: modeMenu.insertItem(index, object) + onObjectRemoved: modeMenu.removeItem(object) + } + + ExclusiveGroup { id: modeMenuGroup; } + } + } + + Rectangle { + width: 1; + height: parent.height; + color: UM.Theme.colors.border; + } + + Label { + text: qsTr("Printer:"); + + font: UM.Theme.fonts.sidebar_header; + color: UM.Theme.colors.text_inactive; + } + + ToolButton { + id: machineButton; + text: UM.Application.machineName; + + style: UM.Theme.styles.sidebar_header_button; + + Layout.fillWidth: true; + + menu: Menu { + id: machineMenu; + Instantiator { + model: UM.Models.machinesModel + MenuItem { + text: model.name; + checkable: true; + checked: model.active; + exclusiveGroup: machineMenuGroup; + onTriggered: UM.Models.machinesModel.setActive(index) + } + onObjectAdded: machineMenu.insertItem(index, object) + onObjectRemoved: machineMenu.removeItem(object) + } + + ExclusiveGroup { id: machineMenuGroup; } + + MenuSeparator { } + + MenuItem { action: base.addMachineAction; } + MenuItem { action: base.configureMachinesAction; } + } + } + } + + SidebarCategoryHeader { + width: parent.width; + height: UM.Theme.sizes.section.height; + + icon: UM.Theme.icons.printsetup; + text: qsTr("Print Setup"); + } +} diff --git a/qml/SidebarSimple.qml b/qml/SidebarSimple.qml new file mode 100644 index 0000000000..53864c8a88 --- /dev/null +++ b/qml/SidebarSimple.qml @@ -0,0 +1,43 @@ +import QtQuick 2.2 +import QtQuick.Controls 1.1 +import QtQuick.Controls.Styles 1.1 +import QtQuick.Layouts 1.1 + +import UM 1.0 as UM + +Item { + anchors.fill: parent; + anchors.leftMargin: UM.Theme.sizes.default_margin.width; + anchors.rightMargin: UM.Theme.sizes.default_margin.width; + + ColumnLayout { + anchors.fill: parent; + + RowLayout { + Layout.fillWidth: true; + + Label { text: "00:00"; } + Item { Layout.fillWidth: true; } + Label { text: "Estimated Print Time"; } + Item { Layout.fillWidth: true; } + Label { text: "21:00"; } + } + + Slider { + Layout.fillWidth: true; + + style: SliderStyle { } + } + + RowLayout { + Layout.fillWidth: true; + Label { text: "Minimum"; } + Item { Layout.fillWidth: true; } + Label { text: "Maximum"; } + } + + CheckBox { text: "Auto Support"; style: CheckBoxStyle { } } + + Item { Layout.fillWidth: true; Layout.fillHeight: true; } + } +}