Keithel qt/observationtab prettification

resources/BaseComponents/SwiftGroupBox.qml

@@ -0,0 +1,24 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+
+GroupBox {
+    id: control
+
+    property color color: "transparent"
+    property color borderColor: control.palette.mid
+    property real borderWidth: 1
+
+    padding: 7
+    spacing: 0
+    bottomPadding: padding
+
+    background: Rectangle {
+        y: control.topPadding - control.bottomPadding
+        width: parent.width
+        height: parent.height - control.topPadding + control.bottomPadding
+        color: control.color
+        border.color: control.borderColor
+        border.width: control.borderWidth
+    }
+
+}

resources/Constants/Constants.qml

@@ -45,8 +45,8 @@ QtObject {
     readonly property real mediumPointSize: 8
     readonly property real largePointSize: 9
     readonly property bool debugMode: false
-    readonly property string materialRed: "crimson"
-    readonly property string materialGrey: "dimgrey"
+    readonly property color materialRed: "crimson"
+    readonly property color materialGrey: "dimgrey"
 
     sideNavBar: QtObject {
         readonly property int buttonSvgHeight: 15
@@ -88,7 +88,7 @@ QtObject {
         readonly property string updateFirmwareButtonLabel: "Update Firmware"
         readonly property string downloadLatestFirmwareButtonLabel: "Download Latest Firmware"
         readonly property string fileioSendFileToDeviceButtonLabel: "Send File To Device"
-        readonly property string placeholderTextColor: "grey"
+        readonly property color placeholderTextColor: "grey"
         readonly property int borderWidth: 1
         readonly property int firmwareVersionColumnSpacing: 0
         readonly property int buttonInset: 0
@@ -157,9 +157,10 @@ QtObject {
         readonly property int mouseAreaResizeWidth: 10
         readonly property int cellHeight: 25
         readonly property string cellHighlightedColor: "crimson"
-        readonly property string cellColor: "white"
-        readonly property string gradientColor: "gainsboro"
-        readonly property string borderColor: "gainsboro"
+        readonly property color cellColor: "white"
+        readonly property color gradientColor: "gainsboro"
+        readonly property color selectedCellColor: "dark grey"
+        readonly property color borderColor: "gainsboro"
         readonly property string fontFamily: "Roboto"
         property var defaultColumns: ["Item", "Value"]
     }
@@ -286,11 +287,11 @@ QtObject {
         readonly property int textDataBarMargin: 2
         readonly property int textDataBarBorderWidth: 1
         readonly property string unknownStatusPath: "images/fontawesome/square-solid.svg"
-        readonly property string unknownStatusColor: "dimgrey"
+        readonly property color unknownStatusColor: "dimgrey"
         readonly property string warningStatusPath: "images/fontawesome/exclamation-triangle-solid.svg"
-        readonly property string warningStatusColor: "goldenrod"
+        readonly property color warningStatusColor: "goldenrod"
         readonly property string okStatusPath: "images/fontawesome/circle-solid.svg"
-        readonly property string okStatusColor: "green"
+        readonly property color okStatusColor: "green"
         readonly property int insStatusImageWidth: 15
     }
 

resources/ObservationTab.qml

@@ -1,4 +1,5 @@
 import "./Constants"
+import "BaseComponents"
 import "ObservationTabComponents" as ObservationTabComponents
 import QtQuick 2.5
 import QtQuick.Controls 2.15
@@ -20,37 +21,44 @@ Item {
         height: parent.height
         visible: localTable.populated || remoteTable.populated
 
-        Rectangle {
+        Item {
             SplitView.minimumHeight: Constants.observationTab.titleAreaHight
             SplitView.preferredHeight: 0.5 * parent.height
             width: parent.width
-            color: "lightblue"
-            border.color: "#333"
-            border.width: 1
-
-            ObservationTabComponents.ObservationTable {
-                id: localTable
 
+            SwiftGroupBox {
                 anchors.fill: parent
-                name: "local"
+                anchors.topMargin: 4
+                title: "Local"
+
+                ObservationTabComponents.ObservationTable {
+                    id: localTable
+
+                    anchors.fill: parent
+                }
+
             }
 
         }
 
-        Rectangle {
+        Item {
             SplitView.minimumHeight: Constants.observationTab.titleAreaHight
             SplitView.preferredHeight: 0.5 * parent.height
             Layout.fillHeight: true
             width: parent.width
-            border.color: "#000000"
-            border.width: 1
-
-            ObservationTabComponents.ObservationTable {
-                id: remoteTable
 
+            SwiftGroupBox {
                 anchors.fill: parent
-                name: "remote"
-                remote: true
+                anchors.topMargin: 4
+                title: "Remote"
+
+                ObservationTabComponents.ObservationTable {
+                    id: remoteTable
+
+                    anchors.fill: parent
+                    remote: true
+                }
+
             }
 
         }