mirror of
https://github.com/Ultimaker/Cura.git
synced 2025-08-06 05:23:58 -06:00
Update styling and functionality of sidebar in cura
This commit is contained in:
Arjen Hiemstra
parent
bd1e12b492
commit
a173022ec6
3 changed files with 115 additions and 245 deletions
|
|
@ -5,188 +5,119 @@ import QtQuick.Layouts 1.1
|
|||
|
||||
import UM 1.0 as UM
|
||||
|
||||
UM.SettingsView {
|
||||
id: settingsView;
|
||||
ScrollView {
|
||||
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;
|
||||
Repeater {
|
||||
model: UM.Models.settingCategoriesModel;
|
||||
|
||||
style: ScrollViewStyle { }
|
||||
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
|
||||
|
||||
UM.AngledCornerRectangle {
|
||||
Button {
|
||||
id: base;
|
||||
|
||||
Layout.preferredHeight: UM.Theme.sizes.section.height;
|
||||
Layout.preferredWidth: UM.Theme.sizes.section.width;
|
||||
|
||||
property bool clickable: false;
|
||||
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; }
|
||||
}
|
||||
]
|
||||
style: UM.Theme.styles.sidebar_category;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -111,7 +111,8 @@ Column {
|
|||
width: parent.width;
|
||||
height: UM.Theme.sizes.section.height;
|
||||
|
||||
icon: UM.Theme.icons.printsetup;
|
||||
iconSource: UM.Theme.icons.printsetup;
|
||||
text: qsTr("Print Setup");
|
||||
enabled: false;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue