Add icons to all pipeline tabs

[xoxys]

I would like to add icons to all tabs in pipeline view (and later on also in other views). In my opinion it looks better and results in a consistent look, especially on mobile where tabs are displayed in vertically.

@woodpecker-ci/maintainers as this might be another controversial design decision, please vote on the initial post of this PR with 👍 and 👎

Desktop:

Mobile:

[pat-s]

I like the idea but don't like the icon choice in the screenshot too much.

Thanks for starting with a poll right away. It might be that we need a separate one for each icon 😅️

[pat-s]

Here are some possible alternatives up for discussion:

• Tasks: https://pictogrammers.com/library/mdi/icon/list-status/
• Warnings: https://pictogrammers.com/library/mdi/icon/alert-circle-outline/
• Config: https://pictogrammers.com/library/mdi/icon/cog-outline/
• Debug: https://pictogrammers.com/library/mdi/icon/bug-outline/

[xoxys]

Thanks for the feedback.

I had something in mind while choosing exactly these icons. I was looking for icons that somehow fit together semantically. I started with a stack of sheets aka workflows/tasks. A single sheet from the stack should symbolize a part of the config. Thats why I chose the paper sheet icons for the config (I definetly want to avoid using the gear as this is used for settings already) and the config parsing issues. The last icon for debugging was the closest I found that looks like "inspecting a sheet" (aka workflow/task). Last but not least all icons have a similar shape to avoid a too chaotic and distracting look.

Sure there might be "better" icons for each tab but I dont know if that should be the only criteria but Im also not a professional ui designer :)

Nevertheless Im not interested in months of discussions for single icons we have too much of them. It that is the outcome thats totally fine but then Ill leave this task to someone else :)

[pat-s]

I had something in mind while choosing exactly these icons. I was looking for icons that somehow fit together semantically.

OK, didn't know that :)

Let's see what others think!

m also not a professional ui designer :)

None of us is, so no worries. I guess most people just follow their gut feeling which might be more or less matching with others.

[xoxys]

OK, didn't know that :)

How could you :) Don't want to blame anyone. If you don't like the icons, that perfectly fine.

[qwerty287]

What about other tab usages? Repo, settings etc.? Can we add icons there as well for consistency or is there a reason why this should only be done for the pipeline view?

I'm fine with the icons except the warnings one which looks a bit odd as these are two parts not directly connected (the sheet and the exclamation mark).

[xoxys]

As written above just wanted to get a consensus first. But yes I planned to add icons to all tabs (if we can find an agreememt for particular icons)

[zc-devs]

Do you use the same icon for Errors tab as for Warnings?
There is no colors (yellow, red) in those icons now, right?

[pat-s]

@xoxys Just in case you want to continue here at some point: adding icons to all tabs in general is fine for me. While I don't like most of the icons per se, I would only have a hard veto for the warnings icon (due to already mentioned points).

[xoxys]

Yes I know. As it looks like you have a stronger opinion for the UI these days and want to be more involved, feel free to take over.

[pat-s]

Don't wanna take over 🙂️ Appreciate that others have opinions regarding UI and want to change something.
Stronger is relative. If we'd ask 100 people, we likely get 90 different UIs.

So far most people here agreed that the warnings icon should be changed, the others are accepted by all, even if (maybe) not preferred. 🙂️