Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Remove fomantic checkbox module #30162

Merged
merged 19 commits into from Mar 29, 2024
Merged

Remove fomantic checkbox module #30162

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
7e29c81
Remove fomantic checkbox module
silverwind Mar 28, 2024
3a39d6d
cleanup
silverwind Mar 28, 2024
36b86ce
fix first js case
silverwind Mar 28, 2024
1475db2
fix admin table actions
silverwind Mar 28, 2024
1f6d2f8
fix final js case
silverwind Mar 28, 2024
cddb718
update docs
silverwind Mar 28, 2024
3022f2d
unify checkbox sizes to 16px
silverwind Mar 28, 2024
d7b6e89
misc tweaks
silverwind Mar 28, 2024
5a1ad1a
css cleanup
silverwind Mar 28, 2024
579ed34
Merge branch 'main' into rmcheckbox
silverwind Mar 28, 2024
162539b
clean up js more
silverwind Mar 28, 2024
0527244
tweak
silverwind Mar 28, 2024
9b5404d
Update web_src/js/features/repo-issue.js
silverwind Mar 28, 2024
b2e4abb
Update web_src/js/modules/fomantic/checkbox.js
silverwind Mar 28, 2024
0718c85
Update web_src/js/features/repo-issue.js
silverwind Mar 28, 2024
6d69c9a
Update web_src/css/modules/checkbox.css
silverwind Mar 29, 2024
0907996
comment
silverwind Mar 29, 2024
dfb27fd
misc tweaks
silverwind Mar 29, 2024
7daddf3
Merge branch 'main' into rmcheckbox
silverwind Mar 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 2 additions & 2 deletions templates/admin/config_settings.tmpl
View file
Open in desktop
Expand Up @@ -7,14 +7,14 @@
<dt>{{ctx.Locale.Tr "admin.config.disable_gravatar"}}</dt>
<dd>
<div class="ui toggle checkbox" data-tooltip-content="{{ctx.Locale.Tr "admin.config.disable_gravatar"}}">
<input type="checkbox" data-config-dyn-key="picture.disable_gravatar" {{if .SystemConfig.Picture.DisableGravatar.Value ctx}}checked{{end}}>
<input type="checkbox" data-config-dyn-key="picture.disable_gravatar" {{if .SystemConfig.Picture.DisableGravatar.Value ctx}}checked{{end}}><label></label>
</div>
</dd>
<div class="divider"></div>
<dt>{{ctx.Locale.Tr "admin.config.enable_federated_avatar"}}</dt>
<dd>
<div class="ui toggle checkbox" data-tooltip-content="{{ctx.Locale.Tr "admin.config.enable_federated_avatar"}}">
<input type="checkbox" data-config-dyn-key="picture.enable_federated_avatar" {{if .SystemConfig.Picture.EnableFederatedAvatar.Value ctx}}checked{{end}}>
<input type="checkbox" data-config-dyn-key="picture.enable_federated_avatar" {{if .SystemConfig.Picture.EnableFederatedAvatar.Value ctx}}checked{{end}}><label></label>
</div>
</dd>
</dl>
Expand Down
2 changes: 1 addition & 1 deletion templates/repo/issue/view_content/sidebar.tmpl
View file
Open in desktop
Expand Up @@ -677,7 +677,7 @@
{{if and (not (eq .Issue.PullRequest.HeadRepo.FullName .Issue.PullRequest.BaseRepo.FullName)) .CanWriteToHeadRepo}}
<div class="divider"></div>
<div class="inline field">
<div class="ui checkbox" id="allow-edits-from-maintainers"
<div class="ui checkbox small-loading-icon" id="allow-edits-from-maintainers"
data-url="{{.Issue.Link}}"
data-tooltip-content="{{ctx.Locale.Tr "repo.pulls.allow_edits_from_maintainers_desc"}}"
data-prompt-error="{{ctx.Locale.Tr "repo.pulls.allow_edits_from_maintainers_err"}}"
Expand Down
1 change: 1 addition & 0 deletions web_src/css/base.css
View file
Open in desktop
Expand Up @@ -23,6 +23,7 @@
--height-loading: 16rem;
--min-height-textarea: 132px; /* padding + 6 lines + border = calc(1.57142em + 6lh + 2px), but lh is not fully supported */
--tab-size: 4;
--checkbox-size: 16px; /* height and width of checkbox and radio inputs */
}

:root * {
Expand Down
59 changes: 5 additions & 54 deletions web_src/css/form.css
View file
Open in desktop
Expand Up @@ -32,10 +32,7 @@ textarea,
.ui.form input[type="text"],
.ui.form input[type="time"],
.ui.form input[type="url"],
.ui.selection.dropdown,
.ui.checkbox label::before,
.ui.checkbox input:checked ~ label::before,
.ui.checkbox input:not([type="radio"]):indeterminate ~ label::before {
.ui.selection.dropdown {
background: var(--color-input-background);
border-color: var(--color-input-border);
color: var(--color-input-text);
Expand Down Expand Up @@ -63,12 +60,7 @@ textarea:hover,
.ui.form input[type="text"]:hover,
.ui.form input[type="time"]:hover,
.ui.form input[type="url"]:hover,
.ui.selection.dropdown:hover,
.ui.checkbox label:hover::before,
.ui.checkbox label:active::before,
.ui.radio.checkbox label::after,
.ui.radio.checkbox input:focus ~ label::before,
.ui.radio.checkbox input:checked ~ label::before {
.ui.selection.dropdown:hover {
background: var(--color-input-background);
border-color: var(--color-input-border-hover);
color: var(--color-input-text);
Expand All @@ -91,11 +83,7 @@ textarea:focus,
.ui.form input[type="text"]:focus,
.ui.form input[type="time"]:focus,
.ui.form input[type="url"]:focus,
.ui.selection.dropdown:focus,
.ui.checkbox input:focus ~ label::before,
.ui.checkbox input:not([type="radio"]):indeterminate:focus ~ label::before,
.ui.checkbox input:checked:focus ~ label::before,
.ui.radio.checkbox input:focus:checked ~ label::before {
.ui.selection.dropdown:focus {
background: var(--color-input-background);
border-color: var(--color-primary);
color: var(--color-input-text);
Expand All @@ -106,58 +94,21 @@ textarea:focus,
.ui.form .inline.fields .field > label,
.ui.form .inline.fields .field > p,
.ui.form .inline.field > label,
.ui.form .inline.field > p,
.ui.checkbox label,
.ui.checkbox + label,
.ui.checkbox label:hover,
.ui.checkbox + label:hover,
.ui.checkbox input:focus ~ label,
.ui.checkbox input:active ~ label {
.ui.form .inline.field > p {
color: var(--color-text);
}

.ui.form .required.fields:not(.grouped) > .field > label::after,
.ui.form .required.fields.grouped > label::after,
.ui.form .required.field > label::after,
.ui.form .required.fields:not(.grouped) > .field > .checkbox::after,
.ui.form .required.field > .checkbox::after,
.ui.form label.required::after {
color: var(--color-red);
}

.ui.input,
.ui.checkbox input:focus ~ label::after,
.ui.checkbox input:checked ~ label::after,
.ui.checkbox label:active::after,
.ui.checkbox input:not([type="radio"]):indeterminate ~ label::after,
.ui.checkbox input:not([type="radio"]):indeterminate:focus ~ label::after,
.ui.checkbox input:checked:focus ~ label::after,
.ui.disabled.checkbox label,
.ui.checkbox input[disabled] ~ label {
.ui.input {
color: var(--color-input-text);
}

.ui.radio.checkbox input:focus ~ label::after,
.ui.radio.checkbox input:checked ~ label::after,
.ui.radio.checkbox input:focus:checked ~ label::after {
background: var(--color-input-text);
}

.ui.toggle.checkbox label::before {
background: var(--color-input-toggle-background);
}

.ui.toggle.checkbox label,
.ui.toggle.checkbox input:checked ~ label,
.ui.toggle.checkbox input:focus:checked ~ label {
color: var(--color-text) !important;
}

.ui.toggle.checkbox input:checked ~ label::before,
.ui.toggle.checkbox input:focus:checked ~ label::before {
background: var(--color-primary) !important;
}

/* match <select> padding to <input> */
.ui.form select {
padding: 0.67857143em 1em;
Expand Down
1 change: 1 addition & 0 deletions web_src/css/index.css
View file
Open in desktop
Expand Up @@ -12,6 +12,7 @@
@import "./modules/message.css";
@import "./modules/table.css";
@import "./modules/card.css";
@import "./modules/checkbox.css";
@import "./modules/modal.css";

@import "./modules/select.css";
Expand Down
1 change: 0 additions & 1 deletion web_src/css/modules/animations.css
View file
Open in desktop
Expand Up @@ -6,7 +6,6 @@
.is-loading {
pointer-events: none !important;
position: relative !important;
overflow: hidden !important;
}

.is-loading > * {
Expand Down
120 changes: 120 additions & 0 deletions web_src/css/modules/checkbox.css
View file
Open in desktop
@@ -0,0 +1,120 @@
/* based on Fomantic UI checkbox module, with just the parts extracted that we use. If you find any
unused rules here after refactoring, please remove them. */

input[type="checkbox"],
input[type="radio"] {
width: var(--checkbox-size);
height: var(--checkbox-size);
}

.ui.checkbox {
position: relative;
display: inline-block;
vertical-align: baseline;
min-height: var(--checkbox-size);
line-height: var(--checkbox-size);
min-width: var(--checkbox-size);
padding: 1px;
}

.ui.checkbox input[type="checkbox"],
.ui.checkbox input[type="radio"] {
position: absolute;
top: 0;
left: 0;
width: var(--checkbox-size);
height: var(--checkbox-size);
}

.ui.checkbox input[type="checkbox"]:enabled,
.ui.checkbox input[type="radio"]:enabled,
.ui.checkbox label:enabled {
cursor: pointer;
}

.ui.checkbox label {
cursor: auto;
position: relative;
display: block;
user-select: none;
}

.ui.checkbox label,
.ui.radio.checkbox label {
padding-left: 1.85714em;
}

.ui.checkbox + label {
vertical-align: middle;
}

.ui.disabled.checkbox label,
.ui.checkbox input[disabled] ~ label {
cursor: default !important;
opacity: 0.5;
pointer-events: none;
}

.ui.radio.checkbox {
min-height: var(--checkbox-size);
}

/* "switch" styled checkbox */

.ui.toggle.checkbox {
min-height: 1.5rem;
}
.ui.toggle.checkbox input {
width: 3.5rem;
height: 1.5rem;
opacity: 0;
z-index: 3;
}
.ui.toggle.checkbox label {
min-height: 1.5rem;
padding-left: 4.5rem;
padding-top: 0.15em;
}
.ui.toggle.checkbox label::before {
display: block;
position: absolute;
content: "";
z-index: 1;
top: 0;
width: 3.5rem;
height: 1.5rem;
border-radius: 500rem;
left: 0;
}
.ui.toggle.checkbox label::after {
background: var(--color-white);
position: absolute;
content: "";
opacity: 1;
z-index: 2;
width: 1.5rem;
height: 1.5rem;
top: 0;
left: 0;
border-radius: 500rem;
transition: background 0.3s ease, left 0.3s ease;
}
.ui.toggle.checkbox input ~ label::after {
left: -0.05rem;
}
.ui.toggle.checkbox input:checked ~ label::after {
left: 2.15rem;
}
.ui.toggle.checkbox input:focus ~ label::before,
.ui.toggle.checkbox label::before {
background: var(--color-input-toggle-background);
}
.ui.toggle.checkbox label,
.ui.toggle.checkbox input:checked ~ label,
.ui.toggle.checkbox input:focus:checked ~ label {
color: var(--color-text) !important;
}
.ui.toggle.checkbox input:checked ~ label::before,
.ui.toggle.checkbox input:focus:checked ~ label::before {
background: var(--color-primary) !important;
}
4 changes: 0 additions & 4 deletions web_src/css/org.css
View file
Open in desktop
Expand Up @@ -89,10 +89,6 @@
text-align: center;
}

.organization.options input {
min-width: 300px;
}

.page-content.organization .org-avatar {
margin-right: 15px;
}
Expand Down
1 change: 1 addition & 0 deletions web_src/css/repo/issue-list.css
View file
Open in desktop
Expand Up @@ -9,6 +9,7 @@

.issue-list-toolbar-left {
display: flex;
align-items: center;
}

.issue-list-toolbar-right .filter.menu {
Expand Down