From cee0d06770e6bed478e105368ef57371814f3f79 Mon Sep 17 00:00:00 2001 From: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Wed, 10 Nov 2021 09:37:28 +0000 Subject: [PATCH] Modernise the table design (#5851) Co-authored-by: Tim Jacomb --- .../java/org/jenkins/ui/icon/IconSet.java | 48 +++- .../resources/hudson/AboutJenkins/index.jelly | 1 + .../model/BuildTimelineWidget/control.jelly | 2 +- .../hudson/model/Computer/builds.jelly | 1 - .../hudson/model/ComputerSet/index.jelly | 72 +++--- .../hudson/model/Job/buildTimeTrend.jelly | 1 - .../model/View/AsynchPeople/index.jelly | 44 ++-- .../View/AsynchPeople/people-resources.js | 17 +- .../resources/hudson/model/View/builds.jelly | 12 +- .../resources/hudson/model/View/noJob.jelly | 13 +- .../views/BuildButtonColumn/column.jelly | 14 +- .../BuildButtonColumn/columnHeader.jelly | 6 +- .../hudson/views/JobColumn/column.jelly | 2 +- .../views/LastFailureColumn/column.jelly | 2 +- .../views/LastStableColumn/column.jelly | 2 +- .../views/LastSuccessColumn/column.jelly | 2 +- .../hudson/views/StatusColumn/column.jelly | 4 +- .../views/StatusColumn/columnHeader.jelly | 2 +- .../views/WeatherColumn/columnHeader.jelly | 4 +- .../hudson/widgets/HistoryWidget/index.jelly | 16 +- .../jenkins/model/Jenkins/manage.jelly | 2 +- .../resources/lib/hudson/ballColorTd.jelly | 87 +++---- .../resources/lib/hudson/buildHealth.jelly | 47 ++-- .../resources/lib/hudson/buildListTable.jelly | 43 ++-- .../resources/lib/hudson/projectView.jelly | 22 +- .../main/resources/lib/layout/ionicon.jelly | 18 ++ test/src/test/java/lib/layout/IconTest.java | 8 +- war/src/main/less/abstracts/theme.less | 32 ++- war/src/main/less/base-styles-v2.less | 51 ++-- war/src/main/less/base/style.less | 11 +- war/src/main/less/base/typography.less | 7 + war/src/main/less/modules/icon-size.less | 2 +- .../main/less/modules/panes-and-bigtable.less | 15 +- .../main/less/modules/side-panel-widgets.less | 11 + war/src/main/less/modules/table.less | 224 ++++++++++++++++++ war/src/main/less/modules/tabs.less | 78 ++---- .../main/resources/images/ionicons/LICENCE | 21 ++ .../images/ionicons/ellipse-outline.svg | 1 + .../images/ionicons/person-circle-outline.svg | 1 + .../images/ionicons/play-outline.svg | 1 + .../images/ionicons/settings-outline.svg | 1 + .../images/ionicons/terminal-outline.svg | 1 + war/src/main/webapp/scripts/sortable.js | 2 +- 43 files changed, 647 insertions(+), 304 deletions(-) create mode 100644 core/src/main/resources/lib/layout/ionicon.jelly create mode 100644 war/src/main/less/modules/table.less create mode 100644 war/src/main/resources/images/ionicons/LICENCE create mode 100644 war/src/main/resources/images/ionicons/ellipse-outline.svg create mode 100644 war/src/main/resources/images/ionicons/person-circle-outline.svg create mode 100644 war/src/main/resources/images/ionicons/play-outline.svg create mode 100644 war/src/main/resources/images/ionicons/settings-outline.svg create mode 100644 war/src/main/resources/images/ionicons/terminal-outline.svg diff --git a/core/src/main/java/org/jenkins/ui/icon/IconSet.java b/core/src/main/java/org/jenkins/ui/icon/IconSet.java index ff20a4f1a4b3..d79b81d3fc44 100644 --- a/core/src/main/java/org/jenkins/ui/icon/IconSet.java +++ b/core/src/main/java/org/jenkins/ui/icon/IconSet.java @@ -23,12 +23,18 @@ */ package org.jenkins.ui.icon; +import java.io.InputStream; +import java.nio.charset.StandardCharsets; +import org.apache.commons.io.IOUtils; +import org.apache.commons.jelly.JellyContext; +import org.apache.commons.lang.StringUtils; + +import java.io.IOException; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import java.util.concurrent.ConcurrentHashMap; -import org.apache.commons.jelly.JellyContext; /** * An icon set. @@ -37,13 +43,16 @@ */ public class IconSet { + public static final IconSet icons = new IconSet(); + private static final Map IONICONS = new ConcurrentHashMap<>(); private Map iconsByCSSSelector = new ConcurrentHashMap<>(); private Map iconsByUrl = new ConcurrentHashMap<>(); private Map iconsByClassSpec = new ConcurrentHashMap<>(); private Map coreIcons = new ConcurrentHashMap<>(); + private static final String PLACEHOLDER_SVG = "Ellipse"; private static final Icon NO_ICON = new Icon("_", "_", "_"); public IconSet() { @@ -57,6 +66,43 @@ public static void initPageVariables(JellyContext context) { context.setVariable("icons", icons); } + private static String prependTitleIfRequired(String icon, String title) { + if (StringUtils.isNotBlank(title)) { + return "" + title + "" + icon; + } + return icon; + } + + public static String getIonicon(String name, String title) { + if (IONICONS.containsKey(name)) { + String icon = IONICONS.get(name); + return prependTitleIfRequired(icon, title); + } + + // Load icon if it exists + InputStream inputStream = IconSet.class.getResourceAsStream("/images/ionicons/" + name + ".svg"); + String ionicon = null; + + try { + if (inputStream != null) { + ionicon = IOUtils.toString(inputStream, StandardCharsets.UTF_8); + } + } catch (IOException e) { + // ignored + } + if (ionicon == null) { + ionicon = PLACEHOLDER_SVG; + } + + ionicon = ionicon.replaceAll("()[^&]*()", "$1$2"); + ionicon = ionicon.replaceAll("Font Awesome, created by Dave Gandy. SIL OFL 1.1 License and MIT License
  • Google Fonts: Roboto, created by Christian Robertson. Apache License, version 2.0
  • Jenkins Contrib Themes, created by Afonso Franca. MIT License
    • +
  • Ionicons, created by Ionic. MIT License

    • ${%plugin.dependencies}

      diff --git a/core/src/main/resources/hudson/model/BuildTimelineWidget/control.jelly b/core/src/main/resources/hudson/model/BuildTimelineWidget/control.jelly index 5a8614564c30..0d8a0e7e4ea9 100644 --- a/core/src/main/resources/hudson/model/BuildTimelineWidget/control.jelly +++ b/core/src/main/resources/hudson/model/BuildTimelineWidget/control.jelly @@ -29,7 +29,7 @@ THE SOFTWARE. -
      +
      diff --git a/core/src/main/resources/hudson/model/Computer/builds.jelly b/core/src/main/resources/hudson/model/Computer/builds.jelly index a0eaf9ddc365..6da3169b97e5 100644 --- a/core/src/main/resources/hudson/model/Computer/builds.jelly +++ b/core/src/main/resources/hudson/model/Computer/builds.jelly @@ -36,7 +36,6 @@ THE SOFTWARE.

      -
      diff --git a/core/src/main/resources/hudson/model/ComputerSet/index.jelly b/core/src/main/resources/hudson/model/ComputerSet/index.jelly index 60b5ca18f500..928da57f62f3 100644 --- a/core/src/main/resources/hudson/model/ComputerSet/index.jelly +++ b/core/src/main/resources/hudson/model/ComputerSet/index.jelly @@ -32,25 +32,48 @@ THE SOFTWARE. - - - - - - - - - - - + +
      +
      +

      ${%Manage nodes and clouds}

      +
      + +
      +
      + + +
      +       +
      + +
      S${%Name}${m.columnCaption} -
      + + + + + + + + + + + + + - - + + + @@ -58,11 +81,13 @@ THE SOFTWARE. - @@ -85,15 +110,8 @@ THE SOFTWARE. - +
      S${%Name}${m.columnCaption} +
      - + +
      + +
      		${c.displayName} + ${c.displayName} + + - - - +
      + + + +
      - -
      -
      - - -
      -       diff --git a/core/src/main/resources/hudson/model/Job/buildTimeTrend.jelly b/core/src/main/resources/hudson/model/Job/buildTimeTrend.jelly index 1a689c5a0ae3..5e31711bd21f 100644 --- a/core/src/main/resources/hudson/model/Job/buildTimeTrend.jelly +++ b/core/src/main/resources/hudson/model/Job/buildTimeTrend.jelly @@ -32,7 +32,6 @@ THE SOFTWARE.

      ${%Timeline}

      -

      ${%Build Time Trend}

      diff --git a/core/src/main/resources/hudson/model/View/AsynchPeople/index.jelly b/core/src/main/resources/hudson/model/View/AsynchPeople/index.jelly index fb3620d99963..e61154061292 100644 --- a/core/src/main/resources/hudson/model/View/AsynchPeople/index.jelly +++ b/core/src/main/resources/hudson/model/View/AsynchPeople/index.jelly @@ -28,24 +28,36 @@ THE SOFTWARE. -

      - - ${%People} - - - - ${it.parent.displayName} -

      -

      ${%blurb}

      +
      +
      +

      + ${%People} + + + - ${it.parent.displayName} +

      +
      +
      +

      ${%blurb}

      - - - - - - - + + + + + + +
      - ${%User ID}${%Name}${%Last Commit Activity}${%On}
      + + + + + + + + + +
      ${%User ID}${%Name}${%Last Commit Activity}${%On}
      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 054748aaa716..3a90ccf9d7eb 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 @@ -1,7 +1,6 @@ function display(data) { var p = document.getElementById('people'); var rootURL = document.head.getAttribute('data-rooturl'); - var iconSize = document.getElementById("asynch-people-description").getAttribute("data-iconsize"); for (var x = 0; data.length > x; x++) { var e = data[x]; var id = 'person-' + e.id; @@ -17,14 +16,12 @@ function display(data) { } var d = document.createElement('td'); - var a = document.createElement('a'); - a.href = rootURL + "/" + e.url; - a.className = 'model-link inside'; - var i = document.createElement('img'); - i.src = e.avatar; - i.className = 'icon' + iconSize; - a.appendChild(i); - d.appendChild(a); + var wrapper = document.createElement('div'); + wrapper.className = 'jenkins-table__cell__button-wrapper'; + d.className = 'jenkins-table__cell--tight jenkins-table__icon'; + var icon = document.getElementById('person-circle-outline') + wrapper.innerHTML = icon.children[0].outerHTML; + d.appendChild(wrapper); r.appendChild(d); d = document.createElement('td'); @@ -50,7 +47,7 @@ function display(data) { if (e.projectUrl != null) { a = document.createElement('a'); a.href = rootURL + "/" + e.projectUrl; - a.className = 'model-link inside'; + a.className = 'jenkins-table__link model-link inside'; a.appendChild(document.createTextNode(e.projectFullDisplayName)); d.appendChild(a); } diff --git a/core/src/main/resources/hudson/model/View/builds.jelly b/core/src/main/resources/hudson/model/View/builds.jelly index 5e98db044aba..19149c83c413 100644 --- a/core/src/main/resources/hudson/model/View/builds.jelly +++ b/core/src/main/resources/hudson/model/View/builds.jelly @@ -28,15 +28,17 @@ THE SOFTWARE. -

      - - ${%buildHistory(it.class.name=='hudson.model.AllView' ? app.displayName : it.displayName)} -

      +
      +
      +

      + ${%buildHistory(it.class.name=='hudson.model.AllView' ? app.displayName : it.displayName)} +

      +
      +
      -
      diff --git a/core/src/main/resources/hudson/model/View/noJob.jelly b/core/src/main/resources/hudson/model/View/noJob.jelly index 5e744c21fab9..4145b1118be8 100644 --- a/core/src/main/resources/hudson/model/View/noJob.jelly +++ b/core/src/main/resources/hudson/model/View/noJob.jelly @@ -24,19 +24,8 @@ THE SOFTWARE. - -
      -
      ${%description_1} - ${%description_2} + ${%description_2} -
      -
       diff --git a/core/src/main/resources/hudson/views/BuildButtonColumn/column.jelly b/core/src/main/resources/hudson/views/BuildButtonColumn/column.jelly index 110f40149bf4..d9d44ea921ff 100644 --- a/core/src/main/resources/hudson/views/BuildButtonColumn/column.jelly +++ b/core/src/main/resources/hudson/views/BuildButtonColumn/column.jelly @@ -24,11 +24,12 @@ THE SOFTWARE. - + - - - + + +
      + @@ -38,11 +39,10 @@ THE SOFTWARE. - - + +
      diff --git a/core/src/main/resources/hudson/views/BuildButtonColumn/columnHeader.jelly b/core/src/main/resources/hudson/views/BuildButtonColumn/columnHeader.jelly index 1d7825c40c12..19fbbd1e8eec 100644 --- a/core/src/main/resources/hudson/views/BuildButtonColumn/columnHeader.jelly +++ b/core/src/main/resources/hudson/views/BuildButtonColumn/columnHeader.jelly @@ -22,8 +22,6 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. --> - - - - + + \ No newline at end of file diff --git a/core/src/main/resources/hudson/views/JobColumn/column.jelly b/core/src/main/resources/hudson/views/JobColumn/column.jelly index ecb560cfce92..1e9811dff991 100644 --- a/core/src/main/resources/hudson/views/JobColumn/column.jelly +++ b/core/src/main/resources/hudson/views/JobColumn/column.jelly @@ -26,6 +26,6 @@ THE SOFTWARE. - + diff --git a/core/src/main/resources/hudson/views/LastFailureColumn/column.jelly b/core/src/main/resources/hudson/views/LastFailureColumn/column.jelly index 43544f10bb35..51046f5886b8 100644 --- a/core/src/main/resources/hudson/views/LastFailureColumn/column.jelly +++ b/core/src/main/resources/hudson/views/LastFailureColumn/column.jelly @@ -29,7 +29,7 @@ THE SOFTWARE. ${lfBuild.timestampString} - - ${lfBuild.displayName} + ${lfBuild.displayName} ${%N/A} diff --git a/core/src/main/resources/hudson/views/LastStableColumn/column.jelly b/core/src/main/resources/hudson/views/LastStableColumn/column.jelly index 6700bd42d65e..7bbc2dcc0868 100644 --- a/core/src/main/resources/hudson/views/LastStableColumn/column.jelly +++ b/core/src/main/resources/hudson/views/LastStableColumn/column.jelly @@ -29,7 +29,7 @@ THE SOFTWARE. ${lstBuild.timestampString} - - ${lstBuild.displayName} + ${lstBuild.displayName} ${%N/A} diff --git a/core/src/main/resources/hudson/views/LastSuccessColumn/column.jelly b/core/src/main/resources/hudson/views/LastSuccessColumn/column.jelly index bed1c1363c15..4ac61bffd584 100644 --- a/core/src/main/resources/hudson/views/LastSuccessColumn/column.jelly +++ b/core/src/main/resources/hudson/views/LastSuccessColumn/column.jelly @@ -29,7 +29,7 @@ THE SOFTWARE. ${lsBuild.timestampString} - - ${lsBuild.displayName} + ${lsBuild.displayName} ${%N/A} diff --git a/core/src/main/resources/hudson/views/StatusColumn/column.jelly b/core/src/main/resources/hudson/views/StatusColumn/column.jelly index b6a772135675..5297d99809a3 100644 --- a/core/src/main/resources/hudson/views/StatusColumn/column.jelly +++ b/core/src/main/resources/hudson/views/StatusColumn/column.jelly @@ -23,6 +23,6 @@ THE SOFTWARE. --> - - + + \ No newline at end of file diff --git a/core/src/main/resources/hudson/views/StatusColumn/columnHeader.jelly b/core/src/main/resources/hudson/views/StatusColumn/columnHeader.jelly index d33a9422b899..12d2b4bfc2ec 100644 --- a/core/src/main/resources/hudson/views/StatusColumn/columnHeader.jelly +++ b/core/src/main/resources/hudson/views/StatusColumn/columnHeader.jelly @@ -24,5 +24,5 @@ THE SOFTWARE. - ${%S} + ${%S} \ No newline at end of file diff --git a/core/src/main/resources/hudson/views/WeatherColumn/columnHeader.jelly b/core/src/main/resources/hudson/views/WeatherColumn/columnHeader.jelly index fd2224835d68..29af9277804e 100644 --- a/core/src/main/resources/hudson/views/WeatherColumn/columnHeader.jelly +++ b/core/src/main/resources/hudson/views/WeatherColumn/columnHeader.jelly @@ -24,5 +24,7 @@ THE SOFTWARE. - ${%W} + + ${%W} + \ No newline at end of file diff --git a/core/src/main/resources/hudson/widgets/HistoryWidget/index.jelly b/core/src/main/resources/hudson/widgets/HistoryWidget/index.jelly index 52f21a5a8266..40ee03ea2aaf 100644 --- a/core/src/main/resources/hudson/widgets/HistoryWidget/index.jelly +++ b/core/src/main/resources/hudson/widgets/HistoryWidget/index.jelly @@ -29,10 +29,16 @@ THE SOFTWARE. - - - - + +
      + + + + ${it.displayName} + + ${%trend} + +
      @@ -66,7 +72,7 @@ THE SOFTWARE.
      - +
      diff --git a/core/src/main/resources/jenkins/model/Jenkins/manage.jelly b/core/src/main/resources/jenkins/model/Jenkins/manage.jelly index 868561225ce0..1ef3190a32bc 100644 --- a/core/src/main/resources/jenkins/model/Jenkins/manage.jelly +++ b/core/src/main/resources/jenkins/model/Jenkins/manage.jelly @@ -37,7 +37,7 @@ THE SOFTWARE. -
      +

      ${%Manage Jenkins}

      diff --git a/core/src/main/resources/lib/hudson/ballColorTd.jelly b/core/src/main/resources/lib/hudson/ballColorTd.jelly index a10127a648fc..74beb1e50618 100644 --- a/core/src/main/resources/lib/hudson/ballColorTd.jelly +++ b/core/src/main/resources/lib/hudson/ballColorTd.jelly @@ -37,52 +37,53 @@ THE SOFTWARE. Additional CSS styles to apply. - - - - - - - - + +
      + + + + + + + + + + + + + + + + + - - - - - + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
      diff --git a/core/src/main/resources/lib/hudson/buildHealth.jelly b/core/src/main/resources/lib/hudson/buildHealth.jelly index f6bd18d6bf99..e8045ce6f203 100644 --- a/core/src/main/resources/lib/hudson/buildHealth.jelly +++ b/core/src/main/resources/lib/hudson/buildHealth.jelly @@ -37,33 +37,34 @@ THE SOFTWARE. ${buildHealth.score} - healthReport + jenkins-table__cell--tight jenkins-table__icon healthReport - - - - +
      + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - + + + + +
      - +
      @@ -77,7 +78,7 @@ THE SOFTWARE. - + diff --git a/core/src/main/resources/lib/hudson/buildListTable.jelly b/core/src/main/resources/lib/hudson/buildListTable.jelly index ec9dccbb0787..0329a3c99377 100644 --- a/core/src/main/resources/lib/hudson/buildListTable.jelly +++ b/core/src/main/resources/lib/hudson/buildListTable.jelly @@ -36,25 +36,27 @@ THE SOFTWARE.
      W ${rpt.localizableDescription}${rpt.localizableDescription} ${rpt.score}