GODT-1272: Fix status view layout

internal/frontend/qml/AccountDelegate.qml

@@ -28,18 +28,6 @@ Item {
     property var user
 
     property var _spacing: 12
-    property var _leftRightMargins: {
-        switch(root.type) {
-            case AccountDelegate.SmallView: return 12
-            case AccountDelegate.LargeView: return 0
-        }
-    }
-    property var _topBottomMargins: {
-        switch(root.type) {
-            case AccountDelegate.SmallView: return 10
-            case AccountDelegate.LargeView: return 0
-        }
-    }
 
     property color usedSpaceColor : {
         if (!root.enabled) return root.colorScheme.text_weak
@@ -60,10 +48,8 @@ Item {
         return Math.round(bytes*10 / Math.pow(1024, i))/10 + " " + units[i]
     }
 
-    signal clicked()
-
     // width expected to be set by parent object
-    implicitHeight : children[0].implicitHeight + 2*root._topBottomMargins
+    implicitHeight : children[0].implicitHeight
 
     enum ViewType{
         SmallView, LargeView
@@ -77,10 +63,6 @@ Item {
             top: root.top
             left: root.left
             right: root.rigth
-            leftMargin   : root._leftRightMargins
-            rightMargin  : root._leftRightMargins
-            topMargin    : root._topBottomMargins
-            bottomMargin : root._topBottomMargins
         }
 
         Rectangle {
@@ -124,7 +106,7 @@ Item {
 
             Label {
                 Layout.maximumWidth: root.width - (
-                    root._spacing + avatar.width + 2*root._leftRightMargins
+                    root._spacing + avatar.width
                 )
 
                 colorScheme: root.colorScheme
@@ -192,9 +174,4 @@ Item {
             Layout.fillWidth: true
         }
     }
-
-    MouseArea {
-        anchors.fill: root
-        onClicked: root.clicked()
-    }
 }

internal/frontend/qml/Bridge.qml

@@ -125,9 +125,9 @@ QtObject {
                     screen = Qt.application.screens[i]
                     if (
                         isInInterval(iconCenter.x, screen.virtualX, screen.virtualX+screen.width) &&
-                        isInInterval(iconCenter.y, screen.virtualY, screen.virtualY+screen.heigh)
+                        isInInterval(iconCenter.y, screen.virtualY, screen.virtualY+screen.height)
                     ) {
-                        return
+                        break
                     }
                 }
 

internal/frontend/qml/ContentWrapper.qml

@@ -158,12 +158,27 @@ Item {
                     }
 
                     model: root.backend.users
-                    delegate: AccountDelegate{
+                    delegate: Item {
-                        width: leftBar.width - 2*accounts._leftRightMargins
 
+                        width: leftBar.width - 2*accounts._leftRightMargins
+                        implicitHeight: children[0].implicitHeight + children[0].anchors.topMargin + children[0].anchors.bottomMargin
+                        implicitWidth: children[0].implicitWidth + children[0].anchors.leftMargin + children[0].anchors.rightMargin
+
+                        AccountDelegate {
                             id: accountDelegate
+
+                            anchors.fill: parent
+                            anchors.topMargin: 8
+                            anchors.bottomMargin: 8
+                            anchors.leftMargin: 12
+                            anchors.rightMargin: 12
+
                             colorScheme: leftBar.colorScheme
                             user: root.backend.users.get(index)
+                        }
+
+                        MouseArea {
+                            anchors.fill: parent
                             onClicked: {
                                 var user = root.backend.users.get(index)
                                 accounts.currentIndex = index
@@ -177,6 +192,7 @@ Item {
                             }
                         }
                     }
+                }
 
                 // Separator
                 Rectangle {

internal/frontend/qml/DebugWrapper.qml

@@ -18,7 +18,8 @@
 import QtQuick 2.13
 import QtQuick.Controls 2.12
 
-import Proton 4.0
+import "."
+import "./Proton"
 
 Rectangle {
     anchors.fill: parent

internal/frontend/qml/Proton/Button.qml

@@ -19,6 +19,7 @@ import QtQuick 2.12
 import QtQuick.Controls 2.12
 import QtQuick.Controls.impl 2.12
 import QtQuick.Templates 2.12 as T
+import QtQuick.Layouts 1.12
 
 import "." as Proton
 
@@ -72,52 +73,21 @@ T.Button {
         }
     }
 
-    contentItem: Item {
+    contentItem: RowLayout {
         id: _contentItem
-
+        spacing: control.spacing
-        // Since contentItem is allways resized to maximum available size - we need to "incapsulate" label
-        // and icon within one single item with calculated fixed implicit size
-
-        implicitHeight: labelIcon.implicitHeight
-        implicitWidth: labelIcon.implicitWidth
-
-        Item {
-            id: labelIcon
-
-            anchors.horizontalCenter: _contentItem.horizontalCenter
-            anchors.verticalCenter: _contentItem.verticalCenter
-
-            width: Math.min(implicitWidth, control.availableWidth)
-            height: Math.min(implicitHeight, control.availableHeight)
-
-            implicitWidth: {
-                var textImplicitWidth = control.text !== "" ? label.implicitWidth : 0
-                var iconImplicitWidth = iconImage.source ? iconImage.implicitWidth : 0
-                var spacing = (control.text !== ""  && iconImage.source && control.display === AbstractButton.TextBesideIcon) ? control.spacing : 0
-
-                return control.display === AbstractButton.TextBesideIcon ? textImplicitWidth + iconImplicitWidth + spacing : Math.max(textImplicitWidth, iconImplicitWidth)
-            }
-            implicitHeight: {
-                var textImplicitHeight = control.text !== "" ? label.implicitHeight : 0
-                var iconImplicitHeight = iconImage.source ? iconImage.implicitHeight : 0
-                var spacing = (control.text !== ""  && iconImage.source && control.display === AbstractButton.TextUnderIcon) ? control.spacing : 0
-
-                return control.display === AbstractButton.TextUnderIcon ? textImplicitHeight + iconImplicitHeight + spacing : Math.max(textImplicitHeight, iconImplicitHeight)
-            }
 
         Proton.Label {
             colorScheme: root.colorScheme
             id: label
-                anchors.left: labelIcon.left
+
-                anchors.top: labelIcon.top
+            Layout.fillWidth: true
-                anchors.bottom: labelIcon.bottom
+            Layout.fillHeight: true
-                anchors.right: control.loading ? iconImage.left : labelIcon.right
-                anchors.rightMargin: control.loading ? control.spacing : 0
 
             elide: Text.ElideRight
             horizontalAlignment: Qt.AlignHCenter
-                verticalAlignment: Qt.AlignVCenter
 
+            visible: !control.isIcon
             text: control.text
             color: {
                 if (primary && !isIcon) {
@@ -134,8 +104,7 @@ T.Button {
         ColorImage {
             id: iconImage
 
-                anchors.verticalCenter: labelIcon.verticalCenter
+            Layout.alignment: Qt.AlignCenter
-                anchors.right: labelIcon.right
 
             width: {
                 // special case for loading since we want icon to be square for rotation animation
@@ -171,7 +140,6 @@ T.Button {
             }
         }
     }
-    }
 
     background: Rectangle {
         implicitWidth: 36

internal/frontend/qml/Proton/Label.qml

@@ -133,6 +133,8 @@ T.Label {
         }
     }
 
+    verticalAlignment: Text.AlignBottom
+
     function link(url, text) {
         return `<a href="${url}">${text}</a>`
     }

internal/frontend/qml/StatusWindow.qml

@@ -31,15 +31,14 @@ Window {
     height: contentLayout.implicitHeight
     width: contentLayout.implicitWidth
 
-    flags: Qt.FramelessWindowHint | Qt.NoDropShadowWindowHint | Qt.WindowStaysOnTopHint
+    flags: (Qt.platform.os === "linux" ? Qt.Tool : 0) | Qt.FramelessWindowHint | Qt.NoDropShadowWindowHint | Qt.WindowStaysOnTopHint | Qt.WA_TranslucentBackground
+    color: "transparent"
 
     property ColorScheme colorScheme: ProtonStyle.currentStyle
 
     property var backend
     property var notifications
 
-    color: "transparent"
-
     signal showMainWindow()
     signal showHelp()
     signal showSettings()
@@ -110,11 +109,10 @@ Window {
                     Status {
                         id: statusItem
 
-                        Layout.fillHeight: true
                         Layout.fillWidth: true
 
-                        Layout.topMargin: 20
+                        Layout.topMargin: 12
-                        Layout.bottomMargin: 20
+                        Layout.bottomMargin: 12
 
                         colorScheme: root.colorScheme
                         backend: root.backend
@@ -127,6 +125,9 @@ Window {
                         colorScheme: root.colorScheme
                         secondary: true
 
+                        Layout.topMargin: 12
+                        Layout.bottomMargin: 12
+
                         visible: (statusItem.activeNotification && statusItem.activeNotification.action) ? true : false
                         action: statusItem.activeNotification && statusItem.activeNotification.action.length > 0 ? statusItem.activeNotification.action[0] : null
                     }
@@ -176,6 +177,8 @@ Window {
                 snapMode: ListView.SnapToItem
                 boundsBehavior: Flickable.StopAtBounds
 
+                spacing: 4
+
                 delegate: Item {
                     id: viewItem
                     width: ListView.view.width
@@ -192,14 +195,17 @@ Window {
                         AccountDelegate {
                             Layout.fillWidth: true
 
-                            Layout.margins: 12
+                            Layout.topMargin: 12
+                            Layout.bottomMargin: 12
 
                             user: viewItem.user
                             colorScheme: root.colorScheme
                         }
 
                         Button {
-                            Layout.margins: 12
+                            Layout.topMargin: 12
+                            Layout.bottomMargin: 12
+
                             colorScheme: root.colorScheme
                             visible: viewItem.user ? !viewItem.user.loggedIn : false
                             text: qsTr("Sign in")

internal/frontend/qml/tests/Test.qml

@@ -27,4 +27,7 @@ Window {
         anchors.fill: parent
         colorScheme: ProtonStyle.currentStyle
     }
+    onClosing: {
+        Qt.quit()
+    }
 }