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

Refactor icons: harmonize contextually, use filled status icons #4584

Merged
merged 49 commits into from
Dec 30, 2024

Conversation

pat-s
Copy link
Contributor

@pat-s pat-s commented Dec 18, 2024

Follow-up to #4414 which started to use the outline icon-set for the pipeline status icons.

  • Harmonized status icons to use circleFilled icons
  • Harmonized other contextual sub-groups to use outline icons
  • Squash alert/error/warning icons to a single icons and distinguish by color

@pat-s pat-s added ui frontend related build_pr_images If set, the CI will build images for this PR and push to Dockerhub labels Dec 18, 2024
@qwerty287

This comment was marked as off-topic.

@pat-s

This comment was marked as off-topic.

@qwerty287

This comment was marked as off-topic.

@pat-s

This comment was marked as off-topic.

@qwerty287

This comment was marked as off-topic.

@qwerty287 qwerty287 marked this pull request as ready for review December 18, 2024 19:31
@qwerty287 qwerty287 marked this pull request as draft December 18, 2024 19:32
@pat-s

This comment was marked as off-topic.

@pat-s pat-s force-pushed the feat/outline-icons branch from 59fc1e9 to f76b94b Compare December 18, 2024 19:49
@pat-s pat-s force-pushed the feat/outline-icons branch from f76b94b to e4bbceb Compare December 18, 2024 20:01
@pat-s pat-s marked this pull request as ready for review December 18, 2024 20:07
@xoxys
Copy link
Member

xoxys commented Dec 19, 2024

This is another all or nothing discussion:

  • all icons should be used from the same library
  • all semantically related icons (e.g. all pipeline status icons) should use the same style
  • NOT all used icons need to use the same style (just because pipeline status icons are outlined doesn't mean everything need to be outlined)

To me, there is no need to use ALL outlined icons whenever possible. But this time I'll leave the decision to someone else 😃 Personally, I don't like the octagon icons.

@xoxys
Copy link
Member

xoxys commented Dec 20, 2024

@pat-s what do you think about alert-circle-outline for the linter tab instead of the octagon icons?

@pat-s
Copy link
Contributor Author

pat-s commented Dec 20, 2024

Fine with me. Overall I am wondering if there should be different icons for error and warning.

@xoxys
Copy link
Member

xoxys commented Dec 20, 2024

If we stick with different colors, I don't think it's necessary. Do you have an idea for different icons?

@pat-s
Copy link
Contributor Author

pat-s commented Dec 20, 2024

Maybe mdi:stop-circle-outline in red for errors and mdi:alert-circle-outline in yellow for warnings

@pat-s
Copy link
Contributor Author

pat-s commented Dec 27, 2024

Yeah it doesn't fit so well. I think my thought was wrong.

So now, h-8 w-8 paired with 1.3rem. Is that good for everyone?

@xoxys
Copy link
Member

xoxys commented Dec 27, 2024

While it might make sense to use w-8 h-8 instead of -9 how is this related to the default size of the icons? Changing them to 1.2rem will not make them fit with the default line height of 24px. Would just like to understand how to use the 8-point grid correctly.

@pat-s
Copy link
Contributor Author

pat-s commented Dec 28, 2024

Can we outsource this into a discussion/chat?

@pat-s pat-s requested a review from xoxys December 29, 2024 14:02
@xoxys
Copy link
Member

xoxys commented Dec 29, 2024

@pat-s I did the remaining cleanups:

  • remove duplicate icons with the same target but different name
  • harmonize pipeline log icons
    image
  • dont re-use the download icons for scroll/no-scroll and replace it with the eye icon variants

I hope it was ok to push to your branch. If not please feel free to revert. Please re-check, if you dont have anything to add we are good to go now.

@pat-s
Copy link
Contributor Author

pat-s commented Dec 29, 2024

Thanks cleaning up and all the feedback! Much appreciated.

@xoxys
Copy link
Member

xoxys commented Dec 30, 2024

Now we have merge conflicts again 😐

@pat-s pat-s merged commit c9b80cf into main Dec 30, 2024
7 checks passed
@pat-s pat-s deleted the feat/outline-icons branch December 30, 2024 09:51
@woodpecker-bot
Copy link
Collaborator

@xoxys
Copy link
Member

xoxys commented Dec 30, 2024

Finally 😁 thanks again!

@woodpecker-bot woodpecker-bot mentioned this pull request Dec 30, 2024
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
build_pr_images If set, the CI will build images for this PR and push to Dockerhub ui frontend related
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants