Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[stable-3.9] Fix tray styling #5741

Merged
merged 30 commits into from
May 30, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
d4cc414
Use custombutton for dismiss button, give hover feedback
claucambra May 19, 2023
ae4973b
Fix alignment of main subject line with time line in activity
claucambra May 19, 2023
c96e7f9
Hide second subject line in activity when nothing is visible
claucambra May 19, 2023
7ab21d9
Use custombutton with filedetails button to make it not look horrible
claucambra May 19, 2023
d974fa3
Fix more button icon when in dark mode
claucambra May 19, 2023
5f92d35
Make dismiss button slightly larger
claucambra May 19, 2023
fbcd9e2
Move filedetails button to activity top row
claucambra May 19, 2023
c37143c
Fix text lines, don't leave only one line
claucambra May 19, 2023
dd29f18
Use standard size instead of unncessary additional value
claucambra May 19, 2023
6ccf9ff
Simplify and fix activity content layout by going back to using RowLa…
claucambra May 19, 2023
bf45102
Limit the max height of images inside CustomButton
claucambra May 19, 2023
29ddf1a
Respect icon.height and width in custom button contents
claucambra May 19, 2023
fdb6d9c
Respect icon.height and width in custom button contents
claucambra May 19, 2023
f7447ef
Add darker hover to make hovering on an item within an item with ligh…
claucambra May 19, 2023
a1346dc
Reduce minimum size of activity
claucambra May 19, 2023
f090853
Increase size of dismiss button
claucambra May 19, 2023
c881a22
Fix image sizing and positioning in NCButtonContents
claucambra May 19, 2023
5356733
Fix large number of warnings related to unavailable property
claucambra May 23, 2023
9ee669a
Fix dark mode switching issues with main tray window
claucambra May 23, 2023
8182998
Unify small icon sizes in file details components
claucambra May 23, 2023
1738de8
Fix checkbox palettes in share details
claucambra May 23, 2023
9fc46ae
Fix outline for progress bar in fusion
claucambra May 23, 2023
afdf4f0
Fix dark mode in ResolveConflictsDialog
claucambra May 23, 2023
d0ef0bd
Fix contentwidth of dialogbuttonbox in ShareDetailsPage
claucambra May 23, 2023
4272a5d
Define all QML windows as ApplicationWindows, define palettes here
claucambra May 25, 2023
8b3cf6d
Always use palette colours for colouring UI elements
claucambra May 25, 2023
85ebf8c
Remove unnecessary background components
claucambra May 25, 2023
3ec4e1b
Fix caret colour in basic combo box
claucambra May 25, 2023
9a02dd5
Fix highlight in activity list
claucambra May 25, 2023
15c9cbf
Declare hoverEnabled: true explicitly in CustomButton
claucambra May 27, 2023
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 5 additions & 10 deletions src/gui/BasicComboBox.qml
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ ComboBox {

background: Rectangle {
radius: Style.slightlyRoundedButtonRadius
color: Style.buttonBackgroundColor
color: palette.button
opacity: clearComboBox.hovered ? Style.hoverOpacity : 1.0
}

Expand All @@ -39,7 +39,6 @@ ComboBox {
rightPadding: clearComboBox.indicator.width + clearComboBox.spacing

text: clearComboBox.displayText
color: Style.ncTextColor
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
}
Expand All @@ -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
Expand All @@ -80,8 +79,8 @@ ComboBox {
}

background: Rectangle {
color: Style.backgroundColor
border.color: Style.menuBorder
color: palette.toolTipBase
border.color: palette.dark
radius: Style.slightlyRoundedButtonRadius
}
}
Expand All @@ -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
}
}
}
18 changes: 10 additions & 8 deletions src/gui/EmojiPicker.qml
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -70,7 +73,7 @@ ColumnLayout {

visible: ListView.isCurrentItem

color: Style.menuBorder
color: palette.dark
}


Expand All @@ -84,7 +87,7 @@ ColumnLayout {
Rectangle {
height: Style.normalBorderWidth
Layout.fillWidth: true
color: Style.menuBorder
color: palette.dark
}

GridView {
Expand All @@ -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
}
Expand All @@ -118,7 +121,6 @@ ColumnLayout {
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
text: modelData === undefined ? "" : modelData.unicode
color: Style.ncTextColor
}

onClicked: {
Expand All @@ -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
Expand Down
4 changes: 1 addition & 3 deletions src/gui/ErrorBox.qml
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,6 @@ Item {

EnforcedPlainTextLabel {
Layout.fillWidth: true
color: Style.ncTextColor
font.bold: true
text: qsTr("Error")
visible: errorBox.showCloseButton
Expand All @@ -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
Expand All @@ -86,7 +85,6 @@ Item {
Layout.fillHeight: true
Layout.columnSpan: 2

color: Style.ncTextColor
wrapMode: Text.WordWrap
text: errorBox.text
}
Expand Down
5 changes: 1 addition & 4 deletions src/gui/PredefinedStatusButton.qml
Original file line number Diff line number Diff line change
Expand Up @@ -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
}

Expand All @@ -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
}
}
Expand Down
26 changes: 23 additions & 3 deletions src/gui/ResolveConflictsDialog.qml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -110,7 +130,7 @@ QtWindow.Window {
Layout.fillWidth: true
Layout.leftMargin: 5
Layout.rightMargin: 5
color: Style.menuBorder
color: palette.dark
height: 1
}

Expand Down Expand Up @@ -167,7 +187,7 @@ QtWindow.Window {
}

Rectangle {
color: Theme.systemPalette.window
color: Style.backgroundColor
anchors.fill: parent
z: 1
}
Expand Down
26 changes: 11 additions & 15 deletions src/gui/UserStatusSelector.qml
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,6 @@ ColumnLayout {
horizontalAlignment: Text.AlignHCenter
font.bold: true
text: qsTr("Online status")
color: Style.ncTextColor
}

GridLayout {
Expand Down Expand Up @@ -123,7 +122,6 @@ ColumnLayout {
horizontalAlignment: Text.AlignHCenter
font.bold: true
text: qsTr("Status message")
color: Style.ncTextColor
}

RowLayout {
Expand All @@ -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

Expand All @@ -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
}
Expand All @@ -173,7 +171,7 @@ ColumnLayout {
anchors.topMargin: Style.normalBorderWidth
anchors.bottomMargin: Style.normalBorderWidth
z: 2
color: Style.buttonBackgroundColor
color: palette.button
}
}
}
Expand All @@ -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
}

Expand All @@ -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
}
Expand All @@ -241,7 +238,7 @@ ColumnLayout {
anchors.topMargin: Style.normalBorderWidth
anchors.bottomMargin: Style.normalBorderWidth
z: 2
color: Style.backgroundColor
color: palette.base
}
}
}
Expand Down Expand Up @@ -285,7 +282,6 @@ ColumnLayout {
verticalAlignment: Text.AlignVCenter

text: qsTr("Clear status message after")
color: Style.ncTextColor
wrapMode: Text.Wrap
}

Expand Down
6 changes: 3 additions & 3 deletions src/gui/UserStatusSelectorButton.qml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
}

Expand All @@ -85,7 +85,7 @@ AbstractButton {

text: root.secondaryText
wrapMode: Text.Wrap
color: Style.ncSecondaryTextColor
color: palette.midlight
visible: root.secondaryText !== ""
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/gui/UserStatusSelectorPage.qml
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ Page {
padding: Style.standardSpacing * 2

background: Rectangle {
color: Style.backgroundColor
color: palette.window
radius: Style.trayWindowRadius
}

Expand Down
Loading