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 input module #30194

Merged
merged 6 commits into from
Mar 31, 2024
Merged

Remove fomantic input module #30194

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
861c62d
Remove fomantic input module
silverwind Mar 30, 2024
893830a
fix loading state on icon
silverwind Mar 30, 2024
6b96487
rename to is-loading-2px, add is-loading-3px
silverwind Mar 31, 2024
94ad684
change to loading-icon-2px and loading-icon-3px
silverwind Mar 31, 2024
d3970da
Merge branch 'main' into rminput
GiteaBot Mar 31, 2024
90eaf08
Merge branch 'main' into rminput
GiteaBot Mar 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion templates/devtest/gitea-ui.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@

<div>
<h1>Loading</h1>
<div class="is-loading small-loading-icon tw-border tw-border-secondary tw-py-1"><span>loading ...</span></div>
<div class="is-loading loading-icon-2px tw-border tw-border-secondary tw-py-1"><span>loading ...</span></div>
<div class="is-loading tw-border tw-border-secondary tw-py-4">
<p>loading ...</p>
<p>loading ...</p>
Expand Down
2 changes: 1 addition & 1 deletion templates/repo/issue/view_content/sidebar.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
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 small-loading-icon" id="allow-edits-from-maintainers"
<div class="ui checkbox loading-icon-2px" 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
57 changes: 0 additions & 57 deletions web_src/css/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -305,12 +305,6 @@ a.label,
background-color: var(--color-label-bg);
}

/* fix Fomantic's line-height cutting off "g" on Windows Chrome with Segoe UI */
.ui.input > input {
line-height: var(--line-height-default);
text-align: start; /* Override fomantic's `text-align: left` to make RTL work via HTML `dir="auto"` */
}

/* fix Fomantic's line-height causing vertical scrollbars to appear */
ul.ui.list li,
ol.ui.list li,
Expand All @@ -319,47 +313,6 @@ ol.ui.list li,
line-height: var(--line-height-default);
}

.ui.input.focus > input,
.ui.input > input:focus {
border-color: var(--color-primary);
}

.ui.action.input .ui.ui.button {
border-color: var(--color-input-border);
padding-top: 0; /* the ".action.input" is "flex + stretch", so let the buttons layout themselves */
padding-bottom: 0;
}

/* currently used for search bar dropdowns in repo search and explore code */
.ui.action.input:not([class*="left action"]) > .ui.dropdown.selection {
min-width: 10em;
}
.ui.action.input:not([class*="left action"]) > .ui.dropdown.selection:not(:focus) {
border-right: none;
}
.ui.action.input:not([class*="left action"]) > .ui.dropdown.selection:not(.active):hover {
border-color: var(--color-input-border);
}
.ui.action.input:not([class*="left action"]) .ui.dropdown.selection.upward.visible {
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
.ui.action.input:not([class*="left action"]) > input,
.ui.action.input:not([class*="left action"]) > input:hover {
border-right: none;
}
.ui.action.input:not([class*="left action"]) > input:focus + .ui.dropdown.selection,
.ui.action.input:not([class*="left action"]) > input:focus + .ui.dropdown.selection:hover,
.ui.action.input:not([class*="left action"]) > input:focus + .button,
.ui.action.input:not([class*="left action"]) > input:focus + .button:hover,
.ui.action.input:not([class*="left action"]) > input:focus + .icon + .button,
.ui.action.input:not([class*="left action"]) > input:focus + .icon + .button:hover {
border-left-color: var(--color-primary);
}
.ui.action.input:not([class*="left action"]) > input:focus {
border-right-color: var(--color-primary);
}

.ui.menu {
display: flex;
}
Expand Down Expand Up @@ -1599,16 +1552,6 @@ table th[data-sortt-desc] .svg {
align-items: stretch;
}

.ui.ui.icon.input .icon {
display: flex;
align-items: center;
justify-content: center;
}

.ui.icon.input > i.icon {
transition: none;
}

.flex-items-block > .item,
.flex-text-block {
display: flex;
Expand Down
1 change: 1 addition & 0 deletions web_src/css/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
@import "./modules/container.css";
@import "./modules/divider.css";
@import "./modules/header.css";
@import "./modules/input.css";
@import "./modules/label.css";
@import "./modules/segment.css";
@import "./modules/grid.css";
Expand Down
8 changes: 6 additions & 2 deletions web_src/css/modules/animations.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,10 +34,14 @@
border-radius: var(--border-radius-circle);
}

.is-loading.small-loading-icon::after {
.is-loading.loading-icon-2px::after {
border-width: 2px;
}

.is-loading.loading-icon-3px::after {
border-width: 3px;
}

/* for single form button, the loading state should be on the button, but not go semi-transparent, just replace the text on the button with the loader. */
form.single-button-form.is-loading > * {
opacity: 1;
Expand All @@ -62,7 +66,7 @@ form.single-button-form.is-loading .button {
background: transparent;
}

/* TODO: not needed, use "is-loading small-loading-icon" instead */
/* TODO: not needed, use "is-loading loading-icon-2px" instead */
code.language-math.is-loading::after {
padding: 0;
border-width: 2px;
Expand Down
192 changes: 192 additions & 0 deletions web_src/css/modules/input.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,192 @@
/* based on Fomantic UI input module, with just the parts extracted that we use. If you find any
unused rules here after refactoring, please remove them. */

.ui.input {
position: relative;
font-weight: var(--font-weight-normal);
display: inline-flex;
color: var(--color-input-text);
}
.ui.input > input {
margin: 0;
max-width: 100%;
flex: 1 0 auto;
outline: none;
font-family: var(--fonts-regular);
padding: 0.67857143em 1em;
border: 1px solid var(--color-input-border);
color: var(--color-input-text);
border-radius: 0.28571429rem;
line-height: var(--line-height-default);
text-align: start;
}

.ui.disabled.input,
.ui.input:not(.disabled) input[disabled] {
opacity: var(--opacity-disabled);
}
.ui.disabled.input > input,
.ui.input:not(.disabled) input[disabled] {
pointer-events: none;
}

.ui.input.focus > input,
.ui.input > input:focus {
border-color: var(--color-primary);
}

.ui.input.error > input {
background: var(--color-error-bg);
border-color: var(--color-error-border);
color: var(--color-error-text);
}

.ui.icon.input > i.icon {
display: flex;
align-items: center;
justify-content: center;
cursor: default;
position: absolute;
text-align: center;
top: 50%;
transform: translateY(-50%);
opacity: 0.5;
border-radius: 0 0.28571429rem 0.28571429rem 0;
pointer-events: none;
padding: 4px;
}

.ui.icon.input > i.icon.is-loading {
position: absolute !important;
}

.ui.icon.input > i.icon.is-loading > * {
visibility: hidden;
}

.ui.ui.ui.ui.icon.input > textarea,
.ui.ui.ui.ui.icon.input > input {
padding-right: 2.67142857em;
}
.ui.icon.input > i.link.icon {
cursor: pointer;
}
.ui.icon.input > i.circular.icon {
top: 0.35em;
right: 0.5em;
}

.ui[class*="left icon"].input > i.icon {
right: auto;
left: 8px;
border-radius: 0.28571429rem 0 0 0.28571429rem;
}
.ui[class*="left icon"].input > i.circular.icon {
right: auto;
left: 0.5em;
}
.ui.ui.ui.ui[class*="left icon"].input > textarea,
.ui.ui.ui.ui[class*="left icon"].input > input {
padding-left: 2.67142857em;
padding-right: 1em;
}

.ui.icon.input > textarea:focus ~ .icon,
.ui.icon.input > input:focus ~ .icon {
opacity: 1;
}

.ui.icon.input > textarea ~ i.icon {
height: 3em;
}

.ui.form .field.error > .ui.action.input > .ui.button,
.ui.action.input.error > .ui.button {
border-top: 1px solid var(--color-error-border);
border-bottom: 1px solid var(--color-error-border);
}

.ui.action.input > .button,
.ui.action.input > .buttons {
display: flex;
align-items: center;
flex: 0 0 auto;
}
.ui.action.input > .button,
.ui.action.input > .buttons > .button {
padding-top: 0.78571429em;
padding-bottom: 0.78571429em;
margin: 0;
}

.ui.action.input:not([class*="left action"]) > input {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right-color: transparent;
}

.ui.action.input > .dropdown:first-child,
.ui.action.input > .button:first-child,
.ui.action.input > .buttons:first-child > .button {
border-radius: 0.28571429rem 0 0 0.28571429rem;
}
.ui.action.input > .dropdown:not(:first-child),
.ui.action.input > .button:not(:first-child),
.ui.action.input > .buttons:not(:first-child) > .button {
border-radius: 0;
}
.ui.action.input > .dropdown:last-child,
.ui.action.input > .button:last-child,
.ui.action.input > .buttons:last-child > .button {
border-radius: 0 0.28571429rem 0.28571429rem 0;
}

.ui.fluid.input {
display: flex;
}
.ui.fluid.input > input {
width: 0 !important;
}

.ui.tiny.input {
font-size: 0.85714286em;
}
.ui.small.input {
font-size: 0.92857143em;
}

.ui.action.input .ui.ui.button {
border-color: var(--color-input-border);
padding-top: 0; /* the ".action.input" is "flex + stretch", so let the buttons layout themselves */
padding-bottom: 0;
}

/* currently used for search bar dropdowns in repo search and explore code */
.ui.action.input:not([class*="left action"]) > .ui.dropdown.selection {
min-width: 10em;
}
.ui.action.input:not([class*="left action"]) > .ui.dropdown.selection:not(:focus) {
border-right: none;
}
.ui.action.input:not([class*="left action"]) > .ui.dropdown.selection:not(.active):hover {
border-color: var(--color-input-border);
}
.ui.action.input:not([class*="left action"]) .ui.dropdown.selection.upward.visible {
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
.ui.action.input:not([class*="left action"]) > input,
.ui.action.input:not([class*="left action"]) > input:hover {
border-right: none;
}
.ui.action.input:not([class*="left action"]) > input:focus + .ui.dropdown.selection,
.ui.action.input:not([class*="left action"]) > input:focus + .ui.dropdown.selection:hover,
.ui.action.input:not([class*="left action"]) > input:focus + .button,
.ui.action.input:not([class*="left action"]) > input:focus + .button:hover,
.ui.action.input:not([class*="left action"]) > input:focus + .icon + .button,
.ui.action.input:not([class*="left action"]) > input:focus + .icon + .button:hover {
border-left-color: var(--color-primary);
}
.ui.action.input:not([class*="left action"]) > input:focus {
border-right-color: var(--color-primary);
}
Loading