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

Adjust loading icon style, replace fillColor prop #2875

Merged
merged 2 commits into from
Jul 27, 2022

Conversation

raimund-schluessler
Copy link
Contributor

@raimund-schluessler raimund-schluessler commented Jul 22, 2022

This PR adjusts the style of the vue loading icon to the old style of the loading icon:
Screenshot 2022-07-22 at 22-13-17 Nextcloud Vue Style Guide

It also replaces the fillColor with an appearance prop. This prevents the usage of arbitrary colors, and allows to select whether the icon adjusts its color to the Nextcloud color scheme, or always shows as light or dark, independent of the color scheme.

At the moment, the colors for the light and dark mode are hard-coded, since I didn't find any color variables that don't change with the color scheme. Any hints here are welcome.

Follow-up to #2727.

@raimund-schluessler raimund-schluessler added this to the 6.0.0 milestone Jul 22, 2022
@raimund-schluessler raimund-schluessler added enhancement New feature or request 2. developing Work in progress component Component discussion and/or suggestion design Design, UX, interface and interaction design labels Jul 22, 2022
@raimund-schluessler raimund-schluessler marked this pull request as ready for review July 22, 2022 20:19
@raimund-schluessler raimund-schluessler added 3. to review Waiting for reviews and removed 2. developing Work in progress labels Jul 22, 2022
Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>
Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>
Copy link
Contributor

@marcoambrosini marcoambrosini left a comment

Choose a reason for hiding this comment

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

🐘

@marcoambrosini
Copy link
Contributor

just a heads up

@juliushaertl juliushaertl merged commit 47a5bb8 into master Jul 27, 2022
@juliushaertl juliushaertl deleted the fix/2777/loading-icon-style branch July 27, 2022 15:27
@jancborchardt
Copy link
Contributor

Thanks a lot @raimund-schluessler!

Good on using the existing style – not only for consistency reasons with apps which didnt adopt it yet, but also cause that loading icon without full circle is not core Material Design, but a community icon from materialdesignicons.com vs being from https://material.io/icons

How you now fixed it (and how it looked like) looks very nice, and is also used by lots of other platforms like e.g. Twitter or Twitch. :)

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 component Component discussion and/or suggestion design Design, UX, interface and interaction design enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Replace color prop of LoadingIcon with style prop Adjust style of new loading icon to old loading icon
4 participants