Updated setting items & sidebar to qtQuick controls 2.0

This commit is contained in:
Jaime van Kessel 2017-10-11 21:02:27 +02:00
parent eaa7b75f0e
commit 799d1a5b0c
9 changed files with 342 additions and 254 deletions

View file

@ -2,17 +2,57 @@
// Uranium is released under the terms of the LGPLv3 or higher. // Uranium is released under the terms of the LGPLv3 or higher.
import QtQuick 2.2 import QtQuick 2.2
import QtQuick.Controls 1.1 import QtQuick.Controls 2.0
import QtQuick.Controls.Styles 1.1
import QtQuick.Layouts 1.1
import UM 1.1 as UM import UM 1.1 as UM
import Cura 1.0 as Cura import Cura 1.0 as Cura
Button { Button
{
id: base; id: base;
anchors.left: parent.left
style: UM.Theme.styles.sidebar_category; anchors.right: parent.right
anchors.leftMargin: UM.Theme.getSize("sidebar_margin").width
anchors.rightMargin: UM.Theme.getSize("sidebar_margin").width
background: Rectangle
{
implicitHeight: UM.Theme.getSize("section").height;
color: {
if(base.color) {
return base.color;
} else if(!base.enabled) {
return UM.Theme.getColor("setting_category_disabled");
} else if(base.hovered && base.checkable && base.checked) {
return UM.Theme.getColor("setting_category_active_hover");
} else if(base.pressed || (base.checkable && base.checked)) {
return UM.Theme.getColor("setting_category_active");
} else if(base.hovered) {
return UM.Theme.getColor("setting_category_hover");
} else {
return UM.Theme.getColor("setting_category");
}
}
Behavior on color { ColorAnimation { duration: 50; } }
Rectangle
{
height: UM.Theme.getSize("default_lining").height
width: parent.width
anchors.bottom: parent.bottom
color: {
if(!base.enabled) {
return UM.Theme.getColor("setting_category_disabled_border");
} else if((base.hovered || base.activeFocus) && base.checkable && base.checked) {
return UM.Theme.getColor("setting_category_active_hover_border");
} else if(base.pressed || (base.checkable && base.checked)) {
return UM.Theme.getColor("setting_category_active_border");
} else if(base.hovered || base.activeFocus) {
return UM.Theme.getColor("setting_category_hover_border");
} else {
return UM.Theme.getColor("setting_category_border");
}
}
}
}
signal showTooltip(string text) signal showTooltip(string text)
signal hideTooltip() signal hideTooltip()
@ -23,8 +63,121 @@ Button {
property var focusItem: base property var focusItem: base
text: definition.label //text: definition.label
iconSource: UM.Theme.getIcon(definition.icon)
contentItem: Item {
anchors.fill: parent;
anchors.left: parent.left
Label {
anchors
{
left: parent.left
leftMargin: 2 * UM.Theme.getSize("default_margin").width + UM.Theme.getSize("section_icon").width
right: parent.right;
verticalCenter: parent.verticalCenter;
}
text: definition.label
font: UM.Theme.getFont("setting_category");
color:
{
if(!base.enabled)
{
return UM.Theme.getColor("setting_category_disabled_text");
}
else if((base.hovered || base.activeFocus) && base.checkable && base.checked)
{
return UM.Theme.getColor("setting_category_active_hover_text");
}
else if(base.pressed || (base.checkable && base.checked))
{
return UM.Theme.getColor("setting_category_active_text");
}
else if(base.hovered || base.activeFocus)
{
return UM.Theme.getColor("setting_category_hover_text");
}
else
{
return UM.Theme.getColor("setting_category_text");
}
}
fontSizeMode: Text.HorizontalFit;
minimumPointSize: 8
}
UM.RecolorImage
{
id: category_arrow
anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right
anchors.rightMargin: UM.Theme.getSize("default_margin").width * 3 - width / 2
width: UM.Theme.getSize("standard_arrow").width
height: UM.Theme.getSize("standard_arrow").height
sourceSize.width: width
sourceSize.height: width
color:
{
if(!base.enabled)
{
return UM.Theme.getColor("setting_category_disabled_text");
}
else if((base.hovered || base.activeFocus) && base.checkable && base.checked)
{
return UM.Theme.getColor("setting_category_active_hover_text");
}
else if(base.pressed || (base.checkable && base.checked))
{
return UM.Theme.getColor("setting_category_active_text");
}
else if(base.hovered || base.activeFocus)
{
return UM.Theme.getColor("setting_category_hover_text");
}
else
{
return UM.Theme.getColor("setting_category_text");
}
}
source: base.checked ? UM.Theme.getIcon("arrow_bottom") : UM.Theme.getIcon("arrow_left")
}
}
UM.RecolorImage
{
id: icon
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.leftMargin: UM.Theme.getSize("default_margin").width
color:
{
if(!base.enabled)
{
return UM.Theme.getColor("setting_category_disabled_text");
}
else if((base.hovered || base.activeFocus) && base.checkable && base.checked)
{
return UM.Theme.getColor("setting_category_active_hover_text");
}
else if(base.pressed || (base.checkable && base.checked))
{
return UM.Theme.getColor("setting_category_active_text");
}
else if(base.hovered || base.activeFocus)
{
return UM.Theme.getColor("setting_category_hover_text");
}
else
{
return UM.Theme.getColor("setting_category_text");
}
}
source: UM.Theme.getIcon(definition.icon)
width: UM.Theme.getSize("section_icon").width;
height: UM.Theme.getSize("section_icon").height;
sourceSize.width: width + 15 * screenScaleFactor
sourceSize.height: width + 15 * screenScaleFactor
}
checkable: true checkable: true
checked: definition.expanded checked: definition.expanded

View file

@ -3,8 +3,7 @@
import QtQuick 2.1 import QtQuick 2.1
import QtQuick.Layouts 1.1 import QtQuick.Layouts 1.1
import QtQuick.Controls 1.1 import QtQuick.Controls 2.0
import QtQuick.Controls.Styles 1.1
import UM 1.2 as UM import UM 1.2 as UM

View file

@ -2,8 +2,7 @@
// Uranium is released under the terms of the LGPLv3 or higher. // Uranium is released under the terms of the LGPLv3 or higher.
import QtQuick 2.1 import QtQuick 2.1
import QtQuick.Controls 1.1 import QtQuick.Controls 2.0
import QtQuick.Controls.Styles 1.1
import UM 1.1 as UM import UM 1.1 as UM
@ -28,73 +27,59 @@ SettingItem
onWheel: wheel.accepted = true; onWheel: wheel.accepted = true;
} }
style: ComboBoxStyle background: Rectangle
{ {
background: Rectangle color:
{ {
color: if(!enabled)
{ {
if(!enabled) return UM.Theme.getColor("setting_control_disabled")
{
return UM.Theme.getColor("setting_control_disabled")
}
if(control.hovered || control.activeFocus)
{
return UM.Theme.getColor("setting_control_highlight")
}
return UM.Theme.getColor("setting_control")
} }
border.width: UM.Theme.getSize("default_lining").width if(control.hovered || control.activeFocus)
border.color:
{ {
if(!enabled) return UM.Theme.getColor("setting_control_highlight")
{
return UM.Theme.getColor("setting_control_disabled_border")
}
if(control.hovered || control.activeFocus)
{
return UM.Theme.getColor("setting_control_border_highlight")
}
return UM.Theme.getColor("setting_control_border")
} }
return UM.Theme.getColor("setting_control")
} }
label: Item border.width: UM.Theme.getSize("default_lining").width
border.color:
{ {
Label if(!enabled)
{ {
anchors.left: parent.left; return UM.Theme.getColor("setting_control_disabled_border")
anchors.leftMargin: UM.Theme.getSize("default_lining").width
anchors.right: downArrow.left;
anchors.rightMargin: UM.Theme.getSize("default_lining").width;
anchors.verticalCenter: parent.verticalCenter;
text: control.currentText;
font: UM.Theme.getFont("default");
color: !enabled ? UM.Theme.getColor("setting_control_disabled_text") : UM.Theme.getColor("setting_control_text");
elide: Text.ElideRight;
verticalAlignment: Text.AlignVCenter;
} }
if(control.hovered || control.activeFocus)
UM.RecolorImage
{ {
id: downArrow return UM.Theme.getColor("setting_control_border_highlight")
anchors.right: parent.right;
anchors.rightMargin: UM.Theme.getSize("default_lining").width * 2;
anchors.verticalCenter: parent.verticalCenter;
source: UM.Theme.getIcon("arrow_bottom")
width: UM.Theme.getSize("standard_arrow").width
height: UM.Theme.getSize("standard_arrow").height
sourceSize.width: width + 5 * screenScaleFactor
sourceSize.height: width + 5 * screenScaleFactor
color: UM.Theme.getColor("setting_control_text");
} }
return UM.Theme.getColor("setting_control_border")
} }
} }
indicator: UM.RecolorImage
{
id: downArrow
x: control.width - width - control.rightPadding
y: control.topPadding + (control.availableHeight - height) / 2
source: UM.Theme.getIcon("arrow_bottom")
width: UM.Theme.getSize("standard_arrow").width
height: UM.Theme.getSize("standard_arrow").height
sourceSize.width: width + 5 * screenScaleFactor
sourceSize.height: width + 5 * screenScaleFactor
color: UM.Theme.getColor("setting_control_text");
}
contentItem: Label
{
text: control.currentText;
font: UM.Theme.getFont("default");
color: !enabled ? UM.Theme.getColor("setting_control_disabled_text") : UM.Theme.getColor("setting_control_text");
elide: Text.ElideRight;
verticalAlignment: Text.AlignVCenter;
}
onActivated: onActivated:
{ {
forceActiveFocus(); forceActiveFocus();

View file

@ -2,8 +2,7 @@
// Uranium is released under the terms of the LGPLv3 or higher. // Uranium is released under the terms of the LGPLv3 or higher.
import QtQuick 2.1 import QtQuick 2.1
import QtQuick.Controls 1.1 import QtQuick.Controls 2.0
import QtQuick.Controls.Styles 1.1
import UM 1.1 as UM import UM 1.1 as UM
import Cura 1.0 as Cura import Cura 1.0 as Cura
@ -65,83 +64,78 @@ SettingItem
value: control.currentText != "" ? control.model.getItem(control.currentIndex).color : "" value: control.currentText != "" ? control.model.getItem(control.currentIndex).color : ""
} }
style: ComboBoxStyle indicator: UM.RecolorImage
{ {
background: Rectangle id: downArrow
x: control.width - width - control.rightPadding
y: control.topPadding + (control.availableHeight - height) / 2
source: UM.Theme.getIcon("arrow_bottom")
width: UM.Theme.getSize("standard_arrow").width
height: UM.Theme.getSize("standard_arrow").height
sourceSize.width: width + 5 * screenScaleFactor
sourceSize.height: width + 5 * screenScaleFactor
color: UM.Theme.getColor("setting_control_text");
}
background: Rectangle
{
color:
{ {
color: if(!enabled)
{ {
if(!enabled) return UM.Theme.getColor("setting_control_disabled");
{
return UM.Theme.getColor("setting_control_disabled");
}
if(control.hovered || base.activeFocus)
{
return UM.Theme.getColor("setting_control_highlight");
}
return UM.Theme.getColor("setting_control");
} }
border.width: UM.Theme.getSize("default_lining").width if(control.hovered || base.activeFocus)
border.color:
{ {
if(!enabled) return UM.Theme.getColor("setting_control_highlight");
{
return UM.Theme.getColor("setting_control_disabled_border")
}
if(control.hovered || control.activeFocus)
{
return UM.Theme.getColor("setting_control_border_highlight")
}
return UM.Theme.getColor("setting_control_border")
} }
return UM.Theme.getColor("setting_control");
} }
label: Item border.width: UM.Theme.getSize("default_lining").width
border.color:
{ {
Label if(!enabled)
{ {
id: extruderText return UM.Theme.getColor("setting_control_disabled_border")
anchors.verticalCenter: parent.verticalCenter
text: control.currentText
font: UM.Theme.getFont("default")
color: enabled ? UM.Theme.getColor("setting_control_text") : UM.Theme.getColor("setting_control_disabled_text")
elide: Text.ElideLeft
verticalAlignment: Text.AlignVCenter
} }
Rectangle if(control.hovered || control.activeFocus)
{ {
id: swatch return UM.Theme.getColor("setting_control_border_highlight")
height: UM.Theme.getSize("setting_control").height / 2
width: height
anchors
{
right: arrow.left
verticalCenter: parent.verticalCenter
margins: UM.Theme.getSize("default_margin").width / 4
}
border.width: UM.Theme.getSize("default_lining").width * 2
border.color: enabled ? UM.Theme.getColor("setting_control_border") : UM.Theme.getColor("setting_control_disabled_border")
radius: width / 2
color: control.color
} }
UM.RecolorImage return UM.Theme.getColor("setting_control_border")
{ }
id: arrow }
anchors.right: parent.right contentItem: Item
anchors.verticalCenter: parent.verticalCenter {
Label
{
id: extruderText
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.right: swatch.left
text: control.currentText
font: UM.Theme.getFont("default")
color: enabled ? UM.Theme.getColor("setting_control_text") : UM.Theme.getColor("setting_control_disabled_text")
source: UM.Theme.getIcon("arrow_bottom") elide: Text.ElideLeft
width: UM.Theme.getSize("standard_arrow").width verticalAlignment: Text.AlignVCenter
height: UM.Theme.getSize("standard_arrow").height }
sourceSize.width: width + 5 * screenScaleFactor Rectangle
sourceSize.height: width + 5 * screenScaleFactor {
id: swatch
height: UM.Theme.getSize("setting_control").height / 2
width: height
color: UM.Theme.getColor("setting_control_text") anchors.right: parent.right
} anchors.rightMargin: control.indicator.width + control.spacing
border.width: UM.Theme.getSize("default_lining").width * 2
border.color: enabled ? UM.Theme.getColor("setting_control_border") : UM.Theme.getColor("setting_control_disabled_border")
radius: width / 2
color: control.color
} }
} }
} }

View file

@ -3,8 +3,7 @@
import QtQuick 2.1 import QtQuick 2.1
import QtQuick.Layouts 1.1 import QtQuick.Layouts 1.1
import QtQuick.Controls 1.1 import QtQuick.Controls 2.0
import QtQuick.Controls.Styles 1.1
import UM 1.1 as UM import UM 1.1 as UM
import Cura 1.0 as Cura import Cura 1.0 as Cura

View file

@ -2,8 +2,7 @@
// Uranium is released under the terms of the LGPLv3 or higher. // Uranium is released under the terms of the LGPLv3 or higher.
import QtQuick 2.1 import QtQuick 2.1
import QtQuick.Controls 1.1 import QtQuick.Controls 2.0
import QtQuick.Controls.Styles 1.1
import UM 1.1 as UM import UM 1.1 as UM
import Cura 1.0 as Cura import Cura 1.0 as Cura
@ -84,83 +83,80 @@ SettingItem
value: control.currentText != "" ? control.model.getItem(control.currentIndex).color : "" value: control.currentText != "" ? control.model.getItem(control.currentIndex).color : ""
} }
style: ComboBoxStyle indicator: UM.RecolorImage
{ {
background: Rectangle id: downArrow
x: control.width - width - control.rightPadding
y: control.topPadding + (control.availableHeight - height) / 2
source: UM.Theme.getIcon("arrow_bottom")
width: UM.Theme.getSize("standard_arrow").width
height: UM.Theme.getSize("standard_arrow").height
sourceSize.width: width + 5 * screenScaleFactor
sourceSize.height: width + 5 * screenScaleFactor
color: UM.Theme.getColor("setting_control_text");
}
background: Rectangle
{
color:
{ {
color: if(!enabled)
{ {
if(!enabled) return UM.Theme.getColor("setting_control_disabled");
{
return UM.Theme.getColor("setting_control_disabled");
}
if(control.hovered || control.activeFocus)
{
return UM.Theme.getColor("setting_control_highlight");
}
return UM.Theme.getColor("setting_control");
} }
border.width: UM.Theme.getSize("default_lining").width if(control.hovered || control.activeFocus)
border.color:
{ {
if(!enabled) return UM.Theme.getColor("setting_control_highlight");
{
return UM.Theme.getColor("setting_control_disabled_border")
}
if(control.hovered || control.activeFocus)
{
return UM.Theme.getColor("setting_control_border_highlight")
}
return UM.Theme.getColor("setting_control_border")
} }
return UM.Theme.getColor("setting_control");
} }
label: Item border.width: UM.Theme.getSize("default_lining").width
border.color:
{ {
Label if(!enabled)
{ {
anchors.verticalCenter: parent.verticalCenter return UM.Theme.getColor("setting_control_disabled_border")
width: parent.width - swatch.width - arrow.width;
text: control.currentText
font: UM.Theme.getFont("default")
color: enabled ? UM.Theme.getColor("setting_control_text") : UM.Theme.getColor("setting_control_disabled_text")
elide: Text.ElideRight
verticalAlignment: Text.AlignVCenter
} }
Rectangle if(control.hovered || control.activeFocus)
{ {
id: swatch return UM.Theme.getColor("setting_control_border_highlight")
height: UM.Theme.getSize("setting_control").height / 2
width: height
anchors
{
right: arrow.left;
verticalCenter: parent.verticalCenter
margins: UM.Theme.getSize("default_margin").width / 4
}
border.width: UM.Theme.getSize("default_lining").width * 2
border.color: enabled ? UM.Theme.getColor("setting_control_border") : UM.Theme.getColor("setting_control_disabled_border")
radius: width / 2
color: control.color
} }
UM.RecolorImage return UM.Theme.getColor("setting_control_border")
{ }
id: arrow }
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
source: UM.Theme.getIcon("arrow_bottom") contentItem: Item
width: UM.Theme.getSize("standard_arrow").width {
height: UM.Theme.getSize("standard_arrow").height Label
sourceSize.width: width + 5 * screenScaleFactor {
sourceSize.height: width + 5 * screenScaleFactor id: extruderText
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.right: swatch.left
color: UM.Theme.getColor("setting_control_text") text: control.currentText
} font: UM.Theme.getFont("default")
color: enabled ? UM.Theme.getColor("setting_control_text") : UM.Theme.getColor("setting_control_disabled_text")
elide: Text.ElideRight
verticalAlignment: Text.AlignVCenter
}
Rectangle
{
id: swatch
height: UM.Theme.getSize("setting_control").height / 2
width: height
anchors.right: parent.right
anchors.rightMargin: control.indicator.width + control.spacing
border.width: UM.Theme.getSize("default_lining").width * 2
border.color: enabled ? UM.Theme.getColor("setting_control_border") : UM.Theme.getColor("setting_control_disabled_border")
radius: width / 2
color: control.color
} }
} }
} }

View file

@ -2,7 +2,7 @@
// Uranium is released under the terms of the LGPLv3 or higher. // Uranium is released under the terms of the LGPLv3 or higher.
import QtQuick 2.2 import QtQuick 2.2
import QtQuick.Controls 1.2 import QtQuick.Controls 2.0
import UM 1.1 as UM import UM 1.1 as UM

View file

@ -2,7 +2,7 @@
// Uranium is released under the terms of the LGPLv3 or higher. // Uranium is released under the terms of the LGPLv3 or higher.
import QtQuick 2.1 import QtQuick 2.1
import QtQuick.Controls 1.1 import QtQuick.Controls 2.0
import UM 1.2 as UM import UM 1.2 as UM

View file

@ -2,8 +2,7 @@
// Cura is released under the terms of the LGPLv3 or higher. // Cura is released under the terms of the LGPLv3 or higher.
import QtQuick 2.2 import QtQuick 2.2
import QtQuick.Controls 1.1 import QtQuick.Controls 2.0
import QtQuick.Controls.Styles 1.1
import QtQuick.Layouts 1.1 import QtQuick.Layouts 1.1
import UM 1.2 as UM import UM 1.2 as UM
@ -110,7 +109,7 @@ Rectangle
UM.Preferences.setValue("cura/active_mode", currentModeIndex); UM.Preferences.setValue("cura/active_mode", currentModeIndex);
if(modesListModel.count > base.currentModeIndex) if(modesListModel.count > base.currentModeIndex)
{ {
sidebarContents.push({ "item": modesListModel.get(base.currentModeIndex).item, "replace": true }); sidebarContents.push(modesListModel.get(base.currentModeIndex).item, {"replace": true });
} }
} }
@ -156,7 +155,7 @@ Rectangle
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
width: Math.floor(0.5 * parent.width) width: Math.floor(0.5 * parent.width)
text: model.text text: model.text
exclusiveGroup: modeMenuGroup; ButtonGroup.group: modeMenuGroup;
checkable: true; checkable: true;
checked: base.currentModeIndex == index checked: base.currentModeIndex == index
onClicked: base.currentModeIndex = index onClicked: base.currentModeIndex = index
@ -175,36 +174,9 @@ Rectangle
} }
} }
style: ButtonStyle {
background: Rectangle {
border.width: control.checked ? UM.Theme.getSize("default_lining").width * 2 : UM.Theme.getSize("default_lining").width
border.color: (control.checked || control.pressed) ? UM.Theme.getColor("action_button_active_border") :
control.hovered ? UM.Theme.getColor("action_button_hovered_border") :
UM.Theme.getColor("action_button_border")
color: (control.checked || control.pressed) ? UM.Theme.getColor("action_button_active") :
control.hovered ? UM.Theme.getColor("action_button_hovered") :
UM.Theme.getColor("action_button")
Behavior on color { ColorAnimation { duration: 50; } }
Label {
anchors.left: parent.left
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
anchors.leftMargin: UM.Theme.getSize("default_lining").width * 2
anchors.rightMargin: UM.Theme.getSize("default_lining").width * 2
color: (control.checked || control.pressed) ? UM.Theme.getColor("action_button_active_text") :
control.hovered ? UM.Theme.getColor("action_button_hovered_text") :
UM.Theme.getColor("action_button_text")
font: UM.Theme.getFont("default")
text: control.text
horizontalAlignment: Text.AlignHCenter
elide: Text.ElideMiddle
}
}
label: Item { }
}
} }
} }
ExclusiveGroup { id: modeMenuGroup; } ButtonGroup { id: modeMenuGroup; }
ListView ListView
{ {
@ -229,31 +201,21 @@ Rectangle
anchors.right: base.right anchors.right: base.right
visible: !monitoringPrint && !hideSettings visible: !monitoringPrint && !hideSettings
delegate: StackViewDelegate pushEnter:Transition {
{ PropertyAnimation {
function transitionFinished(properties) property: "opacity"
{ from: 0
properties.exitItem.opacity = 1 to:1
duration: 100
} }
}
pushTransition: StackViewTransition pushExit: Transition {
{ PropertyAnimation {
PropertyAnimation property: "opacity"
{ from: 1
target: enterItem to:0
property: "opacity" duration: 100
from: 0
to: 1
duration: 100
}
PropertyAnimation
{
target: exitItem
property: "opacity"
from: 1
to: 0
duration: 100
}
} }
} }
} }
@ -488,7 +450,7 @@ Rectangle
tooltipText: catalog.i18nc("@tooltip", "<b>Custom Print Setup</b><br/><br/>Print with finegrained control over every last bit of the slicing process."), tooltipText: catalog.i18nc("@tooltip", "<b>Custom Print Setup</b><br/><br/>Print with finegrained control over every last bit of the slicing process."),
item: sidebarAdvanced item: sidebarAdvanced
}) })
sidebarContents.push({ "item": modesListModel.get(base.currentModeIndex).item, "immediate": true }); sidebarContents.push( modesListModel.get(base.currentModeIndex).item, {"immediate": true });
var index = Math.floor(UM.Preferences.getValue("cura/active_mode")) var index = Math.floor(UM.Preferences.getValue("cura/active_mode"))
if(index) if(index)