status-im/status-qml
2
0
Fork 0
mirror of synced 2025-01-20 03:19:26 +00:00
Code Issues Projects Releases Wiki Activity

feat(StatusDatePicker): introduce StatusDatePicker component

Browse Source 
nothing fancy, just a combo box with a calendar popup; needed for the
discord import tool UI

Related to status-im/status-desktop#6081
This commit is contained in:
Lukáš Tinkl 2022-08-08 04:13:13 +02:00 committed by Lukáš Tinkl
parent ad962a6009
commit 789b773649
5 changed files with 182 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
sandbox/controls/Others.qml
View File

@ -57,5 +57,8 @@ ColumnLayout {
}
}
}
}
StatusDatePicker {
label: "Select date"
}
}

175
src/StatusQ/Components/StatusDatePicker.qml Normal file
View File

@ -0,0 +1,175 @@
import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14
import Qt.labs.calendar 1.0
import StatusQ.Core 0.1
import StatusQ.Controls 0.1
import StatusQ.Core.Theme 0.1
/*!
\qmltype StatusDatePicker
\inherits StatusQ.Controls.StatusComboBox
\inqmlmodule StatusQ.Components
\since StatusQ.Components 0.1
\brief Displays a date picker based on a combobox with a calendar popup
The \c StatusDatePicker displays a date picker based on a combobox with a calendar popup.
The property \p selectedDate reflects the currently chosen date (defaults to today).
For a list of components available see StatusQ.
*/
StatusComboBox {
id: root
/*!
\qmlproperty string StatusDatePicker::dateFormat
This property specifies how the selected date will be displayed to the user.
By default it is current locale's short date format. For a list of available types
and formatting characters, see https://doc.qt.io/qt-5/qdate.html#toString-2
*/
property string dateFormat: Qt.locale().dateFormat(Locale.ShortFormat)
/*!
\qmlproperty date StatusDatePicker::selectedDate
This property holds the currently selected date.
\sa QtQml.Date
*/
readonly property alias selectedDate: d.selectedDate
QtObject {
id: d
property date selectedDate: new Date()
}
control.delegate: null
control.displayText: root.selectedDate.toLocaleDateString(Qt.locale(), root.dateFormat)
control.popup.horizontalPadding: 8
control.popup.onAboutToShow: {
// always open the popup showing the last (currently) selected date
grid.year = d.selectedDate.getFullYear()
grid.month = d.selectedDate.getMonth()
}
control.popup.contentItem: Item {
property alias grid: grid
GridLayout {
anchors.fill: parent
columns: 2
RowLayout {
Layout.fillWidth: true
Layout.columnSpan: 2
StatusFlatButton {
text: "<<"
onClicked: grid.year = grid.year - 1
StatusToolTip {
text: qsTr("Previous year")
visible: parent.hovered
}
}
StatusFlatButton {
text: "<"
onClicked: {
// switch to previous month (and optionally prev year in January)
const date = new Date(grid.year, grid.month)
date.setMonth(date.getMonth() - 1)
grid.month = date.getMonth()
grid.year = date.getFullYear()
}
StatusToolTip {
text: qsTr("Previous month")
visible: parent.hovered
}
}
StatusFlatButton {
Layout.fillWidth: true
text: grid.title
font.pixelSize: 18
font.weight: Font.Medium
onClicked: {
const date = new Date()
grid.month = date.getMonth()
grid.year = date.getFullYear()
}
StatusToolTip {
text: qsTr("Show current month")
visible: parent.hovered
}
}
StatusFlatButton {
text: ">"
onClicked: {
// switch to next month (and optionally next year in December)
const date = new Date(grid.year, grid.month)
date.setMonth(date.getMonth() + 1)
grid.month = date.getMonth()
grid.year = date.getFullYear()
}
StatusToolTip {
text: qsTr("Next month")
visible: parent.hovered
}
}
StatusFlatButton {
text: ">>"
onClicked: grid.year = grid.year + 1
StatusToolTip {
text: qsTr("Next year")
visible: parent.hovered
}
}
}
DayOfWeekRow {
Layout.row: 1
Layout.column: 1
Layout.fillWidth: true
delegate: StatusBaseText {
text: model.shortName
color: Theme.palette.directColor3
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
}
}
WeekNumberColumn {
id: weekColumn
month: grid.month
year: grid.year
Layout.fillHeight: true
delegate: StatusBaseText {
text: model.weekNumber
color: Theme.palette.directColor3
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
}
}
MonthGrid {
id: grid
month: d.selectedDate.getMonth()
year: d.selectedDate.getFullYear()
Layout.fillWidth: true
Layout.fillHeight: true
delegate: StatusFlatButton {
readonly property bool selected: d.selectedDate.getFullYear() === model.year &&
d.selectedDate.getMonth() === model.month &&
d.selectedDate.getDate() === model.day
opacity: model.month === grid.month ? 1 : 0.5
text: model.day
textColor: selected ? Theme.palette.primaryColor1 : Theme.palette.directColor1
font.bold: selected || model.today
onClicked: {
d.selectedDate = model.date
root.control.popup.close()
}
}
}
}
}
}

1
src/StatusQ/Components/qmldir
View File

@ -40,3 +40,4 @@ StatusCommunityCard 0.1 StatusCommunityCard.qml
StatusCommunityTags 0.1 StatusCommunityTags.qml
StatusItemSelector 0.1 StatusItemSelector.qml
StatusCard 0.1 StatusCard.qml
StatusDatePicker 0.1 StatusDatePicker.qml

3
src/StatusQ/Controls/StatusComboBox.qml
View File

@ -98,7 +98,7 @@ Item {
y: comboBox.height + 8
width: comboBox.width
height: Math.min(contentItem.implicitHeight + topPadding + bottomPadding,
height: Math.min(implicitContentHeight + topPadding + bottomPadding,
comboBox.Window.height - topMargin - bottomMargin)
margins: 8
@ -155,5 +155,4 @@ Item {
wrapMode: Text.WordWrap
}
}
}

1
src/statusq.qrc
View File

@ -30,6 +30,7 @@
<file>StatusQ/Components/StatusCommunityTags.qml</file>
<file>StatusQ/Components/StatusContactRequestsIndicatorListItem.qml</file>
<file>StatusQ/Components/StatusContactVerificationIcons.qml</file>
<file>StatusQ/Components/StatusDatePicker.qml</file>
<file>StatusQ/Components/StatusDescriptionListItem.qml</file>
<file>StatusQ/Components/StatusEmoji.qml</file>
<file>StatusQ/Components/StatusExpandableItem.qml</file>