diff options
| author | wxiaoguang <wxiaoguang@gmail.com> | 2023-03-01 10:22:14 +0800 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2023-03-01 10:22:14 +0800 |
| commit | 7a5af25592003ddc3017fcd7b822a3e02fc40ef6 (patch) | |
| tree | 49fd2f094bdbbe7b4a6d79eaafeac3de72e312ed /templates/user | |
| parent | 3e426bba78dbdd3e1369dd929de4ef7186f3d630 (diff) | |
| download | gitea-7a5af25592003ddc3017fcd7b822a3e02fc40ef6.tar.gz gitea-7a5af25592003ddc3017fcd7b822a3e02fc40ef6.zip | |
Fix incorrect checkbox behaviors in the dashboard repolist's filter (#23147)
Co-author: yp05327 , this PR is based on yp05327's #22813.
The problems of the old DashboardRepoList / repolist.tmpl:
* It mixes many different frameworks together
* It "just works", bug on bug
* It uses many anti-pattern of Vue
This PR:
* Fix bugs and close #22800
* Decouple the "checkbox" elements from Fomantic UI (only use CSS
styles)
* Simplify the HTML layout
* Simplify JS logic
* Make it easier to refactor the DashboardRepoList into a pure Vue
component in the future.
### Screenshots
#### Default
#### Click "Archived" to make it checked
#### Click "Archived" to make it intermediate
#### Click "Archived" to make it unchecked
---------
Co-authored-by: yp05327 <576951401@qq.com>
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
Diffstat (limited to 'templates/user')
| -rw-r--r-- | templates/user/dashboard/repolist.tmpl | 82 |
1 files changed, 32 insertions, 50 deletions
diff --git a/templates/user/dashboard/repolist.tmpl b/templates/user/dashboard/repolist.tmpl index 22af578fc3..97234176bd 100644 --- a/templates/user/dashboard/repolist.tmpl +++ b/templates/user/dashboard/repolist.tmpl @@ -46,56 +46,38 @@ <div class="ui dropdown icon button" title="{{.locale.Tr "home.filter"}}"> <i class="icon gt-df gt-ac gt-jc gt-m-0">{{svg "octicon-filter" 16}}</i> <div class="menu"> - <div class="item"> - <a @click="toggleArchivedFilter()"> - <div class="ui checkbox" id="archivedFilterCheckbox" title="{{.locale.Tr "home.show_both_archived_unarchived"}}" v-if="archivedFilter === 'both'"> - <input type="checkbox"> - <label> - {{svg "octicon-archive" 16 "gt-mr-2"}} - {{.locale.Tr "home.show_archived"}} - </label> - </div> - <div class="ui checkbox" id="archivedFilterCheckbox" title="{{.locale.Tr "home.show_only_unarchived"}}" v-if="archivedFilter === 'unarchived'"> - <input type="checkbox"> - <label> - {{svg "octicon-archive" 16 "gt-mr-2"}} - {{.locale.Tr "home.show_archived"}} - </label> - </div> - <div class="ui checkbox" id="archivedFilterCheckbox" title="{{.locale.Tr "home.show_only_archived"}}" v-if="archivedFilter === 'archived'"> - <input type="checkbox"> - <label> - {{svg "octicon-archive" 16 "gt-mr-2"}} - {{.locale.Tr "home.show_archived"}} - </label> - </div> - </a> - </div> - <div class="item"> - <a @click="togglePrivateFilter()"> - <div class="ui checkbox" id="privateFilterCheckbox" title="{{.locale.Tr "home.show_both_private_public"}}" v-if="privateFilter === 'both'"> - <input type="checkbox"> - <label> - {{svg "octicon-lock" 16 "gt-mr-2"}} - {{.locale.Tr "home.show_private"}} - </label> - </div> - <div class="ui checkbox" id="privateFilterCheckbox" title="{{.locale.Tr "home.show_only_public"}}" v-if="privateFilter === 'public'"> - <input type="checkbox"> - <label> - {{svg "octicon-lock" 16 "gt-mr-2"}} - {{.locale.Tr "home.show_private"}} - </label> - </div> - <div class="ui checkbox" id="privateFilterCheckbox" title="{{.locale.Tr "home.show_only_private"}}" v-if="privateFilter === 'private'"> - <input type="checkbox"> - <label> - {{svg "octicon-lock" 16 "gt-mr-2"}} - {{.locale.Tr "home.show_private"}} - </label> - </div> - </a> - </div> + <a class="item" @click="toggleArchivedFilter()"> + <div class="ui checkbox" + ref="checkboxArchivedFilter" + data-title-both="{{.locale.Tr "home.show_both_archived_unarchived"}}" + data-title-unarchived="{{.locale.Tr "home.show_only_unarchived"}}" + data-title-archived="{{.locale.Tr "home.show_only_archived"}}" + :title="checkboxArchivedFilterTitle" + > + <!--the "hidden" is necessary to make the checkbox work without Fomantic UI js, + otherwise if the "input" handles click event for intermediate status, it breaks the internal state--> + <input type="checkbox" class="hidden" v-bind.prop="checkboxArchivedFilterProps"> + <label> + {{svg "octicon-archive" 16 "gt-mr-2"}} + {{.locale.Tr "home.show_archived"}} + </label> + </div> + </a> + <a class="item" @click="togglePrivateFilter()"> + <div class="ui checkbox" + ref="checkboxPrivateFilter" + data-title-both="{{.locale.Tr "home.show_both_private_public"}}" + data-title-public="{{.locale.Tr "home.show_only_public"}}" + data-title-private="{{.locale.Tr "home.show_only_private"}}" + :title="checkboxPrivateFilterTitle" + > + <input type="checkbox" class="hidden" v-bind.prop="checkboxPrivateFilterProps"> + <label> + {{svg "octicon-lock" 16 "gt-mr-2"}} + {{.locale.Tr "home.show_private"}} + </label> + </div> + </a> </div> </div> </div> |