Skip to content

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)

@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 <[email protected]>
Signed-off-by: nextcloud-command <[email protected]>
@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
@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.

4 participants