From 1d2383318ee259986c5f6cd095475b773dd4a313 Mon Sep 17 00:00:00 2001 From: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Wed, 26 Jan 2022 14:10:21 +0000 Subject: [PATCH 1/6] Init --- .../hudson/views/BuildButtonColumn/columnHeader.jelly | 4 ++-- core/src/main/resources/lib/hudson/projectView.jelly | 3 --- core/src/main/resources/lib/hudson/projectViewRow.jelly | 3 --- war/src/main/less/abstracts/theme.less | 6 +++--- 4 files changed, 5 insertions(+), 11 deletions(-) diff --git a/core/src/main/resources/hudson/views/BuildButtonColumn/columnHeader.jelly b/core/src/main/resources/hudson/views/BuildButtonColumn/columnHeader.jelly index 19fbbd1e8eec..7da40bad1859 100644 --- a/core/src/main/resources/hudson/views/BuildButtonColumn/columnHeader.jelly +++ b/core/src/main/resources/hudson/views/BuildButtonColumn/columnHeader.jelly @@ -23,5 +23,5 @@ THE SOFTWARE. --> - - \ No newline at end of file + + diff --git a/core/src/main/resources/lib/hudson/projectView.jelly b/core/src/main/resources/lib/hudson/projectView.jelly index 0eff0e94e397..cb32a417ce36 100644 --- a/core/src/main/resources/lib/hudson/projectView.jelly +++ b/core/src/main/resources/lib/hudson/projectView.jelly @@ -73,9 +73,6 @@ THE SOFTWARE. - - - diff --git a/core/src/main/resources/lib/hudson/projectViewRow.jelly b/core/src/main/resources/lib/hudson/projectViewRow.jelly index 0e623b850d1a..f264e3fa0078 100644 --- a/core/src/main/resources/lib/hudson/projectViewRow.jelly +++ b/core/src/main/resources/lib/hudson/projectViewRow.jelly @@ -34,8 +34,5 @@ THE SOFTWARE. - - - diff --git a/war/src/main/less/abstracts/theme.less b/war/src/main/less/abstracts/theme.less index 7ad0c596381a..133973d7cbcf 100644 --- a/war/src/main/less/abstracts/theme.less +++ b/war/src/main/less/abstracts/theme.less @@ -21,9 +21,9 @@ // branding --primary: #024cb6; --secondary: #4d545d; - --success: #138347; - --danger: #cc0003; - --warning: #ea6b19; + --success: var(--green); + --danger: var(--red); + --warning: var(--orange); --focus: #3fb3f7; --focus-btn-primary: fade(#0b6aa2, 50%); --focus-btn-secondary: fade(#0b6aa2, 50%); From 797d57a91abe4650c0a87b3d63e9ebbc8995a9e9 Mon Sep 17 00:00:00 2001 From: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Wed, 26 Jan 2022 14:15:35 +0000 Subject: [PATCH 2/6] Update table.less --- war/src/main/less/modules/table.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/war/src/main/less/modules/table.less b/war/src/main/less/modules/table.less index b0bee21e995e..3d647cd98dbf 100644 --- a/war/src/main/less/modules/table.less +++ b/war/src/main/less/modules/table.less @@ -105,7 +105,7 @@ padding-left: 0!important; text-align: center!important; white-space: nowrap; - width: 60px; + width: 3.5rem; } &__cell--no-wrap { From c431933372b4e7e3a7e0fcb0df66b696e0537fb7 Mon Sep 17 00:00:00 2001 From: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Thu, 3 Feb 2022 10:48:17 +0000 Subject: [PATCH 3/6] Fix styling --- war/src/main/less/abstracts/theme.less | 2 +- war/src/main/less/modules/table.less | 107 ++++++++++++++++--------- 2 files changed, 70 insertions(+), 39 deletions(-) diff --git a/war/src/main/less/abstracts/theme.less b/war/src/main/less/abstracts/theme.less index 133973d7cbcf..dc3c3f95937f 100644 --- a/war/src/main/less/abstracts/theme.less +++ b/war/src/main/less/abstracts/theme.less @@ -174,7 +174,7 @@ --table-body-background: white; --table-body-foreground: black; --table-border-radius: 10px; - --table-body-radius: 6px; + --table-row-border-radius: 6px; // Deprecated --even-row-color: var(--very-light-grey); diff --git a/war/src/main/less/modules/table.less b/war/src/main/less/modules/table.less index 3d647cd98dbf..68458ce106ec 100644 --- a/war/src/main/less/modules/table.less +++ b/war/src/main/less/modules/table.less @@ -2,8 +2,7 @@ width: calc(100% - 10px); background: var(--table-background); border-collapse: collapse; - border-radius: 6px; - overflow: hidden; + border-radius: var(--table-border-radius); box-shadow: 0 0 0 5px var(--table-background); margin: 5px; --table-padding: 0.55rem; @@ -61,12 +60,10 @@ height: 50px; &:first-of-type { - border-radius: var(--table-body-radius) 0 0 var(--table-body-radius); padding-left: calc(var(--table-padding) * 2); } &:last-of-type { - border-radius: 0 var(--table-body-radius) var(--table-body-radius) 0; padding-right: var(--table-padding); } } @@ -74,23 +71,36 @@ &:last-of-type { border-bottom: none; } - } - & > tr:first-of-type { + // Style the rows so that the first and last have a larger border radius & > td:first-of-type { - border-radius: var(--table-border-radius) 0 0 var(--table-body-radius); + border-top-left-radius: var(--table-row-border-radius); + border-bottom-left-radius: var(--table-row-border-radius); } + & > td:last-of-type { - border-radius: 0 var(--table-border-radius) var(--table-body-radius) 0; + border-top-right-radius: var(--table-row-border-radius); + border-bottom-right-radius: var(--table-row-border-radius); } - } - & > tr:last-of-type { - & > td:first-of-type { - border-radius: var(--table-body-radius) 0 0 var(--table-border-radius); + // First row + &:first-of-type { + & > td:first-of-type { + border-top-left-radius: var(--table-border-radius); + } + & > td:last-of-type { + border-top-right-radius: var(--table-border-radius); + } } - & > td:last-of-type { - border-radius: 0 var(--table-body-radius) var(--table-border-radius) 0; + + // Last row + &:last-of-type { + & > td:first-of-type { + border-bottom-left-radius: var(--table-border-radius); + } + & > td:last-of-type { + border-bottom-right-radius: var(--table-border-radius); + } } } } @@ -102,8 +112,8 @@ } &__cell--tight { - padding-left: 0!important; - text-align: center!important; + padding-left: 0 !important; + text-align: center !important; white-space: nowrap; width: 3.5rem; } @@ -120,15 +130,15 @@ display: inline-flex; } - &__button, &__link, &__icon { + &__button, &__icon { svg, .build-status-icon__wrapper, img { - width: 24px!important; - height: 24px!important; + width: 24px !important; + height: 24px !important; } } &--medium { - --table-padding: 0.4rem!important; + --table-padding: 0.4rem !important; tbody > tr > td { height: 40px; @@ -136,8 +146,8 @@ .jenkins-table__button, .jenkins-table__link, .jenkins-table__icon { svg, .build-status-icon__wrapper, img { - width: 20px!important; - height: 20px!important; + width: 20px !important; + height: 20px !important; } } } @@ -151,14 +161,14 @@ .jenkins-table__button, .jenkins-table__link, .jenkins-table__icon { svg, .build-status-icon__wrapper, img { - width: 16px!important; - height: 16px!important; + width: 16px !important; + height: 16px !important; } } } &__button, &__link { - color: var(--link-color)!important; + color: var(--link-color) !important; } &__button, .sortheader, &__link { @@ -176,54 +186,68 @@ font-weight: inherit; font-size: inherit; background: transparent; - text-decoration: none!important; - line-height: 1!important; + text-decoration: none !important; + line-height: 1 !important; + transition: var(--standard-transition); - &::before { + &::before, + &::after { content: ""; position: absolute; top: -7px; left: -10px; bottom: -7px; right: -10px; - border-radius: 5px; - background: var(--text-color); + border-radius: 6px; z-index: -1; + transition: var(--standard-transition); + } + + &::before { + background: var(--text-color); opacity: 0; - transition: 0.2s ease; + } + + &::after { + opacity: 0.05; + box-shadow: 0 0 0 10px transparent; } &:hover { &::before { - opacity: 0.05!important; - border-radius: 5px; + opacity: 0.05 !important; + border-radius: 6px; background: var(--text-color); } } &:focus, &:active { &::before { - opacity: 0.1!important; + opacity: 0.1 !important; border-radius: 5px; background: var(--text-color); } + + &::after { + box-shadow: 0 0 0 5px var(--text-color); + } } &--green { - color: var(--green)!important; + color: var(--green) !important; } &--orange { - color: var(--orange)!important; + color: var(--orange) !important; } &--red { - color: var(--red)!important; + color: var(--red) !important; } } &__badge { - margin-left: 1rem!important; + margin-left: 1rem !important; &::before { top: -5px; @@ -234,5 +258,12 @@ background: var(--link-color); opacity: 0.05; } + + &::after { + top: -5px; + left: -8px; + bottom: -5px; + right: -8px; + } } } From fb0d1fba3b515eeef7ad445b15bb8ea113395673 Mon Sep 17 00:00:00 2001 From: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Thu, 3 Feb 2022 10:52:27 +0000 Subject: [PATCH 4/6] Update users pages --- .../model/View/AsynchPeople/people-resources.js | 8 +++----- .../security/HudsonPrivateSecurityRealm/index.jelly | 12 +++++------- 2 files changed, 8 insertions(+), 12 deletions(-) diff --git a/core/src/main/resources/hudson/model/View/AsynchPeople/people-resources.js b/core/src/main/resources/hudson/model/View/AsynchPeople/people-resources.js index 3a90ccf9d7eb..880d302694f3 100644 --- a/core/src/main/resources/hudson/model/View/AsynchPeople/people-resources.js +++ b/core/src/main/resources/hudson/model/View/AsynchPeople/people-resources.js @@ -27,15 +27,13 @@ function display(data) { d = document.createElement('td'); var a = document.createElement('a'); a.href = rootURL + "/" + e.url; + a.className = "jenkins-table__link" a.appendChild(document.createTextNode(e.id)); d.appendChild(a); r.appendChild(d); d = document.createElement('td'); - var a = document.createElement('a'); - a.href = rootURL + "/" + e.url; - a.appendChild(document.createTextNode(e.fullName)); - d.appendChild(a); + d.appendChild(document.createTextNode(e.fullName)); r.appendChild(d); d = document.createElement('td'); @@ -55,4 +53,4 @@ function display(data) { ts_refresh(p); } -} \ No newline at end of file +} diff --git a/core/src/main/resources/hudson/security/HudsonPrivateSecurityRealm/index.jelly b/core/src/main/resources/hudson/security/HudsonPrivateSecurityRealm/index.jelly index 863035f7cb83..c2bb1da166b3 100644 --- a/core/src/main/resources/hudson/security/HudsonPrivateSecurityRealm/index.jelly +++ b/core/src/main/resources/hudson/security/HudsonPrivateSecurityRealm/index.jelly @@ -34,7 +34,7 @@ THE SOFTWARE. -

${%blurb}

+

${%blurb}

@@ -49,18 +49,16 @@ THE SOFTWARE. -
+
- - - +
- ${user.id} + ${user.id} - ${user.fullName} + ${user.fullName}
From 3b38fefdb2981e2287b089013a862559ce1cad11 Mon Sep 17 00:00:00 2001 From: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Fri, 4 Feb 2022 20:11:46 +0000 Subject: [PATCH 5/6] Update CSS to use border spacing over actual borders for improved corner radius --- war/src/main/less/abstracts/theme.less | 2 +- war/src/main/less/modules/table.less | 16 ++++++---------- 2 files changed, 7 insertions(+), 11 deletions(-) diff --git a/war/src/main/less/abstracts/theme.less b/war/src/main/less/abstracts/theme.less index dc3c3f95937f..8c36b64457c1 100644 --- a/war/src/main/less/abstracts/theme.less +++ b/war/src/main/less/abstracts/theme.less @@ -174,7 +174,7 @@ --table-body-background: white; --table-body-foreground: black; --table-border-radius: 10px; - --table-row-border-radius: 6px; + --table-row-border-radius: 4px; // Deprecated --even-row-color: var(--very-light-grey); diff --git a/war/src/main/less/modules/table.less b/war/src/main/less/modules/table.less index 68458ce106ec..1a6762c4979c 100644 --- a/war/src/main/less/modules/table.less +++ b/war/src/main/less/modules/table.less @@ -1,11 +1,12 @@ .jenkins-table { + --table-padding: 0.55rem; + width: calc(100% - 10px); background: var(--table-background); - border-collapse: collapse; - border-radius: var(--table-border-radius); - box-shadow: 0 0 0 5px var(--table-background); - margin: 5px; - --table-padding: 0.55rem; + border-radius: calc(var(--table-border-radius) + 2px); + border: 5px solid var(--table-background); + border-bottom-width: 3px; + border-spacing: 0 2px; * { -webkit-border-horizontal-spacing: 0; @@ -51,7 +52,6 @@ & > tr { background: var(--table-body-background); color: var(--table-body-foreground); - border-bottom: 2px solid var(--table-background); & > td { vertical-align: middle; @@ -68,10 +68,6 @@ } } - &:last-of-type { - border-bottom: none; - } - // Style the rows so that the first and last have a larger border radius & > td:first-of-type { border-top-left-radius: var(--table-row-border-radius); From c5c1df74242bbf383f1cdc8cb2764d9b4e82314d Mon Sep 17 00:00:00 2001 From: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Fri, 4 Feb 2022 20:18:00 +0000 Subject: [PATCH 6/6] Fix table tooltip --- war/src/main/less/base/style.less | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/war/src/main/less/base/style.less b/war/src/main/less/base/style.less index d5d60bcd8da4..9e25bc3f9c39 100644 --- a/war/src/main/less/base/style.less +++ b/war/src/main/less/base/style.less @@ -717,6 +717,12 @@ table.parameters > tbody:hover { table { border-radius: 0; min-width: 450px; + box-sizing: content-box; + padding-bottom: 2px; + + * { + box-sizing: border-box; + } } }