diff options
| author | Hester Gong <hestergong@gmail.com> | 2023-04-29 18:44:52 +0800 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2023-04-29 06:44:52 -0400 |
| commit | 72e956b79a3b2e055bb5d4d5e20e88eaa2eeec96 (patch) | |
| tree | d77c553397b21112415d96a6709f5f6aa474faf1 /web_src | |
| parent | fc62992518158ca6ceb03a57db5b3767c8dc6fc5 (diff) | |
| download | gitea-72e956b79a3b2e055bb5d4d5e20e88eaa2eeec96.tar.gz gitea-72e956b79a3b2e055bb5d4d5e20e88eaa2eeec96.zip | |
Improve protected branch setting page (#24379)
Main changes:
1. Change html structure of protected branch page, use [`grouped
fields`](https://fomantic-ui.com/collections/form.html#grouped-fields)
instead of `fields` for better margin, and wrap `grouped fields` around
related `field`s, remove unnecessary `<div id="protection_box"
class="fields">` outer div
2. Changed some order of field to make them more categorized, used `ui
dividing header` for categorization and fine tune css.
Before:
<img width="1907" alt="Screen Shot 2023-04-27 at 14 56 19"
src="https://user-images.githubusercontent.com/17645053/234783731-bce8a7ce-dfc9-4d47-a3a8-b962ebea9467.png">
<img width="1849" alt="Screen Shot 2023-04-27 at 14 56 30"
src="https://user-images.githubusercontent.com/17645053/234783740-c47d314e-5e2d-4854-98fd-c88f85ef3584.png">
<img width="1872" alt="Screen Shot 2023-04-27 at 14 56 36"
src="https://user-images.githubusercontent.com/17645053/234783745-18e35a75-07e8-451d-b001-f9bcf16fcab5.png">
After:
https://user-images.githubusercontent.com/17645053/235114568-da010aad-7654-4410-ab8c-5d0fce7edadb.mov
3. Changed "Enable Merge Whitelist" to radio checkbox, and added "Enable
Merge" radio checkbox, which are exclusive
Before:
<img width="926" alt="Screen Shot 2023-04-28 at 13 08 29"
src="https://user-images.githubusercontent.com/17645053/235059233-75790f7a-e5ea-4e1c-82c6-509fef8b84b3.png">
After:
<img width="942" alt="Screen Shot 2023-04-28 at 13 09 28"
src="https://user-images.githubusercontent.com/17645053/235059367-852d1f61-8407-4126-8c79-315b9c1ffada.png">
4. Add a link to set default branch on branch list page (with reference
to github)
https://user-images.githubusercontent.com/17645053/234787404-61c1c7b6-aabf-429f-a109-5b690e4e0b5a.mov
5. Removed dead codes.
---------
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: Giteabot <teabot@gitea.io>
Diffstat (limited to 'web_src')
| -rw-r--r-- | web_src/css/base.css | 8 | ||||
| -rw-r--r-- | web_src/css/helpers.css | 2 | ||||
| -rw-r--r-- | web_src/css/repository.css | 33 | ||||
| -rw-r--r-- | web_src/js/features/repo-settings.js | 26 |
4 files changed, 19 insertions, 50 deletions
diff --git a/web_src/css/base.css b/web_src/css/base.css index c7ea0e47c8..95f83ef00a 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -2533,12 +2533,12 @@ a.ui.basic.label:hover { right: 0.78571429rem; top: 0; bottom: 0; - height: 30px; - margin-top: auto; - margin-bottom: auto; + display: flex; + align-items: center; } -/* https://github.com/go-gitea/gitea/issues/10210 */ +/* if a .top.attached.header is followed by a .segment, add some margin */ +.ui.segments ~ .ui.top.attached.header, .ui.attached.segment ~ .ui.top.attached.header { margin-top: 1rem; } diff --git a/web_src/css/helpers.css b/web_src/css/helpers.css index 22a284d43c..0b4b47f560 100644 --- a/web_src/css/helpers.css +++ b/web_src/css/helpers.css @@ -60,6 +60,8 @@ Gitea's private styles use `g-` prefix. text-overflow: ellipsis; } +.gt-max-width-24rem { max-width: 24rem !important; } + /* below class names match Tailwind CSS */ .gt-break-all { word-break: break-all !important; } .gt-content-center { align-content: center !important; } diff --git a/web_src/css/repository.css b/web_src/css/repository.css index 8b25775bb4..af2dd2be24 100644 --- a/web_src/css/repository.css +++ b/web_src/css/repository.css @@ -2012,35 +2012,10 @@ margin-top: -3px; } -.repository.settings.branches .protected-branches .selection.dropdown { - width: 300px; -} - -.repository.settings.branches .protected-branches .item { - border: 1px solid var(--color-secondary); - padding: 10px 15px; -} - -.repository.settings.branches .protected-branches .item:not(:last-child) { - border-bottom: 0; -} - -.repository.settings.branches .branch-protection .help { - margin-left: 26px; - padding-top: 0; -} - -.repository.settings.branches .branch-protection .fields { - margin-left: 20px; - display: block; -} - -.repository.settings.branches .branch-protection .whitelist { - margin-left: 26px; -} - -.repository.settings.branches .branch-protection .whitelist .dropdown img { - display: inline-block; +/* if the element is for a checkbox, then it should have a padding-left to align to the checkbox's text */ +.repository.settings.branches .branch-protection .ui.checkbox .help, +.repository.settings.branches .branch-protection .checkbox-sub-item { + padding-left: 26px; } .repository.settings.webhook .events .column { diff --git a/web_src/js/features/repo-settings.js b/web_src/js/features/repo-settings.js index 3d02a82bb6..9f094cd2d1 100644 --- a/web_src/js/features/repo-settings.js +++ b/web_src/js/features/repo-settings.js @@ -1,6 +1,5 @@ import $ from 'jquery'; import {createMonaco} from './codeeditor.js'; -import {initRepoCommonFilterSearchDropdown} from './repo-common.js'; const {appSubUrl, csrfToken} = window.config; @@ -73,20 +72,13 @@ export function initRepoSettingGitHook() { } export function initRepoSettingBranches() { - // Branches - if ($('.repository.settings.branches').length > 0) { - initRepoCommonFilterSearchDropdown('.protected-branches .dropdown'); - $('.enable-protection, .enable-whitelist, .enable-statuscheck').on('change', function () { - if (this.checked) { - $($(this).data('target')).removeClass('disabled'); - } else { - $($(this).data('target')).addClass('disabled'); - } - }); - $('.disable-whitelist').on('change', function () { - if (this.checked) { - $($(this).data('target')).addClass('disabled'); - } - }); - } + if (!$('.repository.settings.branches').length) return; + $('.toggle-target-enabled').on('change', function () { + const $target = $($(this).attr('data-target')); + $target.toggleClass('disabled', !this.checked); + }); + $('.toggle-target-disabled').on('change', function () { + const $target = $($(this).attr('data-target')); + if (this.checked) $target.addClass('disabled'); // only disable, do not auto enable + }); } |