From 6cfce9fdc14f838d37fb598d650569dfb4e290b4 Mon Sep 17 00:00:00 2001 From: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Thu, 21 Jul 2022 22:41:27 +0100 Subject: [PATCH] Replace plugin manager search with new search component --- .../hudson/PluginManager/available.jelly | 13 +- .../hudson/PluginManager/installed.jelly | 13 +- .../hudson/PluginManager/table.jelly | 13 +- war/src/main/js/plugin-manager-ui.js | 4 +- war/src/main/less/form/search-bar.less | 19 +++ war/src/main/less/pages/plugin-manager.less | 152 ------------------ 6 files changed, 33 insertions(+), 181 deletions(-) diff --git a/core/src/main/resources/hudson/PluginManager/available.jelly b/core/src/main/resources/hudson/PluginManager/available.jelly index cbd28b83121f..f3dffb651269 100644 --- a/core/src/main/resources/hudson/PluginManager/available.jelly +++ b/core/src/main/resources/hudson/PluginManager/available.jelly @@ -35,15 +35,10 @@ THE SOFTWARE.
-
- - - - -
+
diff --git a/core/src/main/resources/hudson/PluginManager/installed.jelly b/core/src/main/resources/hudson/PluginManager/installed.jelly index 51248a0a6027..96b64542c9fe 100644 --- a/core/src/main/resources/hudson/PluginManager/installed.jelly +++ b/core/src/main/resources/hudson/PluginManager/installed.jelly @@ -37,15 +37,10 @@ THE SOFTWARE.
-
- - - - -
+
diff --git a/core/src/main/resources/hudson/PluginManager/table.jelly b/core/src/main/resources/hudson/PluginManager/table.jelly index 580b8177971c..4a29ab1fbf06 100644 --- a/core/src/main/resources/hudson/PluginManager/table.jelly +++ b/core/src/main/resources/hudson/PluginManager/table.jelly @@ -44,15 +44,10 @@ THE SOFTWARE.
-
- - - - -
+
diff --git a/war/src/main/js/plugin-manager-ui.js b/war/src/main/js/plugin-manager-ui.js index 2a1d9796063d..e4a48e77436f 100644 --- a/war/src/main/js/plugin-manager-ui.js +++ b/war/src/main/js/plugin-manager-ui.js @@ -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) { @@ -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(); diff --git a/war/src/main/less/form/search-bar.less b/war/src/main/less/form/search-bar.less index 0f8741ae760f..db47a8a92d52 100644 --- a/war/src/main/less/form/search-bar.less +++ b/war/src/main/less/form/search-bar.less @@ -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); diff --git a/war/src/main/less/pages/plugin-manager.less b/war/src/main/less/pages/plugin-manager.less index b284f97ee841..aa421ef026ea 100644 --- a/war/src/main/less/pages/plugin-manager.less +++ b/war/src/main/less/pages/plugin-manager.less @@ -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); - } - } -}