diff options
| author | wxiaoguang <wxiaoguang@gmail.com> | 2023-03-26 13:31:26 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2023-03-26 13:31:26 +0200 |
| commit | 12fff36d057998fe553decdc81c881d3d0e70274 (patch) | |
| tree | 9c2255c96477680a48a26bb88f39f5943d075051 /templates/repo/home.tmpl | |
| parent | Allow new file and edit file preview if it has editable extension (#23624) (diff) | |
| download | forgejo-12fff36d057998fe553decdc81c881d3d0e70274.tar.xz forgejo-12fff36d057998fe553decdc81c881d3d0e70274.zip | |
Fine tune more downdrop settings, use SVG for labels, improve Repo Topic Edit form (#23626)
Although it seems that some different purposes are mixed in this PR,
however, they are all related, and can be tested together, so I put them
together to save everyone's time.
Diff: `+79 −84`, everything becomes much better.
### Improve the dropdown settings.
Move all fomantic-init related code into our `fomantic.js`
Fine-tune some dropdown global settings, see the comments.
Also help to fix the first problem in #23625 , cc: @yp05327
The "language" menu has been simplified, and it works with small-height
window better.
### Use SVG instead of `<i class="delete icon">`
It's also done by `$.fn.dropdown.settings.templates.label` , cc:
@silverwind
### Remove incorrect `tabable` CSS class
It doesn't have CSS styles, and it was only in Vue. So it's totally
unnecessary, remove it by the way.
### Improve the Repo Topic Edit form
* Simplify the code
* Add a "Cancel" button
* Align elements
Before:
<details>
</details>
After:
Diffstat (limited to 'templates/repo/home.tmpl')
| -rw-r--r-- | templates/repo/home.tmpl | 35 |
1 files changed, 15 insertions, 20 deletions
diff --git a/templates/repo/home.tmpl b/templates/repo/home.tmpl index f31a38fc5f..e544b7aab5 100644 --- a/templates/repo/home.tmpl +++ b/templates/repo/home.tmpl @@ -28,34 +28,29 @@ </div> {{end}} </div> - <div class="gt-mt-3" id="repo-topics"> - {{range .Topics}}<a class="ui repo-topic large label topic" href="{{AppSubUrl}}/explore/repos?q={{.Name}}&topic=1">{{.Name}}</a>{{end}} - {{if and .Permission.IsAdmin (not .Repository.IsArchived)}}<a id="manage_topic" class="muted">{{.locale.Tr "repo.topic.manage_topics"}}</a>{{end}} + <div class="gt-df gt-ac gt-fw gt-mt-3" id="repo-topics"> + {{range .Topics}}<a class="ui repo-topic large label topic" href="{{AppSubUrl}}/explore/repos?q={{.Name}}&topic=1">{{.Name}}</a>{{end}} + {{if and .Permission.IsAdmin (not .Repository.IsArchived)}}<button id="manage_topic" class="ui button tiny tertiary gt-ml-2">{{.locale.Tr "repo.topic.manage_topics"}}</button>{{end}} </div> {{end}} {{if and .Permission.IsAdmin (not .Repository.IsArchived)}} - <div class="ui repo-topic-edit grid form gt-hidden" id="topic_edit"> - <div class="fourteen wide column"> - <div class="field"> - <div class="ui fluid multiple search selection dropdown"> - <input type="hidden" name="topics" value="{{range $i, $v := .Topics}}{{.Name}}{{if lt (Add $i 1) (len $.Topics)}},{{end}}{{end}}"> - {{range .Topics}} - <div class="ui small label topic transition visible" data-value="{{.Name}}" style="display: inline-block !important; cursor: default;">{{.Name}}{{svg "octicon-x" 16 "delete icon gt-ml-3 gt-mt-1"}}</div> - {{end}} - <div class="text"></div> - </div> + <div class="ui form gt-hidden gt-df gt-mt-4" id="topic_edit"> + <div class="field gt-f1 gt-mr-3"> + <div class="ui fluid multiple search selection dropdown" data-text-count-prompt="{{.locale.Tr "repo.topic.count_prompt"}}" data-text-format-prompt="{{.locale.Tr "repo.topic.format_prompt"}}"> + <input type="hidden" name="topics" value="{{range $i, $v := .Topics}}{{.Name}}{{if lt (Add $i 1) (len $.Topics)}},{{end}}{{end}}"> + {{range .Topics}} + {{/* keey the same layout as Fomantic UI generated labels */}} + <a class="ui label transition visible gt-cursor-default" data-value="{{.Name}}" style="display: inline-block !important;">{{.Name}}{{svg "octicon-x" 16 "delete icon"}}</a> + {{end}} + <div class="text"></div> </div> </div> - <div class="two wide column"> - <a class="ui button primary" role="button" tabindex="0" id="save_topic" - data-link="{{.RepoLink}}/topics">{{.locale.Tr "repo.topic.done"}}</a> + <div> + <button class="ui basic button secondary" id="cancel_topic_edit">{{.locale.Tr "cancel"}}</button> + <button class="ui primary button" id="save_topic" data-link="{{.RepoLink}}/topics">{{.locale.Tr "save"}}</button> </div> </div> {{end}} - <div class="gt-hidden" id="validate_prompt"> - <span id="count_prompt">{{.locale.Tr "repo.topic.count_prompt"}}</span> - <span id="format_prompt">{{.locale.Tr "repo.topic.format_prompt"}}</span> - </div> {{if .Repository.IsArchived}} <div class="ui warning message"> {{.locale.Tr "repo.archive.title"}} |