Filter for default-branch selection

[zokkis]

Filter for default-branch selection (fixes #4751)

before:

after:

[wxiaoguang]

TBH, I am not a fan of filling these fine-tuning helpers everywhere.

Personally I have no motivation to approve .... but I won't block.

[zokkis]

Then what's the point of having helper-classes?
Or do you have another idea to Do it better?

[wxiaoguang]

Some opinions in my mind:

• What's the purpose of using CSS file and CSS classes? If the helpers should be used everywhere, then why there are CSS classes like ".my-button". Using one or two helpers to fine-tune something seems good, but using 5-7 helpers seems to be quite hacky IMO.
• Should it encourage to write reusable code? If the same helpers are written for more than one time, then why not introducing a clearly defined CSS class for it.

There is a long argument in the frontend development, some people really like using helpers as much as possible, but I really dislike abusing them.

[zokkis]

I see your point, but there are ups and downs to each approach.
Because its a vue-component I like the helper-classes more then normal css

[lunny]

There are still new classes has prefix gt- introduced. Could you replace them with tailwind?

[lunny]

And it's better to use plain javascript instead of jquery because we are removing jquery.

[silverwind]

I don't mind the old classes, it keeps the diff minimal and they will later be replaced in a find-replace action anyways. But if you can, use new classes because otherwise we might run into conflicts with the refactoring PRs.

jQuery removal in this PR is also not needed or wanted as it would better be done in a whole-file rewrite later.

[silverwind]

Tested it: Something is definitely off with the styling, the dropdown does not match the button in both width (it leaves empty space) and height:

Main branch looks ok:

Would suggest checking fomantic docs on how to do it correctly. I assume then the amount of extra classes needed will be minimal.

[zokkis]

Tested it: Something is definitely off with the styling, the dropdown does not match the button in both width (it leaves empty space) and height:

Main branch looks ok:

Would suggest checking fomantic docs on how to do it correctly. I assume then the amount of extra classes needed will be minimal.

The problem was the change to Tailwind and I still used the old classes
Now it should look like in my images

[silverwind]

Yes, looks better now. Two thing's I've noticed.

1. On page load, the dropdown momentarely is visible in small size, then stretches to full. Should be reproducible when doing uncached page reload.
2. On small viewport width like around 980px and below, the box does not stretch up to the button:

So I still think we must be using Fomantic UI wrongly here somehow.

[silverwind]

Maybe it could also use a searchable dropdown, e.g. search box directly in the element:

https://fomantic-ui.com/modules/dropdown.html#search-selection

PS: I don't think branch creation from that dropdown is really intuitive, so I would remove that.

[zokkis]

Yes, looks better now. Two thing's I've noticed.

1. On page load, the dropdown momentarely is visible in small size, then stretches to full. Should be reproducible when doing uncached page reload.

2. On small viewport width like around 980px and below, the box does not stretch up to the button:

So I still think we must be using Fomantic UI wrongly here somehow.

Its done, but the problem is, that the javascript for vue needs to load and for this there is dummy-html

[zokkis]

Maybe it could also use a searchable dropdown, e.g. search box directly in the element:

https://fomantic-ui.com/modules/dropdown.html#search-selection

PS: I don't think branch creation from that dropdown is really intuitive, so I would remove that.

The vue-component is also to select tags so a simple dropdown is not suiteable

[silverwind]

Yes, looks better now. Two thing's I've noticed.

1. On page load, the dropdown momentarely is visible in small size, then stretches to full. Should be reproducible when doing uncached page reload.

2. On small viewport width like around 980px and below, the box does not stretch up to the button:

So I still think we must be using Fomantic UI wrongly here somehow.

Its done, but the problem is, that the javascript for vue needs to load and for this there is dummy-html

Ah yes, we usually fix that by putting a placeholder with the same HTML/CSS so that when Vue kicks in, it renders the extact same visual output. It's a bit of a hack but works like that in a few places.

[silverwind]

Can we disable branch creation in that dropdown when in this place? I find it an odd place to create a branch, but I guess I won't block on it.

[silverwind]

Overall, it seems we are trying to shoehorn the branch dropdown into something it's not meant to be used for. I think just allowing the current dropdown to filter is easier and likely a 1-line change (unless we are missing CSS for this style of dropdown) to achieve the same:

https://fomantic-ui.com/modules/dropdown.html#search-selection

There is similar dropdown already on the commit graphs page, except it's multi-selection:

https://try.gitea.io/silverwind/symlink-test/graph

Generally I'm all for removing dependencies on fomantic components where possible so we can migrate off of it eventually, so maybe the current approach can be made to work, but it won't be easy as the dropdown was designed for a different use case.

[lunny]

Except the css/js framework problem. LGTM

[silverwind]

Not sure about these whitespace changes, but I like the "whitespace hidden" diff now 😆

[zokkis]

It uses now https://fomantic-ui.com/modules/dropdown.html#search-selection