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.

Sign up for GitHub

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

Jump to bottom

Native buttons #6980

Merged
merged 41 commits into from
Sep 6, 2024
Merged

Native buttons #6980

merged 41 commits into from
Sep 6, 2024

Conversation

camilasan
Copy link
Member

@camilasan camilasan commented Aug 7, 2024 •
edited
Loading

Implements part of #6944
What we have atm is a definition of style by platform, Windows is uses Windows and mac OS uses macOS, the default will be then Material.

📝 to do

  • the icons for the apps menu are inverted (white instead of black)
  • test on Windows 11
  • align icons in buttons
  • make sure we are using native icons

What has been discussed previously

  • Introduce transparency
  • Adjust button style to be native (basic button look, only slight rounded corners, not pill-style, no color)
    Image
    Image
    additional ideas:
  • adjust Font to use native font
  • also use default font sizes
  • add backdrop shadow
  • use monochrome icons instead of colorful ones?
  • use native icons if there are some
  • make search bar more round, e.g. like this: Image
  • make the dropdowns more rounded, look more native, e.g. like this: Image Image (also all items usually have icons)
  • the dropdown is usually rather 3 dots: Image Image

What we actually agreed later

  • does native UI include the font colors and hover colors? for instance, right now we try to use the server's theme and that would interfere with making it looking native and dealing with light/dark themes.
    Yes.
  • You wrote "make search bar more round" but using native now without customization looks like the image above. It is round but not that round as in the screenshot uploaded in 💻 🐧🪟 🍏 Make desktop clients look more native #6639.
    We said back then that for Linux we would use material UI, which is available as a library. That should come with it's own rounded components.
    We can also set different styles depending on GNOME or KDE
    there is a standardized way to reliably detect that
    https://www.freedesktop.org/software/systemd/man/latest/pam_systemd.html#%24XDG_SESSION_DESKTOP

claucambra
claucambra reviewed Aug 8, 2024
View reviewed changes
Copy link
Collaborator

@claucambra claucambra left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🤩

I am not sure, is this PR meant to be a draft? I would remove the commented properties

@mgallien mgallien force-pushed the feature/native/custombutton branch from 98329be to e9b95a7 Compare August 12, 2024 15:58
@mgallien mgallien force-pushed the feature/native/custombutton branch from e9b95a7 to 14d7d83 Compare August 21, 2024 15:44
@mgallien mgallien mentioned this pull request Aug 28, 2024
Open
@mgallien mgallien force-pushed the feature/native/custombutton branch 2 times, most recently from ed1c134 to b845f7e Compare August 28, 2024 13:22
@camilasan camilasan force-pushed the feature/native/custombutton branch 3 times, most recently from e5c6b3b to d71558e Compare September 3, 2024 13:22
@tobiasKaminsky
Copy link
Member

/backport to stable-3.14

camilasan and others added 19 commits September 6, 2024 10:42
@camilasan @mgallien
Change default Qt quick control style depending on the platform.
d8185e6 
Signed-off-by: Camila Ayres <hello@camilasan.com>
@mgallien
set the windows native qml style on windows systems
690ebcc 
Signed-off-by: Matthieu Gallien <matthieu.gallien@nextcloud.com>
@mgallien
let's not make the background color of main dialog be transparent
a81c60c 
Signed-off-by: Matthieu Gallien <matthieu.gallien@nextcloud.com>
@mgallien
remove any use of custom palette: use the style palette
a1a832e 
should get us native colors as much as possible

Signed-off-by: Matthieu Gallien <matthieu.gallien@nextcloud.com>
@camilasan @mgallien
Remove component versions under src/gui/tray.
10d6224 
Signed-off-by: Camila Ayres <hello@camilasan.com>
@camilasan @mgallien
Remove qml component version from import.
d68fa5f 
Signed-off-by: Camila Ayres <hello@camilasan.com>
@camilasan @mgallien
Remove component import version from Style.qml.
472f387 
Signed-off-by: Camila Ayres <hello@camilasan.com>
@mgallien
let main dialog have a transparent background again
f4c5151 
will fix white corners appearing below the main dialog content

Signed-off-by: Matthieu Gallien <matthieu.gallien@nextcloud.com>
@mgallien
add a QQuickStyle fallback: Fusion is fallback style
4a8d0cf 
Signed-off-by: Matthieu Gallien <matthieu.gallien@nextcloud.com>
@mgallien
use new QStyleHints::colorScheme feature to use light or dark mode
9cecd59 
Signed-off-by: Matthieu Gallien <matthieu.gallien@nextcloud.com>
@mgallien
remove broken system paellete detection within our custom style
2d08cdb 
remove custom binding between c++ native Qt API for system palette and
our QML styling code for colors detection

fixes many issues with dark mode using Windows native style

Signed-off-by: Matthieu Gallien <matthieu.gallien@nextcloud.com>
@camilasan @mgallien
Change default Qt quick control style depending on the platform.
279c3c3 
Signed-off-by: Camila Ayres <hello@camilasan.com>
@camilasan @mgallien
Replace NCToolTip for ToolTip.
fb17a4b 
Signed-off-by: Camila Ayres <hello@camilasan.com>
@camilasan @mgallien
Fix repeaded call to QQuickStyle::setStyle.
0236e88 
Signed-off-by: Camila Ayres <hello@camilasan.com>
@camilasan @mgallien
Remove custom properties for background and opacity from CustomButton…
3c5066f 
… component.

Signed-off-by: Camila Ayres <hello@camilasan.com>
@camilasan @mgallien
Remove custom properties for text color/hover from CustomButton and N…
66e2882 
…CButtonContents components.

Signed-off-by: Camila Ayres <hello@camilasan.com>
@camilasan @mgallien
Fix warning: The current style does not support customization of this…
38f81c0 
… control (property: "background").

Signed-off-by: Camila Ayres <hello@camilasan.com>
@camilasan @mgallien
Fix warning: The current style does not support customization of this…
599bbbe 
… control (property: "contentItem").

Signed-off-by: Camila Ayres <hello@camilasan.com>
@camilasan @mgallien
Fix warning: The current style does not support customization of this…
d8883d0 
… control (property: "background").

Signed-off-by: Camila Ayres <hello@camilasan.com>
@camilasan @mgallien
Fix warning: The current style does not support customization of this…
24e1606 
… control (property: "indicator").

Signed-off-by: Camila Ayres <hello@camilasan.com>
@camilasan @mgallien
Fix warning: The current style does not support customization of this…
4f7b73c 
… control (property: "background").

Signed-off-by: Camila Ayres <hello@camilasan.com>
@camilasan @mgallien
Clean HeaderButton component from customizations.
653ecbf 
Signed-off-by: Camila Ayres <hello@camilasan.com>
@camilasan @mgallien
Remove setting contentsFont, not used anymore in CustomButton.
b90d7c0 
Signed-off-by: Camila Ayres <hello@camilasan.com>
@camilasan @mgallien
Remove customizations from CustomButton.
d8acedb 
Signed-off-by: Camila Ayres <hello@camilasan.com>
@camilasan @mgallien
NCRadioButton => RadioButton.
a4aedd7 
Signed-off-by: Camila Ayres <hello@camilasan.com>
@camilasan @mgallien
Remove backround customization from ShareeSearchField.
73bc834 
Signed-off-by: Camila Ayres <hello@camilasan.com>
@camilasan @mgallien
Remove the component version from import.
0e1d3da 
Signed-off-by: Camila Ayres <hello@camilasan.com>
@camilasan @mgallien
Remove duplicated header image.
a3ca3bc 
Signed-off-by: Camila Ayres <hello@camilasan.com>
@camilasan @mgallien
Remove image hover from NCButtonContents and CustomButton.
d0e0843 
Signed-off-by: Camila Ayres <hello@camilasan.com>
@camilasan @mgallien
Remove cutomizations for text color and hover from ActivityActionButton.
4f92ef3 
Signed-off-by: Camila Ayres <hello@camilasan.com>
@camilasan @mgallien
Remove customizaton for placeholder text color from UnifiedSearchInpu…
3ad7964 
…tContainer.

Signed-off-by: Camila Ayres <hello@camilasan.com>
@camilasan @mgallien
Remove customization for text color and hover from TextButtonContents.
a91cd69 
Signed-off-by: Camila Ayres <hello@camilasan.com>
@camilasan @mgallien
Remove backround rectangle from NCInputTextEdit.
3201e8b 
Signed-off-by: Camila Ayres <hello@camilasan.com>
@camilasan @mgallien
Fix font color light/dark of time in ActivityItemContent.
1b117d7 
Signed-off-by: Camila Ayres <hello@camilasan.com>
@camilasan @mgallien
Remove customizations for hover background from the user menu options.
5073be1 
Signed-off-by: Camila Ayres <hello@camilasan.com>
@camilasan @mgallien
Remove customization for font color from EnforcedPlainTextLabel.
e55dae1 
Signed-off-by: Camila Ayres <hello@camilasan.com>
@camilasan @mgallien
Remove background hover customization from UserLine.
6b5041a 
Signed-off-by: Camila Ayres <hello@camilasan.com>
@camilasan @mgallien
Remove more color customizations from Window and TrayFoldersMenuButton.
d05ebc3 
Signed-off-by: Camila Ayres <hello@camilasan.com>
@camilasan @mgallien
qrc:/// => image://
6f13fa6 
Signed-off-by: Camila Ayres <hello@camilasan.com>
@camilasan @mgallien
Fix talk app icon.
20ef57c 
Signed-off-by: Camila Ayres <hello@camilasan.com>
@mgallien mgallien force-pushed the feature/native/custombutton branch from 5aabc42 to 20ef57c Compare September 6, 2024 08:42
@nextcloud-desktop-bot
Copy link

AppImage file: nextcloud-PR-6980-20ef57c682fe2a2d04075f0661009f026fcfaf89-x86_64.AppImage

To test this change/fix you can simply download above AppImage file and test it.

Please make sure to quit your existing Nextcloud app and backup your data.

@mgallien mgallien merged commit a377c1d into master Sep 6, 2024
10 of 14 checks passed
@mgallien mgallien deleted the feature/native/custombutton branch September 6, 2024 08:49
@backportbot backportbot bot mentioned this pull request Sep 6, 2024
Merged
1 task
@sonarcloud SonarCloud
Copy link

sonarcloud bot commented Sep 6, 2024

Quality Gate Failed Quality Gate failed

Failed conditions
33.3% Coverage on New Code (required ≥ 80%)
C Maintainability Rating on New Code (required ≥ A)
17 New Code Smells (required ≤ 0)

See analysis details on SonarCloud

Catch issues before they fail your Quality Gate with our IDE extension SonarLint

This was referenced Sep 18, 2024
Open
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@claucambra claucambra claucambra left review comments

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@camilasan @tobiasKaminsky @nextcloud-desktop-bot @claucambra @mgallien