status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat(StatusQ): StatusGroupBox component added

This commit is contained in:
Michał Cieślak 2023-03-10 17:16:15 +01:00 committed by Michał
parent 0db5790f76
commit 840ebbe1eb
6 changed files with 205 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
storybook/PagesModel.qml
View File

@ -153,6 +153,10 @@ ListModel {
title: "StatusItemSelector"
section: "Components"
}
ListElement {
title: "StatusGroupBox"
section: "Components"
}
ListElement {
title: "BrowserSettings"
section: "Settings"

121
storybook/pages/StatusGroupBoxPage.qml Normal file
View File

@ -0,0 +1,121 @@
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import StatusQ.Components 0.1
import utils 1.0
SplitView {
orientation: Qt.Vertical
component LabeledSlider: Row {
property alias text: label.text
property alias value: slider.value
property alias from: slider.from
property alias to: slider.to
Label {
id: label
anchors.verticalCenter: parent.verticalCenter
}
Slider {
id: slider
value: (from + to) / 2
from: 10
to: 500
}
}
Item {
SplitView.fillWidth: true
SplitView.fillHeight: true
clip: true
StatusGroupBox {
id: group
anchors.centerIn: parent
title: titleTextEdit.text
icon: Style.png("tokens/SNT")
iconSize: iconSizeSlider.value
width: undefinedSizeCheckBox.checked ? undefined
: widthSlider.value
height: undefinedSizeCheckBox.checked ? undefined
: heightSlider.value
Button {
width: group.availableWidth
height: group.availableHeight
text: "Content button with some text"
implicitWidth: contentImplicitWidthSlider.value
implicitHeight: contentImplicitHeightSlider.value
}
}
}
ScrollView {
clip: true
Pane {
SplitView.minimumHeight: 100
SplitView.preferredHeight: 200
ColumnLayout {
LabeledSlider {
id: widthSlider
enabled: !undefinedSizeCheckBox.checked
text: "width:"
}
LabeledSlider {
id: heightSlider
enabled: !undefinedSizeCheckBox.checked
text: "height:"
}
CheckBox {
id: undefinedSizeCheckBox
text: "Undefined size"
checked: true
}
LabeledSlider {
id: contentImplicitWidthSlider
text: "content implicit width:"
}
LabeledSlider {
id: contentImplicitHeightSlider
text: "content implicit height:"
}
LabeledSlider {
id: iconSizeSlider
from: 10
to: 40
value: 18
text: "iconSize:"
}
TextField {
id: titleTextEdit
text: "Some title goes here"
}
}
}
}
}

21
ui/StatusQ/doc/src/statusqcomponents.qdoc
View File

@ -11,32 +11,33 @@
\li \l{StatusAddress}
\li \l{StatusBadge}
\li \l{StatusChatInfoToolBar}
\li \l{StatusChatList}
\li \l{StatusChatListItem}
\li \l{StatusImageSettings}
\li \l{StatusChatListCategory}
\li \l{StatusChatListCategoryItem}
\li \l{StatusChatListAndCategories}
\li \l{StatusChatListCategoryItem}
\li \l{StatusChatListCategory}
\li \l{StatusChatListItem}
\li \l{StatusChatList}
\li \l{StatusChatToolBar}
\li \l{StatusContactRequestsIndicatorListItem}
\li \l{StatusDescriptionListItem}
\li \l{StatusExpandableItem}
\li \l{StatusGroupBox}
\li \l{StatusImageSettings}
\li \l{StatusItemSelector}
\li \l{StatusLetterIdenticon}
\li \l{StatusListItemBadge}
\li \l{StatusListItem}
\li \l{StatusListPicker}
\li \l{StatusListSectionHeadline}
\li \l{StatusLoadingIndicator}
\li \l{StatusMacWindowButtons}
\li \l{StatusMemberListItem}
\li \l{StatusMessageDetails}
\li \l{StatusMessage}
\li \l{StatusNavigationListItem}
\li \l{StatusNavigationPanelHeadline}
\li \l{StatusRoundIcon}
\li \l{StatusRoundedImage}
\li \l{StatusMacWindowButtons}
\li \l{StatusListItemBadge}
\li \l{StatusExpandableItem}
\li \l{StatusSmartIdenticon}
\li \l{StatusMessage}
\li \l{StatusMessageDetails}
\li \l{StatusTagSelector}
\li \l{StatusToastMessage}
\li \l{StatusWizardStepper}

67
ui/StatusQ/src/StatusQ/Components/StatusGroupBox.qml Normal file
View File

@ -0,0 +1,67 @@
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import StatusQ.Components 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Core 0.1
GroupBox {
id: root
topPadding: label.implicitHeight
leftPadding: 16
/*!
\qmlproperty string StatusGroupBox::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: 24
background: Rectangle {
color: Theme.palette.baseColor4
radius: 16
}
label: Control {
x: root.leftPadding
width: root.availableWidth
topPadding: 12
bottomPadding: 12
contentItem: RowLayout {
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
Layout.fillWidth: true
text: root.title
color: Theme.palette.directColor1
font.pixelSize: 17
elide: Text.ElideRight
}
}
}
}

1
ui/StatusQ/src/StatusQ/Components/qmldir
View File

@ -53,3 +53,4 @@ LoadingComponent 0.1 LoadingComponent.qml
StatusQrCodeScanner 0.1 StatusQrCodeScanner.qml
StatusSyncDeviceDelegate 0.1 StatusSyncDeviceDelegate.qml
StatusOnlineBadge 0.1 StatusOnlineBadge.qml
StatusGroupBox 0.1 StatusGroupBox.qml

1
ui/StatusQ/src/statusq.qrc
View File

@ -198,5 +198,6 @@
<file>StatusQ/Core/Utils/ModelChangeTracker.qml</file>
<file>StatusQ/Components/StatusQrCodeScanner.qml</file>
<file>StatusQ/Components/StatusOnlineBadge.qml</file>
<file>StatusQ/Components/StatusGroupBox.qml</file>
</qresource>
</RCC>