mirror of
https://github.com/status-im/status-desktop.git
synced 2025-02-22 11:38:57 +00:00
StatusGroupBox used as a base for StatusItemSelector
This commit is contained in:
Michał Cieślak
Michał
parent
840ebbe1eb
commit
347da1e007
@ -1,6 +1,5 @@
|
|||||||
import QtQuick 2.14
|
import QtQuick 2.14
|
||||||
import QtQuick.Layouts 1.14
|
import QtQuick.Layouts 1.14
|
||||||
import QtQuick.Controls 2.14 as QC
|
|
||||||
|
|
||||||
import StatusQ.Core 0.1
|
import StatusQ.Core 0.1
|
||||||
import StatusQ.Core.Theme 0.1
|
import StatusQ.Core.Theme 0.1
|
||||||
@ -41,23 +40,9 @@ import StatusQ.Core.Utils 0.1
|
|||||||
\endqml
|
\endqml
|
||||||
For a list of components available see StatusQ.
|
For a list of components available see StatusQ.
|
||||||
*/
|
*/
|
||||||
Rectangle {
|
StatusGroupBox {
|
||||||
id: root
|
id: root
|
||||||
/*!
|
|
||||||
\qmlproperty string StatusItemSelector::icon
|
|
||||||
This property holds the icon name for the icon represented on top of the component as a title icon.
|
|
||||||
*/
|
|
||||||
property string icon
|
|
||||||
/*!
|
|
||||||
\qmlproperty int StatusItemSelector::iconSize
|
|
||||||
This property holds the icon size for the icon represented on top of the component as a title icon.
|
|
||||||
*/
|
|
||||||
property int iconSize: 18
|
|
||||||
/*!
|
|
||||||
\qmlproperty string StatusItemSelector::title
|
|
||||||
This property holds the titel shown on top of the component.
|
|
||||||
*/
|
|
||||||
property string title
|
|
||||||
/*!
|
/*!
|
||||||
\qmlproperty string StatusItemSelector::defaultItemText
|
\qmlproperty string StatusItemSelector::defaultItemText
|
||||||
This property holds the default item text shown when the list of items is empty.
|
This property holds the default item text shown when the list of items is empty.
|
||||||
@ -130,116 +115,84 @@ Rectangle {
|
|||||||
*/
|
*/
|
||||||
signal itemClicked(var item, int index, var mouse)
|
signal itemClicked(var item, int index, var mouse)
|
||||||
|
|
||||||
color: Theme.palette.baseColor4
|
|
||||||
implicitHeight: columnLayout.implicitHeight + columnLayout.anchors.topMargin + columnLayout.anchors.bottomMargin
|
|
||||||
implicitWidth: 560
|
implicitWidth: 560
|
||||||
radius: 16
|
|
||||||
clip: true
|
clip: true
|
||||||
|
|
||||||
ColumnLayout {
|
Flow {
|
||||||
id: columnLayout
|
id: flow
|
||||||
anchors.top: parent.top
|
|
||||||
anchors.topMargin: 12
|
|
||||||
anchors.bottomMargin: anchors.topMargin
|
|
||||||
anchors.left: parent.left
|
|
||||||
anchors.leftMargin: 16
|
|
||||||
anchors.right: parent.right
|
|
||||||
anchors.rightMargin: 16
|
|
||||||
spacing: 12
|
|
||||||
clip: true
|
clip: true
|
||||||
RowLayout {
|
width: root.availableWidth
|
||||||
id: headerRow
|
spacing: 6
|
||||||
spacing: 8
|
|
||||||
Image {
|
|
||||||
sourceSize.width: width || undefined
|
|
||||||
sourceSize.height: height || undefined
|
|
||||||
fillMode: Image.PreserveAspectFit
|
|
||||||
mipmap: true
|
|
||||||
antialiasing: true
|
|
||||||
width: root.iconSize
|
|
||||||
height: width
|
|
||||||
source: root.icon
|
|
||||||
}
|
|
||||||
StatusBaseText {
|
|
||||||
Layout.alignment: Qt.AlignVCenter
|
|
||||||
text: root.title
|
|
||||||
color: Theme.palette.directColor1
|
|
||||||
font.pixelSize: 17
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Flow {
|
|
||||||
id: flow
|
|
||||||
Layout.fillWidth: true
|
|
||||||
spacing: 6
|
|
||||||
StatusListItemTag {
|
|
||||||
bgColor: Theme.palette.baseColor2
|
|
||||||
visible: !itemsModel || itemsModel.count === 0
|
|
||||||
title: root.defaultItemText
|
|
||||||
asset.name: root.defaultItemImageSource
|
|
||||||
asset.isImage: true
|
|
||||||
closeButtonVisible: false
|
|
||||||
titleText.color: Theme.palette.baseColor1
|
|
||||||
titleText.font.pixelSize: 15
|
|
||||||
}
|
|
||||||
Repeater {
|
|
||||||
model: itemsModel
|
|
||||||
|
|
||||||
RowLayout {
|
StatusListItemTag {
|
||||||
spacing: flow.spacing
|
bgColor: Theme.palette.baseColor2
|
||||||
|
visible: !itemsModel || itemsModel.count === 0
|
||||||
|
title: root.defaultItemText
|
||||||
|
asset.name: root.defaultItemImageSource
|
||||||
|
asset.isImage: true
|
||||||
|
closeButtonVisible: false
|
||||||
|
titleText.color: Theme.palette.baseColor1
|
||||||
|
titleText.font.pixelSize: 15
|
||||||
|
}
|
||||||
|
Repeater {
|
||||||
|
model: itemsModel
|
||||||
|
|
||||||
StatusBaseText {
|
RowLayout {
|
||||||
visible: model.operator !== OperatorsUtils.Operators.None
|
spacing: flow.spacing
|
||||||
Layout.alignment: Qt.AlignVCenter
|
|
||||||
text: OperatorsUtils.setOperatorTextFormat(model.operator)
|
|
||||||
color: Theme.palette.primaryColor1
|
|
||||||
font.pixelSize: 17
|
|
||||||
MouseArea {
|
|
||||||
anchors.fill: parent
|
|
||||||
cursorShape: Qt.PointingHandCursor
|
|
||||||
onClicked: {
|
|
||||||
// Switch operator
|
|
||||||
if(model.operator === OperatorsUtils.Operators.And)
|
|
||||||
model.operator = OperatorsUtils.Operators.Or
|
|
||||||
else
|
|
||||||
model.operator = OperatorsUtils.Operators.And
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
StatusListItemTag {
|
|
||||||
title: model.text
|
|
||||||
|
|
||||||
asset.height: root.asset.height
|
StatusBaseText {
|
||||||
asset.width: root.asset.width
|
visible: model.operator !== OperatorsUtils.Operators.None
|
||||||
asset.name: root.useLetterIdenticons ? model.text : (model.imageSource ?? "")
|
Layout.alignment: Qt.AlignVCenter
|
||||||
asset.isImage: root.asset.isImage
|
text: OperatorsUtils.setOperatorTextFormat(model.operator)
|
||||||
asset.bgColor: root.asset.bgColor
|
color: Theme.palette.primaryColor1
|
||||||
asset.emoji: model.emoji ? model.emoji : ""
|
font.pixelSize: 17
|
||||||
asset.color: model.color ? model.color : ""
|
MouseArea {
|
||||||
asset.isLetterIdenticon: root.useLetterIdenticons
|
anchors.fill: parent
|
||||||
//color: Theme.palette.primaryColor3
|
cursorShape: Qt.PointingHandCursor
|
||||||
closeButtonVisible: false
|
onClicked: {
|
||||||
titleText.color: Theme.palette.primaryColor1
|
// Switch operator
|
||||||
titleText.font.pixelSize: 15
|
if(model.operator === OperatorsUtils.Operators.And)
|
||||||
leftPadding: root.tagLeftPadding
|
model.operator = OperatorsUtils.Operators.Or
|
||||||
|
else
|
||||||
MouseArea {
|
model.operator = OperatorsUtils.Operators.And
|
||||||
anchors.fill: parent
|
|
||||||
enabled: root.itemsClickable
|
|
||||||
cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
|
|
||||||
acceptedButtons: Qt.LeftButton | Qt.RightButton
|
|
||||||
onClicked: root.itemClicked(parent, model.index, mouse)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
StatusListItemTag {
|
||||||
|
title: model.text
|
||||||
|
|
||||||
|
asset.height: root.asset.height
|
||||||
|
asset.width: root.asset.width
|
||||||
|
asset.name: root.useLetterIdenticons ? model.text : (model.imageSource ?? "")
|
||||||
|
asset.isImage: root.asset.isImage
|
||||||
|
asset.bgColor: root.asset.bgColor
|
||||||
|
asset.emoji: model.emoji ? model.emoji : ""
|
||||||
|
asset.color: model.color ? model.color : ""
|
||||||
|
asset.isLetterIdenticon: root.useLetterIdenticons
|
||||||
|
//color: Theme.palette.primaryColor3
|
||||||
|
closeButtonVisible: false
|
||||||
|
titleText.color: Theme.palette.primaryColor1
|
||||||
|
titleText.font.pixelSize: 15
|
||||||
|
leftPadding: root.tagLeftPadding
|
||||||
|
|
||||||
|
MouseArea {
|
||||||
|
anchors.fill: parent
|
||||||
|
enabled: root.itemsClickable
|
||||||
|
cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
|
||||||
|
acceptedButtons: Qt.LeftButton | Qt.RightButton
|
||||||
|
onClicked: root.itemClicked(parent, model.index, mouse)
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
StatusRoundButton {
|
}
|
||||||
id: addItemButton
|
StatusRoundButton {
|
||||||
implicitHeight: 32
|
id: addItemButton
|
||||||
implicitWidth: implicitHeight
|
implicitHeight: 32
|
||||||
height: width
|
implicitWidth: implicitHeight
|
||||||
type: StatusRoundButton.Type.Secondary
|
height: width
|
||||||
icon.name: "add"
|
type: StatusRoundButton.Type.Secondary
|
||||||
}
|
icon.name: "add"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user