Skip to content

Commit b03f8e9

Browse files
silverwinddelvh
authored and
GiteaBot
committed
Remove fomantic checkbox module (go-gitea#30162)
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 <[email protected]>
1 parent 40cdc84 commit b03f8e9

File tree

18 files changed

+181
-1730
lines changed

18 files changed

+181
-1730
lines changed

‎templates/admin/config_settings.tmpl‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,14 @@
77
<dt>{{ctx.Locale.Tr "admin.config.disable_gravatar"}}</dt>
88
<dd>
99
<div class="ui toggle checkbox" data-tooltip-content="{{ctx.Locale.Tr "admin.config.disable_gravatar"}}">
10-
<input type="checkbox" data-config-dyn-key="picture.disable_gravatar" {{if .SystemConfig.Picture.DisableGravatar.Value ctx}}checked{{end}}>
10+
<input type="checkbox" data-config-dyn-key="picture.disable_gravatar" {{if .SystemConfig.Picture.DisableGravatar.Value ctx}}checked{{end}}><label></label>
1111
</div>
1212
</dd>
1313
<div class="divider"></div>
1414
<dt>{{ctx.Locale.Tr "admin.config.enable_federated_avatar"}}</dt>
1515
<dd>
1616
<div class="ui toggle checkbox" data-tooltip-content="{{ctx.Locale.Tr "admin.config.enable_federated_avatar"}}">
17-
<input type="checkbox" data-config-dyn-key="picture.enable_federated_avatar" {{if .SystemConfig.Picture.EnableFederatedAvatar.Value ctx}}checked{{end}}>
17+
<input type="checkbox" data-config-dyn-key="picture.enable_federated_avatar" {{if .SystemConfig.Picture.EnableFederatedAvatar.Value ctx}}checked{{end}}><label></label>
1818
</div>
1919
</dd>
2020
</dl>

‎templates/repo/issue/view_content/sidebar.tmpl‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -677,7 +677,7 @@
677677
{{if and (not (eq .Issue.PullRequest.HeadRepo.FullName .Issue.PullRequest.BaseRepo.FullName)) .CanWriteToHeadRepo}}
678678
<div class="divider"></div>
679679
<div class="inline field">
680-
<div class="ui checkbox" id="allow-edits-from-maintainers"
680+
<div class="ui checkbox small-loading-icon" id="allow-edits-from-maintainers"
681681
data-url="{{.Issue.Link}}"
682682
data-tooltip-content="{{ctx.Locale.Tr "repo.pulls.allow_edits_from_maintainers_desc"}}"
683683
data-prompt-error="{{ctx.Locale.Tr "repo.pulls.allow_edits_from_maintainers_err"}}"

‎web_src/css/base.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
--height-loading: 16rem;
2424
--min-height-textarea: 132px; /* padding + 6 lines + border = calc(1.57142em + 6lh + 2px), but lh is not fully supported */
2525
--tab-size: 4;
26+
--checkbox-size: 16px; /* height and width of checkbox and radio inputs */
2627
}
2728

2829
:root * {

‎web_src/css/form.css‎

Lines changed: 5 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -32,10 +32,7 @@ textarea,
3232
.ui.form input[type="text"],
3333
.ui.form input[type="time"],
3434
.ui.form input[type="url"],
35-
.ui.selection.dropdown,
36-
.ui.checkbox label::before,
37-
.ui.checkbox input:checked ~ label::before,
38-
.ui.checkbox input:not([type="radio"]):indeterminate ~ label::before {
35+
.ui.selection.dropdown {
3936
background: var(--color-input-background);
4037
border-color: var(--color-input-border);
4138
color: var(--color-input-text);
@@ -63,12 +60,7 @@ textarea:hover,
6360
.ui.form input[type="text"]:hover,
6461
.ui.form input[type="time"]:hover,
6562
.ui.form input[type="url"]:hover,
66-
.ui.selection.dropdown:hover,
67-
.ui.checkbox label:hover::before,
68-
.ui.checkbox label:active::before,
69-
.ui.radio.checkbox label::after,
70-
.ui.radio.checkbox input:focus ~ label::before,
71-
.ui.radio.checkbox input:checked ~ label::before {
63+
.ui.selection.dropdown:hover {
7264
background: var(--color-input-background);
7365
border-color: var(--color-input-border-hover);
7466
color: var(--color-input-text);
@@ -91,11 +83,7 @@ textarea:focus,
9183
.ui.form input[type="text"]:focus,
9284
.ui.form input[type="time"]:focus,
9385
.ui.form input[type="url"]:focus,
94-
.ui.selection.dropdown:focus,
95-
.ui.checkbox input:focus ~ label::before,
96-
.ui.checkbox input:not([type="radio"]):indeterminate:focus ~ label::before,
97-
.ui.checkbox input:checked:focus ~ label::before,
98-
.ui.radio.checkbox input:focus:checked ~ label::before {
86+
.ui.selection.dropdown:focus {
9987
background: var(--color-input-background);
10088
border-color: var(--color-primary);
10189
color: var(--color-input-text);
@@ -106,58 +94,21 @@ textarea:focus,
10694
.ui.form .inline.fields .field > label,
10795
.ui.form .inline.fields .field > p,
10896
.ui.form .inline.field > label,
109-
.ui.form .inline.field > p,
110-
.ui.checkbox label,
111-
.ui.checkbox + label,
112-
.ui.checkbox label:hover,
113-
.ui.checkbox + label:hover,
114-
.ui.checkbox input:focus ~ label,
115-
.ui.checkbox input:active ~ label {
97+
.ui.form .inline.field > p {
11698
color: var(--color-text);
11799
}
118100

119101
.ui.form .required.fields:not(.grouped) > .field > label::after,
120102
.ui.form .required.fields.grouped > label::after,
121103
.ui.form .required.field > label::after,
122-
.ui.form .required.fields:not(.grouped) > .field > .checkbox::after,
123-
.ui.form .required.field > .checkbox::after,
124104
.ui.form label.required::after {
125105
color: var(--color-red);
126106
}
127107

128-
.ui.input,
129-
.ui.checkbox input:focus ~ label::after,
130-
.ui.checkbox input:checked ~ label::after,
131-
.ui.checkbox label:active::after,
132-
.ui.checkbox input:not([type="radio"]):indeterminate ~ label::after,
133-
.ui.checkbox input:not([type="radio"]):indeterminate:focus ~ label::after,
134-
.ui.checkbox input:checked:focus ~ label::after,
135-
.ui.disabled.checkbox label,
136-
.ui.checkbox input[disabled] ~ label {
108+
.ui.input {
137109
color: var(--color-input-text);
138110
}
139111

140-
.ui.radio.checkbox input:focus ~ label::after,
141-
.ui.radio.checkbox input:checked ~ label::after,
142-
.ui.radio.checkbox input:focus:checked ~ label::after {
143-
background: var(--color-input-text);
144-
}
145-
146-
.ui.toggle.checkbox label::before {
147-
background: var(--color-input-toggle-background);
148-
}
149-
150-
.ui.toggle.checkbox label,
151-
.ui.toggle.checkbox input:checked ~ label,
152-
.ui.toggle.checkbox input:focus:checked ~ label {
153-
color: var(--color-text) !important;
154-
}
155-
156-
.ui.toggle.checkbox input:checked ~ label::before,
157-
.ui.toggle.checkbox input:focus:checked ~ label::before {
158-
background: var(--color-primary) !important;
159-
}
160-
161112
/* match <select> padding to <input> */
162113
.ui.form select {
163114
padding: 0.67857143em 1em;

‎web_src/css/index.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
@import "./modules/message.css";
1313
@import "./modules/table.css";
1414
@import "./modules/card.css";
15+
@import "./modules/checkbox.css";
1516
@import "./modules/modal.css";
1617

1718
@import "./modules/select.css";

‎web_src/css/modules/animations.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66
.is-loading {
77
pointer-events: none !important;
88
position: relative !important;
9-
overflow: hidden !important;
109
}
1110

1211
.is-loading > * {

‎web_src/css/modules/checkbox.css‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
/* based on Fomantic UI checkbox module, with just the parts extracted that we use. If you find any
2+
unused rules here after refactoring, please remove them. */
3+
4+
input[type="checkbox"],
5+
input[type="radio"] {
6+
width: var(--checkbox-size);
7+
height: var(--checkbox-size);
8+
}
9+
10+
.ui.checkbox {
11+
position: relative;
12+
display: inline-block;
13+
vertical-align: baseline;
14+
min-height: var(--checkbox-size);
15+
line-height: var(--checkbox-size);
16+
min-width: var(--checkbox-size);
17+
padding: 1px;
18+
}
19+
20+
.ui.checkbox input[type="checkbox"],
21+
.ui.checkbox input[type="radio"] {
22+
position: absolute;
23+
top: 0;
24+
left: 0;
25+
width: var(--checkbox-size);
26+
height: var(--checkbox-size);
27+
}
28+
29+
.ui.checkbox input[type="checkbox"]:enabled,
30+
.ui.checkbox input[type="radio"]:enabled,
31+
.ui.checkbox label:enabled {
32+
cursor: pointer;
33+
}
34+
35+
.ui.checkbox label {
36+
cursor: auto;
37+
position: relative;
38+
display: block;
39+
user-select: none;
40+
}
41+
42+
.ui.checkbox label,
43+
.ui.radio.checkbox label {
44+
padding-left: 1.85714em;
45+
}
46+
47+
.ui.checkbox + label {
48+
vertical-align: middle;
49+
}
50+
51+
.ui.disabled.checkbox label,
52+
.ui.checkbox input[disabled] ~ label {
53+
cursor: default !important;
54+
opacity: 0.5;
55+
pointer-events: none;
56+
}
57+
58+
.ui.radio.checkbox {
59+
min-height: var(--checkbox-size);
60+
}
61+
62+
/* "switch" styled checkbox */
63+
64+
.ui.toggle.checkbox {
65+
min-height: 1.5rem;
66+
}
67+
.ui.toggle.checkbox input {
68+
width: 3.5rem;
69+
height: 1.5rem;
70+
opacity: 0;
71+
z-index: 3;
72+
}
73+
.ui.toggle.checkbox label {
74+
min-height: 1.5rem;
75+
padding-left: 4.5rem;
76+
padding-top: 0.15em;
77+
}
78+
.ui.toggle.checkbox label::before {
79+
display: block;
80+
position: absolute;
81+
content: "";
82+
z-index: 1;
83+
top: 0;
84+
width: 3.5rem;
85+
height: 1.5rem;
86+
border-radius: 500rem;
87+
left: 0;
88+
}
89+
.ui.toggle.checkbox label::after {
90+
background: var(--color-white);
91+
position: absolute;
92+
content: "";
93+
opacity: 1;
94+
z-index: 2;
95+
width: 1.5rem;
96+
height: 1.5rem;
97+
top: 0;
98+
left: 0;
99+
border-radius: 500rem;
100+
transition: background 0.3s ease, left 0.3s ease;
101+
}
102+
.ui.toggle.checkbox input ~ label::after {
103+
left: -0.05rem;
104+
}
105+
.ui.toggle.checkbox input:checked ~ label::after {
106+
left: 2.15rem;
107+
}
108+
.ui.toggle.checkbox input:focus ~ label::before,
109+
.ui.toggle.checkbox label::before {
110+
background: var(--color-input-toggle-background);
111+
}
112+
.ui.toggle.checkbox label,
113+
.ui.toggle.checkbox input:checked ~ label,
114+
.ui.toggle.checkbox input:focus:checked ~ label {
115+
color: var(--color-text) !important;
116+
}
117+
.ui.toggle.checkbox input:checked ~ label::before,
118+
.ui.toggle.checkbox input:focus:checked ~ label::before {
119+
background: var(--color-primary) !important;
120+
}

‎web_src/css/org.css‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -89,10 +89,6 @@
8989
text-align: center;
9090
}
9191

92-
.organization.options input {
93-
min-width: 300px;
94-
}
95-
9692
.page-content.organization .org-avatar {
9793
margin-right: 15px;
9894
}

‎web_src/css/repo/issue-list.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99

1010
.issue-list-toolbar-left {
1111
display: flex;
12+
align-items: center;
1213
}
1314

1415
.issue-list-toolbar-right .filter.menu {

0 commit comments

Comments
 (0)