Merge pull request #7101 from nextcloud/bugfix/native-ui

Fix native UI
nextcloud · Sep 13, 2024 · 6fc3eb5 · 6fc3eb5
2 parents 7808280 + 6cde9c8
commit 6fc3eb5
Show file tree

Hide file tree

Showing 22 changed files with 189 additions and 91 deletions.
diff --git a/src/gui/PredefinedStatusButton.qml b/src/gui/PredefinedStatusButton.qml
@@ -36,7 +36,8 @@ AbstractButton {
 
     background: Rectangle {
         color: root.hovered || root.checked ? palette.highlight : palette.base
-        radius: Style.slightlyRoundedButtonRadius
+        // TODO: fix radius borders - they were showing for each item
+        // radius: Style.slightlyRoundedButtonRadius
     }
 
     contentItem: Row {

diff --git a/src/gui/UserStatusSelector.qml b/src/gui/UserStatusSelector.qml
@@ -186,7 +186,7 @@ ColumnLayout {
                 anchors.centerIn: Overlay.overlay
 
                 background: Rectangle {
-                    color: palette.toolTipBase
+                    color: palette.window
                     border.width: Style.normalBorderWidth
                     border.color: palette.dark
                     radius: Style.slightlyRoundedButtonRadius

diff --git a/src/gui/filedetails/FileDetailsPage.qml b/src/gui/filedetails/FileDetailsPage.qml
@@ -224,7 +224,6 @@ Page {
             NCTabButton {
                 svgCustomColorSource: "image://svgimage-custom-color/activity.svg"
                 text: qsTr("Activity")
-                accentColor: root.accentColor
                 checked: swipeView.currentIndex === fileActivityView.swipeIndex
                 onClicked: swipeView.currentIndex = fileActivityView.swipeIndex
             }
@@ -234,7 +233,6 @@ Page {
                 height: visible ? implicitHeight : 0
                 svgCustomColorSource: "image://svgimage-custom-color/share.svg"
                 text: qsTr("Sharing")
-                accentColor: root.accentColor
                 checked: swipeView.currentIndex === shareViewLoader.swipeIndex
                 onClicked: swipeView.currentIndex = shareViewLoader.swipeIndex
                 visible: root.fileDetails.sharingAvailable

diff --git a/src/gui/filedetails/FileDetailsView.qml b/src/gui/filedetails/FileDetailsView.qml
@@ -37,8 +37,8 @@ StackView {
 
     initialItem: FileDetailsPage {
         id: fileDetailsPage
-        width: parent.width
-        height: parent.height
+        width: root.width
+        height: root.height
         backgroundsVisible: root.backgroundsVisible
         rootStackView: root
         onCloseButtonClicked: root.closeButtonClicked()

diff --git a/src/gui/filedetails/NCInputTextEdit.qml b/src/gui/filedetails/NCInputTextEdit.qml
@@ -22,7 +22,7 @@ import Style
 TextEdit {
     id: root
 
-    readonly property color accentColor: Style.ncBlue
+    readonly property color accentColor: palette.highlight
     readonly property color secondaryColor: palette.dark
     readonly property alias submitButton: submitButton
 
@@ -33,6 +33,16 @@ TextEdit {
     selectByMouse: true
     height: Math.max(Style.talkReplyTextFieldPreferredHeight, contentHeight)
 
+    Rectangle {
+        id: textFieldBorder
+        anchors.fill: parent
+        radius: Style.trayWindowRadius
+        border.width: Style.normalBorderWidth
+        border.color: root.activeFocus ? root.accentColor : root.secondaryColor
+        color: palette.window
+        z: -1
+    }
+
     Button {
         id: submitButton
 

diff --git a/src/gui/filedetails/NCInputTextField.qml b/src/gui/filedetails/NCInputTextField.qml
@@ -27,7 +27,7 @@ TextField {
     readonly property alias submitButton: submitButton
     property bool validInput: true
 
-    implicitHeight: Style.talkReplyTextFieldPreferredHeight
+    implicitHeight: Math.max(Style.talkReplyTextFieldPreferredHeight, contentHeight)
 
     rightPadding: submitButton.width
 
@@ -52,5 +52,12 @@ TextField {
 
         onClicked: root.accepted()
     }
+
+    verticalAlignment: Qt.AlignVCenter
+    background: Rectangle {
+        border.color: palette.dark
+        radius: Style.trayWindowRadius
+        color: palette.window
+    }
 }
 
diff --git a/src/gui/filedetails/NCTabButton.qml b/src/gui/filedetails/NCTabButton.qml
@@ -25,7 +25,6 @@ TabButton {
     id: tabButton
 
     property string svgCustomColorSource: ""
-    property color accentColor: Style.ncBlue
 
     padding: Style.smallSpacing
     background: Rectangle {
@@ -36,7 +35,7 @@ TabButton {
     contentItem: ColumnLayout {
         id: tabButtonLayout
 
-        property var elementColors: tabButton.checked || tabButton.hovered ? palette.buttonText : palette.midlight
+        property var elementColors: tabButton.checked || tabButton.hovered ? palette.buttonText : palette.windowText
 
         // We'd like to just set the height of the Image, but this causes crashing.
         // So we use a wrapping Item and use anchors to adjust the size.
@@ -82,7 +81,7 @@ TabButton {
             implicitWidth: textWidth + Style.standardSpacing * 2
             implicitHeight: 2
 
-            color: tabButton.checked ? tabButton.accentColor : tabButton.hovered ? palette.highlight : palette.base
+            color: tabButton.checked || tabButton.hovered ?  palette.highlight : palette.base
         }
     }
 }
diff --git a/src/gui/filedetails/ShareeSearchField.qml b/src/gui/filedetails/ShareeSearchField.qml
@@ -47,6 +47,14 @@ TextField {
 
     placeholderText: enabled ? qsTr("Search for users or groups…") : qsTr("Sharing is not available for this folder")
     placeholderTextColor: placeholderColor
+    verticalAlignment: Qt.AlignVCenter
+    implicitHeight: Math.max(Style.talkReplyTextFieldPreferredHeight, contentHeight)
+
+    background: Rectangle {
+        border.color: palette.dark
+        radius: Style.trayWindowRadius
+        color: palette.window
+    }
 
     onActiveFocusChanged: triggerSuggestionsVisibility()
     onTextChanged: triggerSuggestionsVisibility()

diff --git a/src/gui/iconutils.cpp b/src/gui/iconutils.cpp
@@ -111,7 +111,7 @@ QImage createSvgImageWithCustomColor(const QString &fileName,
     const auto sizeToUse = requestedSize.isValid() || originalSize == nullptr ? requestedSize : *originalSize;
 
     // some icons are present in white or black only, so, we need to check both when needed
-    const auto iconBaseColors = QStringList{QStringLiteral("black"), QStringLiteral("white")};
+    const auto iconBaseColors = QStringList{QStringLiteral("black"), QStringLiteral("white"), QStringLiteral("colored")};
     const auto customColorImage = findImageWithCustomColor(fileName, customColor, iconBaseColors, sizeToUse);
 
     if (!customColorImage.isNull()) {

diff --git a/src/gui/tray/CallNotificationDialog.qml b/src/gui/tray/CallNotificationDialog.qml
@@ -75,11 +75,10 @@ ApplicationWindow {
         onStopNotifying: root.closeNotification()
     }
 
-    Audio {
+    SoundEffect  {
         id: ringSound
         source: root.ringtonePath
         loops: 9 // about 45 seconds of audio playing
-        audioRole: Audio.RingtoneRole
     }
 
     Rectangle {

diff --git a/src/gui/tray/TalkReplyTextField.qml b/src/gui/tray/TalkReplyTextField.qml
@@ -17,6 +17,13 @@ TextField {
 
     onAccepted: sendReplyMessage()
 
+    verticalAlignment: Qt.AlignVCenter
+    background: Rectangle {
+        border.color: palette.dark
+        radius: Style.trayWindowRadius
+        color: palette.window
+    }
+
     Button {
         id: sendReplyMessageButton
 

diff --git a/src/gui/tray/TrayFolderListItem.qml b/src/gui/tray/TrayFolderListItem.qml
@@ -37,6 +37,7 @@ MenuItem {
             anchors.fill: parent
             anchors.margins: Style.normalBorderWidth
             color: parent.parent.hovered || parent.parent.visualFocus ? palette.highlight : palette.window
+            radius: Style.halfTrayWindowRadius
         }
     }
 

diff --git a/src/gui/tray/TrayFoldersMenuButton.qml b/src/gui/tray/TrayFoldersMenuButton.qml
@@ -114,7 +114,7 @@ HeaderButton {
 
                 cache: true
 
-                source: "image://svgimage-custom-color/folder.svg/"
+                source: "image://svgimage-custom-color/folder.svg/" + palette.windowText
                 sourceSize {
                     width: imageWidth
                     height: imageHeight
@@ -144,7 +144,7 @@ HeaderButton {
 
                     cache: true
 
-                    source: "image://svgimage-custom-color/caret-down.svg/"
+                    source: "image://svgimage-custom-color/caret-down.svg/" + palette.windowText
                     sourceSize {
                         width: openLocalFolderButtonCaretIconLoader.imageWidth
                         height: openLocalFolderButtonCaretIconLoader.imageHeight
@@ -178,6 +178,12 @@ HeaderButton {
             height: implicitHeight + y > Style.trayWindowHeight ? Style.trayWindowHeight - y : implicitHeight
             closePolicy: Menu.CloseOnPressOutsideParent | Menu.CloseOnEscape
 
+            background: Rectangle {
+                border.color: palette.dark
+                color: palette.window
+                radius: Style.trayWindowRadius
+            }
+
             contentItem: ScrollView {
                 id: foldersMenuScrollView
 
@@ -208,9 +214,9 @@ HeaderButton {
                         subline: model.modelData.parentPath
                         width: foldersMenuListView.width
                         height: Style.standardPrimaryButtonHeight
-                        backgroundIconSource: "image://svgimage-custom-color/folder.svg/"
+                        backgroundIconSource: "image://svgimage-custom-color/folder.svg/" + palette.windowText
                         iconSource: isGroupFolder
-                                    ? "image://svgimage-custom-color/account-group.svg/"
+                                    ? "image://svgimage-custom-color/account-group.svg/" + palette.windowText
                                     : ""
 
                         onTriggered: {

diff --git a/src/gui/tray/UnifiedSearchInputContainer.qml b/src/gui/tray/UnifiedSearchInputContainer.qml
@@ -41,9 +41,16 @@ TextField {
     rightPadding: trayWindowUnifiedSearchTextFieldClearTextButton.width + trayWindowUnifiedSearchTextFieldClearTextButton.anchors.rightMargin + textFieldHorizontalPaddingOffset
 
     placeholderText: qsTr("Search files, messages, events …")
+    verticalAlignment: Qt.AlignVCenter
 
     selectByMouse: true
 
+    background: Rectangle {
+        border.color: palette.dark
+        radius: Style.trayWindowRadius
+        color: palette.window
+    }
+
     Image {
         id: trayWindowUnifiedSearchTextFieldSearchIcon
         width: Style.trayListItemIconSize - anchors.leftMargin

diff --git a/src/gui/tray/UserLine.qml b/src/gui/tray/UserLine.qml
@@ -40,6 +40,7 @@ AbstractButton {
         color: (userLine.hovered || userLine.visualFocus) &&
                !(userMoreButton.hovered || userMoreButton.visualFocus) ?
                    palette.highlight : palette.window
+        radius: Style.halfTrayWindowRadius
     }
 
     contentItem: RowLayout {
@@ -48,7 +49,7 @@ AbstractButton {
 
         Image {
             id: accountAvatar
-            Layout.leftMargin: 7
+            Layout.leftMargin: Style.accountIconsMenuMargin
             verticalAlignment: Qt.AlignCenter
             cache: false
             source: model.avatar !== "" ? model.avatar : Theme.darkMode ? "image://avatars/fallbackWhite" : "image://avatars/fallbackBlack"
@@ -62,7 +63,7 @@ AbstractButton {
                 height: width
                 anchors.bottom: accountAvatar.bottom
                 anchors.right: accountAvatar.right
-                radius: width*0.5
+                radius:  width * Style.trayFolderStatusIndicatorRadiusFactor
             }
 
             Image {
@@ -148,21 +149,33 @@ AbstractButton {
 
             Image {
                 anchors.fill: parent
-                source: "image://svgimage-custom-color/more.svg/"
+                source: "image://svgimage-custom-color/more.svg/" + palette.windowText
                 fillMode: Image.PreserveAspectFit
+                anchors.rightMargin: Style.accountLabelsAnchorsMargin
             }
 
             AutoSizingMenu {
                 id: userMoreButtonMenu
                 closePolicy: Menu.CloseOnPressOutsideParent | Menu.CloseOnEscape
 
+                background: Rectangle {
+                    border.color: palette.dark
+                    radius: Style.halfTrayWindowRadius
+                    color: palette.window
+                }
+
                 MenuItem {
                     visible: model.isConnected && model.serverHasUserStatus
                     height: visible ? implicitHeight : 0
                     text: qsTr("Set status")
                     font.pixelSize: Style.topLinePixelSize
                     hoverEnabled: true
                     onClicked: showUserStatusSelector(index)
+
+                    background: Rectangle {
+                        radius: Style.halfTrayWindowRadius
+                        color: parent.hovered ? palette.highlight : palette.window
+                    }
                 }
 
                 MenuItem {
@@ -185,6 +198,11 @@ AbstractButton {
                         }
                         accountMenu.close()
                     }
+
+                    background: Rectangle {
+                        radius: Style.halfTrayWindowRadius
+                        color: parent.hovered ? palette.highlight : palette.window
+                    }
                 }
 
                 MenuItem {
@@ -200,6 +218,11 @@ AbstractButton {
                     Accessible.role: Accessible.Button
                     Accessible.name: text
                     Accessible.onPressAction: removeAccountButton.clicked()
+
+                    background: Rectangle {
+                        radius: Style.halfTrayWindowRadius
+                        color: parent.hovered ? palette.highlight : palette.window
+                    }
                 }
             }
         }