Merge pull request #5741 from nextcloud/backport/5715/stable-3.9

[stable-3.9] Fix tray styling
nextcloud · May 30, 2023 · c389ced · c389ced
2 parents 32c1b9d + 15c9cbf
commit c389ced
Show file tree

Hide file tree

Showing 52 changed files with 365 additions and 365 deletions.
diff --git a/src/gui/BasicComboBox.qml b/src/gui/BasicComboBox.qml
@@ -30,7 +30,7 @@ ComboBox {
 
     background: Rectangle {
         radius: Style.slightlyRoundedButtonRadius
-        color: Style.buttonBackgroundColor
+        color: palette.button
         opacity: clearComboBox.hovered ? Style.hoverOpacity : 1.0
     }
 
@@ -39,7 +39,6 @@ ComboBox {
         rightPadding: clearComboBox.indicator.width + clearComboBox.spacing
 
         text: clearComboBox.displayText
-        color: Style.ncTextColor
         verticalAlignment: Text.AlignVCenter
         elide: Text.ElideRight
     }
@@ -50,13 +49,13 @@ ComboBox {
         anchors.verticalCenter: clearComboBox.verticalCenter
 
         cached: true
-        color: Style.ncTextColor
         width: source.width
         height: source.height
+
         source: Image {
             horizontalAlignment: Qt.AlignRight
             verticalAlignment: Qt.AlignVCenter
-            source: "qrc:///client/theme/white/caret-down.svg"
+            source: "image://svgimage-custom-color/caret-down.svg/" + palette.windowText
             sourceSize.width: Style.accountDropDownCaretSize
             sourceSize.height: Style.accountDropDownCaretSize
             Accessible.role: Accessible.PopupMenu
@@ -80,8 +79,8 @@ ComboBox {
         }
 
         background: Rectangle {
-            color: Style.backgroundColor
-            border.color: Style.menuBorder
+            color: palette.toolTipBase
+            border.color: palette.dark
             radius: Style.slightlyRoundedButtonRadius
         }
     }
@@ -92,13 +91,9 @@ ComboBox {
         width: clearComboBox.width
         contentItem: EnforcedPlainTextLabel {
             text: modelData.display
-            color: Style.ncTextColor
             elide: Text.ElideRight
             verticalAlignment: Text.AlignVCenter
         }
         highlighted: clearComboBox.highlightedIndex === index
-        background: Rectangle {
-           color: clearStatusDelegate.highlighted || clearStatusDelegate.hovered ? Style.lightHover : Style.backgroundColor
-       }
     }
 }
diff --git a/src/gui/EmojiPicker.qml b/src/gui/EmojiPicker.qml
@@ -50,16 +50,19 @@ ColumnLayout {
             height: headerLayout.height
 
             background: Rectangle {
-                color: Style.lightHover
-                visible: ListView.isCurrentItem || headerDelegate.highlighted || headerDelegate.checked || headerDelegate.down || headerDelegate.hovered
+                color: palette.highlight
+                visible: ListView.isCurrentItem ||
+                         headerDelegate.highlighted ||
+                         headerDelegate.checked ||
+                         headerDelegate.down ||
+                         headerDelegate.hovered
                 radius: Style.slightlyRoundedButtonRadius
             }
 
             contentItem: EnforcedPlainTextLabel {
                 horizontalAlignment: Text.AlignHCenter
                 verticalAlignment: Text.AlignVCenter
                 text: emoji
-                color: Style.ncTextColor
             }
 
             Rectangle {
@@ -70,7 +73,7 @@ ColumnLayout {
 
                 visible: ListView.isCurrentItem
 
-                color: Style.menuBorder
+                color: palette.dark
             }
 
 
@@ -84,7 +87,7 @@ ColumnLayout {
     Rectangle {
         height: Style.normalBorderWidth
         Layout.fillWidth: true
-        color: Style.menuBorder
+        color: palette.dark
     }
 
     GridView {
@@ -109,7 +112,7 @@ ColumnLayout {
             height: metrics.height * 2
 
             background: Rectangle {
-                color: Style.lightHover
+                color: palette.highlight
                 visible: ListView.isCurrentItem || emojiDelegate.highlighted || emojiDelegate.checked || emojiDelegate.down || emojiDelegate.hovered
                 radius: Style.slightlyRoundedButtonRadius
             }
@@ -118,7 +121,6 @@ ColumnLayout {
                 horizontalAlignment: Text.AlignHCenter
                 verticalAlignment: Text.AlignVCenter
                 text: modelData === undefined ? "" : modelData.unicode
-                color: Style.ncTextColor
             }
 
             onClicked: {
@@ -132,7 +134,7 @@ ColumnLayout {
             width: parent.width * 0.8
             anchors.centerIn: parent
             text: qsTr("No recent emojis")
-            color: Style.ncSecondaryTextColor
+            color: palette.midlight
             wrapMode: Text.Wrap
             font.bold: true
             visible: emojiView.count === 0

diff --git a/src/gui/ErrorBox.qml b/src/gui/ErrorBox.qml
@@ -59,7 +59,6 @@ Item {
 
         EnforcedPlainTextLabel {
             Layout.fillWidth: true
-            color: Style.ncTextColor
             font.bold: true
             text: qsTr("Error")
             visible: errorBox.showCloseButton
@@ -70,7 +69,7 @@ Item {
             Layout.preferredHeight: Style.iconButtonWidth
 
             background: null
-            icon.color: Style.ncTextColor
+            icon.color: palette.buttonText
             icon.source: "qrc:///client/theme/close.svg"
 
             visible: errorBox.showCloseButton
@@ -86,7 +85,6 @@ Item {
             Layout.fillHeight: true
             Layout.columnSpan: 2
 
-            color: Style.ncTextColor
             wrapMode: Text.WordWrap
             text: errorBox.text
         }

diff --git a/src/gui/PredefinedStatusButton.qml b/src/gui/PredefinedStatusButton.qml
@@ -35,7 +35,7 @@ AbstractButton {
     property string clearAtText: ""
 
     background: Rectangle {
-        color: root.hovered || root.checked ? Style.lightHover : "transparent"
+        color: root.hovered || root.checked ? palette.highlight : "transparent"
         radius: Style.slightlyRoundedButtonRadius
     }
 
@@ -53,20 +53,17 @@ AbstractButton {
             spacing: Style.smallSpacing
             EnforcedPlainTextLabel {
                 text: root.statusText
-                color: Style.ncTextColor
                 verticalAlignment: Text.AlignVCenter
                 font.bold: true
             }
 
             EnforcedPlainTextLabel {
                 text: "-"
-                color: Style.ncTextColor
                 verticalAlignment: Text.AlignVCenter
             }
 
             EnforcedPlainTextLabel {
                 text: root.clearAtText
-                color: Style.ncTextColor
                 verticalAlignment: Text.AlignVCenter
             }
         }

diff --git a/src/gui/ResolveConflictsDialog.qml b/src/gui/ResolveConflictsDialog.qml
@@ -22,7 +22,7 @@ import Style 1.0
 import com.nextcloud.desktopclient 1.0
 import "./tray"
 
-QtWindow.Window {
+ApplicationWindow {
     id: conflictsDialog
 
     required property var allConflicts
@@ -36,6 +36,26 @@ QtWindow.Window {
     minimumHeight: Style.minimumHeightResolveConflictsDialog
     title: qsTr('Solve sync conflicts')
 
+    // TODO: Rather than setting all these palette colours manually,
+    // create a custom style and do it for all components globally
+    palette {
+        text: Style.ncTextColor
+        windowText: Style.ncTextColor
+        buttonText: Style.ncTextColor
+        brightText: Style.ncTextBrightColor
+        highlight: Style.lightHover
+        highlightedText: Style.ncTextColor
+        light: Style.lightHover
+        midlight: Style.ncSecondaryTextColor
+        mid: Style.darkerHover
+        dark: Style.menuBorder
+        button: Style.buttonBackgroundColor
+        window: Style.backgroundColor
+        base: Style.backgroundColor
+        toolTipBase: Style.backgroundColor
+        toolTipText: Style.ncTextColor
+    }
+
     onClosing: function(close) {
         Systray.destroyDialog(self);
         close.accepted = true
@@ -110,7 +130,7 @@ QtWindow.Window {
             Layout.fillWidth: true
             Layout.leftMargin: 5
             Layout.rightMargin: 5
-            color: Style.menuBorder
+            color: palette.dark
             height: 1
         }
 
@@ -167,7 +187,7 @@ QtWindow.Window {
     }
 
     Rectangle {
-        color: Theme.systemPalette.window
+        color: Style.backgroundColor
         anchors.fill: parent
         z: 1
     }

diff --git a/src/gui/UserStatusSelector.qml b/src/gui/UserStatusSelector.qml
@@ -38,7 +38,6 @@ ColumnLayout {
             horizontalAlignment: Text.AlignHCenter
             font.bold: true
             text: qsTr("Online status")
-            color: Style.ncTextColor
         }
 
         GridLayout {
@@ -123,7 +122,6 @@ ColumnLayout {
             horizontalAlignment: Text.AlignHCenter
             font.bold: true
             text: qsTr("Status message")
-            color: Style.ncTextColor
         }
 
         RowLayout {
@@ -146,13 +144,13 @@ ColumnLayout {
                 padding: 0
                 z: hovered ? 2 : 0 // Make sure highlight is seen on top of text field
 
-                property color borderColor: showBorder ? Style.ncBlue : Style.menuBorder
+                property color borderColor: showBorder ? Style.ncBlue : palette.dark
 
                 // We create the square with only the top-left and bottom-left rounded corners
                 // by overlaying different rectangles on top of each other
                 background: Rectangle {
                     radius: Style.slightlyRoundedButtonRadius
-                    color: Style.buttonBackgroundColor
+                    color: palette.button
                     border.color: fieldButton.borderColor
                     border.width: Style.normalBorderWidth
 
@@ -161,7 +159,7 @@ ColumnLayout {
                         anchors.leftMargin: parent.width / 2
                         anchors.rightMargin: -1
                         z: 1
-                        color: Style.buttonBackgroundColor
+                        color: palette.button
                         border.color: fieldButton.borderColor
                         border.width: Style.normalBorderWidth
                     }
@@ -173,7 +171,7 @@ ColumnLayout {
                         anchors.topMargin: Style.normalBorderWidth
                         anchors.bottomMargin: Style.normalBorderWidth
                         z: 2
-                        color: Style.buttonBackgroundColor
+                        color: palette.button
                     }
                 }
             }
@@ -187,9 +185,9 @@ ColumnLayout {
                 anchors.centerIn: Overlay.overlay
 
                 background: Rectangle {
-                    color: Style.backgroundColor
+                    color: palette.toolTipBase
                     border.width: Style.normalBorderWidth
-                    border.color: Style.menuBorder
+                    border.color: palette.dark
                     radius: Style.slightlyRoundedButtonRadius
                 }
 
@@ -206,30 +204,29 @@ ColumnLayout {
             TextField {
                 id: userStatusMessageTextField
 
-                property color borderColor: activeFocus ? Style.ncBlue : Style.menuBorder
+                property color borderColor: activeFocus ? Style.ncBlue : palette.dark
 
                 Layout.fillWidth: true
                 Layout.preferredHeight: contentHeight + (Style.smallSpacing * 2)
 
                 placeholderText: qsTr("What is your status?")
-                placeholderTextColor: Style.ncSecondaryTextColor
+                placeholderTextColor: palette.midlight
                 text: userStatusSelectorModel.userStatusMessage
-                color: Style.ncTextColor
                 verticalAlignment: TextInput.AlignVCenter
                 selectByMouse: true
                 onEditingFinished: userStatusSelectorModel.userStatusMessage = text
 
                 background: Rectangle {
                     radius: Style.slightlyRoundedButtonRadius
-                    color: Style.backgroundColor
+                    color: palette.base
                     border.color: userStatusMessageTextField.borderColor
                     border.width: Style.normalBorderWidth
 
                     Rectangle {
                         anchors.fill: parent
                         anchors.rightMargin: parent.width / 2
                         z: 1
-                        color: Style.backgroundColor
+                        color: palette.base
                         border.color: userStatusMessageTextField.borderColor
                         border.width: Style.normalBorderWidth
                     }
@@ -241,7 +238,7 @@ ColumnLayout {
                         anchors.topMargin: Style.normalBorderWidth
                         anchors.bottomMargin: Style.normalBorderWidth
                         z: 2
-                        color: Style.backgroundColor
+                        color: palette.base
                     }
                 }
             }
@@ -285,7 +282,6 @@ ColumnLayout {
                 verticalAlignment: Text.AlignVCenter
 
                 text: qsTr("Clear status message after")
-                color: Style.ncTextColor
                 wrapMode: Text.Wrap
             }
 

diff --git a/src/gui/UserStatusSelectorButton.qml b/src/gui/UserStatusSelectorButton.qml
@@ -34,7 +34,7 @@ AbstractButton {
 
     background: Rectangle {
         radius: root.primary ? Style.veryRoundedButtonRadius : Style.mediumRoundedButtonRadius
-        color: root.colored ? Style.ncBlue : Style.buttonBackgroundColor
+        color: root.colored ? Style.ncBlue : palette.button
         opacity: root.colored && root.hovered ? Style.hoverOpacity : 1.0
         border.color: Style.ncBlue
         border.width: root.showBorder ? root.primary ? Style.normalBorderWidth : Style.thickBorderWidth : 0
@@ -71,7 +71,7 @@ AbstractButton {
 
             text: root.text
             wrapMode: Text.Wrap
-            color: root.colored ? Style.ncHeaderTextColor : Style.ncTextColor
+            color: root.colored ? palette.brightText : palette.buttonText
             font.bold: root.primary
         }
 
@@ -85,7 +85,7 @@ AbstractButton {
 
             text: root.secondaryText
             wrapMode: Text.Wrap
-            color: Style.ncSecondaryTextColor
+            color: palette.midlight
             visible: root.secondaryText !== ""
         }
     }

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