Remove fomantic checkbox module #30162

silverwind · 2024-03-28T20:01:46Z

CSS is pretty slim already and the .ui.toggle.checkbox sliders on admin page also still work. The only necessary JS is the one that links input and label so that it can be toggled via label. All checkboxes except the markdown ones render at --checkbox-size: 16px now.

silverwind · 2024-03-28T20:05:07Z

WIP because I noticed this JS needs to be removed/updated:

web_src/js/features/repo-issue.js:291:  $checkbox.checkbox({
web_src/js/features/repo-issue.js:293:      const checked = $checkbox.checkbox('is checked');
web_src/js/features/repo-issue.js:296:      $checkbox.checkbox('set disabled');
web_src/js/features/repo-issue.js:308:        $checkbox.checkbox('set enabled');
web_src/js/features/admin/common.js:225:          $checkboxes.checkbox('check');
web_src/js/features/admin/common.js:228:          $checkboxes.checkbox('uncheck');
web_src/js/features/admin/common.js:231:          $checkboxes.checkbox('toggle');
web_src/js/features/admin/common.js:240:        if ($(this).checkbox('is checked')) {

Also, web_src/js/modules/fomantic/aria.md needs updates.

silverwind · 2024-03-28T21:06:32Z

Ready now.

delvh · 2024-03-28T22:45:04Z

web_src/js/features/admin/common.js

-          data.append('ids[]', this.getAttribute('data-id'));
+      for (const checkbox of checkboxes) {
+        if (checkbox.checked) {
+          data.append('ids[]', checkbox.closest('.ui.checkbox').getAttribute('data-id'));


Why did the selector change here from this to a parent element?

Selector is for .checkbox input because in the case above it's easier to work directly with input, but in this case the data-attribute is set on .checkbox. So I can optimize one case or the other.

web_src/js/features/repo-issue.js

web_src/js/modules/fomantic/checkbox.js

Co-authored-by: delvh <dev.lh@web.de>

web_src/js/features/repo-issue.js

CSS is pretty slim already and the `.ui.toggle.checkbox` sliders on admin page also still work. The only necessary JS is the one that links `input` and `label` so that it can be toggled via label. All checkboxes except the markdown ones render at `--checkbox-size: 16px` now. <img width="174" alt="Screenshot 2024-03-28 at 22 15 10" src="https://github.com/go-gitea/gitea/assets/115237/3455c1bb-166b-47e4-9847-2d20dd1f04db"> <img width="499" alt="Screenshot 2024-03-28 at 21 00 07" src="https://github.com/go-gitea/gitea/assets/115237/412be2b3-d5a0-478a-b17b-43e6bc12e8ce"> <img width="83" alt="Screenshot 2024-03-28 at 22 14 34" src="https://github.com/go-gitea/gitea/assets/115237/d8c89838-a420-4723-8c49-89405bb39474"> --------- Co-authored-by: delvh <dev.lh@web.de>

* upstream/main: Remove fomantic checkbox module (go-gitea#30162) Refactor topic Find functions and add more tests for pagination (go-gitea#30127) replace jquery-minicolors with coloris (go-gitea#30055) Add API for `Variables` (go-gitea#29520) Fix `DEFAULT_SHOW_FULL_NAME=false` has no effect in commit list and commit graph page (go-gitea#30096) Fix migration v292 (go-gitea#30153) Adjust VS Code debug filename match in .gitignore (go-gitea#30158) Prevent re-review and dismiss review actions on closed and merged PRs (go-gitea#30065) Render code tags in commit messages (go-gitea#30146) Bump `@github/relative-time-element` to v4.4.0 (go-gitea#30154) Migrate font-family to tailwind (go-gitea#30118) Move from `max( id )` to `max( index )` for latest commit statuses (go-gitea#30076) Remember login for a month by default (go-gitea#30150)

@silverwind

Backport #30162 by @silverwind CSS is pretty slim already and the `.ui.toggle.checkbox` sliders on admin page also still work. The only necessary JS is the one that links `input` and `label` so that it can be toggled via label. All checkboxes except the markdown ones render at `--checkbox-size: 16px` now. <img width="174" alt="Screenshot 2024-03-28 at 22 15 10" src="https://github.com/go-gitea/gitea/assets/115237/3455c1bb-166b-47e4-9847-2d20dd1f04db"> <img width="499" alt="Screenshot 2024-03-28 at 21 00 07" src="https://github.com/go-gitea/gitea/assets/115237/412be2b3-d5a0-478a-b17b-43e6bc12e8ce"> <img width="83" alt="Screenshot 2024-03-28 at 22 14 34" src="https://github.com/go-gitea/gitea/assets/115237/d8c89838-a420-4723-8c49-89405bb39474"> Co-authored-by: silverwind <me@silverwind.io> Co-authored-by: delvh <dev.lh@web.de>

Fix #30185, regression from #30162. The checkboxes were unclickable because the label was positioned over the checkbox with `padding`. Now it uses `margin` so the checkbox itself will be clickable in all cases. Secondly, I changed the for/id linking to also add missing `for` attributes when `id` is present. The other way around (only `for` present) is currently not handled and I think there are likey no occurences in the code and introducing new non-generated `id`s might cause problems elsewhere if we do, so I skipped on that.

Fix go-gitea#30185, regression from go-gitea#30162. The checkboxes were unclickable because the label was positioned over the checkbox with `padding`. Now it uses `margin` so the checkbox itself will be clickable in all cases. Secondly, I changed the for/id linking to also add missing `for` attributes when `id` is present. The other way around (only `for` present) is currently not handled and I think there are likey no occurences in the code and introducing new non-generated `id`s might cause problems elsewhere if we do, so I skipped on that.

@silverwind

Backport #30195 by @silverwind Fix #30185, regression from #30162. The checkboxes were unclickable because the label was positioned over the checkbox with `padding`. Now it uses `margin` so the checkbox itself will be clickable in all cases. Secondly, I changed the for/id linking to also add missing `for` attributes when `id` is present. The other way around (only `for` present) is currently not handled and I think there are likey no occurences in the code and introducing new non-generated `id`s might cause problems elsewhere if we do, so I skipped on that. Co-authored-by: silverwind <me@silverwind.io>

Fix the checkbox issues in #30303 which were existing problems with these selectors, but made visible with #30162. There is a lot of dead/useless CSS in `form.css`, I only fixed the two problems and remove CSS that was definitely not in use or needed. <img width="369" alt="Screenshot 2024-04-06 at 18 00 08" src="https://github.com/go-gitea/gitea/assets/115237/720f178b-1b22-48d4-8704-becb8ce66129"> <img width="405" alt="Screenshot 2024-04-06 at 18 00 28" src="https://github.com/go-gitea/gitea/assets/115237/61c0f8ec-34af-46c5-a3fa-7c5c4d30c7d2"> Co-authored-by: Giteabot <teabot@gitea.io>

Fix the checkbox issues in go-gitea#30303 which were existing problems with these selectors, but made visible with go-gitea#30162. There is a lot of dead/useless CSS in `form.css`, I only fixed the two problems and remove CSS that was definitely not in use or needed. <img width="369" alt="Screenshot 2024-04-06 at 18 00 08" src="https://github.com/go-gitea/gitea/assets/115237/720f178b-1b22-48d4-8704-becb8ce66129"> <img width="405" alt="Screenshot 2024-04-06 at 18 00 28" src="https://github.com/go-gitea/gitea/assets/115237/61c0f8ec-34af-46c5-a3fa-7c5c4d30c7d2"> Co-authored-by: Giteabot <teabot@gitea.io>

@silverwind

Backport #30308 by @silverwind Fix the checkbox issues in #30303 which were existing problems with these selectors, but made visible with #30162. There is a lot of dead/useless CSS in `form.css`, I only fixed the two problems and remove CSS that was definitely not in use or needed. <img width="369" alt="Screenshot 2024-04-06 at 18 00 08" src="https://github.com/go-gitea/gitea/assets/115237/720f178b-1b22-48d4-8704-becb8ce66129"> <img width="405" alt="Screenshot 2024-04-06 at 18 00 28" src="https://github.com/go-gitea/gitea/assets/115237/61c0f8ec-34af-46c5-a3fa-7c5c4d30c7d2"> Co-authored-by: silverwind <me@silverwind.io>

Fix the checkbox issues in go-gitea#30303 which were existing problems with these selectors, but made visible with go-gitea#30162. There is a lot of dead/useless CSS in `form.css`, I only fixed the two problems and remove CSS that was definitely not in use or needed. <img width="369" alt="Screenshot 2024-04-06 at 18 00 08" src="https://github.com/go-gitea/gitea/assets/115237/720f178b-1b22-48d4-8704-becb8ce66129"> <img width="405" alt="Screenshot 2024-04-06 at 18 00 28" src="https://github.com/go-gitea/gitea/assets/115237/61c0f8ec-34af-46c5-a3fa-7c5c4d30c7d2"> Co-authored-by: Giteabot <teabot@gitea.io>

Fix go-gitea/gitea#30185, regression from go-gitea/gitea#30162. The checkboxes were unclickable because the label was positioned over the checkbox with `padding`. Now it uses `margin` so the checkbox itself will be clickable in all cases. Secondly, I changed the for/id linking to also add missing `for` attributes when `id` is present. The other way around (only `for` present) is currently not handled and I think there are likey no occurences in the code and introducing new non-generated `id`s might cause problems elsewhere if we do, so I skipped on that. (cherry picked from commit 640850e15f56bbe01f5d8ea407f99c79dc38457e)

@silverwind

Backport #30195 by @silverwind Fix go-gitea/gitea#30185, regression from go-gitea/gitea#30162. The checkboxes were unclickable because the label was positioned over the checkbox with `padding`. Now it uses `margin` so the checkbox itself will be clickable in all cases. Secondly, I changed the for/id linking to also add missing `for` attributes when `id` is present. The other way around (only `for` present) is currently not handled and I think there are likey no occurences in the code and introducing new non-generated `id`s might cause problems elsewhere if we do, so I skipped on that. Co-authored-by: silverwind <me@silverwind.io> (cherry picked from commit 9d38c4d60ef5bd015e1430386e38d9f32e050f8f)

Fix the checkbox issues in go-gitea/gitea#30303 which were existing problems with these selectors, but made visible with go-gitea/gitea#30162. There is a lot of dead/useless CSS in `form.css`, I only fixed the two problems and remove CSS that was definitely not in use or needed. <img width="369" alt="Screenshot 2024-04-06 at 18 00 08" src="https://github.com/go-gitea/gitea/assets/115237/720f178b-1b22-48d4-8704-becb8ce66129"> <img width="405" alt="Screenshot 2024-04-06 at 18 00 28" src="https://github.com/go-gitea/gitea/assets/115237/61c0f8ec-34af-46c5-a3fa-7c5c4d30c7d2"> Co-authored-by: Giteabot <teabot@gitea.io> (cherry picked from commit 644ade5ae6805a3db063b3f81a596febe49bacaf)

@silverwind

Backport #30308 by @silverwind Fix the checkbox issues in go-gitea/gitea#30303 which were existing problems with these selectors, but made visible with go-gitea/gitea#30162. There is a lot of dead/useless CSS in `form.css`, I only fixed the two problems and remove CSS that was definitely not in use or needed. <img width="369" alt="Screenshot 2024-04-06 at 18 00 08" src="https://github.com/go-gitea/gitea/assets/115237/720f178b-1b22-48d4-8704-becb8ce66129"> <img width="405" alt="Screenshot 2024-04-06 at 18 00 28" src="https://github.com/go-gitea/gitea/assets/115237/61c0f8ec-34af-46c5-a3fa-7c5c4d30c7d2"> Co-authored-by: silverwind <me@silverwind.io> (cherry picked from commit d26ec5f2eb74a6437f998ab0af2ae058a64e06a2)

Remove fomantic checkbox module

7e29c81

GiteaBot added the lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. label Mar 28, 2024

pull-request-size bot added the size/XXL Denotes a PR that changes 1000+ lines, ignoring generated files. label Mar 28, 2024

github-actions bot added modifies/frontend modifies/templates This PR modifies the template files modifies/js labels Mar 28, 2024

silverwind added the type/refactoring Existing code has been cleaned up. There should be no new functionality. label Mar 28, 2024

silverwind marked this pull request as draft March 28, 2024 20:05

silverwind added 5 commits March 28, 2024 21:07

cleanup

3a39d6d

fix first js case

36b86ce

fix admin table actions

1475db2

fix final js case

1f6d2f8

update docs

cddb718

silverwind marked this pull request as ready for review March 28, 2024 21:06

silverwind requested a review from wxiaoguang March 28, 2024 21:06

github-actions bot added the modifies/docs label Mar 28, 2024

silverwind added 6 commits March 28, 2024 22:15

unify checkbox sizes to 16px

3022f2d

misc tweaks

d7b6e89

css cleanup

5a1ad1a

Merge branch 'main' into rmcheckbox

579ed34

clean up js more

162539b

tweak

0527244

silverwind added the backport/v1.22 This PR should be backported to Gitea 1.22 label Mar 28, 2024

delvh reviewed Mar 28, 2024

View reviewed changes

silverwind and others added 2 commits March 29, 2024 00:14

Update web_src/js/features/repo-issue.js

9b5404d

Co-authored-by: delvh <dev.lh@web.de>

Update web_src/js/modules/fomantic/checkbox.js

b2e4abb

Co-authored-by: delvh <dev.lh@web.de>

silverwind commented Mar 28, 2024

View reviewed changes

web_src/js/features/repo-issue.js Outdated Show resolved Hide resolved

Update web_src/js/features/repo-issue.js

0718c85

silverwind added the reviewed/wait-merge This pull request is part of the merge queue. It will be merged soon. label Mar 29, 2024

Merge branch 'main' into rmcheckbox

7daddf3

silverwind merged commit 8fd1599 into go-gitea:main Mar 29, 2024
26 checks passed

GiteaBot added this to the 1.23.0 milestone Mar 29, 2024

GiteaBot mentioned this pull request Mar 29, 2024

Remove fomantic checkbox module (#30162) #30168

Merged

GiteaBot added backport/done All backports for this PR have been created and removed reviewed/wait-merge This pull request is part of the merge queue. It will be merged soon. labels Mar 29, 2024

lunny removed the backport/v1.22 This PR should be backported to Gitea 1.22 label Mar 29, 2024

yardenshoham mentioned this pull request Mar 30, 2024

Can't check "Dismiss stale approvals" nor "Ignore stale approvals" in repository branch settings #30185

Closed

silverwind mentioned this pull request Mar 30, 2024

Fix unclickable checkboxes #30195

Merged

GiteaBot mentioned this pull request Mar 31, 2024

Fix unclickable checkboxes (#30195) #30199

Merged

This was referenced Apr 6, 2024

Actions and mobile UI problem's #30303

Closed

Fix checkboxes on mobile view, remove some dead css #30308

Merged

GiteaBot mentioned this pull request Apr 7, 2024

Fix checkboxes on mobile view, remove some dead css (#30308) #30319

Merged

silverwind deleted the rmcheckbox branch April 16, 2024 19:31

wxiaoguang added the skip-changelog This PR is irrelevant for the (next) changelog, for example bug fixes for unreleased features. label Apr 27, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Remove fomantic checkbox module #30162

Remove fomantic checkbox module #30162

silverwind commented Mar 28, 2024 •

edited

silverwind commented Mar 28, 2024

silverwind commented Mar 28, 2024

delvh Mar 28, 2024

silverwind Mar 28, 2024 •

edited

Remove fomantic checkbox module #30162

Remove fomantic checkbox module #30162

Conversation

silverwind commented Mar 28, 2024 • edited

silverwind commented Mar 28, 2024

silverwind commented Mar 28, 2024

delvh Mar 28, 2024

Choose a reason for hiding this comment

silverwind Mar 28, 2024 • edited

Choose a reason for hiding this comment

silverwind commented Mar 28, 2024 •

edited

silverwind Mar 28, 2024 •

edited