Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update table styling and spacing #6248

Merged
merged 7 commits into from
Feb 7, 2022
Merged

Update table styling and spacing #6248

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
1d23833
Init
janfaracik Jan 26, 2022
797d57a
Update table.less
janfaracik Jan 26, 2022
c431933
Fix styling
janfaracik Feb 3, 2022
7980bc2
Merge branch 'master' into small-table-update
janfaracik Feb 3, 2022
fb0d1fb
Update users pages
janfaracik Feb 3, 2022
3b38fef
Update CSS to use border spacing over actual borders for improved cor…
janfaracik Feb 4, 2022
c5c1df7
Fix table tooltip
janfaracik Feb 4, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 3 additions & 5 deletions core/src/main/resources/hudson/model/View/AsynchPeople/people-resources.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand All @@ -55,4 +53,4 @@ function display(data) {

ts_refresh(p);
}
}
}
12 changes: 5 additions & 7 deletions core/src/main/resources/hudson/security/HudsonPrivateSecurityRealm/index.jelly
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ THE SOFTWARE.
</h1>
</div>
</div>
<p>${%blurb}</p>
<p class="jenkins-description">${%blurb}</p>

<table class="jenkins-table sortable" id="people">
<thead>
Expand All @@ -49,18 +49,16 @@ THE SOFTWARE.
<tbody>
<j:forEach var="user" items="${it.allUsers}">
<tr>
<td>
<td class="jenkins-table__cell--tight jenkins-table__icon">
<div class="jenkins-table__cell__button-wrapper">
<a href="${user.url}/" class="jenkins-table__button model-link inside">
<img src="${h.getUserAvatar(user,'32x32')}" alt="" height="32" width="32"/>
</a>
<img src="${h.getUserAvatar(user,'32x32')}" alt="" height="32" width="32"/>
</div>
</td>
<td>
<a href="${user.url}/" class="jenkins-table__link">${user.id}</a>
<a href="${user.url}/" class="jenkins-table__link model-link inside">${user.id}</a>
</td>
<td>
<a href="${user.url}/" class="jenkins-table__link">${user.fullName}</a>
${user.fullName}
</td>
<td>
<div class="jenkins-table__cell__button-wrapper">
Expand Down
4 changes: 2 additions & 2 deletions core/src/main/resources/hudson/views/BuildButtonColumn/columnHeader.jelly
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,5 +23,5 @@ THE SOFTWARE.
-->
<?jelly escape-by-default='true'?>
<j:jelly xmlns:j="jelly:core">
<th class="jenkins-table__cell--tight" />
</j:jelly>
<th class="jenkins-table__cell--tight" data-sort-disable="true" />
</j:jelly>
3 changes: 0 additions & 3 deletions core/src/main/resources/lib/hudson/projectView.jelly
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,9 +73,6 @@ THE SOFTWARE.
<j:forEach var="col" items="${columnExtensions}">
<st:include page="columnHeader.jelly" it="${col}" />
</j:forEach>
<th>
<st:nbsp/>
</th>
</tr>
</thead>

Expand Down
3 changes: 0 additions & 3 deletions core/src/main/resources/lib/hudson/projectViewRow.jelly
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,5 @@ THE SOFTWARE.
<j:forEach var="col" items="${columnExtensions}">
<st:include page="column.jelly" it="${col}"/>
</j:forEach>
<td>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There was an extra row/column for the dashboard table causing unnecessary padding/spacing. Removing it doesn't seem to have broken anything - anybody know what it was there for?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's basically always been like that; the last part was a sortable column. Though it doesn't sort anything, likely used for spacing in past days, I guess?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like initially (pre-dating configurable columns) it was a spacer between the build icon and the data columns:

jenkins/core/src/main/resources/lib/hudson/projectView.jelly

Lines 118 to 127 in f7d7507

<td>
<st:nbsp/>
</td>
<l:isAdmin>
<td>
<j:if test="${job.buildable}">
<a href="${jobBaseUrl}${job.shortUrl}build">
<img src="${imagesURL}/${subIconSize}/clock.gif" title="Schedule a build" border="0" /></a>
</j:if>
</td>

When 6f5dafd made the default columns part of the extension system, it was left in.

<st:nbsp/>
</td>
</tr>
</j:jelly>
8 changes: 4 additions & 4 deletions war/src/main/less/abstracts/theme.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%);
Expand Down Expand Up @@ -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);
Expand Down
109 changes: 70 additions & 39 deletions war/src/main/less/modules/table.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -61,36 +60,47 @@
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);
}
}

&: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);
}
}
}
}
Expand All @@ -102,10 +112,10 @@
}

&__cell--tight {
padding-left: 0!important;
text-align: center!important;
padding-left: 0 !important;
text-align: center !important;
white-space: nowrap;
width: 60px;
width: 3.5rem;
}

&__cell--no-wrap {
Expand All @@ -120,24 +130,24 @@
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;
}

.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;
}
}
}
Expand All @@ -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 {
Expand All @@ -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;
Expand All @@ -234,5 +258,12 @@
background: var(--link-color);
opacity: 0.05;
}

&::after {
top: -5px;
left: -8px;
bottom: -5px;
right: -8px;
}
}
}