Perfect user page UI

src/qml/AccountsPage.qml

@@ -31,14 +31,14 @@ ItemPage {
         ColumnLayout {
             id: layout
             anchors.fill: parent
+            spacing: FishUI.Units.largeSpacing
 
             RoundedItem {
-
                 ListView {
                     id: _userView
                     model: userModel
                     Layout.fillWidth: true
-                    spacing: FishUI.Units.largeSpacing
+                    spacing: FishUI.Units.largeSpacing * 2
                     interactive: false
 
                     Layout.preferredHeight: {
@@ -46,7 +46,7 @@ ItemPage {
                         for (var i = 0; i < _userView.visibleChildren.length; ++i) {
                             totalHeight += _userView.visibleChildren[i].height
                         }
-                        totalHeight += (_userView.count - 1) * _userView.spacing
+                        // totalHeight += (_userView.count - 1) * _userView.spacing
                         return totalHeight
                     }
 
@@ -56,20 +56,17 @@ ItemPage {
                         width: _userView.width
                     }
                 }
+            }
 
-                Item {
-                    height: FishUI.Units.smallSpacing
-                }
-
-                Button {
-                    id: _addUserButton
-                    text: qsTr("Add user")
-                    onClicked: {
-                        var component = Qt.createComponent("AddUserDialog.qml")
-                        if (component.status === Component.Ready) {
-                            var dialog = component.createObject(rootWindow)
-                            dialog.open()
-                        }
+            Button {
+                id: _addUserButton
+                text: qsTr("Add user")
+                Layout.fillWidth: true
+                onClicked: {
+                    var component = Qt.createComponent("AddUserDialog.qml")
+                    if (component.status === Component.Ready) {
+                        var dialog = component.createObject(rootWindow)
+                        dialog.open()
                     }
                 }
             }

src/qml/AppearancePage.qml

@@ -191,7 +191,8 @@ ItemPage {
                     rows: 3
                     columns: 2
 
-                    columnSpacing: FishUI.Units.largeSpacing * 2
+                    columnSpacing: FishUI.Units.largeSpacing * 1.5
+                    rowSpacing: FishUI.Units.largeSpacing
 
                     Label {
                         text: qsTr("General Font")
@@ -203,6 +204,8 @@ ItemPage {
                         model: fontsModel.generalFonts
                         enabled: true
                         Layout.fillWidth: true
+                        topInset: 0
+                        bottomInset: 0
                         onActivated: appearance.setGenericFontFamily(currentText)
                     }
 
@@ -216,6 +219,8 @@ ItemPage {
                         model: fontsModel.fixedFonts
                         enabled: true
                         Layout.fillWidth: true
+                        topInset: 0
+                        bottomInset: 0
                         onActivated: appearance.setFixedFontFamily(currentText)
                     }
 

src/qml/DisplayPage.qml

@@ -125,8 +125,8 @@ ItemPage {
 
                             GridLayout {
                                 columns: 2
-                                columnSpacing: FishUI.Units.largeSpacing
-                                rowSpacing: FishUI.Units.smallSpacing
+                                columnSpacing: FishUI.Units.largeSpacing * 1.5
+                                rowSpacing: FishUI.Units.largeSpacing
 
                                 Label {
                                     text: qsTr("Resolution")
@@ -135,6 +135,8 @@ ItemPage {
                                 ComboBox {
                                     Layout.fillWidth: true
                                     model: element.resolutions
+                                    topInset: 0
+                                    bottomInset: 0
                                     currentIndex: element.resolutionIndex !== undefined ?
                                                       element.resolutionIndex : -1
                                     onActivated: {
@@ -151,6 +153,8 @@ ItemPage {
                                     id: refreshRate
                                     Layout.fillWidth: true
                                     model: element.refreshRates
+                                    topInset: 0
+                                    bottomInset: 0
                                     currentIndex: element.refreshRateIndex ?
                                                       element.refreshRateIndex : 0
                                     onActivated: {

src/qml/SideBar.qml

@@ -144,10 +144,11 @@ Item {
                     }
 
                     radius: FishUI.Theme.mediumRadius
-                    color: mouseArea.containsMouse ? Qt.rgba(FishUI.Theme.textColor.r,
-                                                             FishUI.Theme.textColor.g,
-                                                             FishUI.Theme.textColor.b,
-                                                             0.1) : "transparent"
+                    color: mouseArea.containsMouse && !isCurrent ? Qt.rgba(FishUI.Theme.textColor.r,
+                                                                           FishUI.Theme.textColor.g,
+                                                                           FishUI.Theme.textColor.b,
+                                                                   0.1) : "transparent"
+
                     smooth: true
                 }
 

src/qml/UserPage/UserDelegateItem.qml

@@ -63,6 +63,12 @@ Item {
                         source: iconFileName ? "file:///" + iconFileName : "image://icontheme/default-user"
                         visible: status === Image.Ready
 
+                        MouseArea {
+                            anchors.fill: parent
+                            onClicked: fileDialog.open()
+                            cursorShape: Qt.PointingHandCursor
+                        }
+
                         layer.enabled: true
                         layer.effect: OpacityMask {
                             maskSource: Item {
@@ -120,33 +126,22 @@ Item {
                         }
                     }
                 }
-                }
             }
-
-        Item {
-            height: FishUI.Units.largeSpacing
         }
 
         Hideable {
             id: additionalSettings
 
+            Item {
+                height: FishUI.Units.largeSpacing
+            }
+
             GridLayout {
                 Layout.fillWidth: true
                 Layout.bottomMargin: FishUI.Units.smallSpacing
                 rowSpacing: FishUI.Units.largeSpacing
                 columns: 2
 
-                Label {
-                    text: qsTr("Avatar")
-                    Layout.fillWidth: true
-                }
-
-                Button {
-                    text: qsTr("Choose")
-                    Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
-                    onClicked: fileDialog.open()
-                }
-
                 Label {
                     text: qsTr("Automatic login")
                     Layout.fillWidth: true
@@ -158,7 +153,6 @@ Item {
                     leftPadding: 0
                     rightPadding: 0
                     onCheckedChanged: currentUser.automaticLogin = checked
-
                     Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
 
                     Component.onCompleted: {
@@ -171,9 +165,8 @@ Item {
                 text: qsTr("Delete this user")
                 enabled: model.userId !== loggedUser.userId
                 onClicked: accountsManager.deleteUser(userId, true)
+                Layout.fillWidth: true
             }
-
-            HorizontalDivider {}
         }
     }
 }