Replace remaining fontawesome dropdown icons with SVG (#24455)

- Replace leftover dropdown triangles with SVG
- Replace remove icon with SVG and add styling for it:

<img width="817" alt="Screenshot 2023-05-01 at 00 40 05"
src="https://user-images.githubusercontent.com/115237/235379271-4674d4f7-b11e-4d6d-90f9-1478325443ca.png">
<img width="816" alt="Screenshot 2023-05-01 at 00 46 56"
src="https://user-images.githubusercontent.com/115237/235379451-b515afb3-9773-4f6f-a259-e7048235bcba.png">
This commit is contained in:
silverwind 2023-05-01 11:35:02 +02:00 committed by GitHub
parent 00d998a513
commit 1bd2772235
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 21 additions and 7 deletions

View file

@ -20,7 +20,7 @@
{{$repoID = .PackageDescriptor.Repository.ID}} {{$repoID = .PackageDescriptor.Repository.ID}}
{{end}} {{end}}
<input type="hidden" name="repo_id" value="{{$repoID}}"> <input type="hidden" name="repo_id" value="{{$repoID}}">
<i class="dropdown icon"></i> {{svg "octicon-triangle-down" 14 "dropdown icon"}}
<div class="default text">{{.locale.Tr "packages.settings.link.select"}}</div> <div class="default text">{{.locale.Tr "packages.settings.link.select"}}</div>
<div class="menu"> <div class="menu">
{{range .Repos}} {{range .Repos}}

View file

@ -8,7 +8,6 @@
<div class="ui icon buttons tiny color-buttons"> <div class="ui icon buttons tiny color-buttons">
<div class="ui multiple selection search dropdown" id="flow-select-refs-dropdown"> <div class="ui multiple selection search dropdown" id="flow-select-refs-dropdown">
<input type="hidden" name="flow"> <input type="hidden" name="flow">
<i class="dropdown icon"></i>
<div class="default text">{{.locale.Tr "repo.commit_graph.select"}}</div> <div class="default text">{{.locale.Tr "repo.commit_graph.select"}}</div>
<div class="menu"> <div class="menu">
<div class="item" data-value="...flow-hide-pr-refs"> <div class="item" data-value="...flow-hide-pr-refs">

View file

@ -3,7 +3,8 @@
{{/* FIXME: required validation */}} {{/* FIXME: required validation */}}
<div class="ui fluid selection dropdown {{if .item.Attributes.multiple}}multiple clearable{{end}}"> <div class="ui fluid selection dropdown {{if .item.Attributes.multiple}}multiple clearable{{end}}">
<input type="hidden" name="form-field-{{.item.ID}}" value="0"> <input type="hidden" name="form-field-{{.item.ID}}" value="0">
<i class="dropdown icon"></i> {{svg "octicon-triangle-down" 14 "dropdown icon"}}
{{svg "octicon-x" 14 "remove icon"}}
<div class="default text"></div> <div class="default text"></div>
<div class="menu"> <div class="menu">
{{range $i, $opt := .item.Attributes.options}} {{range $i, $opt := .item.Attributes.options}}

View file

@ -2051,6 +2051,13 @@ a.ui.label:hover {
color: var(--color-text); color: var(--color-text);
} }
.ui.labels a.active.label:hover,
a.ui.active.label:hover {
background: var(--color-active);
border-color: var(--color-active);
color: var(--color-text);
}
.ui.label > .detail .icons { .ui.label > .detail .icons {
margin-right: 0.25em; margin-right: 0.25em;
} }
@ -2603,6 +2610,7 @@ table th[data-sortt-desc] .svg {
} }
.ui.dropdown .svg.dropdown.icon, .ui.dropdown .svg.dropdown.icon,
.ui.dropdown .svg.remove.icon,
.svg.dropdown.icon { .svg.dropdown.icon {
margin-top: 0 !important; /* reset the "ui.selection.dropdown > .dropdown.icon {margin-top}", for the Issue Dependencies dropdown */ margin-top: 0 !important; /* reset the "ui.selection.dropdown > .dropdown.icon {margin-top}", for the Issue Dependencies dropdown */
margin-right: -0.5rem !important; /* fix up SVG dropdown triangles because Fomantic thinks they are icon fonts */ margin-right: -0.5rem !important; /* fix up SVG dropdown triangles because Fomantic thinks they are icon fonts */
@ -2615,6 +2623,16 @@ table th[data-sortt-desc] .svg {
top: 0 !important; /* reset the ".ui.selection.dropdown > .xxx.icon {top}" if the icon is svg instead of the fomantic icon */ top: 0 !important; /* reset the ".ui.selection.dropdown > .xxx.icon {top}" if the icon is svg instead of the fomantic icon */
} }
.ui.selection.dropdown > .svg.remove.icon {
top: .5px;
right: 32px;
width: auto;
}
.ui.selection.dropdown > .svg.remove.icon:hover {
opacity: 1;
}
.ui.dropdown.no-text > .dropdown.icon { .ui.dropdown.no-text > .dropdown.icon {
margin-left: 0 !important; margin-left: 0 !important;
margin-right: 0 !important; margin-right: 0 !important;

View file

@ -46,10 +46,6 @@
white-space: nowrap; white-space: nowrap;
} }
#git-graph-container #flow-select-refs-dropdown .dropdown.icon {
display: none;
}
#git-graph-container #flow-select-refs-dropdown .default.text { #git-graph-container #flow-select-refs-dropdown .default.text {
padding-top: 4px; padding-top: 4px;
padding-bottom: 4px; padding-bottom: 4px;