Improve the device list view, and other UI elements

emericg · Sep 18, 2023 · 4fc5f72 · 4fc5f72
1 parent 72f5042
commit 4fc5f72
Show file tree

Hide file tree

Showing 12 changed files with 204 additions and 162 deletions.
diff --git a/assets/assets.qrc b/assets/assets.qrc
@@ -63,6 +63,7 @@
         <file>icons_material/baseline-chevron_right-24px.svg</file>
         <file>icons_material/baseline-check_circle-24px.svg</file>
         <file>icons_material/baseline-close-24px.svg</file>
+        <file>icons_material/baseline-content_copy-24px.svg</file>
         <file>icons_material/baseline-help-24px.svg</file>
         <file>icons_material/baseline-insert_link-24px.svg</file>
         <file>icons_material/baseline-loupe-24px.svg</file>

diff --git a/assets/icons_material/baseline-content_copy-24px.svg b/assets/icons_material/baseline-content_copy-24px.svg
diff --git a/qml/PanelDeviceAdvertisement.qml b/qml/PanelDeviceAdvertisement.qml
@@ -1,5 +1,6 @@
 import QtQuick
 import QtQuick.Controls
+import QtQuick.Layouts
 
 import ThemeEngine
 import DeviceUtils
@@ -66,29 +67,54 @@ Flickable {
 
             visible: (selectedDevice && selectedDevice.hasAdvertisement)
 
-            Row {
+            ////
+
+            RowLayout {
                 anchors.top: parent.top
                 anchors.topMargin: 12
                 anchors.left: parent.left
                 anchors.leftMargin: 16
+                anchors.right: parent.right
+                anchors.rightMargin: 16
+
                 height: 32
                 spacing: 12
 
                 Rectangle {
+                    Layout.alignment: Qt.AlignVCenter
                     width: 16; height: 16; radius: 4;
-                    anchors.verticalCenter: parent.verticalCenter
-                    anchors.verticalCenterOffset: -1
                     color: Theme.colorGreen
                 }
 
                 Text {
-                    anchors.verticalCenter: parent.verticalCenter
+                    Layout.fillWidth: true
+                    Layout.alignment: Qt.AlignVCenter
 
                     text: qsTr("Service data")
                     textFormat: Text.PlainText
                     font.pixelSize: Theme.fontSizeContentBig
+                    horizontalAlignment: Text.AlignLeft
+                    elide: Text.ElideRight
                     color: Theme.colorText
                 }
+
+                Text {
+                    Layout.fillWidth: true
+                    Layout.alignment: Qt.AlignVCenter
+
+                    text: qsTr("Manufacturer data")
+                    textFormat: Text.PlainText
+                    font.pixelSize: Theme.fontSizeContentBig
+                    horizontalAlignment: Text.AlignRight
+                    elide: Text.ElideRight
+                    color: Theme.colorText
+                }
+
+                Rectangle {
+                    Layout.alignment: Qt.AlignVCenter
+                    width: 16; height: 16; radius: 4;
+                    color: Theme.colorBlue
+                }
             }
 
             ////
@@ -122,33 +148,6 @@ Flickable {
                 }
             }
 
-            ////////
-
-            Row {
-                anchors.top: parent.top
-                anchors.topMargin: 12
-                anchors.right: parent.right
-                anchors.rightMargin: 16
-                height: 32
-                spacing: 12
-
-                Text {
-                    anchors.verticalCenter: parent.verticalCenter
-
-                    text: qsTr("Manufacturer data")
-                    textFormat: Text.PlainText
-                    font.pixelSize: Theme.fontSizeContentBig
-                    color: Theme.colorText
-                }
-
-                Rectangle {
-                    width: 16; height: 16; radius: 4;
-                    anchors.verticalCenter: parent.verticalCenter
-                    anchors.verticalCenterOffset: -1
-                    color: Theme.colorBlue
-                }
-            }
-
             ////
 
             Row {
@@ -179,6 +178,8 @@ Flickable {
                     }
                 }
             }
+
+            ////
         }
 
         ////////
@@ -192,5 +193,7 @@ Flickable {
                 packet: modelData
             }
         }
+
+        ////////
     }
 }
diff --git a/qml/PanelDeviceInfos.qml b/qml/PanelDeviceInfos.qml
@@ -27,8 +27,7 @@ Flickable {
     ////////
 
     function resetButtons() {
-        exportButton.text = qsTr("export available data")
-        exportButton.primaryColor = Theme.colorGrey
+        exportButton.reset()
     }
 
     ////////
@@ -413,12 +412,6 @@ Flickable {
                 anchors.centerIn: parent
                 spacing: 12
 
-                Flow { // status row
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                    spacing: 12
-                }
-
                 Flow { // buttons row
                     anchors.left: parent.left
                     anchors.right: parent.right
@@ -440,6 +433,11 @@ Flickable {
                         text: qsTr("export available data")
                         source: "qrc:/assets/icons_material/baseline-save-24px.svg"
 
+                        function reset() {
+                            exportButton.text = qsTr("export available data")
+                            exportButton.primaryColor = Theme.colorGrey
+                        }
+
                         onClicked: {
                             // (file selection)
                             fileDialog.selectedFile = fileDialog.currentFolder +
@@ -481,6 +479,22 @@ Flickable {
                         }
                     }
                 }
+/*
+                Flow { // status row
+                    anchors.left: parent.left
+                    anchors.right: parent.right
+                    spacing: 12
+
+                    Text {
+                        text: qsTr("%n adv packet(s)", "", selectedDevice.advCount)
+                        color: Theme.colorSubText
+                    }
+                    Text {
+                        text: qsTr("%n service(s)", "", selectedDevice.servicesCount)
+                        color: Theme.colorSubText
+                    }
+                }
+*/
             }
         }
 
@@ -600,7 +614,7 @@ Flickable {
             height: box3.height + 32
             radius: 4
 
-            clip: false
+            clip: true
             color: Theme.colorBox
             border.width: 2
             border.color: Theme.colorBoxBorder

diff --git a/qml/PanelDeviceServices.qml b/qml/PanelDeviceServices.qml
@@ -62,12 +62,14 @@ Item {
                     anchors.right: parent.right
                     spacing: 12
 
+                    property int www: (width > 400) ? ((width - spacing) / 2) : width
+
                     ButtonScanMenu {
-                        width: ((parent.width - parent.spacing) / 2)
+                        width: parent.www
                     }
 
                     ButtonWireframeIcon {
-                        width: ((parent.width - parent.spacing) / 2)
+                        width: parent.www
 
                         fullColor: true
                         primaryColor: Theme.colorLightGrey

diff --git a/qml/ScreenAdvertiser.qml b/qml/ScreenAdvertiser.qml
@@ -39,28 +39,13 @@ Loader {
 
             ////////
 
-            Rectangle { // not implemented
+            FrameBox { // not implemented
                 width: screenAdvertiser.width * 0.666
-                height: 128
-                radius: 4
-
-                clip: false
-                color: Theme.colorBox
-                border.width: 2
-                border.color: Theme.colorBoxBorder
-
-                Rectangle {
-                    anchors.top: parent.top
-                    anchors.left: parent.left
-                    anchors.bottom: parent.bottom
-
-                    width: 8
-                    radius: 2
-                    color: Theme.colorPrimary
-                }
+                padding: 0
 
                 Item {
                     anchors.left: parent.left
+                    anchors.verticalCenter: parent.verticalCenter
                     width: 128
                     height: 128
 

diff --git a/qml/components.qrc b/qml/components.qrc
@@ -20,6 +20,9 @@
         <file alias="SliderValueSolid.qml">components_generic/SliderValueSolid.qml</file>
         <file alias="ToolTipFlat.qml">components_generic/ToolTipFlat.qml</file>
 
+        <file alias="FrameBox.qml">components_generic/FrameBox.qml</file>
+        <file alias="FrameThemed.qml">components_themed/FrameThemed.qml</file>
+
         <file alias="ButtonThemed.qml">components_themed/ButtonThemed.qml</file>
         <file alias="CheckBoxThemed.qml">components_themed/CheckBoxThemed.qml</file>
         <file alias="ComboBoxThemed.qml">components_themed/ComboBoxThemed.qml</file>

diff --git a/qml/components/AdvertisementDataWidgetAdvanced.qml b/qml/components/AdvertisementDataWidgetAdvanced.qml
@@ -41,6 +41,7 @@ Rectangle {
     ////////////////
 
     Text {
+        id: timebox
         anchors.top: parent.top
         anchors.right: parent.right
         anchors.topMargin: 4
@@ -77,12 +78,17 @@ Rectangle {
 
         ////////
 
-        Row {
+        RowLayout {
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.rightMargin: timebox.width
             spacing: 12
 
             Text {
                 id: legendUUID
-                width: legendWidth
+
+                Layout.alignment: Qt.AlignTop | Qt.AlignRight
+                Layout.preferredWidth: legendWidth
 
                 text: qsTr("UUID")
                 textFormat: Text.PlainText
@@ -91,33 +97,48 @@ Rectangle {
                 color: Theme.colorSubText
             }
 
-            Row {
-                spacing: 2
+            Flow {
+                Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
+                Layout.fillWidth: true
+                spacing: 4
 
-                Text {
-                    text: "0x"
-                    textFormat: Text.PlainText
-                    font.pixelSize: Theme.fontSizeContent
-                    color: Theme.colorSubText
-                }
-                TextSelectable {
-                    text: packet.advUUIDstr
-                    font.pixelSize: Theme.fontSizeContent
-                    color: Theme.colorText
-                }
-            }
-        }
+                Row {
+                    spacing: 2
 
-        ////////
+                    Text {
+                        text: "0x"
+                        textFormat: Text.PlainText
+                        font.pixelSize: Theme.fontSizeContent
+                        color: Theme.colorSubText
+                    }
+                    TextSelectable {
+                        text: packet.advUUIDstr
+                        font.pixelSize: Theme.fontSizeContent
+                        color: Theme.colorText
+                    }
+                }
 
-        TextSelectable {
-            anchors.left: parent.left
-            anchors.leftMargin: legendWidth + 12
-            anchors.right: parent.right
+                Row {
+                    visible: (packet.advUUIDmanuf.length > 1)
 
-            visible: (packet.advUUIDmanuf.length > 1)
-            text: packet.advUUIDmanuf
-            color: Theme.colorText
+                    Text {
+                        text: "("
+                        textFormat: Text.PlainText
+                        font.pixelSize: Theme.fontSizeContent
+                        color: Theme.colorSubText
+                    }
+                    TextSelectable {
+                        text: packet.advUUIDmanuf
+                        color: Theme.colorText
+                    }
+                    Text {
+                        text: ")"
+                        textFormat: Text.PlainText
+                        font.pixelSize: Theme.fontSizeContent
+                        color: Theme.colorSubText
+                    }
+                }
+            }
         }
 
         ////////