diff --git a/resources/qml/Topbar.qml b/resources/qml/Topbar.qml index c69c786d5a..033e1a55f9 100644 --- a/resources/qml/Topbar.qml +++ b/resources/qml/Topbar.qml @@ -220,6 +220,81 @@ Rectangle menu: PrinterMenu { } } + //View orientation Item + Row + { + id: viewOrientationControl + height: 30 + + spacing: 2 + + anchors { + verticalCenter: base.verticalCenter + right: viewModeButton.right + rightMargin: UM.Theme.getSize("default_margin").width + viewModeButton.width + } + + // #1 3d view + Button + { + iconSource: UM.Theme.getIcon("view_3d") + style: UM.Theme.styles.orientation_button + anchors.verticalCenter: viewOrientationControl.verticalCenter + onClicked:{ + UM.Controller.rotateView("3d", 0); + } + visible: base.width > 1100 + } + + // #2 Front view + Button + { + iconSource: UM.Theme.getIcon("view_front") + style: UM.Theme.styles.orientation_button + anchors.verticalCenter: viewOrientationControl.verticalCenter + onClicked:{ + UM.Controller.rotateView("home", 0); + } + visible: base.width > 1130 + } + + // #3 Top view + Button + { + iconSource: UM.Theme.getIcon("view_top") + style: UM.Theme.styles.orientation_button + anchors.verticalCenter: viewOrientationControl.verticalCenter + onClicked:{ + UM.Controller.rotateView("y", 90); + } + visible: base.width > 1160 + } + + // #4 Left view + Button + { + iconSource: UM.Theme.getIcon("view_left") + style: UM.Theme.styles.orientation_button + anchors.verticalCenter: viewOrientationControl.verticalCenter + onClicked:{ + UM.Controller.rotateView("x", 90); + } + visible: base.width > 1190 + } + + // #5 Left view + Button + { + iconSource: UM.Theme.getIcon("view_right") + style: UM.Theme.styles.orientation_button + anchors.verticalCenter: viewOrientationControl.verticalCenter + onClicked:{ + UM.Controller.rotateView("x", -90); + } + visible: base.width > 1210 + } + } + ComboBox { id: viewModeButton diff --git a/resources/themes/cura-light/icons/view_3d.svg b/resources/themes/cura-light/icons/view_3d.svg new file mode 100644 index 0000000000..cfe394e65d --- /dev/null +++ b/resources/themes/cura-light/icons/view_3d.svg @@ -0,0 +1,14 @@ + + + + icn_perspectives_white + Created with Sketch. + + + + + + + + + \ No newline at end of file diff --git a/resources/themes/cura-light/icons/view_front.svg b/resources/themes/cura-light/icons/view_front.svg new file mode 100644 index 0000000000..7de9abe0af --- /dev/null +++ b/resources/themes/cura-light/icons/view_front.svg @@ -0,0 +1,19 @@ + + + + icn_front_white + Created with Sketch. + + + + + + + + + + + + + + \ No newline at end of file diff --git a/resources/themes/cura-light/icons/view_left.svg b/resources/themes/cura-light/icons/view_left.svg new file mode 100644 index 0000000000..1770da4c81 --- /dev/null +++ b/resources/themes/cura-light/icons/view_left.svg @@ -0,0 +1,21 @@ + + + + icn_left_white + Created with Sketch. + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/resources/themes/cura-light/icons/view_right.svg b/resources/themes/cura-light/icons/view_right.svg new file mode 100644 index 0000000000..5e0628e60e --- /dev/null +++ b/resources/themes/cura-light/icons/view_right.svg @@ -0,0 +1,21 @@ + + + + icn_right_white + Created with Sketch. + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/resources/themes/cura-light/icons/view_top.svg b/resources/themes/cura-light/icons/view_top.svg new file mode 100644 index 0000000000..3eb32e9878 --- /dev/null +++ b/resources/themes/cura-light/icons/view_top.svg @@ -0,0 +1,21 @@ + + + + icn_top_white + Created with Sketch. + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/resources/themes/cura-light/styles.qml b/resources/themes/cura-light/styles.qml index ea9d184926..0f3c910270 100755 --- a/resources/themes/cura-light/styles.qml +++ b/resources/themes/cura-light/styles.qml @@ -381,6 +381,111 @@ QtObject { } } + property Component orientation_button: Component { + ButtonStyle { + background: Item { + implicitWidth: 25; + implicitHeight: 25; + + Rectangle { + id: buttonFace2; + + anchors.fill: parent; + property bool down: control.pressed || (control.checkable && control.checked); + + color: { + if(control.customColor !== undefined && control.customColor !== null) { + return control.customColor + } else if(control.checkable && control.checked && control.hovered) { + return Theme.getColor("button_active_hover"); + } else if(control.pressed || (control.checkable && control.checked)) { + return Theme.getColor("button_active"); + } else if(control.hovered) { + return Theme.getColor("button_hover"); + } else { + //return Theme.getColor("button"); + return "transparent" + } + } + Behavior on color { ColorAnimation { duration: 50; } } + + border.width: (control.hasOwnProperty("needBorder") && control.needBorder) ? 2 * screenScaleFactor : 0 + border.color: Theme.getColor("tool_button_border") + + UM.RecolorImage { + id: tool_button_arrow2 + //anchors.right: parent.right; + //anchors.rightMargin: (Theme.getSize("button").width - Theme.getSize("button_icon").width) / 4 + //anchors.bottom: parent.bottom; + //anchors.bottomMargin: (Theme.getSize("button").height - Theme.getSize("button_icon").height) / 4 + //width: Theme.getSize("standard_arrow").width + //height: Theme.getSize("standard_arrow").height + + width: 5 + height: 5 + + sourceSize.width: 5 + sourceSize.height: 5 + visible: control.menu != null; + color: + { + if(control.checkable && control.checked && control.hovered) + { + return Theme.getColor("button_text_active_hover"); + } + else if(control.pressed || (control.checkable && control.checked)) + { + return Theme.getColor("button_text_active"); + } + else if(control.hovered) + { + return Theme.getColor("button_text_hover"); + } + else + { + return Theme.getColor("button_text"); + } + } + source: Theme.getIcon("arrow_bottom") + } + } + } + + label: Item { + UM.RecolorImage { + anchors.centerIn: parent; + opacity: !control.enabled ? 0.2 : 1.0 + source: control.iconSource; + width: 20; + height: 20; + color: + { + if(control.checkable && control.checked && control.hovered) + { + return Theme.getColor("button_text_active_hover"); + } + else if(control.pressed || (control.checkable && control.checked)) + { + return Theme.getColor("button_text_active"); + } + else if(control.hovered) + { + //return Theme.getColor("button_text_hover"); + return "white" + } + else + { + //return Theme.getColor("button_text"); + return "black" + } + } + + sourceSize: Theme.getSize("button_icon") + } + } + } + } + property Component progressbar: Component{ ProgressBarStyle { background: Rectangle { @@ -753,6 +858,49 @@ QtObject { } } + property Component partially_checkbox: Component { + CheckBoxStyle { + background: Item { } + indicator: Rectangle { + implicitWidth: Theme.getSize("checkbox").width; + implicitHeight: Theme.getSize("checkbox").height; + + color: (control.hovered || control._hovered) ? Theme.getColor("checkbox_hover") : Theme.getColor("checkbox"); + Behavior on color { ColorAnimation { duration: 50; } } + + radius: control.exclusiveGroup ? Theme.getSize("checkbox").width / 2 : 0 + + border.width: Theme.getSize("default_lining").width; + border.color: (control.hovered || control._hovered) ? Theme.getColor("checkbox_border_hover") : Theme.getColor("checkbox_border"); + + UM.RecolorImage { + anchors.verticalCenter: parent.verticalCenter + anchors.horizontalCenter: parent.horizontalCenter + width: parent.width / 2.5 + height: parent.height / 2.5 + sourceSize.width: width + sourceSize.height: width + color: Theme.getColor("checkbox_mark") + source: { + if (control.checkbox_state == 2){ + return Theme.getIcon("solid") + } + else{ + return control.exclusiveGroup ? Theme.getIcon("dot") : Theme.getIcon("check") + } + } + opacity: control.checked + Behavior on opacity { NumberAnimation { duration: 100; } } + } + } + label: Label { + text: control.text; + color: Theme.getColor("checkbox_text"); + font: Theme.getFont("default"); + } + } + } + property Component slider: Component { SliderStyle { groove: Rectangle {