Move helpers to be prefixed with gt-

[zeripath]

As discussed in #22847 the helpers in helpers.less need to have a separate prefix as they are causing conflicts with fomantic styles

This will allow us to have the .gt-hidden { display:none !important; } style that is needed to for the reverted PR.

Of note in doing this I have noticed that there was already a conflict with at least one chroma style which this PR now avoids.

I've also added in the gt-hidden style that matches the tailwind one and switched the code that needed it to use that.

Signed-off-by: Andrew Thornton art27@cantab.net

[delvh]

Why exactly gt- now?
I assume it stands for gitea-?

[yardenshoham]

Which classes should get this gt prefix? In #21711 I added the CSS classes attention-icon, attention-note, and attention-warning. In #21474 I added color-preview. Should I prefix these classes with gt-?

[wxiaoguang]

Why exactly gt- now? I assume it stands for gitea-?

Many CSS frameworks suggest two-letter prefixes. For example, tailwind: tw-.

The gitea- prefix would be too long if you read: class="gitea-df gitea-ac gitea-sb gitea-mx-0", a lot of gitea in eyes.

Which classes should get this gt prefix?

I think the answer at the moment is: only the CSS class names in helper.less file. So, just keep the refactoring clear and make it merged soon before other designed changes.

---

IMO, maybe in the end, the class names should be either:

• Legacy Fomantic UI: ui nav ... they should always start with .ui selector.
• Gitea's own helpers: gt-hidden
• Gitea's page styles: feature-name-..., for example: commit-list or issue-comment-title, etc
• Tailwind: tw-text-left

[delvh]

According to my automated command, the following instances appear not to be converted yet

Command:

clear && for i in {df,di,dif,dib,pr,ac,tc,tl,tdn,jc,js,je,sb,fc,f1,fw,vm,w-100,h-100,br-0,pointer-events-none,relative,hidden,mono,bold,word-break,ellipsis,full-screen-width,full-screen-height,rounded{,-top,-left,-bottom,-right},border-secondary{,-top,-bottom,-left,-right},no-transition,bg-{red,orange,yellow,olive,green,teal,blue,violet,purple,pink,brown,grey,gold},text-white,m{,l,r,t,b,x,y}-{0..5},p{,l,r,t,b,x,y}-{0..5},content-center,db-small,w-100-small,js-small} ; do echo $i; ag "class=.*[\" ]$i[ \"]" templates/ web_src/js/ ; done

Output:

df
templates/admin/process-row.tmpl
2:      <div class="df gt-ac">
hidden
templates/repo/issue/view_content/sidebar.tmpl
642:                                                                    <div class="menu transition hidden" tabindex="-1" style="display: block !important;">

templates/repo/settings/webhook/settings.tmpl
7:                              <input class="hidden" name="events" type="radio" value="push_only" {{if or $isNew .Webhook.PushOnly}}checked{{end}}>
13:                             <input class="hidden" name="events" type="radio" value="send_everything" {{if .Webhook.SendEverything}}checked{{end}}>
19:                             <input class="hidden" name="events" type="radio" value="choose_events" {{if .Webhook.ChooseEvents}}checked{{end}}>
34:                                     <input class="hidden" name="create" type="checkbox" tabindex="0" {{if .Webhook.Create}}checked{{end}}>
44:                                     <input class="hidden" name="delete" type="checkbox" tabindex="0" {{if .Webhook.Delete}}checked{{end}}>
54:                                     <input class="hidden" name="fork" type="checkbox" tabindex="0" {{if .Webhook.Fork}}checked{{end}}>
64:                                     <input class="hidden" name="push" type="checkbox" tabindex="0" {{if .Webhook.Push}}checked{{end}}>
74:                                     <input class="hidden" name="repository" type="checkbox" tabindex="0" {{if .Webhook.Repository}}checked{{end}}>
84:                                     <input class="hidden" name="release" type="checkbox" tabindex="0" {{if .Webhook.Release}}checked{{end}}>
94:                                     <input class="hidden" name="package" type="checkbox" tabindex="0" {{if .Webhook.Package}}checked{{end}}>
105:                                    <input class="hidden" name="wiki" type="checkbox" tabindex="0" {{if .Webhook.Wiki}}checked{{end}}>
120:                                    <input class="hidden" name="issues" type="checkbox" tabindex="0" {{if .Webhook.Issues}}checked{{end}}>
130:                                    <input class="hidden" name="issue_assign" type="checkbox" tabindex="0" {{if .Webhook.IssueAssign}}checked{{end}}>
140:                                    <input class="hidden" name="issue_label" type="checkbox" tabindex="0" {{if .Webhook.IssueLabel}}checked{{end}}>
150:                                    <input class="hidden" name="issue_milestone" type="checkbox" tabindex="0" {{if .Webhook.IssueMilestone}}checked{{end}}>
160:                                    <input class="hidden" name="issue_comment" type="checkbox" tabindex="0" {{if .Webhook.IssueComment}}checked{{end}}>
175:                                    <input class="hidden" name="pull_request" type="checkbox" tabindex="0" {{if .Webhook.PullRequest}}checked{{end}}>
185:                                    <input class="hidden" name="pull_request_assign" type="checkbox" tabindex="0" {{if .Webhook.PullRequestAssign}}checked{{end}}>
195:                                    <input class="hidden" name="pull_request_label" type="checkbox" tabindex="0" {{if .Webhook.PullRequestLabel}}checked{{end}}>
205:                                    <input class="hidden" name="pull_request_milestone" type="checkbox" tabindex="0" {{if .Webhook.PullRequestMilestone}}checked{{end}}>
215:                                    <input class="hidden" name="pull_request_comment" type="checkbox" tabindex="0" {{if .Webhook.PullRequestComment}}checked{{end}}>
225:                                    <input class="hidden" name="pull_request_review" type="checkbox" tabindex="0" {{if .Webhook.PullRequestReview}}checked{{end}}>
235:                                    <input class="hidden" name="pull_request_sync" type="checkbox" tabindex="0" {{if .Webhook.PullRequestSync}}checked{{end}}>
264:            <input class="hidden" name="active" type="checkbox" tabindex="0" {{if or $isNew .Webhook.IsActive}}checked{{end}}>

templates/repo/settings/deploy_keys.tmpl
34:                                                     <input id="ssh-key-is-writable" name="is_writable" class="hidden" type="checkbox" value="1">

templates/repo/settings/options.tmpl
284:                                                    <input class="hidden enable-system-radio" tabindex="0" name="enable_external_wiki" type="radio" value="false" data-target="#external_wiki_box" {{if not (.Repository.UnitEnabled $.Context $.UnitTypeExternalWiki)}}checked{{end}}/>
294:                                                    <input class="hidden enable-system-radio" tabindex="0" name="enable_external_wiki" type="radio" value="true" data-target="#external_wiki_box" {{if .Repository.UnitEnabled $.Context $.UnitTypeExternalWiki}}checked{{end}}/>
326:                                                    <input class="hidden enable-system-radio" tabindex="0" name="enable_external_tracker" type="radio" value="false" data-context="#internal_issue_box" data-target="#external_issue_box" {{if not (.Repository.UnitEnabled $.Context $.UnitTypeExternalTracker)}}checked{{end}}/>
362:                                                    <input class="hidden enable-system-radio" tabindex="0" name="enable_external_tracker" type="radio" value="true" data-context="#internal_issue_box" data-target="#external_issue_box" {{if .Repository.UnitEnabled $.Context $.UnitTypeExternalTracker}}checked{{end}}/>
559:                                                            <div class="menu transition hidden" tabindex="-1" style="display: block !important;">

templates/repo/settings/branches.tmpl
32:                                                     <div class="menu transition hidden" tabindex="-1" style="display: block !important;">

templates/repo/create.tmpl
80:                                                             <input class="hidden" name="git_content" type="checkbox" tabindex="0" {{if .git_content}}checked{{end}}>
84:                                                             <input class="hidden" name="git_hooks" type="checkbox" tabindex="0" {{if .git_hooks}}checked{{end}}>
91:                                                             <input class="hidden" name="webhooks" type="checkbox" tabindex="0" {{if .webhooks}}checked{{end}}>
95:                                                             <input class="hidden" name="topics" type="checkbox" tabindex="0" {{if .topics}}checked{{end}}>
102:                                                            <input class="hidden" name="avatar" type="checkbox" tabindex="0" {{if .avatar}}checked{{end}}>
106:                                                            <input class="hidden" name="labels" type="checkbox" tabindex="0" {{if .labels}}checked{{end}}>
172:                                                            <input class="hidden" name="auto_init" type="checkbox" tabindex="0" {{if .auto_init}}checked{{end}}>
207:                                                            <input class="hidden" name="template" type="checkbox" tabindex="0">

templates/repo/search.tmpl
12:                                             <div class="menu transition hidden" tabindex="-1" style="display: block !important;">

templates/repo/editor/commit_form.tmpl
19:                             <input name="signoff" type="checkbox" tabindex="0" class="hidden">

templates/repo/diff/box.tmpl
83:                                                                     <a role="button" class="fold-file muted gt-mr-2" {{if not $isExpandable}}style="visibility: hidden"{{end}}>

templates/org/settings/options.tmpl
44:                                                                     <input class="hidden enable-system-radio" tabindex="0" name="visibility" type="radio" value="0" {{if eq .CurrentVisibility 0}}checked{{end}}/>
50:                                                                     <input class="hidden enable-system-radio" tabindex="0" name="visibility" type="radio" value="1" {{if eq .CurrentVisibility 1}}checked{{end}}/>
56:                                                                     <input class="hidden enable-system-radio" tabindex="0" name="visibility" type="radio" value="2" {{if eq .CurrentVisibility 2}}checked{{end}}/>
66:                                                                     <input class="hidden" type="checkbox" name="repo_admin_change_team_access" {{if .RepoAdminChangeTeamAccess}}checked{{end}}/>

templates/org/create.tmpl
22:                                                             <input class="hidden enable-system-radio" tabindex="0" name="visibility" type="radio" value="0" {{if .DefaultOrgVisibilityMode.IsPublic}}checked{{end}}/>
26:                                                             <input class="hidden enable-system-radio" tabindex="0" name="visibility" type="radio" value="1" {{if .DefaultOrgVisibilityMode.IsLimited}}checked{{end}}/>
30:                                                             <input class="hidden enable-system-radio" tabindex="0" name="visibility" type="radio" value="2" {{if .DefaultOrgVisibilityMode.IsPrivate}}checked{{end}}/>
40:                                                             <input class="hidden" type="checkbox" name="repo_admin_change_team_access" checked/>

templates/org/team/new.tmpl
102:                                                                                                                    <input type="radio" class="hidden" name="unit_{{$unit.Type.Value}}" value="0"{{if or ($unit.Type.UnitGlobalDisabled) (eq ($.Team.UnitAccessMode $.Context $unit.Type) 0)}} checked{{end}} title="{{$.locale.Tr "org.teams.none_access"}}">
107:                                                                                                                    <input type="radio" class="hidden" name="unit_{{$unit.Type.Value}}" value="1"{{if or (eq $.Team.ID 0) (eq ($.Team.UnitAccessMode $.Context $unit.Type) 1)}} checked{{end}} {{if $unit.Type.UnitGlobalDisabled}}disabled{{end}} title="{{$.locale.Tr "org.teams.read_access"}}">
112:                                                                                                                    <input type="radio" class="hidden" name="unit_{{$unit.Type.Value}}" value="2"{{if (eq ($.Team.UnitAccessMode $.Context $unit.Type) 2)}} checked{{end}} {{if $unit.Type.UnitGlobalDisabled}}disabled{{end}} title="{{$.locale.Tr "org.teams.write_access"}}">
124:                                                                                            <input type="checkbox" class="hidden" name="unit_{{$unit.Type.Value}}" value="1"{{if or (eq $.Team.ID 0) (eq ($.Team.UnitAccessMode $.Context $unit.Type) 1)}} checked{{end}} {{if $unit.Type.UnitGlobalDisabled}}disabled{{end}}>

templates/code/searchform.tmpl
7:                      <div class="menu transition hidden" tabindex="-1" style="display: block !important;">

web_src/js/features/aria.md
30:  <div class="menu transition hidden" tabindex="-1">

[delvh]

We have a camel-case style class?

[wxiaoguang]

It came from 2017, which is another example of misuse of Fomantic UI at that time IMO

[delvh]

Apart from that, LGTM.

[wxiaoguang]

According to my automated command, the following instances appear not to be converted yet

Oh, do not touch the hidden. They are for Fomantic UI before (the dirty part). And, these hidden for checkbox will be removed by:

• Remove Fomantic-UI's .hidden CSS class for checkbox elements #22851

The only one worth to be fixed is that <div class="df gt-ac">:

df
templates/admin/process-row.tmpl
2:      <div class="df gt-ac">

[zeripath]

make lgtm work