* Like #22851 * All other dropdown menu elements do not have such `hidden` class. * Actually the dropdown menu elements do not need it in HTML, so this PR removes it. * There is already `.ui.dropdown .menu { display: none; }`, so when loading the page, the menu is correctly hidden initially, no need to add any more CSS classes. * The Fomantic UI's `.hidden` class should still exist until there is no its checkbox/dropdown module anymore. The Fomantic UI JS code still addes `hidden` for `ui checkbox` and addes `transition hidden` for `ui menu` at the moment. * This PR also cleans the legacy inline `style`, which is quite hacky and no need anymore. All these dropdown menus work well. I have tested these 5 places: * The code search from User Profile * The issue sidebar to lock issue * The repo search form * The repo setting page: branch list * The repo setting page: merge option list Screenshot: ![image](https://user-images.githubusercontent.com/2114189/218534515-e7dfe291-6765-4e0b-833c-b74f17e30117.png)tags/v1.19.0-rc0
<div class="ui dropdown selection tooltip{{if .CodeIndexerUnavailable}} disabled{{end}}" data-content="{{.locale.Tr "explore.search.type.tooltip"}}"> | <div class="ui dropdown selection tooltip{{if .CodeIndexerUnavailable}} disabled{{end}}" data-content="{{.locale.Tr "explore.search.type.tooltip"}}"> | ||||
<input name="t" type="hidden" value="{{.queryType}}"{{if .CodeIndexerUnavailable}} disabled{{end}}>{{svg "octicon-triangle-down" 14 "dropdown icon"}} | <input name="t" type="hidden" value="{{.queryType}}"{{if .CodeIndexerUnavailable}} disabled{{end}}>{{svg "octicon-triangle-down" 14 "dropdown icon"}} | ||||
<div class="text">{{.locale.Tr (printf "explore.search.%s" (or .queryType "fuzzy"))}}</div> | <div class="text">{{.locale.Tr (printf "explore.search.%s" (or .queryType "fuzzy"))}}</div> | ||||
<div class="menu transition hidden" tabindex="-1" style="display: block !important;"> | |||||
<div class="menu"> | |||||
<div class="item tooltip" data-value="" data-content="{{.locale.Tr "explore.search.fuzzy.tooltip"}}">{{.locale.Tr "explore.search.fuzzy"}}</div> | <div class="item tooltip" data-value="" data-content="{{.locale.Tr "explore.search.fuzzy.tooltip"}}">{{.locale.Tr "explore.search.fuzzy"}}</div> | ||||
<div class="item tooltip" data-value="match" data-content="{{.locale.Tr "explore.search.match.tooltip"}}">{{.locale.Tr "explore.search.match"}}</div> | <div class="item tooltip" data-value="match" data-content="{{.locale.Tr "explore.search.match.tooltip"}}">{{.locale.Tr "explore.search.match"}}</div> | ||||
</div> | </div> |
<div class="default text"> </div> | <div class="default text"> </div> | ||||
<div class="menu transition hidden" tabindex="-1" style="display: block !important;"> | |||||
<div class="menu"> | |||||
{{range .LockReasons}} | {{range .LockReasons}} | ||||
<div class="item" data-value="{{.}}">{{.}}</div> | <div class="item" data-value="{{.}}">{{.}}</div> | ||||
{{end}} | {{end}} |
<div class="ui dropdown selection tooltip{{if .CodeIndexerUnavailable}} disabled{{end}}" data-content="{{.locale.Tr "repo.search.type.tooltip"}}"> | <div class="ui dropdown selection tooltip{{if .CodeIndexerUnavailable}} disabled{{end}}" data-content="{{.locale.Tr "repo.search.type.tooltip"}}"> | ||||
<input name="t" type="hidden"{{if .CodeIndexerUnavailable}} disabled{{end}} value="{{.queryType}}">{{svg "octicon-triangle-down" 14 "dropdown icon"}} | <input name="t" type="hidden"{{if .CodeIndexerUnavailable}} disabled{{end}} value="{{.queryType}}">{{svg "octicon-triangle-down" 14 "dropdown icon"}} | ||||
<div class="text">{{.locale.Tr (printf "repo.search.%s" (or .queryType "fuzzy"))}}</div> | <div class="text">{{.locale.Tr (printf "repo.search.%s" (or .queryType "fuzzy"))}}</div> | ||||
<div class="menu transition hidden" tabindex="-1" style="display: block !important;"> | |||||
<div class="menu"> | |||||
<div class="item tooltip" data-value="" data-content="{{.locale.Tr "repo.search.fuzzy.tooltip"}}">{{.locale.Tr "repo.search.fuzzy"}}</div> | <div class="item tooltip" data-value="" data-content="{{.locale.Tr "repo.search.fuzzy.tooltip"}}">{{.locale.Tr "repo.search.fuzzy"}}</div> | ||||
<div class="item tooltip" data-value="match" data-content="{{.locale.Tr "repo.search.match.tooltip"}}">{{.locale.Tr "repo.search.match"}}</div> | <div class="item tooltip" data-value="match" data-content="{{.locale.Tr "repo.search.match.tooltip"}}">{{.locale.Tr "repo.search.match"}}</div> | ||||
</div> | </div> |
{{end}} | {{end}} | ||||
</select>{{svg "octicon-triangle-down" 14 "dropdown icon"}} | </select>{{svg "octicon-triangle-down" 14 "dropdown icon"}} | ||||
<div class="default text">{{.Repository.DefaultBranch}}</div> | <div class="default text">{{.Repository.DefaultBranch}}</div> | ||||
<div class="menu transition hidden" tabindex="-1" style="display: block !important;"> | |||||
<div class="menu"> | |||||
{{range .Branches}} | {{range .Branches}} | ||||
<div class="item" data-value="{{.}}">{{.}}</div> | <div class="item" data-value="{{.}}">{{.}}</div> | ||||
{{end}} | {{end}} |
{{.locale.Tr "repo.pulls.squash_merge_pull_request"}} | {{.locale.Tr "repo.pulls.squash_merge_pull_request"}} | ||||
{{end}} | {{end}} | ||||
</div> | </div> | ||||
<div class="menu transition hidden" tabindex="-1" style="display: block !important;"> | |||||
<div class="menu"> | |||||
<div class="item" data-value="merge">{{.locale.Tr "repo.pulls.merge_pull_request"}}</div> | <div class="item" data-value="merge">{{.locale.Tr "repo.pulls.merge_pull_request"}}</div> | ||||
<div class="item" data-value="rebase">{{.locale.Tr "repo.pulls.rebase_merge_pull_request"}}</div> | <div class="item" data-value="rebase">{{.locale.Tr "repo.pulls.rebase_merge_pull_request"}}</div> | ||||
<div class="item" data-value="rebase-merge">{{.locale.Tr "repo.pulls.rebase_merge_commit_pull_request"}}</div> | <div class="item" data-value="rebase-merge">{{.locale.Tr "repo.pulls.rebase_merge_commit_pull_request"}}</div> |