[UI] Fix misalligned icons

[earl-warren]

Fixes: https://codeberg.org/forgejo/forgejo/pulls/823

[wxiaoguang]

Keeping adding "gt-df gt-ac" is not the right approach. If you search <i class="icon icon-octicon"> , there are a lot.

So, I do not think it's urgent to introduce this patch, I will propose a complete fix for SVG alignment.

[silverwind]

Keeping adding "gt-df gt-ac" is not the right approach. If you search <i class="icon icon-octicon"> , there are a lot.

So, I do not think it's urgent to introduce this patch, I will propose a complete fix for SVG alignment.

I'm okay with it. As I said earlier, SVG vertical centering with text has no univeral fix that works for every font and icon size.

[wxiaoguang]

SVG vertical centering with text has no univeral fix that works for every font and icon size.

I think we can introduce a helper CSS class like this:

<button class="with-flex-icon">
   <svg ...>
   text ...
   <svg ...>
   text
   <svg ...>
</button>

Then let the first "svg" get margin-right, the last "svg" get "margin-left", inside "svg" gets margin-left&margin-right.

And we need to remove all "icon icon-oction" from code, it's a no-op IMO (IIRC the fomantic icon module had been removed)

[silverwind]

I think we can introduce a helper CSS class like this:

I don't mind the explicit gt-df gt-ac so much, they are true to CSS so to say and their meaning is immediately clear, which is not the case with a with-flex-icon that one has to first lookup in the CSS for what magic it does.

And we need to remove all "icon icon-oction" from code, it's a no-op IMO.

Agree, <i> wrappers are unnecessary, except for the cases where Fomantic has explicit selectors for it, which it does for i.icon in some cases.

[wxiaoguang]

I think we can introduce a helper CSS class like this:

I don't mind the explicit gt-df gt-ac so much, they are true to CSS so to say and their meaning is immediately clear, which is not the case with a with-flex-icon that one has to first lookup in the CSS for what magic it does.

with-flex-icon is just an example. For detailed examples:

<button class="ui button gt-df gt-ac">
    {{svg "name"}}
    <span class="gt-ml-2">title</span>
</button>

or

<button class="ui button gt-df gt-ac">{{svg "name"}}<span class="gt-ml-2">title</span></button>

VS

<button class="ui button flex-icon">{{svg "name"} title</button>

I think the second one is better, and we can simply show it in the devtest page to let developers copy and reuse the code.

And one more thing, there are still a lot of dropdowns, some of them still have problem with the arrow icon.

[silverwind]

I do believe this is not a complete fix for alle the messages that can appear in that box:

@earl-warren can you give the other messages the same treatment?

[wxiaoguang]

I do believe this is not a complete fix for alle the messages that can appear in that box:

That's what I said "there are a lot" ..... I believe this problem needs a framework level support.

[silverwind]

I don't agree with introducing magical classes, they will hurt in the long run once requirements get more complex than "a button with an icon", just use the simple CSS helpers in these cases for now please.

[wxiaoguang]

Sorry I don't understand the point"magical classes". If such design is called "magical", then every modern framework is full of magical classes. Are they all wrong?

[silverwind]

It depends, common classes can help when the use case can be clearly defined, but one must not make it excessive (like Fomantic). I do see a possibility of having a text-with-icons class helper, equivalent to gt-df gt-ac gt-fw gt-gap-2.

[wxiaoguang]

What do you think about: Use flex to align SVG and text #25163 ?

[earl-warren]

Closing in favor of #25163

[wxiaoguang]

Keeping adding "gt-df gt-ac" is not the right approach. If you search <i class="icon icon-octicon"> , there are a lot.

So, I do not think it's urgent to introduce this patch, I will propose a complete fix for SVG alignment.

The complete fix is ready: Use flex to align SVG and text #25163