chore(SyncingDeviceView): add a dedicated SB page

- add a dedicated SB page with the view options

storybook/pages/SyncingDeviceViewPage.qml

@@ -0,0 +1,134 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+
+import StatusQ 0.1
+
+import Models 1.0
+import Storybook 1.0
+
+import utils 1.0
+import shared.views 1.0
+
+SplitView {
+    id: root
+
+    orientation: Qt.Vertical
+
+    ListModel {
+        id: deviceModel
+        ListElement {
+            name: "Device 1"
+            deviceType: "osx"
+            timestamp: 0
+            isCurrentDevice: true
+            enabled: true
+            installationId: "a"
+        }
+        ListElement {
+            name: "Device 2"
+            deviceType: "windows"
+            timestamp: 785957929539634639
+            isCurrentDevice: false
+            enabled: false
+            installationId: "b"
+        }
+        ListElement {
+            name: "Device 3"
+            deviceType: "android"
+            timestamp: 3456541235346346322
+            isCurrentDevice: false
+            enabled: true
+            installationId: "c"
+        }
+        ListElement {
+            name: "Device 4 (very long device name that should eventually elide)"
+            deviceType: "ios"
+            timestamp: 385657929539634639
+            isCurrentDevice: false
+            enabled: true
+            installationId: "d"
+        }
+        ListElement {
+            name: "Device 5"
+            deviceType: "desktop"
+            timestamp: 0
+            isCurrentDevice: false
+            enabled: true
+            installationId: "e"
+        }
+    }
+
+    Item {
+        SplitView.fillWidth: true
+        SplitView.fillHeight: true
+
+        SyncingDeviceView {
+            anchors.centerIn: parent
+            userDisplayName: ctrlUsername.text
+            userPublicKey: "0xdeadbeef"
+            userImage: ModelsData.icons.status
+            localPairingState: ctrlLocalPairingState.currentIndex
+            localPairingError: "The unexpected happened"
+
+            installationId: "a"
+            installationName: "DummyDevice"
+            installationDeviceType: ctrlDeviceType.currentValue
+
+            devicesModel: ctrlWithDevices.checked ? deviceModel : null
+        }
+    }
+
+    LogsAndControlsPanel {
+        SplitView.minimumHeight: 250
+        SplitView.preferredHeight: 250
+
+        SplitView.fillWidth: true
+
+        ColumnLayout {
+            Layout.fillWidth: true
+            Switch {
+                id: ctrlWithDevices
+                text: "With devices list"
+                checked: true
+            }
+            RowLayout {
+                Label {
+                    text: "Pairing state:\t"
+                }
+                ComboBox {
+                    Layout.preferredWidth: 270
+                    id: ctrlLocalPairingState
+                    currentIndex: 0
+                    model: ["Constants.LocalPairingState.Idle", "Constants.LocalPairingState.Transferring",
+                        "Constants.LocalPairingState.Error", "Constants.LocalPairingState.Finished"]
+                }
+            }
+            RowLayout {
+                Label {
+                    text: "User name:\t"
+                }
+                TextField {
+                    Layout.preferredWidth: 270
+                    id: ctrlUsername
+                    text: "Foobar"
+                    placeholderText: "User display name"
+                }
+            }
+            RowLayout {
+                Label {
+                    text: "Device type:\t"
+                }
+                ComboBox {
+                    Layout.preferredWidth: 270
+                    id: ctrlDeviceType
+                    currentIndex: 0
+                    model: ["desktop", "android", "windows", "ios", "osx"]
+                }
+            }
+        }
+    }
+}
+
+// category: Views
+// status: good

ui/imports/shared/controls/ErrorDetails.qml

@@ -11,7 +11,7 @@ Rectangle {
     property string details
     readonly property string detailsVisible: d.detailsVisible
 
-    implicitWidth: layout.implicitWidthj
+    implicitWidth: layout.implicitWidth
                    + layout.anchors.leftMargin
                    + layout.anchors.rigthMargin
 
@@ -19,7 +19,7 @@ Rectangle {
                     + layout.anchors.topMargin
                     + layout.anchors.bottomMargin
 
-    radius: 8
+    radius: Theme.radius
     color: Theme.palette.baseColor4
 
     QtObject {
@@ -34,8 +34,8 @@ Rectangle {
         color: Theme.palette.baseColor1
         anchors.top: parent.top
         anchors.right: parent.right
-        anchors.topMargin: 8
+        anchors.topMargin: Theme.halfPadding
-        anchors.rightMargin: 8
+        anchors.rightMargin: Theme.halfPadding
         textToCopy: root.details
     }
 
@@ -43,14 +43,14 @@ Rectangle {
         id: layout
 
         anchors.fill: parent
-        anchors.margins: 10
+        anchors.margins: Theme.smallPadding
         spacing: 4
 
         StatusBaseText {
             Layout.fillWidth: true
             horizontalAlignment: Qt.AlignHCenter
             text: root.title
-            font.pixelSize: 13
+            font.pixelSize: Theme.additionalTextSize
             font.weight: Font.Medium
         }
 
@@ -60,7 +60,7 @@ Rectangle {
             visible: !d.detailsVisible
             text: qsTr("Show error details")
             color: Theme.palette.primaryColor1
-            font.pixelSize: 12
+            font.pixelSize: Theme.tertiaryTextFontSize
 
             MouseArea {
                 anchors.fill: parent
@@ -76,7 +76,7 @@ Rectangle {
             visible: d.detailsVisible
             text: root.details
             color: Theme.palette.baseColor1
-            font.pixelSize: 12
+            font.pixelSize: Theme.tertiaryTextFontSize
             wrapMode: Text.WordWrap
         }
     }

ui/imports/shared/views/SyncingDeviceView.qml

@@ -17,8 +17,8 @@ Item {
 
     property var devicesModel
     property string userDisplayName
-    property string userColorId
+    property int userColorId
-    property string userColorHash
+    property var userColorHash
     property string userPublicKey
     property string userImage
     property string installationId
@@ -34,7 +34,6 @@ Item {
     QtObject {
         id: d
 
-        readonly property int deviceDelegateWidth: 220
         readonly property bool pairingFailed: root.localPairingState === Constants.LocalPairingState.Error
         readonly property bool pairingSuccess: root.localPairingState === Constants.LocalPairingState.Finished
         readonly property bool pairingInProgress: !d.pairingFailed && !d.pairingSuccess
@@ -60,7 +59,7 @@ Item {
 
         StatusBaseText {
             Layout.fillWidth: true
-            Layout.topMargin: 8
+            Layout.topMargin: Theme.halfPadding
             horizontalAlignment: Text.AlignHCenter
             color: Theme.palette.directColor1
             font.weight: Font.Bold
@@ -72,9 +71,9 @@ Item {
 
         StatusBaseText {
             Layout.fillWidth: true
-            Layout.topMargin: 31
+            Layout.topMargin: Theme.xlPadding
             horizontalAlignment: Text.AlignHCenter
-            font.pixelSize: 17
+            font.pixelSize: Theme.secondaryAdditionalTextSize
             color: d.pairingFailed ? Theme.palette.dangerColor1 : Theme.palette.directColor1
             text: {
                 if (d.pairingInProgress)
@@ -89,9 +88,9 @@ Item {
 
         StatusBaseText {
             Layout.fillWidth: true
-            Layout.bottomMargin: 25
+            Layout.topMargin: 4
+            Layout.bottomMargin: Theme.bigPadding
             horizontalAlignment: Text.AlignHCenter
-            font.pixelSize: 15
             color: Theme.palette.baseColor1
             visible: !!text
             text: {
@@ -105,7 +104,7 @@ Item {
 
         StatusSyncDeviceDelegate {
             Layout.alignment: Qt.AlignHCenter
-            implicitWidth: d.deviceDelegateWidth
+            Layout.fillWidth: true
             visible: !d.pairingFailed
             subTitle: d.pairingInProgress ? qsTr("Syncing with device")
                                           : qsTr("Synced device")
@@ -119,7 +118,7 @@ Item {
         }
 
         ErrorDetails {
-            Layout.fillWidth: true
+            Layout.alignment: Qt.AlignHCenter
             Layout.leftMargin: 60
             Layout.rightMargin: 60
             Layout.preferredWidth: 360
@@ -130,11 +129,10 @@ Item {
         }
 
         Rectangle {
-            Layout.alignment: Qt.AlignHCenter
+            Layout.topMargin: Theme.bigPadding
-            Layout.topMargin: 25
+            Layout.bottomMargin: Theme.bigPadding
-            Layout.bottomMargin: 25
+            Layout.fillWidth: true
-            implicitHeight: 1
+            Layout.preferredHeight: 1
-            implicitWidth: d.deviceDelegateWidth
             color: Theme.palette.baseColor4
             opacity: listView.count ? 1 : 0
         }
@@ -143,11 +141,9 @@ Item {
             id: listView
 
             Layout.alignment: Qt.AlignHCenter
+            Layout.fillWidth: true
             Layout.fillHeight: true
-
+            Layout.preferredHeight: contentHeight
-            implicitWidth: contentWidth
-            implicitHeight: contentHeight
-            contentWidth: d.deviceDelegateWidth
 
             spacing: 4
             clip: true