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

fix(dashboard): Unify widget icon colors and document it's behaviour #46448

Merged
merged 3 commits into from
Jul 11, 2024

Conversation

nickvergessen
Copy link
Member

@nickvergessen nickvergessen commented Jul 11, 2024

Summary

Currently apps provide different icons and backgrounds via CSS classes. Some dark, some white. Some automatically invert the color based on dark mode, some don't, …
This caused endless fixing of icons and the general framework multiple times, so now here is the final outcome:

  • getIconUrl:
    Get the absolute url for the widget icon (should be colored black or not have a color).
    The icon will be inverted automatically in mobile clients and when using dark mode
  • getIconClass:
    The icon will be inverted automatically in mobile clients and when using dark mode.
    Therefore, it is NOT recommended to use a css class that sets the background with:
    var(--icon-…) as those will adapt to dark/bright mode in the web and still be inverted
    resulting in a dark icon on dark background.

Also the widget ID is used as css class, so I documented limitation of characters and log a debug if it's not matching

  • getId:
    Get a unique identifier for the widget
    To ensure uniqueness, it is recommended to user the app id or start with the app id followed by a dash.
    @return string Unique id that identifies the widget, e.g. the app id. Only use alphanumeric characters, dash and underscore

Screenshots

Before After
Bildschirmfoto vom 2024-07-11 13-45-14 Bildschirmfoto vom 2024-07-11 13-45-01
Bildschirmfoto vom 2024-07-11 13-42-44 Bildschirmfoto vom 2024-07-11 13-44-08
Bildschirmfoto vom 2024-07-11 13-45-25 Bildschirmfoto vom 2024-07-11 13-45-34
Bildschirmfoto vom 2024-07-11 13-42-32 Bildschirmfoto vom 2024-07-11 13-42-22

Apps that need fixing

Checklist

Copy link
Member

@jancborchardt jancborchardt left a comment

Choose a reason for hiding this comment

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

Very nice design fix, thank you! (Screenshots checked, not tested)

Signed-off-by: Joas Schilling <coding@schilljs.com>
Signed-off-by: Joas Schilling <coding@schilljs.com>
@AndyScherzinger AndyScherzinger force-pushed the bugfix/noid/fix-missing-dashboard-widget-icon branch from 3f1e79d to 22b237b Compare July 11, 2024 12:18
@AndyScherzinger
Copy link
Member

/compile amend/

Signed-off-by: Joas Schilling <coding@schilljs.com>
Signed-off-by: nextcloud-command <nextcloud-command@users.noreply.github.com>
@nextcloud-command nextcloud-command force-pushed the bugfix/noid/fix-missing-dashboard-widget-icon branch from 22b237b to 37d3312 Compare July 11, 2024 13:14
@AndyScherzinger AndyScherzinger merged commit 50af080 into master Jul 11, 2024
165 checks passed
@AndyScherzinger AndyScherzinger deleted the bugfix/noid/fix-missing-dashboard-widget-icon branch July 11, 2024 15:27
@nickvergessen
Copy link
Member Author

/backport to stable29

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
3. to review Waiting for reviews bug design Design, UI, UX, etc. feature: dashboard
Projects
Archived in project
Development

Successfully merging this pull request may close these issues.

3 participants