chore: up import version and fix SplitViews

ui/app/AppLayouts/Chat/ChatColumn/ChatMessages.qml

@@ -15,7 +15,6 @@ ScrollView {
     property real scrollY: chatLogView.visibleArea.yPosition * chatLogView.contentHeight
 
     contentItem: chatLogView
-    anchors.fill: parent
     Layout.fillWidth: true
     Layout.fillHeight: true
 

ui/app/AppLayouts/Chat/ChatLayout.qml

@@ -1,26 +1,19 @@
 import QtQuick 2.13
-//TODO: update to import QtQuick.Controls 2.13
+import QtQuick.Controls 2.13
-import QtQuick.Controls 1.3
-import QtQuick.Controls 2.3
-import QtQuick.Layouts 1.13
 import "../../../imports"
+import "../../../shared"
 import "."
 
 SplitView {
     id: chatView
-    x: 0
-    y: 0
-    Layout.fillHeight: true
-    Layout.fillWidth: true
 
-    handleDelegate: Rectangle {
+    handle: SplitViewHandle {}
-        implicitWidth: 1
-        implicitHeight: 4
-        color: Theme.grey
-    }
 
     ContactsColumn {
         id: contactsColumn
+        SplitView.preferredWidth: Theme.leftTabPrefferedSize
+        SplitView.minimumWidth: Theme.leftTabMinimumWidth
+        SplitView.maximumWidth: Theme.leftTabMaximumWidth
     }
 
     ChatColumn {
@@ -31,6 +24,6 @@ SplitView {
 
 /*##^##
 Designer {
-    D{i:0;formeditorZoom:0.5;height:770;width:1152}
+    D{i:0;formeditorColor:"#ffffff";formeditorZoom:1.25;height:770;width:1152}
 }
 ##^##*/

ui/app/AppLayouts/Chat/ContactsColumn.qml

@@ -12,8 +12,6 @@ Item {
     property alias searchStr: searchBox.text
 
     id: contactsColumn
-    width: 300
-    Layout.minimumWidth: 200
     Layout.fillHeight: true
 
     StyledText {

ui/app/AppLayouts/Node/NodeLayout.qml

@@ -4,24 +4,15 @@ import QtQuick.Layouts 1.13
 import "../../../imports"
 import "../../../shared"
 
-SplitView {
+Item {
     id: nodeView
-    x: 0
-    y: 0
     Layout.fillHeight: true
     Layout.fillWidth: true
 
     ColumnLayout {
         id: rpcColumn
         spacing: 0
-//        anchors.left: contactsColumn.right
+        anchors.fill: parent
-        anchors.leftMargin: 0
-        anchors.right: parent.right
-        anchors.rightMargin: 0
-        anchors.bottom: parent.bottom
-        anchors.bottomMargin: 0
-        anchors.top: parent.top
-        anchors.topMargin: 0
 
         ColumnLayout {
             id: messageContainer

ui/app/AppLayouts/Profile/LeftTab.qml

@@ -5,11 +5,9 @@ import "../../../shared"
 import "./LeftTab"
 
 ColumnLayout {
-    readonly property int w: 340
     property alias currentTab: profileMenu.profileCurrentIndex
 
     id: profileInfoContainer
-    width: w
     spacing: 0
     anchors.left: parent.left
     anchors.leftMargin: 0
@@ -17,13 +15,11 @@ ColumnLayout {
     anchors.topMargin: 0
     anchors.bottom: parent.bottom
     anchors.bottomMargin: 0
-    Layout.minimumWidth: 300
 
     RowLayout {
         id: profileHeader
         height: 240
         Layout.fillWidth: true
-        width: profileInfoContainer.w
 
         Profile {
             username: profileModel.profile.username
@@ -33,7 +29,6 @@ ColumnLayout {
     }
 
     RowLayout {
-        width: profileInfoContainer.w
         height: btnheight * 10
         Layout.fillHeight: true
         Layout.fillWidth: true

ui/app/AppLayouts/Profile/ProfileLayout.qml

@@ -12,14 +12,13 @@ SplitView {
     Layout.fillHeight: true
     Layout.fillWidth: true
 
-    handle: Rectangle {
+    handle: SplitViewHandle {}
-        implicitWidth: 1
-        implicitHeight: 4
-        color: Theme.grey
-    }
 
     LeftTab {
         id: leftTab
+        SplitView.preferredWidth: Theme.leftTabPrefferedSize
+        SplitView.minimumWidth: Theme.leftTabMinimumWidth
+        SplitView.maximumWidth: Theme.leftTabMaximumWidth
     }
 
     StackLayout {

ui/app/AppLayouts/Wallet/LeftTab.qml

@@ -16,8 +16,6 @@ Item {
         walletModel.setCurrentAccountByIndex(newIndex)
     }
     id: walletInfoContainer
-    width: 340
-    Layout.minimumWidth: 300
 
     Rectangle {
         id: walletInfoHeader

ui/app/AppLayouts/Wallet/WalletLayout.qml

@@ -1,7 +1,5 @@
 import QtQuick 2.13
-//TODO: update to import QtQuick.Controls 2.13
+import QtQuick.Controls 2.13
-import QtQuick.Controls 1.3
-import QtQuick.Controls 2.3
 import QtQuick.Layouts 1.13
 import "../../../imports"
 import "../../../shared"
@@ -9,20 +7,16 @@ import "."
 
 SplitView {
     id: walletView
-    x: 0
-    y: 0
     Layout.fillHeight: true
     Layout.fillWidth: true
 
-    // handle for QtQuick.Controls 2.13
+    handle: SplitViewHandle {}
-    handleDelegate: Rectangle {
-        implicitWidth: 1
-        implicitHeight: 4
-        color: Theme.grey
-    }
 
     LeftTab {
         id: leftTab
+        SplitView.preferredWidth: Theme.leftTabPrefferedSize
+        SplitView.minimumWidth: Theme.leftTabMinimumWidth
+        SplitView.maximumWidth: Theme.leftTabMaximumWidth
     }
 
     Item {

ui/imports/Theme.qml

@@ -26,4 +26,8 @@ QtObject {
     readonly property int padding: 16
     readonly property int smallPadding: 10
     readonly property int radius: 8
+
+    readonly property int leftTabPrefferedSize: 340
+    readonly property int leftTabMinimumWidth: 300
+    readonly property int leftTabMaximumWidth: 500
 }

ui/nim-status-client.pro

@@ -212,6 +212,7 @@ DISTFILES += \
     shared/SearchBox.qml \
     shared/Select.qml \
     shared/Separator.qml \
+    shared/SplitViewHandle.qml \
     shared/StatusTabButton.qml \
     shared/StyledButton.qml \
     shared/RoundedIcon.qml \

ui/shared/SplitViewHandle.qml

@@ -0,0 +1,10 @@
+import QtQuick 2.13
+import QtQuick.Controls 2.13
+import "../imports"
+
+Rectangle {
+    // FIXME setting this 1 is prettier, but makes the handle complety unusable (too small to grab)
+    implicitWidth: 2
+    color: SplitHandle.pressed ? Theme.darkGrey
+                : (SplitHandle.hovered ? Qt.darker(Theme.grey, 1.1) : Theme.grey)
+}

ui/shared/qmldir

@@ -14,3 +14,4 @@ StyledTextField 1.0 StyledTextField.qml
 StyledTextEdit 1.0 StyledTextEdit.qml
 Identicon 1.0 Identicon.qml
 RoundedImage 1.0 RoundedImage.qml
+SplitViewHandle 1.0 SplitViewHandle.qml