mirror of
https://git.mirrors.martin98.com/https://github.com/Ultimaker/Cura
synced 2025-08-12 06:39:04 +08:00
Update styling and functionality of sidebar in cura
This commit is contained in:
Arjen Hiemstra
parent
bd1e12b492
commit
a173022ec6
@ -5,188 +5,119 @@ import QtQuick.Layouts 1.1
|
|||||||
|
|
||||||
import UM 1.0 as UM
|
import UM 1.0 as UM
|
||||||
|
|
||||||
UM.SettingsView {
|
ScrollView {
|
||||||
id: settingsView;
|
id: base;
|
||||||
|
|
||||||
onShowDescription: base.showDescription(text, x, y);
|
style: UM.Theme.styles.scrollview;
|
||||||
|
|
||||||
categoryStyle: UM.Theme.styles.category;
|
|
||||||
|
|
||||||
|
Column {
|
||||||
|
id: contents
|
||||||
spacing: UM.Theme.sizes.default_margin.height;
|
spacing: UM.Theme.sizes.default_margin.height;
|
||||||
|
|
||||||
style: ScrollViewStyle { }
|
Repeater {
|
||||||
|
model: UM.Models.settingCategoriesModel;
|
||||||
|
|
||||||
|
delegate: Item {
|
||||||
|
id: delegateItem;
|
||||||
|
|
||||||
|
width: childrenRect.width;
|
||||||
|
height: childrenRect.height;
|
||||||
|
|
||||||
|
visible: model.visible;
|
||||||
|
|
||||||
|
property variant settingsModel: model.settings;
|
||||||
|
|
||||||
|
SidebarCategoryHeader {
|
||||||
|
id: categoryHeader;
|
||||||
|
|
||||||
|
width: base.viewport.width;
|
||||||
|
height: UM.Theme.sizes.section.height;
|
||||||
|
|
||||||
|
text: model.name;
|
||||||
|
iconSource: UM.Theme.icons[model.icon];
|
||||||
|
checkable: true;
|
||||||
|
}
|
||||||
|
|
||||||
|
Column {
|
||||||
|
id: settings;
|
||||||
|
|
||||||
|
anchors.top: categoryHeader.bottom;
|
||||||
|
anchors.topMargin: 0;
|
||||||
|
|
||||||
|
height: 0;
|
||||||
|
width: UM.Theme.sizes.setting.width;
|
||||||
|
spacing: UM.Theme.sizes.default_margin.height;
|
||||||
|
opacity: 0;
|
||||||
|
|
||||||
|
property real childrenHeight: {
|
||||||
|
var h = 0.0;
|
||||||
|
for(var i in children) {
|
||||||
|
var item = children[i];
|
||||||
|
h += children[i].height;
|
||||||
|
|
||||||
|
if(item.settingVisible) {
|
||||||
|
if(i - 1 > 0) {
|
||||||
|
h += spacing;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return h;
|
||||||
|
}
|
||||||
|
|
||||||
|
Repeater {
|
||||||
|
model: delegateItem.settingsModel;
|
||||||
|
|
||||||
|
delegate: UM.SettingItem {
|
||||||
|
width: UM.Theme.sizes.setting.width;
|
||||||
|
|
||||||
|
height: model.visible ? UM.Theme.sizes.setting.height : 0;
|
||||||
|
Behavior on height { NumberAnimation { duration: 75; } }
|
||||||
|
opacity: model.visible ? 1 : 0;
|
||||||
|
Behavior on opacity { NumberAnimation { duration: 75; } }
|
||||||
|
|
||||||
|
enabled: categoryHeader.checked && model.visible;
|
||||||
|
|
||||||
|
property bool settingVisible: model.visible;
|
||||||
|
|
||||||
|
name: model.name;
|
||||||
|
value: model.value;
|
||||||
|
unit: model.unit;
|
||||||
|
valid: model.valid;
|
||||||
|
type: model.type;
|
||||||
|
options: model.type == "enum" ? model.options : null;
|
||||||
|
key: model.key;
|
||||||
|
|
||||||
|
style: UM.Theme.styles.setting_item;
|
||||||
|
|
||||||
|
onItemValueChanged: delegateItem.settingsModel.setSettingValue(index, model.key, value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
states: State {
|
||||||
|
name: "expanded";
|
||||||
|
when: categoryHeader.checked;
|
||||||
|
|
||||||
|
PropertyChanges {
|
||||||
|
target: settings;
|
||||||
|
opacity: 1;
|
||||||
|
height: settings.childrenHeight;
|
||||||
|
anchors.topMargin: UM.Theme.sizes.default_margin.height;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
transitions: Transition {
|
||||||
|
to: "expanded";
|
||||||
|
reversible: true;
|
||||||
|
SequentialAnimation {
|
||||||
|
ParallelAnimation {
|
||||||
|
NumberAnimation { property: "height"; duration: 75; }
|
||||||
|
NumberAnimation { property: "anchors.topMargin"; duration: 75; }
|
||||||
|
}
|
||||||
|
NumberAnimation { property: "opacity"; duration: 75; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
//
|
|
||||||
// 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; }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// ]
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
|
|||||||
@ -5,73 +5,11 @@ import QtQuick.Layouts 1.1
|
|||||||
|
|
||||||
import UM 1.0 as UM
|
import UM 1.0 as UM
|
||||||
|
|
||||||
UM.AngledCornerRectangle {
|
Button {
|
||||||
id: base;
|
id: base;
|
||||||
|
|
||||||
Layout.preferredHeight: UM.Theme.sizes.section.height;
|
Layout.preferredHeight: UM.Theme.sizes.section.height;
|
||||||
Layout.preferredWidth: UM.Theme.sizes.section.width;
|
Layout.preferredWidth: UM.Theme.sizes.section.width;
|
||||||
|
|
||||||
property bool clickable: false;
|
style: UM.Theme.styles.sidebar_category;
|
||||||
signal clicked();
|
|
||||||
|
|
||||||
color: clickable ? UM.Theme.colors.button : UM.Theme.colors.primary;
|
|
||||||
cornerSize: UM.Theme.sizes.default_margin.width;
|
|
||||||
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
MouseArea {
|
|
||||||
id: mouse;
|
|
||||||
anchors.fill: parent;
|
|
||||||
|
|
||||||
enabled: base.clickable;
|
|
||||||
hoverEnabled: true;
|
|
||||||
|
|
||||||
onClicked: {console.log('click'); base.clicked(); }
|
|
||||||
}
|
|
||||||
|
|
||||||
states: [
|
|
||||||
State {
|
|
||||||
name: "hover";
|
|
||||||
when: mouse.containsMouse;
|
|
||||||
|
|
||||||
PropertyChanges { target: base; color: UM.Theme.colors.button_hover; }
|
|
||||||
},
|
|
||||||
State {
|
|
||||||
name: "down";
|
|
||||||
when: mouse.pressed;
|
|
||||||
|
|
||||||
PropertyChanges { target: base; color: UM.Theme.colors.button_down; }
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -111,7 +111,8 @@ Column {
|
|||||||
width: parent.width;
|
width: parent.width;
|
||||||
height: UM.Theme.sizes.section.height;
|
height: UM.Theme.sizes.section.height;
|
||||||
|
|
||||||
icon: UM.Theme.icons.printsetup;
|
iconSource: UM.Theme.icons.printsetup;
|
||||||
text: qsTr("Print Setup");
|
text: qsTr("Print Setup");
|
||||||
|
enabled: false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user