From 948eacd1721fed182cf660c46ee5345fd473a53e Mon Sep 17 00:00:00 2001
From: Claudio Cambra <claudio.cambra@nextcloud.com>
Date: Fri, 25 Nov 2022 12:53:56 +0100
Subject: [PATCH] Simplify user status selector and use custom button instead
 where possible

Signed-off-by: Claudio Cambra <claudio.cambra@nextcloud.com>
---
 src/gui/UserStatusSelector.qml       | 31 ++++++++++++++------
 src/gui/UserStatusSelectorButton.qml | 42 +++++++++++++---------------
 2 files changed, 43 insertions(+), 30 deletions(-)

diff --git a/src/gui/UserStatusSelector.qml b/src/gui/UserStatusSelector.qml
index eb15df744cad6..01384380e83d6 100644
--- a/src/gui/UserStatusSelector.qml
+++ b/src/gui/UserStatusSelector.qml
@@ -20,6 +20,7 @@ import QtQuick.Window 2.15
 
 import com.nextcloud.desktopclient 1.0 as NC
 import Style 1.0
+import "./tray"
 
 ColumnLayout {
     id: rootLayout
@@ -142,7 +143,6 @@ ColumnLayout {
                 onClicked: emojiDialog.open()
                 onHeightChanged: topButtonsLayout.maxButtonHeight = Math.max(topButtonsLayout.maxButtonHeight, height)
 
-                primary: true
                 padding: 0
                 z: hovered ? 2 : 0 // Make sure highlight is seen on top of text field
 
@@ -313,27 +313,42 @@ ColumnLayout {
         Layout.fillWidth: true
         Layout.alignment: Qt.AlignBottom
 
-        UserStatusSelectorButton {
+        CustomButton {
             // Prevent being squashed by the other buttons with larger text
             Layout.minimumWidth: implicitWidth
             Layout.fillHeight: true
-            primary: true
+
             text: qsTr("Cancel")
+            contentsFont.bold: true
+            bgColor: Style.buttonBackgroundColor
+            bgNormalOpacity: 1.0
+            bgHoverOpacity: Style.hoverOpacity
+
             onClicked: finished()
         }
-        UserStatusSelectorButton {
+        CustomButton {
             Layout.fillWidth: true
             Layout.fillHeight: true
-            primary: true
+
             text: qsTr("Clear status message")
+            contentsFont.bold: true
+            bgColor: Style.buttonBackgroundColor
+            bgNormalOpacity: 1.0
+            bgHoverOpacity: Style.hoverOpacity
+
             onClicked: userStatusSelectorModel.clearUserStatus()
         }
-        UserStatusSelectorButton {
+        CustomButton {
             Layout.fillWidth: true
             Layout.fillHeight: true
-            primary: true
-            colored: true
+
             text: qsTr("Set status message")
+            textColor: Style.ncHeaderTextColor
+            contentsFont.bold: true
+            bgColor: Style.ncBlue
+            bgNormalOpacity: 1.0
+            bgHoverOpacity: Style.hoverOpacity
+
             onClicked: userStatusSelectorModel.setUserStatus()
         }
     }
diff --git a/src/gui/UserStatusSelectorButton.qml b/src/gui/UserStatusSelectorButton.qml
index 8236c250c20fe..f629f6cf472a6 100644
--- a/src/gui/UserStatusSelectorButton.qml
+++ b/src/gui/UserStatusSelectorButton.qml
@@ -22,71 +22,69 @@ AbstractButton {
     id: root
 
     property string secondaryText: ""
-    property bool colored: false
-    property bool primary: false
-    property bool highlighted: false
-    readonly property bool showBorder: hovered || highlighted || checked
+    readonly property bool showBorder: hovered || checked
+
+    readonly property bool hasImage: root.icon.source !== ""
+    readonly property bool hasSecondaryText: root.secondaryText !== ""
+    readonly property bool hasPrimaryText: root.text !== ""
 
     hoverEnabled: true
     padding: Style.standardSpacing
 
     background: Rectangle {
-        radius: root.primary ? Style.veryRoundedButtonRadius : Style.mediumRoundedButtonRadius
-        color: root.colored ? Style.ncBlue : Style.buttonBackgroundColor
-        opacity: root.colored && root.hovered ? Style.hoverOpacity : 1.0
-        border.color: Style.ncBlue
-        border.width: root.showBorder ? root.primary ? Style.normalBorderWidth : Style.thickBorderWidth : 0
+        radius: Style.mediumRoundedButtonRadius
+        color: Style.buttonBackgroundColor
+        border.color: root.checked ? Style.ncBlue : Style.menuBorder
+        border.width: root.showBorder ? Style.thickBorderWidth : 0
     }
 
     contentItem: GridLayout {
-        columns: 2
+        columns: root.hasImage ? 2 : 1
         rows: 2
         columnSpacing: Style.standardSpacing
         rowSpacing: Style.standardSpacing / 2
 
         Image {
             Layout.column: 0
-            Layout.columnSpan: root.text === "" && root.secondaryText == "" ? 2 : 1
+            Layout.columnSpan: !root.hasPrimaryText && !root.hasSecondaryText ? 2 : 1
             Layout.row: 0
             Layout.rowSpan: 2
             Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
             horizontalAlignment: Text.AlignHCenter
             verticalAlignment: Text.AlignVCenter
 
-
             source: root.icon.source
-            visible: root.icon.source !== ""
+            visible: root.hasImage
         }
 
         Label {
-            Layout.column: root.icon.source === "" ? 0 : 1
-            Layout.columnSpan: root.icon.source === "" ? 2 : 1
+            Layout.column: root.hasImage ? 1 : 0
+            Layout.columnSpan: root.hasImage ? 1 : 2
             Layout.row: 0
-            Layout.rowSpan: root.secondaryText === "" ? 2 : 1
+            Layout.rowSpan: root.hasSecondaryText ? 1 : 2
             Layout.fillWidth: true
-            horizontalAlignment: root.primary ? Text.AlignHCenter : Text.AlignLeft
+            horizontalAlignment: Text.AlignLeft
             verticalAlignment: Text.AlignVCenter
 
             text: root.text
             textFormat: Text.PlainText
             wrapMode: Text.Wrap
             color: root.colored ? Style.ncHeaderTextColor : Style.ncTextColor
-            font.bold: root.primary
         }
 
         Label {
-            Layout.column: root.icon.source === "" ? 0 : 1
-            Layout.columnSpan: root.icon.source === "" ? 2 : 1
+            Layout.column: root.hasImage ? 1 : 0
+            Layout.columnSpan: root.hasImage ? 1 : 2
             Layout.row: 1
             Layout.fillWidth: true
-            horizontalAlignment: root.primary ? Text.AlignHCenter : Text.AlignLeft
+            horizontalAlignment: Text.AlignLeft
             verticalAlignment: Text.AlignVCenter
 
             text: root.secondaryText
             textFormat: Text.PlainText
             wrapMode: Text.Wrap
             color: Style.ncSecondaryTextColor
-            visible: root.secondaryText !== ""
+            visible: root.hasSecondaryText
         }
     }
 }