Merge pull request #7498 from nextcloud/bugfix/ui-polish

Polish tray window interface
nextcloud · Nov 21, 2024 · 258ba6d · 258ba6d
2 parents a060174 + cf2d895
commit 258ba6d
Show file tree

Hide file tree

Showing 37 changed files with 642 additions and 1,001 deletions.
diff --git a/resources.qrc b/resources.qrc
@@ -25,10 +25,11 @@
         <file>src/gui/tray/UserLine.qml</file>
         <file>src/gui/tray/HeaderButton.qml</file>
         <file>src/gui/tray/SyncStatus.qml</file>
-        <file>src/gui/tray/ActivityActionButton.qml</file>
         <file>src/gui/tray/ActivityItem.qml</file>
         <file>src/gui/tray/AutoSizingMenu.qml</file>
         <file>src/gui/tray/ActivityList.qml</file>
+        <file>src/gui/tray/CurrentAccountHeaderButton.qml</file>
+        <file>src/gui/tray/TrayWindowHeader.qml</file>
         <file>src/gui/tray/UnifiedSearchInputContainer.qml</file>
         <file>src/gui/tray/UnifiedSearchResultFetchMoreTrigger.qml</file>
         <file>src/gui/tray/UnifiedSearchResultItem.qml</file>
@@ -38,10 +39,6 @@
         <file>src/gui/tray/UnifiedSearchResultListItem.qml</file>
         <file>src/gui/tray/UnifiedSearchResultNothingFound.qml</file>
         <file>src/gui/tray/UnifiedSearchResultSectionItem.qml</file>
-        <file>src/gui/tray/CustomButton.qml</file>
-        <file>src/gui/tray/NCButtonContents.qml</file>
-        <file>src/gui/tray/NCButtonBackground.qml</file>
-        <file>src/gui/tray/TextButtonContents.qml</file>
         <file>src/gui/tray/ActivityItemContextMenu.qml</file>
         <file>src/gui/tray/ActivityItemActions.qml</file>
         <file>src/gui/tray/ActivityItemContent.qml</file>

diff --git a/src/gui/ResolveConflictsDialog.qml b/src/gui/ResolveConflictsDialog.qml
@@ -167,7 +167,7 @@ ApplicationWindow {
     }
 
     Rectangle {
-        color: Style.backgroundColor
+        color: palette.base
         anchors.fill: parent
         z: 1
     }

diff --git a/src/gui/UserStatusSelector.qml b/src/gui/UserStatusSelector.qml
@@ -130,20 +130,18 @@ ColumnLayout {
             Layout.fillWidth: true
             spacing: 0
 
-            UserStatusSelectorButton {
+            AbstractButton {
                 id: fieldButton
 
+                readonly property bool showBorder: hovered || checked || emojiDialog.visible
+
                 Layout.preferredWidth: userStatusMessageTextField.height
                 Layout.preferredHeight: userStatusMessageTextField.height
 
                 text: userStatusSelectorModel.userStatusEmoji
-
-                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
+                z: showBorder ? 2 : 0 // Make sure highlight is seen on top of text field
+                hoverEnabled: true
 
                 property color borderColor: showBorder ? Style.ncBlue : palette.dark
 
@@ -175,6 +173,15 @@ ColumnLayout {
                         color: palette.button
                     }
                 }
+
+                contentItem: Label {
+                    text: fieldButton.text
+                    textFormat: Text.PlainText
+                    horizontalAlignment: Text.AlignHCenter
+                    verticalAlignment: Text.AlignVCenter
+                }
+
+                onClicked: emojiDialog.open()
             }
 
             Popup {
@@ -186,7 +193,7 @@ ColumnLayout {
                 anchors.centerIn: Overlay.overlay
 
                 background: Rectangle {
-                    color: palette.window
+                    color: palette.base
                     border.width: Style.normalBorderWidth
                     border.color: palette.dark
                     radius: Style.slightlyRoundedButtonRadius
@@ -211,7 +218,7 @@ ColumnLayout {
                 Layout.preferredHeight: contentHeight + (Style.smallSpacing * 2)
 
                 placeholderText: qsTr("What is your status?")
-                placeholderTextColor: palette.midlight
+                placeholderTextColor: palette.dark
                 text: userStatusSelectorModel.userStatusMessage
                 verticalAlignment: TextInput.AlignVCenter
                 selectByMouse: true

diff --git a/src/gui/UserStatusSelectorPage.qml b/src/gui/UserStatusSelectorPage.qml
@@ -32,7 +32,7 @@ Page {
     padding: Style.standardSpacing * 2
 
     background: Rectangle {
-        color: palette.window
+        color: palette.base
         radius: Style.trayWindowRadius
     }
 

diff --git a/src/gui/filedetails/FileDetailsPage.qml b/src/gui/filedetails/FileDetailsPage.qml
@@ -69,7 +69,7 @@ Page {
     bottomPadding: intendedPadding
 
     background: Rectangle {
-        color: palette.window
+        color: palette.base
         visible: root.backgroundsVisible
     }
 
@@ -130,7 +130,7 @@ Page {
                 wrapMode: Text.Wrap
             }
 
-            CustomButton {
+            Button {
                 id: closeButton
 
                 Layout.rowSpan: headerGridLayout.rows
@@ -142,10 +142,7 @@ Page {
                 icon.source: "image://svgimage-custom-color/clear.svg" + "/" + palette.buttonText
                 icon.width: Style.activityListButtonIconSize
                 icon.height: Style.activityListButtonIconSize
-                toolTipText: qsTr("Dismiss")
-
                 visible: root.showCloseButton
-
                 onClicked: root.closeButtonClicked()
             }
 

diff --git a/src/gui/filedetails/FileDetailsView.qml b/src/gui/filedetails/FileDetailsView.qml
@@ -31,7 +31,7 @@ StackView {
     property bool backgroundsVisible: true
 
     background: Rectangle {
-        color: palette.window
+        color: palette.base
         visible: root.backgroundsVisible
     }
 

diff --git a/src/gui/filedetails/NCInputTextEdit.qml b/src/gui/filedetails/NCInputTextEdit.qml
@@ -27,7 +27,6 @@ TextEdit {
     readonly property alias submitButton: submitButton
 
     clip: true
-    color: Style.ncTextColor
     textMargin: Style.smallSpacing
     wrapMode: TextEdit.Wrap
     selectByMouse: true
@@ -39,7 +38,7 @@ TextEdit {
         radius: Style.trayWindowRadius
         border.width: Style.normalBorderWidth
         border.color: root.activeFocus ? root.accentColor : root.secondaryColor
-        color: palette.window
+        color: palette.base
         z: -1
     }
 

diff --git a/src/gui/filedetails/NCTabButton.qml b/src/gui/filedetails/NCTabButton.qml
@@ -29,7 +29,7 @@ TabButton {
     padding: Style.smallSpacing
     background: Rectangle {
         radius: Style.slightlyRoundedButtonRadius
-        color: tabButton.pressed ? palette.highlight : palette.window
+        color: tabButton.pressed ? palette.highlight : "transparent"
     }
 
     contentItem: ColumnLayout {

diff --git a/src/gui/filedetails/ShareDelegate.qml b/src/gui/filedetails/ShareDelegate.qml
@@ -152,26 +152,25 @@ GridLayout {
 
         spacing: 0
 
-        CustomButton {
+        Button {
             id: createLinkButton
 
             Layout.alignment: Qt.AlignCenter
-            Layout.preferredWidth: Style.iconButtonWidth
-            Layout.preferredHeight: width
-
-            toolTipText: qsTr("Create a new share link")
+            Layout.preferredWidth: Style.activityListButtonWidth
+            Layout.preferredHeight: Style.activityListButtonHeight
 
             icon.source: "image://svgimage-custom-color/add.svg/" + palette.buttonText
-            icon.width: Style.smallIconSize
-            icon.height: Style.smallIconSize
+            icon.width: Style.activityListButtonIconSize
+            icon.height: Style.activityListButtonIconSize
+            display: AbstractButton.IconOnly
 
             visible: (root.isPlaceholderLinkShare || root.isSecureFileDropPlaceholderLinkShare) && root.canCreateLinkShares
             enabled: visible
 
             onClicked: root.createNewLinkShare()
         }
 
-        CustomButton {
+        Button {
             id: copyLinkButton
 
             function copyShareLink() {
@@ -190,29 +189,17 @@ GridLayout {
             Layout.preferredWidth: shareLinkCopied ? implicitWidth : Style.activityListButtonWidth
             Layout.preferredHeight: Style.activityListButtonHeight
 
-            toolTipText: qsTr("Copy share link location")
-
             text: shareLinkCopied ? qsTr("Copied!") : ""
 
             icon.source: shareLinkCopied ? "image://svgimage-custom-color/copy.svg/" + palette.brightText :
                                            "image://svgimage-custom-color/copy.svg/" + palette.buttonText
-            icon.width: Style.smallIconSize
-            icon.height: Style.smallIconSize
-
+            icon.width: Style.activityListButtonIconSize
+            icon.height: Style.activityListButtonIconSize
+            display: AbstractButton.IconOnly
             visible: root.isLinkShare || root.isInternalLinkShare
             enabled: visible
-
             onClicked: copyShareLink()
 
-            // TODO
-            // Behavior on bgColor {
-            //     ColorAnimation { duration: Style.shortAnimationDuration }
-            // }
-
-            // Behavior on bgNormalOpacity {
-            //     NumberAnimation { duration: Style.shortAnimationDuration }
-            // }
-
             Behavior on Layout.preferredWidth {
                 SmoothedAnimation { duration: Style.shortAnimationDuration }
             }
@@ -229,22 +216,19 @@ GridLayout {
             }
         }
 
-        CustomButton {
+        Button {
             id: moreButton
 
-            toolTipText: qsTr("Share options")
-
+            Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
             Layout.preferredWidth: Style.activityListButtonWidth
             Layout.preferredHeight: Style.activityListButtonHeight
-            Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
 
             icon.source: "image://svgimage-custom-color/more.svg/" + palette.buttonText
             icon.width: Style.activityListButtonIconSize
             icon.height: Style.activityListButtonIconSize
-
+            display: AbstractButton.IconOnly
             visible: !root.isPlaceholderLinkShare && !root.isSecureFileDropPlaceholderLinkShare && !root.isInternalLinkShare
             enabled: visible
-
             onClicked: root.rootStackView.push(shareDetailsPageComponent, {}, StackView.PushTransition)
 
             Component {