From 5566a69d3ddf980dd88b9deee9b9a9d80ca141d0 Mon Sep 17 00:00:00 2001 From: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Mon, 29 Nov 2021 14:56:34 +0000 Subject: [PATCH 1/8] WB: Restyle draggable cards --- .../main/resources/lib/form/hetero-list.jelly | 5 +- .../lib/form/repeatable/repeatable.js | 17 +- .../lib/form/repeatableDeleteButton.jelly | 4 +- war/src/main/js/widgets/config/tabbar.less | 72 ------- war/src/main/less/base/style.less | 73 ------- war/src/main/less/modules/draggable-card.less | 178 ++++++++++++++++-- war/src/main/less/modules/tooltips.less | 1 + .../images/ionicons/close-outline.svg | 1 + 8 files changed, 176 insertions(+), 175 deletions(-) create mode 100644 war/src/main/resources/images/ionicons/close-outline.svg diff --git a/core/src/main/resources/lib/form/hetero-list.jelly b/core/src/main/resources/lib/form/hetero-list.jelly index ca50393ffaf0..bca21866fd23 100644 --- a/core/src/main/resources/lib/form/hetero-list.jelly +++ b/core/src/main/resources/lib/form/hetero-list.jelly @@ -95,14 +95,13 @@ THE SOFTWARE. - - - + + diff --git a/core/src/main/resources/lib/form/repeatable/repeatable.js b/core/src/main/resources/lib/form/repeatable/repeatable.js index 3260051d1795..3d15bf122ada 100644 --- a/core/src/main/resources/lib/form/repeatable/repeatable.js +++ b/core/src/main/resources/lib/form/repeatable/repeatable.js @@ -173,19 +173,10 @@ Behaviour.specify("INPUT.repeatable-add", 'repeatable', 0, function(e) { e = null; // avoid memory leak }); -Behaviour.specify("INPUT.repeatable-delete", 'repeatable', 0, function(e) { - var b = makeButton(e,function(e) { - repeatableSupport.onDelete(e.target); - }); - var be = $(b.get("element")); - be.on("mouseover",function() { - $(this).up(".repeated-chunk").addClassName("hover"); - }); - be.on("mouseout",function() { - $(this).up(".repeated-chunk").removeClassName("hover"); - }); - - e = be = null; // avoid memory leak +Behaviour.specify("BUTTON.repeatable-delete", 'repeatable', 0, function(e) { + e.addEventListener("click", function() { + repeatableSupport.onDelete(e); + }) }); // radio buttons in repeatable content diff --git a/core/src/main/resources/lib/form/repeatableDeleteButton.jelly b/core/src/main/resources/lib/form/repeatableDeleteButton.jelly index b87cf21feb8b..094a6ab82643 100644 --- a/core/src/main/resources/lib/form/repeatableDeleteButton.jelly +++ b/core/src/main/resources/lib/form/repeatableDeleteButton.jelly @@ -32,5 +32,7 @@ THE SOFTWARE. - + diff --git a/war/src/main/js/widgets/config/tabbar.less b/war/src/main/js/widgets/config/tabbar.less index 50060bf72db2..1d3170f10f2d 100644 --- a/war/src/main/js/widgets/config/tabbar.less +++ b/war/src/main/js/widgets/config/tabbar.less @@ -158,78 +158,6 @@ } } - // Repeatable elements - - .repeated-container > .repeated-chunk { - padding: 0.75rem; - } - - .repeated-chunk.hover { - border-color: var(--line-blue); - box-shadow: 0 2px 10px var(--shade), inset 0 200px 200px -200px var(--brightest-bg-color); - position: relative; - z-index: 2 - } - - .repeated-chunk { - border: 1px solid var(--shade); - margin: 2px; - position: relative; - } - // Styling for drag & drop items - .repeated-chunk.repeated-chunk--sortable-ghost, - .repeated-chunk.repeated-chunk--sortable-chosen { - border-width: 2px; - border-color: var(--line-blue); - } - - .repeatable-delete { - position: absolute; - top: -4px; - right: 40px; - height: 20px; - width: 30px; - } - - .repeatable-delete button { - text-align: center; - text-indent: -9999px; - width: 30px !important; - height: 18px !important; - padding: 0 !important; - margin: 0 !important; - .border-radius-top(0) !important; - background-color: var(--danger); - color: var(--light-bg-color); - border: 1px solid var(--danger-line); - line-height: 12px !important; - display: inline-block; - font-size: 8px; - min-width: 0; - min-height: 0; - - &:focus, - &:hover { - background-color: var(--danger-dark); - border-color: var(--danger-dark-line); - color: var(--brightest-bg-color); - } - - &:before { - content: 'X'; - font-weight: bold; - position: absolute; - display: block; - left: 0; - top: 2; - width: 30px; - height: 16px; - text-align: center; - font-size: 12px; - text-indent: 0; - } - } - span.highlight { background-color: #ffff00; } diff --git a/war/src/main/less/base/style.less b/war/src/main/less/base/style.less index 3e44ce12fe5f..7a75da4a21d7 100644 --- a/war/src/main/less/base/style.less +++ b/war/src/main/less/base/style.less @@ -1107,54 +1107,6 @@ table.fingerprint-in-build td { border-radius: 0.25em; } -/* ========================= repeatable elements ========================= */ - -.repeated-chunk { - border: 2px dashed var(--input-border); - padding: 1rem; - border-radius: 6px; -} - -.repeated-chunk.hover { - border-color: var(--medium-grey); -} - -.repeated-chunk .show-if-last { visibility: hidden; } -.repeated-chunk.last .show-if-last { visibility: visible; } - -.repeated-chunk .show-if-not-last { visibility: visible; } -.repeated-chunk.last .show-if-not-last { visibility: hidden; } - -.repeated-chunk .show-if-not-only { visibility: visible; } -.repeated-chunk.only .show-if-not-only { visibility: hidden; } - -/* == nested repeatable elements / 2 deep == */ -.repeated-chunk .repeated-chunk .show-if-last { visibility: hidden; } -.repeated-chunk .repeated-chunk.last .show-if-last { visibility: visible; } - -.repeated-chunk .repeated-chunk .show-if-not-last { visibility: visible; } -.repeated-chunk .repeated-chunk.last .show-if-not-last { visibility: hidden; } - -.repeated-chunk .repeated-chunk .show-if-not-only { visibility: visible; } -.repeated-chunk .repeated-chunk.only .show-if-not-only { visibility: hidden; } - -/* == nested repeatable elements / 3 deep == */ -.repeated-chunk .repeated-chunk .repeated-chunk .show-if-last { visibility: hidden; } -.repeated-chunk .repeated-chunk .repeated-chunk.last .show-if-last { visibility: visible; } - -.repeated-chunk .repeated-chunk .repeated-chunk .show-if-not-last { visibility: visible; } -.repeated-chunk .repeated-chunk .repeated-chunk.last .show-if-not-last { visibility: hidden; } - -.repeated-chunk .repeated-chunk .repeated-chunk .show-if-not-only { visibility: visible; } -.repeated-chunk .repeated-chunk .repeated-chunk.only .show-if-not-only { visibility: hidden; } - -/* -
s marked with to-be-removed is used in conjunction with repeatable.jelly and hetero-list.jelly - and represents a master copy that gets pulled out from HTML, then inserted later upon demand multiple times - when the user does "Add". -*/ -div.to-be-removed { display: none; } - /* ========================= Other form related CSS ========================= */ .radioBlock-container { @@ -1226,31 +1178,6 @@ textarea.rich-editor { visibility: hidden; } -/* ========================= D&D support in heterogenous/repeatable lists = */ - -.hetero-list-container.with-drag-drop .repeated-chunk, -.repeated-container.with-drag-drop .repeated-chunk { - margin-top: 0.5em; - margin-bottom: 0.5em; -} - -// SortableJS drag & drop classes -.repeated-chunk--sortable-ghost { - height: 100px; - width: 100%; - overflow: hidden; -} -.repeated-chunk--sortable-chosen { - height: 100px; - width: 100%; - background-color: transparent; - border: 2px solid var(--primary); - - & > * { - display: none; - } -} - /* ========================= plugin update center ========================= */ #plugins .excerpt { diff --git a/war/src/main/less/modules/draggable-card.less b/war/src/main/less/modules/draggable-card.less index 272c7f3164ad..10246b3e3273 100644 --- a/war/src/main/less/modules/draggable-card.less +++ b/war/src/main/less/modules/draggable-card.less @@ -1,43 +1,195 @@ +/* ========================= repeatable elements ========================= */ + +.repeated-chunk { + position: relative; + border: 2px dashed var(--input-border); + padding: 1rem; + border-radius: 10px; +} + +.repeated-chunk .show-if-last { visibility: hidden; } +.repeated-chunk.last .show-if-last { visibility: visible; } + +.repeated-chunk .show-if-not-last { visibility: visible; } +.repeated-chunk.last .show-if-not-last { visibility: hidden; } + +.repeated-chunk .show-if-not-only { visibility: visible; } +.repeated-chunk.only .show-if-not-only { visibility: hidden; } + +/* == nested repeatable elements / 2 deep == */ +.repeated-chunk .repeated-chunk .show-if-last { visibility: hidden; } +.repeated-chunk .repeated-chunk.last .show-if-last { visibility: visible; } + +.repeated-chunk .repeated-chunk .show-if-not-last { visibility: visible; } +.repeated-chunk .repeated-chunk.last .show-if-not-last { visibility: hidden; } + +.repeated-chunk .repeated-chunk .show-if-not-only { visibility: visible; } +.repeated-chunk .repeated-chunk.only .show-if-not-only { visibility: hidden; } + +/* == nested repeatable elements / 3 deep == */ +.repeated-chunk .repeated-chunk .repeated-chunk .show-if-last { visibility: hidden; } +.repeated-chunk .repeated-chunk .repeated-chunk.last .show-if-last { visibility: visible; } + +.repeated-chunk .repeated-chunk .repeated-chunk .show-if-not-last { visibility: visible; } +.repeated-chunk .repeated-chunk .repeated-chunk.last .show-if-not-last { visibility: hidden; } + +.repeated-chunk .repeated-chunk .repeated-chunk .show-if-not-only { visibility: visible; } +.repeated-chunk .repeated-chunk .repeated-chunk.only .show-if-not-only { visibility: hidden; } + +/* +
s marked with to-be-removed is used in conjunction with repeatable.jelly and hetero-list.jelly + and represents a master copy that gets pulled out from HTML, then inserted later upon demand multiple times + when the user does "Add". +*/ +div.to-be-removed { display: none; } + +/* ========================= D&D support in heterogenous/repeatable lists = */ + +.hetero-list-container.with-drag-drop .repeated-chunk, +.repeated-container.with-drag-drop .repeated-chunk { + margin-bottom: 1rem; +} + +// SortableJS drag & drop classes +.repeated-chunk--sortable-ghost { + height: 100px; + width: 100%; + overflow: hidden; +} + +.repeated-chunk--sortable-chosen { + width: 100%; + height: 100px; + background-color: transparent; + border: 2px solid var(--primary); + + & > * { + display: none; + } +} + .repeated-chunk { + & > div > *:last-of-type { + margin-bottom: 0; + } + &__header { display: flex; align-items: center; justify-content: flex-start; font-weight: bold; + margin-top: -0.4rem; margin-bottom: 0.75rem; .dd-handle { position: relative; - width: 22px; - height: 22px; + width: 30px; + height: 30px; overflow: hidden; margin-right: 0.75rem; cursor: move; + margin-left: -6px; + + &::before { + content: ""; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + background: var(--text-color); + border-radius: var(--form-input-border-radius); + opacity: 0; + transition: var(--standard-transition); + } &::after { content: ""; position: absolute; - top: 1px; + top: 0; left: 4px; + bottom: 0; right: 4px; - height: 20px; - background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='9px' height='19px' viewBox='0 0 9 19' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3EShape%3C/title%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cpath d='M2,15 C3.10456949,15 4,15.8954305 4,17 C4,18.1045695 3.10456949,19 2,19 C0.89543051,19 0,18.1045695 0,17 C0,15.8954305 0.89543051,15 2,15 Z M7,15 C8.10456949,15 9,15.8954305 9,17 C9,18.1045695 8.10456949,19 7,19 C5.89543051,19 5,18.1045695 5,17 C5,15.8954305 5.89543051,15 7,15 Z M2,16 C1.44771525,16 1,16.4477153 1,17 C1,17.5128358 1.38604019,17.9355072 1.88337887,17.9932723 L2,18 L2.11662113,17.9932723 C2.61395981,17.9355072 3,17.5128358 3,17 C3,16.4477153 2.55228475,16 2,16 Z M7,16 C6.44771525,16 6,16.4477153 6,17 C6,17.5128358 6.38604019,17.9355072 6.88337887,17.9932723 L7,18 L7.11662113,17.9932723 C7.61395981,17.9355072 8,17.5128358 8,17 C8,16.4477153 7.55228475,16 7,16 Z M2,10 C3.1045695,10 4,10.8954305 4,12 C4,13.1045695 3.1045695,14 2,14 C0.8954305,14 0,13.1045695 0,12 C0,10.8954305 0.8954305,10 2,10 Z M7,10 C8.1045695,10 9,10.8954305 9,12 C9,13.1045695 8.1045695,14 7,14 C5.8954305,14 5,13.1045695 5,12 C5,10.8954305 5.8954305,10 7,10 Z M2,11 C1.44771525,11 1,11.4477152 1,12 C1,12.5128358 1.38604019,12.9355072 1.88337887,12.9932723 L2,13 L2.11662113,12.9932723 C2.61395981,12.9355072 3,12.5128358 3,12 C3,11.4477152 2.55228475,11 2,11 Z M7,11 C6.44771525,11 6,11.4477152 6,12 C6,12.5128358 6.38604019,12.9355072 6.88337887,12.9932723 L7,13 L7.11662113,12.9932723 C7.61395981,12.9355072 8,12.5128358 8,12 C8,11.4477152 7.55228475,11 7,11 Z M2,5 C3.1045695,5 4,5.8954305 4,7 C4,8.1045695 3.1045695,9 2,9 C0.8954305,9 0,8.1045695 0,7 C0,5.8954305 0.8954305,5 2,5 Z M7,5 C8.1045695,5 9,5.8954305 9,7 C9,8.1045695 8.1045695,9 7,9 C5.8954305,9 5,8.1045695 5,7 C5,5.8954305 5.8954305,5 7,5 Z M2,6 C1.44771525,6 1,6.44771525 1,7 C1,7.51283584 1.38604019,7.93550716 1.88337887,7.99327227 L2,8 L2.11662113,7.99327227 C2.61395981,7.93550716 3,7.51283584 3,7 C3,6.44771525 2.55228475,6 2,6 Z M7,6 C6.44771525,6 6,6.44771525 6,7 C6,7.51283584 6.38604019,7.93550716 6.88337887,7.99327227 L7,8 L7.11662113,7.99327227 C7.61395981,7.93550716 8,7.51283584 8,7 C8,6.44771525 7.55228475,6 7,6 Z M2,0 C3.1045695,0 4,0.8954305 4,2 C4,3.1045695 3.1045695,4 2,4 C0.8954305,4 0,3.1045695 0,2 C0,0.8954305 0.8954305,0 2,0 Z M7,0 C8.1045695,0 9,0.8954305 9,2 C9,3.1045695 8.1045695,4 7,4 C5.8954305,4 5,3.1045695 5,2 C5,0.8954305 5.8954305,0 7,0 Z M2,1 C1.44771525,1 1,1.44771525 1,2 C1,2.51283584 1.38604019,2.93550716 1.88337887,2.99327227 L2,3 L2.11662113,2.99327227 C2.61395981,2.93550716 3,2.51283584 3,2 C3,1.44771525 2.55228475,1 2,1 Z M7,1 C6.44771525,1 6,1.44771525 6,2 C6,2.51283584 6.38604019,2.93550716 6.88337887,2.99327227 L7,3 L7.11662113,2.99327227 C7.61395981,2.93550716 8,2.51283584 8,2 C8,1.44771525 7.55228475,1 7,1 Z' id='Shape' fill='%23FFFFFF' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); - background-repeat: no-repeat; - background-position: left top; + background-color: var(--text-color); + mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Ctitle%3EReorder Three%3C/title%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='M96 256h320M96 176h320M96 336h320'/%3E%3C/svg%3E"); + mask-position: center; + mask-repeat: no-repeat; + mask-size: contain; } &:hover { - &::after { - opacity: 0.75; + &::before { + opacity: 0.1; } } } + } + + // TODO: Update/remove when .jenkins-button PR is merged + .repeatable-delete { + position: absolute; + top: 0.6rem; + right: 0.6rem; + display: flex; + align-items: center; + justify-content: center; + width: 28px; + height: 28px; + border: none; + outline: none; + margin-left: auto; + color: var(--red); + z-index: 0; + background: transparent; + cursor: pointer; + + &::before { + content: ""; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + background: currentColor; + border-radius: 100px; + z-index: -1; + opacity: 0.075; + transition: var(--standard-transition); + } + + &::after { + content: ""; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + box-shadow: 0 0 0 10px transparent; + border-radius: 100px; + z-index: -1; + opacity: 0.075; + transition: var(--standard-transition); + } + + svg { + width: 18px; + height: 18px; + } + + &:hover { + &::before { + opacity: 0.1; + } + } - .yui-button { - margin-left: auto; + &:active, + &:focus { + &::before { + opacity: 0.15; + } - * { - margin: 0; + &::after { + box-shadow: 0 0 0 5px var(--red); } } } diff --git a/war/src/main/less/modules/tooltips.less b/war/src/main/less/modules/tooltips.less index 8c1b499c1985..395d9b44b532 100644 --- a/war/src/main/less/modules/tooltips.less +++ b/war/src/main/less/modules/tooltips.less @@ -8,4 +8,5 @@ font-size: 0.8rem; z-index: 40; overflow: hidden; + max-width: none !important; } diff --git a/war/src/main/resources/images/ionicons/close-outline.svg b/war/src/main/resources/images/ionicons/close-outline.svg new file mode 100644 index 000000000000..7ff315739e50 --- /dev/null +++ b/war/src/main/resources/images/ionicons/close-outline.svg @@ -0,0 +1 @@ +Close \ No newline at end of file From 4a44304e5b30b97f411cc4bc6139e7795761f684 Mon Sep 17 00:00:00 2001 From: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Mon, 29 Nov 2021 20:19:35 +0000 Subject: [PATCH 2/8] Fix checkbox help alignment, add theme support for YUI modals --- core/src/main/resources/lib/form/entry.jelly | 2 +- war/src/main/less/base/yui-compatibility.less | 5 +++++ war/src/main/less/modules/form.less | 6 ++++++ 3 files changed, 12 insertions(+), 1 deletion(-) diff --git a/core/src/main/resources/lib/form/entry.jelly b/core/src/main/resources/lib/form/entry.jelly index f7a9ab4d1285..578306c55dcd 100644 --- a/core/src/main/resources/lib/form/entry.jelly +++ b/core/src/main/resources/lib/form/entry.jelly @@ -96,7 +96,7 @@ THE SOFTWARE. -
+
diff --git a/war/src/main/less/base/yui-compatibility.less b/war/src/main/less/base/yui-compatibility.less index 655054472655..a7df1a601559 100644 --- a/war/src/main/less/base/yui-compatibility.less +++ b/war/src/main/less/base/yui-compatibility.less @@ -216,3 +216,8 @@ div.yahooTree td { display: inline-block; } } + +.yui-panel, +.yui-panel .bd { + background-color: var(--background) !important; +} \ No newline at end of file diff --git a/war/src/main/less/modules/form.less b/war/src/main/less/modules/form.less index 0ff5d62b5987..805e675ab234 100644 --- a/war/src/main/less/modules/form.less +++ b/war/src/main/less/modules/form.less @@ -372,12 +372,18 @@ } } +// Align help buttons correctly with checkboxes + .jenkins-checkbox-help-wrapper { display: flex; align-items: center; justify-content: flex-start; } +.jenkins-checkbox + a.jenkins-help-button { + vertical-align: top; +} + .jenkins-checkbox { position: relative; display: inline-flex; From be68cd1449a65d3ea3f9c3df5e8c4128ed0dfd23 Mon Sep 17 00:00:00 2001 From: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Mon, 29 Nov 2021 20:37:55 +0000 Subject: [PATCH 3/8] Style combobox, fix spacing issues for Maven Config --- .../jenkins/mvn/GlobalMavenConfig/config.groovy | 8 ++------ .../tools/GlobalToolConfiguration/index.groovy | 2 +- war/src/main/less/base/style.less | 11 ++++++----- 3 files changed, 9 insertions(+), 12 deletions(-) diff --git a/core/src/main/resources/jenkins/mvn/GlobalMavenConfig/config.groovy b/core/src/main/resources/jenkins/mvn/GlobalMavenConfig/config.groovy index 53a41b6b1922..7d1ff84aa72f 100644 --- a/core/src/main/resources/jenkins/mvn/GlobalMavenConfig/config.groovy +++ b/core/src/main/resources/jenkins/mvn/GlobalMavenConfig/config.groovy @@ -3,10 +3,6 @@ package jenkins.mvn.GlobalMavenConfig def f = namespace(lib.FormTagLib) f.section(title:_("Maven Configuration")) { - div(class: "jenkins-form-item") { - f.dropdownDescriptorSelector(title:_("Default settings provider"), field:"settingsProvider") - } - div(class: "jenkins-form-item") { - f.dropdownDescriptorSelector(title:_("Default global settings provider"), field:"globalSettingsProvider") - } + f.dropdownDescriptorSelector(title:_("Default settings provider"), field:"settingsProvider") + f.dropdownDescriptorSelector(title:_("Default global settings provider"), field:"globalSettingsProvider") } diff --git a/core/src/main/resources/jenkins/tools/GlobalToolConfiguration/index.groovy b/core/src/main/resources/jenkins/tools/GlobalToolConfiguration/index.groovy index 0ad0f39ffa4b..db0b5b9f276b 100644 --- a/core/src/main/resources/jenkins/tools/GlobalToolConfiguration/index.groovy +++ b/core/src/main/resources/jenkins/tools/GlobalToolConfiguration/index.groovy @@ -31,7 +31,7 @@ l.layout(permission:app.SYSTEM_READ, title:my.displayName) { Functions.getSortedDescriptorsForGlobalConfigByDescriptor(my.FILTER).each { Descriptor descriptor -> set("descriptor",descriptor) set("instance",descriptor) - f.rowSet(name:descriptor.jsonSafeClassName) { + f.rowSet(name:descriptor.jsonSafeClassName, isFormItem: "false") { st.include(from:descriptor, page:descriptor.globalConfigPage) } } diff --git a/war/src/main/less/base/style.less b/war/src/main/less/base/style.less index 7a75da4a21d7..a9761fb937ef 100644 --- a/war/src/main/less/base/style.less +++ b/war/src/main/less/base/style.less @@ -919,15 +919,16 @@ table.parameters > tbody:hover { /* ========================= editable combobox style ========================= */ .comboBoxList { - border: 1px solid #000; overflow: visible; - background-color: white; - color: black; + background-color: var(--background); + color: var(--text-color); + border-radius: var(--form-input-border-radius); + box-shadow: 0 10px 20px rgba(black, 0.1); } .comboBoxSelectedItem { - background-color: Highlight; - color: HighlightText; + background-color: var(--primary); + color: var(--text-color); } .combobox-values { From dd53979cfc5407f3c1b05a8a8f646325bd35e8f2 Mon Sep 17 00:00:00 2001 From: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Mon, 29 Nov 2021 20:56:03 +0000 Subject: [PATCH 4/8] More comprehensive solution for checkbox spacing --- war/src/main/webapp/scripts/hudson-behavior.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/war/src/main/webapp/scripts/hudson-behavior.js b/war/src/main/webapp/scripts/hudson-behavior.js index 2174329378b0..5834b24b8b08 100644 --- a/war/src/main/webapp/scripts/hudson-behavior.js +++ b/war/src/main/webapp/scripts/hudson-behavior.js @@ -2349,7 +2349,7 @@ var hoverNotification = (function() { // Decrease vertical padding for checkboxes window.addEventListener('load', function () { document.querySelectorAll(".jenkins-form-item").forEach(function (element) { - if (element.querySelector("input[type='checkbox']") != null && element.querySelector(".advancedLink") == null) { + if (element.querySelector(":scope > .optionalBlock-container > .row-group-start input[type='checkbox'], :scope > .optional-block-start input[type='checkbox'], :scope > div > .jenkins-checkbox") != null) { element.classList.add("jenkins-form-item--tight") } }); From 3145f9f81d6c0584d0b11276369d3c99f483af9b Mon Sep 17 00:00:00 2001 From: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Tue, 30 Nov 2021 00:15:47 +0000 Subject: [PATCH 5/8] Update `select` component to use ionicon chevron instead --- war/src/main/less/modules/form.less | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/war/src/main/less/modules/form.less b/war/src/main/less/modules/form.less index 805e675ab234..2543ad854c88 100644 --- a/war/src/main/less/modules/form.less +++ b/war/src/main/less/modules/form.less @@ -227,14 +227,15 @@ &::after { content: ""; position: absolute; - top: 13px; - right: 15px; - width: 8px; - height: 8px; - color: inherit; - border-bottom: 2px solid currentColor; - border-right: 2px solid currentColor; - transform: rotate(45deg); + top: 0; + right: 13px; + bottom: 0; + width: 12px; + background-color: currentColor; + mask-image: url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='UTF-8'?%3e%3csvg width='336px' height='192px' viewBox='0 0 336 192' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3ctitle%3ePath%3c/title%3e%3cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3e%3cg id='arrow' transform='translate(0.000000, 0.000000)' fill='%23FF0000' fill-rule='nonzero'%3e%3cpath d='M7.02943725,7.02943725 C16.3053957,-2.24652118 31.2852799,-2.34214962 40.6788451,6.74255194 L40.9705627,7.02943725 L168,134.059 L295.029437,7.02943725 C304.305396,-2.24652118 319.28528,-2.34214962 328.678845,6.74255194 L328.970563,7.02943725 C338.246521,16.3053957 338.34215,31.2852799 329.257448,40.6788451 L328.970563,40.9705627 L184.970563,184.970563 C175.694604,194.246521 160.71472,194.34215 151.321155,185.257448 L151.029437,184.970563 L7.02943725,40.9705627 C-2.34314575,31.5979797 -2.34314575,16.4020203 7.02943725,7.02943725 Z' id='Path'%3e%3c/path%3e%3c/g%3e%3c/g%3e%3c/svg%3e"); + mask-size: contain; + mask-repeat: no-repeat; + mask-position: center; pointer-events: none; } From f120f18637351fe58328d4f6837f233def5ad3f6 Mon Sep 17 00:00:00 2001 From: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Tue, 30 Nov 2021 00:24:38 +0000 Subject: [PATCH 6/8] Use ionicon checkmark instead of default font - :100: consistency --- war/src/main/less/modules/form.less | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/war/src/main/less/modules/form.less b/war/src/main/less/modules/form.less index 2543ad854c88..9ff72c2090af 100644 --- a/war/src/main/less/modules/form.less +++ b/war/src/main/less/modules/form.less @@ -444,7 +444,7 @@ } &::after { - content: "✓"; + content: ""; display: flex; align-items: center; justify-content: center; @@ -454,11 +454,13 @@ right: 0; width: 22px; height: 22px; - font-weight: 800; - color: var(--background); - transition: 0.2s ease; + background: var(--background); + mask-image: url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='UTF-8'?%3e%3csvg width='384px' height='320px' viewBox='0 0 384 320' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3ctitle%3ePath%3c/title%3e%3cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3e%3cpath d='M327.917546,10.9278525 C339.555371,-2.37251966 359.771775,-3.72027991 373.072147,7.91754577 C386.239516,19.4389932 387.692129,39.368305 376.427694,52.671077 L376.082454,53.0721475 L152.082454,309.072147 C140.014868,322.863675 118.889432,323.700972 105.767743,311.015951 L105.372583,310.627417 L9.372583,214.627417 C-3.12419433,202.13064 -3.12419433,181.86936 9.372583,169.372583 C21.7443926,157.000773 41.7261905,156.877055 54.2501999,169.001429 L54.627417,169.372583 L126.441,241.186 L327.917546,10.9278525 Z' id='Path' fill='%23FF0000' fill-rule='nonzero'%3e%3c/path%3e%3c/g%3e%3c/svg%3e"); + mask-size: 10px 10px; + mask-repeat: no-repeat; + mask-position: center; + transition: var(--standard-transition); transform: scale(0); - font-size: 12px; } &:hover { @@ -469,6 +471,7 @@ &:active, &:focus { &::before { + border: 5px solid var(--focus-input-border); box-shadow: 0 0 0 5px var(--focus-input-glow); } } From 88e1017c601cd8237d6cab7dbbee7ca86a8d7f3f Mon Sep 17 00:00:00 2001 From: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Tue, 30 Nov 2021 10:03:52 +0000 Subject: [PATCH 7/8] Fix additional paddings at bottom of forms/optional blocks --- .../jenkins/mvn/FilePathGlobalSettingsProvider/config.jelly | 2 +- .../jenkins/tools/GlobalToolConfiguration/index.groovy | 2 +- core/src/main/resources/lib/form/entry.jelly | 2 +- core/src/main/resources/lib/form/rowSet.jelly | 5 ++++- war/src/main/less/base/style.less | 1 + war/src/main/less/modules/form.less | 5 +++++ 6 files changed, 13 insertions(+), 4 deletions(-) diff --git a/core/src/main/resources/jenkins/mvn/FilePathGlobalSettingsProvider/config.jelly b/core/src/main/resources/jenkins/mvn/FilePathGlobalSettingsProvider/config.jelly index fcd17978b2e1..3f3ff2065305 100644 --- a/core/src/main/resources/jenkins/mvn/FilePathGlobalSettingsProvider/config.jelly +++ b/core/src/main/resources/jenkins/mvn/FilePathGlobalSettingsProvider/config.jelly @@ -24,7 +24,7 @@ THE SOFTWARE. - + \ No newline at end of file diff --git a/core/src/main/resources/jenkins/tools/GlobalToolConfiguration/index.groovy b/core/src/main/resources/jenkins/tools/GlobalToolConfiguration/index.groovy index db0b5b9f276b..713cdba946eb 100644 --- a/core/src/main/resources/jenkins/tools/GlobalToolConfiguration/index.groovy +++ b/core/src/main/resources/jenkins/tools/GlobalToolConfiguration/index.groovy @@ -31,7 +31,7 @@ l.layout(permission:app.SYSTEM_READ, title:my.displayName) { Functions.getSortedDescriptorsForGlobalConfigByDescriptor(my.FILTER).each { Descriptor descriptor -> set("descriptor",descriptor) set("instance",descriptor) - f.rowSet(name:descriptor.jsonSafeClassName, isFormItem: "false") { + f.rowSet(name:descriptor.jsonSafeClassName, class: "jenkins-!-margin-bottom-0") { st.include(from:descriptor, page:descriptor.globalConfigPage) } } diff --git a/core/src/main/resources/lib/form/entry.jelly b/core/src/main/resources/lib/form/entry.jelly index 578306c55dcd..8751a5ea12ec 100644 --- a/core/src/main/resources/lib/form/entry.jelly +++ b/core/src/main/resources/lib/form/entry.jelly @@ -52,7 +52,7 @@ THE SOFTWARE. This content is HTML (unless the boolean variable escapeEntryTitleAndDescription is set). Use h.escape if necessary. - Classes to apply to the form + Classes to apply to the form item URL to the HTML page. When this attribute is specified, the entry gets diff --git a/core/src/main/resources/lib/form/rowSet.jelly b/core/src/main/resources/lib/form/rowSet.jelly index 94468d70a689..2ede2c842d40 100644 --- a/core/src/main/resources/lib/form/rowSet.jelly +++ b/core/src/main/resources/lib/form/rowSet.jelly @@ -38,6 +38,9 @@ THE SOFTWARE. Removes the "jenkins-form-item" class if false + + Classes to apply to the container (this will be the form item if 'isFormItem' is true) + @@ -46,7 +49,7 @@ THE SOFTWARE. -
+
diff --git a/war/src/main/less/base/style.less b/war/src/main/less/base/style.less index a9761fb937ef..6182f2abd215 100644 --- a/war/src/main/less/base/style.less +++ b/war/src/main/less/base/style.less @@ -1149,6 +1149,7 @@ table.fingerprint-in-build td { opacity: 0!important; max-height: 0!important; height: 0!important; + overflow: hidden; } .row-set-end { display: none; } diff --git a/war/src/main/less/modules/form.less b/war/src/main/less/modules/form.less index 9ff72c2090af..1c7555496aa8 100644 --- a/war/src/main/less/modules/form.less +++ b/war/src/main/less/modules/form.less @@ -637,3 +637,8 @@ } } } + +// TODO Remove when https://github.com/jenkinsci/jenkins/pull/5916 is merged in +.jenkins-\!-margin-bottom-0 { + margin-bottom: 0 !important; +} From 72340095b05a0c52533966b1b6acfec6b433183a Mon Sep 17 00:00:00 2001 From: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Tue, 30 Nov 2021 10:54:00 +0000 Subject: [PATCH 8/8] Fix help showing in the wrong spot --- core/src/main/resources/lib/form/hetero-list.jelly | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/src/main/resources/lib/form/hetero-list.jelly b/core/src/main/resources/lib/form/hetero-list.jelly index bca21866fd23..7d996108740e 100644 --- a/core/src/main/resources/lib/form/hetero-list.jelly +++ b/core/src/main/resources/lib/form/hetero-list.jelly @@ -80,7 +80,7 @@ THE SOFTWARE. -
+