Added workflow details tab

[Corepex]

Changes in this pull request

Resolves #157
Blocked by #237

[markus-moser]

• [Properties] Refresh data from server on reload #334 Also applies to this tab.
• The font and background colors of the place labels currently do not apply.
  
  @idaiv Could you please explain how this should be done in the new UI? Do we only have the color of the circle next to the label?

Other then that it LGTM 👍

[Corepex]

• @idaiv Could you please explain how this should be done in the new UI? Do we only have the color of the circle next to the label?

We get the circle color from the API. On my side it looks like the following:

The API also returns me a backgroundColor fontColor and a borderColor - should we really style the badge according to that? In the current design we only style the circle - that's why I implemented it that way

[idaiv]

Hi all @markus-moser and @Corepex!
On the design topic: some refinements are needed and we have discussed them with Chris - adding a border around the dot inside, bg color should be white.

About the API styling: Chris explained about these extra styling details being taken, however on the new design from one workflow badge to another the only difference is the dot color (and its border with 20% opacity of the same color). No font, bg or border color change. I would need to confirm that with Fasch and we will update you once again.

[fashxp]

this is what we can configure: color and show color inverted which was sometimes necessary to keep it readable and for more flexibility.

@markus-moser I think keeping the inverted option makes sense, right? or should we deprecate it?
@idaiv do we have some design possibilities to cover these two options?

[markus-moser]

@fashxp If we design it like now i would deprecate the "inverted" option. We used it in the past to achieve something like this:

So using the color as border color/font color instead of as background color. If we now only have the circle (and the 20% opacity border) it would be fine to just keep the "color" option. In that case the API should deliver only the color instead of the backgroundColor, fontColor and borderColor options.

[idaiv]

yep, I would say so too. One of the main points for the new UI is to reduce the visual overload and designing labels close to buttons looking design is not what we aim for.

In case we have to consider a bit more visibility and alternation of the labels - I would say we can work with the bg color. Fx Ant provides a couple of more variations where the change is in the bg color + font color but not as contrast and drastic as on the current UI. Here are examples (dont mind the missing dot, this is a default component):

I believe it might be helpful in some cases when there are a couple of labels pinned to the toolbar - to use one or the other option for quicker scanning. What do you think?

[markus-moser]

@idaiv We would need to find a way which either could be done with the "color" workflow place config option or with a combination of "color" and "inverted". We should not invent new options as this would get quite complex.

I like the visual background color, but there we would need to have a way of handling it with just a single color (so maybe with a x% opacity background for the given color or something similar). And also would this then be our new default option or should the "inverted" flag be interpreted as a switch between the current design in Figma and the new background color mode?

[sonarqubecloud]

Quality Gate passed

Issues
4 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

[idaiv]

Hi @markus-moser!
Yes, there can be an approach that is consistent and do not involve more complexity.

Original - dot color: X; border dot: X 30%
Inverted - dot color: X; border dot: X 30%; bg color: X 20%

Some examples with that rule applied:

(the whole frame is the toolbar bg for reference how it would look on top of it where they will be positioned).
And of course its up to the configurators to choose color shades that actually would be visible as we do not have predefined ones.
What do you think?

[markus-moser]

@idaiv I really like this approach - good job, very cool! 👍

[Corepex]

as discussed with @markus-moser we will create a separate issue for the styling topic

[idaiv]

@markus-moser oks, nicey!
The component "Workflow State" is already updated on Figma, FYI @Corepex :)
https://www.figma.com/design/kTxowT29eCHwNh5NspDGGu/Pimcore-Components?node-id=3675-255076&t=G2WAXV1K60buTXsv-4

[markus-moser]

Will create a new issue soon - this also needs some small changes in the backend API.

[markus-moser]

Follow-up regarding styling options see #345