feat(StatusComboBox): Introduced new component to replace `StatusSelect` (#790)
This commit is contained in:
parent
29fbe51e8f
commit
b3dfa02297
|
@ -202,6 +202,11 @@ StatusWindow {
|
|||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.page(title);
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
title: "StatusComboBox"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.page(title);
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
title: "StatusAccountSelector"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
|
|
|
@ -0,0 +1,72 @@
|
|||
import QtQuick 2.14
|
||||
import QtQuick.Controls 2.14
|
||||
import QtQuick.Layouts 1.14
|
||||
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
import StatusQ.Controls 0.1
|
||||
import StatusQ.Popups 0.1
|
||||
|
||||
import Sandbox 0.1
|
||||
|
||||
Column {
|
||||
spacing: 20
|
||||
|
||||
ListModel {
|
||||
id: commmonModel
|
||||
ListElement {
|
||||
name: "Pascal"
|
||||
}
|
||||
ListElement {
|
||||
name: "Khushboo"
|
||||
}
|
||||
ListElement {
|
||||
name: "Alexandra"
|
||||
}
|
||||
ListElement {
|
||||
name: "Eric"
|
||||
}
|
||||
}
|
||||
|
||||
StatusComboBox {
|
||||
id: combobox
|
||||
label: "ComboBox"
|
||||
model: commmonModel
|
||||
}
|
||||
|
||||
StatusComboBox {
|
||||
id: comboBox1
|
||||
label: "ComboBox with custom delegate"
|
||||
model: commmonModel
|
||||
delegate: StatusItemDelegate {
|
||||
width: comboBox1.comboBox.width
|
||||
highlighted: comboBox1.comboBox.highlightedIndex === index
|
||||
text: modelData
|
||||
font: comboBox1.comboBox.font
|
||||
icon {
|
||||
name: "filled-account"
|
||||
color: Theme.palette.primaryColor1
|
||||
}
|
||||
enabled: index != 2
|
||||
}
|
||||
}
|
||||
|
||||
StatusComboBox {
|
||||
model: commmonModel
|
||||
label: "Disabled ComboBox"
|
||||
enabled: false
|
||||
}
|
||||
|
||||
StatusComboBox {
|
||||
model: commmonModel
|
||||
label: "ComboBox with validation error"
|
||||
validationError: "Validation failed example"
|
||||
}
|
||||
|
||||
StatusComboBox {
|
||||
model: commmonModel
|
||||
label: "Mirrored ComboBox"
|
||||
LayoutMirroring.enabled: true
|
||||
}
|
||||
}
|
||||
|
|
@ -8,26 +8,31 @@ import StatusQ.Controls 0.1
|
|||
import StatusQ.Popups 0.1
|
||||
|
||||
import Sandbox 0.1
|
||||
|
||||
Column {
|
||||
spacing: 8
|
||||
spacing: 20
|
||||
|
||||
ListModel {
|
||||
id: commmonModel
|
||||
ListElement {
|
||||
name: "Pascal"
|
||||
}
|
||||
ListElement {
|
||||
name: "Khushboo"
|
||||
}
|
||||
ListElement {
|
||||
name: "Alexandra"
|
||||
}
|
||||
ListElement {
|
||||
name: "Eric"
|
||||
}
|
||||
}
|
||||
|
||||
StatusSelect {
|
||||
id: select
|
||||
label: "Some label"
|
||||
model: ListModel {
|
||||
ListElement {
|
||||
name: "Pascal"
|
||||
}
|
||||
ListElement {
|
||||
name: "Khushboo"
|
||||
}
|
||||
ListElement {
|
||||
name: "Alexandra"
|
||||
}
|
||||
ListElement {
|
||||
name: "Eric"
|
||||
}
|
||||
}
|
||||
model: commmonModel
|
||||
|
||||
selectMenu.delegate: StatusMenuItemDelegate {
|
||||
statusPopupMenu: select
|
||||
action: StatusMenuItem {
|
||||
|
@ -38,6 +43,7 @@ Column {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
selectedItemComponent: Item {
|
||||
id: selectedItem
|
||||
anchors.fill: parent
|
||||
|
|
|
@ -79,5 +79,7 @@
|
|||
<file>images/SRToken.png</file>
|
||||
<file>demoapp/data/profile-image-1.jpeg</file>
|
||||
<file>demoapp/data/profile-image-2.jpeg</file>
|
||||
<file>pages/StatusItemSelectorPage.qml</file>
|
||||
<file>pages/StatusComboBoxPage.qml</file>
|
||||
</qresource>
|
||||
</RCC>
|
||||
|
|
|
@ -0,0 +1,150 @@
|
|||
import QtQuick 2.14
|
||||
import QtQuick.Controls 2.14
|
||||
import QtQuick.Layouts 1.14
|
||||
import QtGraphicalEffects 1.13
|
||||
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
import StatusQ.Popups 0.1
|
||||
|
||||
import QtQuick.Templates 2.14 as T
|
||||
|
||||
Item {
|
||||
id: root
|
||||
|
||||
property alias comboBox: comboBox
|
||||
property alias model: comboBox.model
|
||||
property alias delegate: comboBox.delegate
|
||||
property alias contentItem: comboBox.contentItem
|
||||
|
||||
property alias label: labelItem.text
|
||||
property alias validationError: validationErrorItem.text
|
||||
|
||||
implicitWidth: layout.implicitWidth
|
||||
implicitHeight: layout.implicitHeight
|
||||
|
||||
LayoutMirroring.childrenInherit: true
|
||||
|
||||
ColumnLayout {
|
||||
id: layout
|
||||
|
||||
anchors.fill: parent
|
||||
spacing: 0
|
||||
|
||||
StatusBaseText {
|
||||
id: labelItem
|
||||
Layout.fillWidth: true
|
||||
visible: !!text
|
||||
font.pixelSize: 15
|
||||
color: root.enabled ? Theme.palette.directColor1 : Theme.palette.baseColor1
|
||||
}
|
||||
|
||||
ComboBox {
|
||||
id: comboBox
|
||||
|
||||
property color bgColor: Theme.palette.baseColor2
|
||||
property color bgColorHover: bgColor
|
||||
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 7
|
||||
|
||||
enabled: root.enabled
|
||||
|
||||
font.family: Theme.palette.baseFont.name
|
||||
font.pixelSize: 14
|
||||
|
||||
padding: 16
|
||||
spacing: 16
|
||||
|
||||
background: Rectangle {
|
||||
implicitHeight: 56
|
||||
implicitWidth: 448
|
||||
color: Theme.palette.baseColor2
|
||||
radius: 8
|
||||
border.width: !!root.validationError || comboBox.hovered || comboBox.down || comboBox.activeFocus ? 1 : 0
|
||||
border.color: !!root.validationError
|
||||
? Theme.palette.dangerColor1
|
||||
: comboBox.activeFocus
|
||||
? Theme.palette.primaryColor1
|
||||
: comboBox.hovered
|
||||
? Theme.palette.primaryColor2
|
||||
: "transparent"
|
||||
}
|
||||
|
||||
contentItem: StatusBaseText {
|
||||
font: comboBox.font
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
elide: Text.ElideRight
|
||||
text: comboBox.displayText
|
||||
color: root.enabled ? Theme.palette.directColor1 : Theme.palette.baseColor1
|
||||
}
|
||||
|
||||
indicator: StatusIcon {
|
||||
x: comboBox.mirrored ? comboBox.padding : comboBox.width - width - comboBox.padding
|
||||
y: comboBox.topPadding + (comboBox.availableHeight - height) / 2
|
||||
width: 24
|
||||
height: 24
|
||||
icon: "chevron-down"
|
||||
color: Theme.palette.baseColor1
|
||||
}
|
||||
|
||||
popup: Popup {
|
||||
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
|
||||
y: comboBox.height + 8
|
||||
width: comboBox.width
|
||||
implicitHeight: contentItem.implicitHeight + topPadding + bottomPadding
|
||||
padding: 1
|
||||
verticalPadding: 8
|
||||
|
||||
contentItem: ListView { // TODO: Replace with StatusListView
|
||||
id: listView
|
||||
clip: true
|
||||
implicitHeight: contentHeight
|
||||
model: comboBox.popup.visible ? comboBox.delegateModel : null
|
||||
currentIndex: comboBox.highlightedIndex
|
||||
|
||||
boundsBehavior: Flickable.StopAtBounds
|
||||
synchronousDrag: true
|
||||
|
||||
ScrollIndicator.vertical: ScrollIndicator { }
|
||||
}
|
||||
|
||||
background: Rectangle {
|
||||
id: backgroundItem
|
||||
color: Theme.palette.statusSelect.menuItemBackgroundColor
|
||||
radius: 8
|
||||
border.color: Theme.palette.baseColor2
|
||||
layer.enabled: true
|
||||
layer.effect: DropShadow {
|
||||
horizontalOffset: 0
|
||||
verticalOffset: 4
|
||||
radius: 12
|
||||
samples: 25
|
||||
spread: 0.2
|
||||
color: Theme.palette.dropShadow
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
delegate: StatusItemDelegate {
|
||||
width: comboBox.width
|
||||
highlighted: comboBox.highlightedIndex === index
|
||||
font: comboBox.font
|
||||
text: modelData
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
StatusBaseText {
|
||||
id: validationErrorItem
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 11
|
||||
visible: !!text
|
||||
font.pixelSize: 12
|
||||
color: Theme.palette.dangerColor1
|
||||
horizontalAlignment: TextEdit.AlignRight
|
||||
wrapMode: Text.WordWrap
|
||||
}
|
||||
}
|
||||
|
||||
}
|
|
@ -0,0 +1,49 @@
|
|||
import QtQuick 2.14
|
||||
import QtQuick.Controls 2.14
|
||||
import QtQuick.Layouts 1.14
|
||||
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
import StatusQ.Controls 0.1
|
||||
|
||||
ItemDelegate {
|
||||
id: root
|
||||
|
||||
padding: 8
|
||||
spacing: 8
|
||||
|
||||
icon.width: 16
|
||||
icon.height: 16
|
||||
|
||||
contentItem: RowLayout {
|
||||
spacing: root.spacing
|
||||
|
||||
StatusIcon {
|
||||
id: iconItem
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
visible: !!icon
|
||||
icon: root.icon.name
|
||||
color: root.enabled ? root.icon.color : Theme.palette.baseColor1
|
||||
width: root.icon.width
|
||||
height: root.icon.height
|
||||
}
|
||||
|
||||
StatusBaseText {
|
||||
id: textItem
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
font: root.font
|
||||
text: root.text
|
||||
horizontalAlignment: Text.AlignLeft
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
elide: Text.ElideRight
|
||||
color: root.enabled ? Theme.palette.directColor1 : Theme.palette.baseColor1
|
||||
}
|
||||
}
|
||||
|
||||
background: Rectangle {
|
||||
color: root.highlighted
|
||||
? Theme.palette.statusPopupMenu.hoverBackgroundColor
|
||||
: "transparent"
|
||||
}
|
||||
}
|
|
@ -8,11 +8,14 @@ import StatusQ.Core.Theme 0.1
|
|||
import StatusQ.Popups 0.1
|
||||
|
||||
Item {
|
||||
id: root
|
||||
|
||||
enum MenuAlignment {
|
||||
Left,
|
||||
Right,
|
||||
Center
|
||||
}
|
||||
|
||||
property string label: ""
|
||||
readonly property bool hasLabel: label !== ""
|
||||
property color bgColor: Theme.palette.baseColor2
|
||||
|
@ -28,10 +31,12 @@ Item {
|
|||
property string validationError: ""
|
||||
property alias validationErrorAlignment: validationErrorText.horizontalAlignment
|
||||
property int validationErrorTopMargin: 11
|
||||
|
||||
implicitWidth: 448
|
||||
|
||||
id: root
|
||||
height: inputRectangle.height + (hasLabel ? inputLabel.height + labelMargin : 0) + (!!validationError ? (validationErrorText.height + validationErrorTopMargin) : 0)
|
||||
implicitHeight: inputRectangle.height +
|
||||
(hasLabel ? inputLabel.height + labelMargin : 0) +
|
||||
(!!validationError ? (validationErrorText.height + validationErrorTopMargin) : 0)
|
||||
|
||||
StatusBaseText {
|
||||
id: inputLabel
|
||||
|
@ -95,6 +100,10 @@ Item {
|
|||
}
|
||||
}
|
||||
|
||||
// ListView {
|
||||
// id: selectMenu
|
||||
// }
|
||||
|
||||
StatusPopupMenu {
|
||||
id: selectMenu
|
||||
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
|
||||
|
|
|
@ -48,3 +48,5 @@ StatusActivityCenterButton 0.1 StatusActivityCenterButton.qml
|
|||
StatusDropdown 0.1 StatusDropdown.qml
|
||||
StatusIconTextButton 0.1 StatusIconTextButton.qml
|
||||
StatusScrollBar 0.1 StatusScrollBar.qml
|
||||
StatusComboBox 0.1 StatusComboBox.qml
|
||||
StatusItemDelegate 0.1 StatusItemDelegate.qml
|
||||
|
|
Loading…
Reference in New Issue