feat(StatusQ): StatusSortableColumnHeader component added

ui/StatusQ/src/StatusQ/Components/StatusSortableColumnHeader.qml

@@ -0,0 +1,114 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+ItemDelegate {
+    id: root
+
+    enum Sorting {
+        NoSorting, Descending, Ascending
+    }
+
+    property int sorting: StatusSortableColumnHeader.Sorting.NoSorting
+
+    property var traversalOrder: [
+        StatusSortableColumnHeader.Sorting.NoSorting,
+        StatusSortableColumnHeader.Sorting.Descending,
+        StatusSortableColumnHeader.Sorting.Ascending
+    ]
+
+    function reset() {
+        sorting = traversalOrder[0]
+    }
+
+    component TickIcon: StatusIcon {
+        color: Theme.palette.baseColor1
+        width: 8
+        height: 5
+    }
+
+    states: [
+        State {
+            when: root.sorting === StatusSortableColumnHeader.Sorting.NoSorting
+        },
+        State {
+            when: root.sorting === StatusSortableColumnHeader.Sorting.Descending
+
+            PropertyChanges {
+                target: label
+                color: Theme.palette.directColor1
+            }
+
+            PropertyChanges {
+                target: tickDown
+
+                color: Theme.palette.miscColor1
+            }
+        },
+        State {
+            when: root.sorting === StatusSortableColumnHeader.Sorting.Ascending
+
+            PropertyChanges {
+                target: label
+                color: Theme.palette.directColor1
+            }
+
+            PropertyChanges {
+                target: tickUp
+
+                color: Theme.palette.miscColor1
+            }
+        }
+    ]
+
+    QtObject {
+        id: internal
+
+        function setNextSortingMode() {
+            const currentIdx = root.traversalOrder.indexOf(root.sorting)
+            const nextIdx = (currentIdx + 1) % root.traversalOrder.length
+
+            sorting = traversalOrder[nextIdx]
+        }
+    }
+
+    background: null
+
+    onClicked: {
+        internal.setNextSortingMode()
+    }
+
+    contentItem: RowLayout {
+        spacing: 9
+
+        StatusBaseText {
+            id: label
+
+            elide: Qt.ElideRight
+            font.weight: Font.Medium
+
+            font.pixelSize: 13
+            color: Theme.palette.baseColor1
+            text: root.text
+        }
+
+        Column {
+            spacing: 2
+
+            TickIcon {
+                id: tickUp
+
+                icon: "tiny/tick-up"
+            }
+
+            TickIcon {
+                id: tickDown
+
+                icon: "tiny/tick-down"
+            }
+        }
+    }
+}

ui/StatusQ/src/StatusQ/Components/qmldir

@@ -1,65 +1,67 @@
 module StatusQ.Components
 
+LoadingComponent 0.1 LoadingComponent.qml
 StatusAddress 0.1 StatusAddress.qml
 StatusAddressPanel 0.1 StatusAddressPanel.qml
 StatusAnimatedImage 0.1 StatusAnimatedImage.qml
 StatusBadge 0.1 StatusBadge.qml
+StatusCard 0.1 StatusCard.qml
+StatusChart 0.1 StatusChart.qml
+StatusChartPanel 0.1 StatusChartPanel.qml
 StatusChatInfoToolBar 0.1 StatusChatInfoToolBar.qml
 StatusChatList 0.1 StatusChatList.qml
-StatusChatListItem 0.1 StatusChatListItem.qml
+StatusChatListAndCategories 0.1 StatusChatListAndCategories.qml
 StatusChatListCategory 0.1 StatusChatListCategory.qml
 StatusChatListCategoryItem 0.1 StatusChatListCategoryItem.qml
-StatusChatListAndCategories 0.1 StatusChatListAndCategories.qml
-StatusCursorDelegate 0.1 StatusCursorDelegate.qml
-StatusImage 0.1 StatusImage.qml
-StatusToolBar 0.1 StatusToolBar.qml
+StatusChatListItem 0.1 StatusChatListItem.qml
+StatusColorSpace 0.0 StatusColorSpace.qml
+StatusCommunityCard 0.1 StatusCommunityCard.qml
+StatusCommunityTags 0.1 StatusCommunityTags.qml
 StatusContactRequestsIndicatorListItem 0.1 StatusContactRequestsIndicatorListItem.qml
-StatusEmoji 0.1 StatusEmoji.qml
 StatusContactVerificationIcons 0.1 StatusContactVerificationIcons.qml
+StatusCursorDelegate 0.1 StatusCursorDelegate.qml
 StatusDateGroupLabel 0.1 StatusDateGroupLabel.qml
+StatusDateInput 0.1 StatusDateInput.qml
+StatusDatePicker 0.1 StatusDatePicker.qml
 StatusDescriptionListItem 0.1 StatusDescriptionListItem.qml
 StatusDotsLoadingIndicator 0.1 StatusDotsLoadingIndicator.qml
 StatusDraggableListItem 0.1 StatusDraggableListItem.qml
+StatusEmoji 0.1 StatusEmoji.qml
+StatusEmojiAndColorComboBox 0.1 StatusEmojiAndColorComboBox.qml
+StatusExpandableItem 0.1 StatusExpandableItem.qml
+StatusFlowSelector 0.1 StatusFlowSelector.qml
+StatusGroupBox 0.1 StatusGroupBox.qml
+StatusImage 0.1 StatusImage.qml
+StatusImageCropPanel 0.1 StatusImageCropPanel.qml
+StatusItemSelector 0.1 StatusItemSelector.qml
 StatusLetterIdenticon 0.1 StatusLetterIdenticon.qml
 StatusListItem 0.1 StatusListItem.qml
+StatusListItemBadge 0.1 StatusListItemBadge.qml
+StatusListItemTag 0.1 StatusListItemTag.qml
+StatusListPicker 0.1 StatusListPicker.qml
 StatusListSectionHeadline 0.1 StatusListSectionHeadline.qml
 StatusLoadingIndicator 0.1 StatusLoadingIndicator.qml
+StatusMacWindowButtons 0.1 StatusMacWindowButtons.qml
 StatusMemberListItem 0.1 StatusMemberListItem.qml
+StatusMessage 0.1 StatusMessage.qml
+StatusMessageDetails 0.1 StatusMessageDetails.qml
+StatusMessageHeader 0.1 StatusMessageHeader.qml
+StatusMessageSenderDetails 0.1 StatusMessageSenderDetails.qml
 StatusNavigationListItem 0.1 StatusNavigationListItem.qml
 StatusNavigationPanelHeadline 0.1 StatusNavigationPanelHeadline.qml
+StatusOnlineBadge 0.1 StatusOnlineBadge.qml
+StatusPageIndicator 0.1 StatusPageIndicator.qml
+StatusQrCodeScanner 0.1 StatusQrCodeScanner.qml
 StatusRoundIcon 0.1 StatusRoundIcon.qml
 StatusRoundedComponent 0.1 StatusRoundedComponent.qml
 StatusRoundedImage 0.1 StatusRoundedImage.qml
 StatusRoundedMedia 0.1 StatusRoundedMedia.qml
-StatusMacWindowButtons 0.1 StatusMacWindowButtons.qml
-StatusListItemBadge 0.1 StatusListItemBadge.qml
-StatusListItemTag 0.1 StatusListItemTag.qml
-StatusListPicker 0.1 StatusListPicker.qml
-StatusExpandableItem 0.1 StatusExpandableItem.qml
-StatusEmojiAndColorComboBox 0.1 StatusEmojiAndColorComboBox.qml
 StatusSmartIdenticon 0.1 StatusSmartIdenticon.qml
-StatusMessage 0.1 StatusMessage.qml
-StatusMessageHeader 0.1 StatusMessageHeader.qml
-StatusMessageDetails 0.1 StatusMessageDetails.qml
-StatusMessageSenderDetails 0.1 StatusMessageSenderDetails.qml
+StatusSortableColumnHeader 0.1 StatusSortableColumnHeader.qml
+StatusStepper 0.1 StatusStepper.qml
+StatusSyncDeviceDelegate 0.1 StatusSyncDeviceDelegate.qml
 StatusTagSelector 0.1 StatusTagSelector.qml
 StatusToastMessage 0.1 StatusToastMessage.qml
+StatusToolBar 0.1 StatusToolBar.qml
 StatusVideo 0.1 StatusVideo.qml
 StatusWizardStepper 0.1 StatusWizardStepper.qml
-StatusImageCropPanel 0.1 StatusImageCropPanel.qml
-StatusColorSpace 0.0 StatusColorSpace.qml
-StatusCommunityCard 0.1 StatusCommunityCard.qml
-StatusCommunityTags 0.1 StatusCommunityTags.qml
-StatusFlowSelector 0.1 StatusFlowSelector.qml
-StatusItemSelector 0.1 StatusItemSelector.qml
-StatusCard 0.1 StatusCard.qml
-StatusDatePicker 0.1 StatusDatePicker.qml
-StatusChart 0.1 StatusChart.qml
-StatusChartPanel 0.1 StatusChartPanel.qml
-StatusStepper 0.1 StatusStepper.qml
-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
-StatusPageIndicator 0.1 StatusPageIndicator.qml

ui/StatusQ/src/assets.qrc

@@ -115,6 +115,8 @@
         <file>assets/img/icons/tiny/tribute-to-talk.svg</file>
         <file>assets/img/icons/tiny/unlocked.svg</file>
         <file>assets/img/icons/tiny/warning.svg</file>
+        <file>assets/img/icons/tiny/tick-down.svg</file>
+        <file>assets/img/icons/tiny/tick-up.svg</file>
         <file>assets/img/icons/traffic_lights/close.png</file>
         <file>assets/img/icons/traffic_lights/close_pressed.png</file>
         <file>assets/img/icons/traffic_lights/maximize.png</file>

ui/StatusQ/src/assets/img/icons/tiny/tick-down.svg

@@ -0,0 +1,3 @@
+<svg width="8" height="5" viewBox="0 0 8 5" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.46967 0.71967C0.762563 0.426777 1.23744 0.426777 1.53033 0.71967L3.64645 2.83579C3.84171 3.03105 4.15829 3.03105 4.35355 2.83579L6.46967 0.71967C6.76256 0.426777 7.23744 0.426777 7.53033 0.71967C7.82322 1.01256 7.82322 1.48744 7.53033 1.78033L4.53033 4.78033C4.23744 5.07322 3.76256 5.07322 3.46967 4.78033L0.46967 1.78033C0.176777 1.48744 0.176777 1.01256 0.46967 0.71967Z" fill="#000000"/>
+</svg>

ui/StatusQ/src/assets/img/icons/tiny/tick-up.svg

@@ -0,0 +1,3 @@
+<svg width="8" height="5" viewBox="0 0 8 5" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.53033 4.28033C7.23744 4.57322 6.76256 4.57322 6.46967 4.28033L4.35355 2.16421C4.15829 1.96895 3.84171 1.96895 3.64645 2.16421L1.53033 4.28033C1.23744 4.57322 0.762563 4.57322 0.46967 4.28033C0.176777 3.98744 0.176777 3.51256 0.46967 3.21967L3.46967 0.21967C3.76256 -0.0732228 4.23744 -0.0732228 4.53033 0.21967L7.53033 3.21967C7.82322 3.51256 7.82322 3.98744 7.53033 4.28033Z" fill="#000000"/>
+</svg>

ui/StatusQ/src/statusq.qrc

@@ -59,6 +59,7 @@
         <file>StatusQ/Components/StatusToastMessage.qml</file>
         <file>StatusQ/Components/StatusVideo.qml</file>
         <file>StatusQ/Components/StatusWizardStepper.qml</file>
+        <file>StatusQ/Components/StatusSortableColumnHeader.qml</file>
         <file>StatusQ/Controls/Validators/qmldir</file>
         <file>StatusQ/Controls/Validators/StatusAddressOrEnsValidator.qml</file>
         <file>StatusQ/Controls/Validators/StatusAddressValidator.qml</file>