mirror of
https://github.com/Ultimaker/Cura.git
synced 2025-08-07 22:13:58 -06:00
WIP: Refactor and create reusable CuraComboBox
This commit is contained in:
Lipu Fei
parent
3e4624774a
commit
752a48cacd
4 changed files with 175 additions and 133 deletions
|
|
@ -8,6 +8,8 @@ import QtQuick.Layouts 1.3
|
|||
import UM 1.3 as UM
|
||||
import Cura 1.1 as Cura
|
||||
|
||||
import "../Widgets"
|
||||
|
||||
|
||||
//
|
||||
// ComboBox with dropdown options in the Machine Settings dialog.
|
||||
|
|
@ -54,7 +56,6 @@ UM.TooltipArea
|
|||
anchors.verticalCenter: comboBox.verticalCenter
|
||||
visible: text != ""
|
||||
elide: Text.ElideRight
|
||||
//width: Math.max(0, settingsTabs.labelColumnWidth)
|
||||
}
|
||||
|
||||
ListModel
|
||||
|
|
@ -76,11 +77,12 @@ UM.TooltipArea
|
|||
}
|
||||
}
|
||||
|
||||
ComboBox
|
||||
CuraComboBox
|
||||
{
|
||||
id: comboBox
|
||||
width: 100
|
||||
height: UM.Theme.getSize("action_button").height
|
||||
model: optionsModel
|
||||
|
||||
textRole: "text"
|
||||
|
||||
currentIndex:
|
||||
|
|
@ -97,6 +99,7 @@ UM.TooltipArea
|
|||
}
|
||||
return index
|
||||
}
|
||||
|
||||
onActivated:
|
||||
{
|
||||
if(propertyProvider.properties.value != model.get(index).value)
|
||||
|
|
|
|||
|
|
@ -1,17 +1,20 @@
|
|||
// Copyright (c) 2019 Ultimaker B.V.
|
||||
// Cura is released under the terms of the LGPLv3 or higher.
|
||||
|
||||
import QtQuick 2.7
|
||||
import QtQuick.Controls 2.0
|
||||
import QtQuick 2.10
|
||||
import QtQuick.Controls 2.3
|
||||
|
||||
import UM 1.3 as UM
|
||||
|
||||
import "../Widgets" as Widgets
|
||||
|
||||
import UM 1.1 as UM
|
||||
|
||||
SettingItem
|
||||
{
|
||||
id: base
|
||||
property var focusItem: control
|
||||
|
||||
contents: ComboBox
|
||||
contents: Widgets.CuraComboBox
|
||||
{
|
||||
id: control
|
||||
|
||||
|
|
@ -20,125 +23,6 @@ SettingItem
|
|||
|
||||
anchors.fill: parent
|
||||
|
||||
background: Rectangle
|
||||
{
|
||||
color:
|
||||
{
|
||||
if (!enabled)
|
||||
{
|
||||
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")
|
||||
}
|
||||
|
||||
radius: UM.Theme.getSize("setting_control_radius").width
|
||||
border.width: UM.Theme.getSize("default_lining").width
|
||||
border.color:
|
||||
{
|
||||
if (!enabled)
|
||||
{
|
||||
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")
|
||||
}
|
||||
}
|
||||
|
||||
indicator: UM.RecolorImage
|
||||
{
|
||||
id: downArrow
|
||||
x: control.width - width - control.rightPadding
|
||||
y: control.topPadding + Math.round((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_button")
|
||||
}
|
||||
|
||||
contentItem: Label
|
||||
{
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: UM.Theme.getSize("setting_unit_margin").width
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.right: downArrow.left
|
||||
|
||||
text: control.currentText
|
||||
textFormat: Text.PlainText
|
||||
renderType: Text.NativeRendering
|
||||
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
|
||||
}
|
||||
|
||||
popup: Popup
|
||||
{
|
||||
y: control.height - UM.Theme.getSize("default_lining").height
|
||||
width: control.width
|
||||
implicitHeight: contentItem.implicitHeight + 2 * UM.Theme.getSize("default_lining").width
|
||||
padding: UM.Theme.getSize("default_lining").width
|
||||
|
||||
contentItem: ListView
|
||||
{
|
||||
clip: true
|
||||
implicitHeight: contentHeight
|
||||
model: control.popup.visible ? control.delegateModel : null
|
||||
currentIndex: control.highlightedIndex
|
||||
|
||||
ScrollIndicator.vertical: ScrollIndicator { }
|
||||
}
|
||||
|
||||
background: Rectangle
|
||||
{
|
||||
color: UM.Theme.getColor("setting_control")
|
||||
border.color: UM.Theme.getColor("setting_control_border")
|
||||
}
|
||||
}
|
||||
|
||||
delegate: ItemDelegate
|
||||
{
|
||||
width: control.width - 2 * UM.Theme.getSize("default_lining").width
|
||||
height: control.height
|
||||
highlighted: control.highlightedIndex == index
|
||||
|
||||
contentItem: Label
|
||||
{
|
||||
// FIXME: Somehow the top/bottom anchoring is not correct on Linux and it results in invisible texts.
|
||||
anchors.fill: parent
|
||||
anchors.leftMargin: UM.Theme.getSize("setting_unit_margin").width
|
||||
anchors.rightMargin: UM.Theme.getSize("setting_unit_margin").width
|
||||
|
||||
text: modelData.value
|
||||
textFormat: Text.PlainText
|
||||
renderType: Text.NativeRendering
|
||||
color: control.contentItem.color
|
||||
font: UM.Theme.getFont("default")
|
||||
elide: Text.ElideRight
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
}
|
||||
|
||||
background: Rectangle
|
||||
{
|
||||
color: parent.highlighted ? UM.Theme.getColor("setting_control_highlight") : "transparent"
|
||||
border.color: parent.highlighted ? UM.Theme.getColor("setting_control_border_highlight") : "transparent"
|
||||
}
|
||||
}
|
||||
|
||||
onActivated:
|
||||
{
|
||||
forceActiveFocus()
|
||||
|
|
@ -170,29 +54,29 @@ SettingItem
|
|||
value:
|
||||
{
|
||||
// FIXME this needs to go away once 'resolve' is combined with 'value' in our data model.
|
||||
var value = undefined;
|
||||
var value = undefined
|
||||
if ((base.resolve != "None") && (base.stackLevel != 0) && (base.stackLevel != 1))
|
||||
{
|
||||
// We have a resolve function. Indicates that the setting is not settable per extruder and that
|
||||
// we have to choose between the resolved value (default) and the global value
|
||||
// (if user has explicitly set this).
|
||||
value = base.resolve;
|
||||
value = base.resolve
|
||||
}
|
||||
|
||||
if (value == undefined)
|
||||
{
|
||||
value = propertyProvider.properties.value;
|
||||
value = propertyProvider.properties.value
|
||||
}
|
||||
|
||||
for(var i = 0; i < control.model.length; ++i)
|
||||
for (var i = 0; i < control.model.length; i++)
|
||||
{
|
||||
if(control.model[i].key == value)
|
||||
if (control.model[i].key == value)
|
||||
{
|
||||
return i;
|
||||
return i
|
||||
}
|
||||
}
|
||||
|
||||
return -1;
|
||||
return -1
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -122,5 +122,8 @@ Row
|
|||
text: catalog.i18nc("@title:label", "Printhead Settings")
|
||||
font: UM.Theme.getFont("medium_bold")
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
152
resources/qml/Widgets/CuraComboBox.qml
Normal file
152
resources/qml/Widgets/CuraComboBox.qml
Normal file
|
|
@ -0,0 +1,152 @@
|
|||
// Copyright (c) 2019 Ultimaker B.V.
|
||||
// Cura is released under the terms of the LGPLv3 or higher.
|
||||
|
||||
import QtQuick 2.10
|
||||
import QtQuick.Controls 2.3
|
||||
|
||||
import UM 1.3 as UM
|
||||
import Cura 1.1 as Cura
|
||||
|
||||
|
||||
//
|
||||
// ComboBox with Cura styling.
|
||||
//
|
||||
ComboBox
|
||||
{
|
||||
id: control
|
||||
|
||||
background: Rectangle
|
||||
{
|
||||
color:
|
||||
{
|
||||
if (!enabled)
|
||||
{
|
||||
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")
|
||||
}
|
||||
|
||||
radius: UM.Theme.getSize("setting_control_radius").width
|
||||
border.width: UM.Theme.getSize("default_lining").width
|
||||
border.color:
|
||||
{
|
||||
if (!enabled)
|
||||
{
|
||||
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")
|
||||
}
|
||||
}
|
||||
|
||||
indicator: UM.RecolorImage
|
||||
{
|
||||
id: downArrow
|
||||
x: control.width - width - control.rightPadding
|
||||
y: control.topPadding + Math.round((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_button")
|
||||
}
|
||||
|
||||
contentItem: Label
|
||||
{
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: UM.Theme.getSize("setting_unit_margin").width
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.right: downArrow.left
|
||||
|
||||
text: control.currentText
|
||||
textFormat: Text.PlainText
|
||||
renderType: Text.NativeRendering
|
||||
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
|
||||
}
|
||||
|
||||
popup: Popup
|
||||
{
|
||||
y: control.height - UM.Theme.getSize("default_lining").height
|
||||
width: control.width
|
||||
implicitHeight: contentItem.implicitHeight + 2 * UM.Theme.getSize("default_lining").width
|
||||
padding: UM.Theme.getSize("default_lining").width
|
||||
|
||||
contentItem: ListView
|
||||
{
|
||||
clip: true
|
||||
implicitHeight: contentHeight
|
||||
model: control.popup.visible ? control.delegateModel : null
|
||||
currentIndex: control.highlightedIndex
|
||||
|
||||
ScrollIndicator.vertical: ScrollIndicator { }
|
||||
}
|
||||
|
||||
background: Rectangle
|
||||
{
|
||||
color: UM.Theme.getColor("setting_control")
|
||||
border.color: UM.Theme.getColor("setting_control_border")
|
||||
}
|
||||
}
|
||||
|
||||
delegate: ItemDelegate
|
||||
{
|
||||
id: delegateItem
|
||||
width: control.width - 2 * UM.Theme.getSize("default_lining").width
|
||||
height: control.height
|
||||
highlighted: control.highlightedIndex == index
|
||||
text:
|
||||
// FIXME: Maybe there is a better way to do this. Check model and modelData doc page:
|
||||
// https://doc.qt.io/qt-5/qtquick-modelviewsdata-modelview.html
|
||||
{
|
||||
var _val = undefined
|
||||
if (typeof _val === 'undefined') // try to get textRole from "model".
|
||||
{
|
||||
_val = model[textRole]
|
||||
}
|
||||
if (typeof _val === 'undefined') // try to get textRole from "modelData" if it's still undefined.
|
||||
{
|
||||
_val = modelData[textRole]
|
||||
}
|
||||
return (typeof _val !== 'undefined') ? _val : ""
|
||||
}
|
||||
|
||||
contentItem: Label
|
||||
{
|
||||
// FIXME: Somehow the top/bottom anchoring is not correct on Linux and it results in invisible texts.
|
||||
anchors.fill: parent
|
||||
anchors.leftMargin: UM.Theme.getSize("setting_unit_margin").width
|
||||
anchors.rightMargin: UM.Theme.getSize("setting_unit_margin").width
|
||||
|
||||
text: delegateItem.text
|
||||
textFormat: Text.PlainText
|
||||
renderType: Text.NativeRendering
|
||||
color: control.contentItem.color
|
||||
font: UM.Theme.getFont("default")
|
||||
elide: Text.ElideRight
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
}
|
||||
|
||||
background: Rectangle
|
||||
{
|
||||
color: parent.highlighted ? UM.Theme.getColor("setting_control_highlight") : "transparent"
|
||||
border.color: parent.highlighted ? UM.Theme.getColor("setting_control_border_highlight") : "transparent"
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue