Skip to content

Commit

Permalink
Replace plugin manager search with new search component
Browse files Browse the repository at this point in the history
  • Loading branch information
@janfaracik
janfaracik committed Jul 21, 2022
1 parent 95922de commit 6cfce9f
Show file tree
Hide file tree
Showing 6 changed files with 33 additions and 181 deletions.
13 changes: 4 additions & 9 deletions core/src/main/resources/hudson/PluginManager/available.jelly
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,15 +35,10 @@ THE SOFTWARE.
<l:main-panel>
<div class="jenkins-app-bar jenkins-app-bar--sticky">
<div class="jenkins-app-bar__content">
<div class="app-plugin-manager__search">
<span class="app-plugin-manager__search__icon">
<l:icon src="symbol-search"/>
</span>
<input type="search"
placeholder="Search available plugins"
id="filter-box"
value="${request.getParameter('filter')}" />
</div>
<l:search-bar clazz="jenkins-search--app-bar"
placeholder="${%Search available plugins}"
id="filter-box"
value="${request.getParameter('filter')}" />
</div>
</div>

Expand Down
13 changes: 4 additions & 9 deletions core/src/main/resources/hudson/PluginManager/installed.jelly
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,15 +37,10 @@ THE SOFTWARE.
<l:main-panel>
<div class="jenkins-app-bar jenkins-app-bar--sticky">
<div class="jenkins-app-bar__content">
<div class="app-plugin-manager__search">
<span class="app-plugin-manager__search__icon">
<l:icon src="symbol-search"/>
</span>
<input type="search"
placeholder="Search installed plugins"
id="filter-box"
value="${request.getParameter('filter')}" />
</div>
<l:search-bar clazz="jenkins-search--app-bar"
placeholder="${%Search installed plugins}"
id="filter-box"
value="${request.getParameter('filter')}" />
</div>
</div>

Expand Down
13 changes: 4 additions & 9 deletions core/src/main/resources/hudson/PluginManager/table.jelly
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,15 +44,10 @@ THE SOFTWARE.
<l:main-panel>
<div class="jenkins-app-bar jenkins-app-bar--sticky">
<div class="jenkins-app-bar__content">
<div class="app-plugin-manager__search">
<span class="app-plugin-manager__search__icon">
<l:icon src="symbol-search"/>
</span>
<input type="search"
placeholder="Search plugin updates"
id="filter-box"
value="${request.getParameter('filter')}" />
</div>
<l:search-bar clazz="jenkins-search--app-bar"
placeholder="${%Search plugin updates}"
id="filter-box"
value="${request.getParameter('filter')}" />
</div>
</div>

Expand Down
4 changes: 2 additions & 2 deletions war/src/main/js/plugin-manager-ui.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ function applyFilter(searchQuery) {
var selectedPlugins = [];

var filterInput = document.getElementById('filter-box');
filterInput.parentElement.classList.remove("app-plugin-manager__search--loading");
filterInput.parentElement.classList.remove("jenkins-search--loading");

function clearOldResults() {
if (!admin) {
Expand Down Expand Up @@ -54,7 +54,7 @@ document.addEventListener("DOMContentLoaded", function () {
var filterInput = document.getElementById('filter-box');
filterInput.addEventListener('input', function (e) {
debouncedFilter(e);
filterInput.parentElement.classList.add("app-plugin-manager__search--loading");
filterInput.parentElement.classList.add("jenkins-search--loading");
});

filterInput.focus();
Expand Down
19 changes: 19 additions & 0 deletions war/src/main/less/form/search-bar.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -168,6 +168,25 @@
}
}

&--app-bar {
--search-bar-height: 3rem;
max-width: 50vw;

&::before {
content: "";
position: absolute;
inset: 0;
border-radius: 10px;
z-index: -1;
backdrop-filter: blur(20px);
box-shadow: 0 0 var(--section-padding) var(--background);

@supports not (backdrop-filter: blur(20px)) {
background: var(--background);
}
}
}

&:focus-within {
.jenkins-search__icon {
fill: var(--focus-input-border);
Expand Down
152 changes: 0 additions & 152 deletions war/src/main/less/pages/plugin-manager.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,155 +116,3 @@
margin-bottom: 0.1rem !important;
}
}

.app-plugin-manager__search {
position: relative;
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
width: 50vw;
z-index: 1;
padding: 0 1rem;
gap: 0.5rem 0.75rem;

&::before,
&::after {
content: "";
position: absolute;
inset: 0;
border-radius: 10px;
z-index: -1;
}

&::before {
backdrop-filter: blur(20px);
box-shadow: 0 0 var(--section-padding) var(--background);

@supports not (backdrop-filter: blur(20px)) {
background: var(--background);
}
}

&::after {
background: var(--item-background--hover);
box-shadow: 0 0 0 10px transparent;
transition: var(--standard-transition);
opacity: 0.75;
}

svg {
width: 1.1rem;
height: 1.1rem;
}

&__icon {
position: relative;
display: flex;
align-items: center;
justify-content: center;

&::before {
content: "";
position: absolute;
inset: 1rem;
color: inherit;
border: 2px solid currentColor;
border-radius: 100%;
opacity: 0;
transition: var(--standard-transition);
}

&::after {
content: "";
position: absolute;
inset: 1rem;
color: inherit;
border: 2px solid currentColor;
border-radius: 100%;
clip-path: inset(0 0 50% 50%);
opacity: 0;
transition: var(--standard-transition);
animation: loading-spinner 1s infinite linear;

@media (prefers-reduced-motion) {
animation-duration: 2s;
}
}
}

&--loading {
.app-plugin-manager__search__icon {
svg {
opacity: 0;
transform: scale(0);
}

&::before {
opacity: 0.2;
inset: 0;
}

&::after {
opacity: 1;
inset: 0;
}
}
}

input {
background: transparent;
border: none;
outline: none;
font-size: 0.9rem;
font-weight: 500;
padding: 0.75rem 0;

&::placeholder {
color: var(--text-color-secondary);
}

&::-webkit-search-cancel-button {
-webkit-appearance: none;
height: 1.2rem;
width: 1.2rem;
background: currentColor;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48zm75.31 260.69a16 16 0 11-22.62 22.62L256 278.63l-52.69 52.68a16 16 0 01-22.62-22.62L233.37 256l-52.68-52.69a16 16 0 0122.62-22.62L256 233.37l52.69-52.68a16 16 0 0122.62 22.62L278.63 256z'/%3E%3C/svg%3E");
mask-size: contain;
mask-repeat: no-repeat;
opacity: 0;
pointer-events: none;
transform: scale(0.8);
transition: var(--standard-transition);
cursor: pointer;

&:hover {
opacity: 0.75 !important;
}

&:active {
opacity: 1 !important;
}
}

&:focus {
&::-webkit-search-cancel-button {
opacity: 0.5;
pointer-events: all;
transform: scale(1);
}
}
}

&:hover {
&::after {
background: var(--item-background--active);
}
}

&:focus-within {
&::after {
background: var(--item-background--active);
box-shadow: 0 0 0 5px var(--item-box-shadow--focus);
}
}
}

0 comments on commit 6cfce9f

Please sign in to comment.