table resizing

make the table sample resizable
jenkinsci · Jan 6, 2025 · d71dddf · d71dddf
1 parent b7f9359
commit d71dddf
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 64 deletions.
diff --git a/src/main/resources/io/jenkins/plugins/designlibrary/Table/index.jelly b/src/main/resources/io/jenkins/plugins/designlibrary/Table/index.jelly
@@ -23,60 +23,80 @@ THE SOFTWARE.
 -->
 
 <?jelly escape-by-default='true'?>
-<j:jelly xmlns:j="jelly:core" xmlns:s="/lib/samples">
+<j:jelly xmlns:j="jelly:core" xmlns:s="/lib/samples" xmlns:t="/lib/hudson" xmlns:l="/lib/layout">
   <s:layout>
     <s:section hideBorder="true">
       <s:group>
         <s:preview>
-          <table class="jenkins-table sortable jenkins-!-margin-bottom-0">
-            <thead>
-              <th>
-                Name
-              </th>
-              <th>
-                Status
-              </th>
-              <th>
-                Reason
-              </th>
-            </thead>
-            <tbody>
-              <tr>
-                <td>
-                  <a href="#" class="jenkins-table__link">Link 1</a>
-                </td>
-                <td>
-                  Success
-                  <a href="#" class="jenkins-table__link jenkins-table__badge model-link">#7</a>
-                </td>
-                <td>
-                  No Errors
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <a href="#" class="jenkins-table__link">Link 2</a>
-                </td>
-                <td>
-                  Failure
-                </td>
-                <td>
-                  Can't compile
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <a href="#" class="jenkins-table__link">Link 3</a>
-                </td>
-                <td>
-                  Unstable
-                </td>
-                <td>
-                  Test Failed
-                </td>
-              </tr>
-            </tbody>
-          </table>
+          <div style="width: 100%" class="jenkins-!-margin-bottom-0">
+            <t:setIconSize/>
+            <table class="jenkins-table sortable ${iconSize == '16x16' ? 'jenkins-table--small' : iconSize == '24x24' ? 'jenkins-table--medium' : ''}">
+              <thead>
+                <th>
+                  Name
+                </th>
+                <th class="jenkins-table__cell--tight">S</th>
+                <th>
+                  Status
+                </th>
+                <th>
+                  Reason
+                </th>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>
+                    <a href="#" class="jenkins-table__link">Link 1</a>
+                  </td>
+                  <td class="jenkins-table__cell--tight jenkins-table__icon">
+                    <div class="jenkins-table__cell__button-wrapper">
+                      <l:icon src="symbol-status-blue"/>
+                    </div>
+                  </td>
+                  <td>
+                    Success
+                    <a href="#" class="jenkins-table__link jenkins-table__badge model-link">#7</a>
+                  </td>
+                  <td>
+                    No Errors
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    <a href="#" class="jenkins-table__link">Link 2</a>
+                  </td>
+                  <td class="jenkins-table__cell--tight jenkins-table__icon">
+                    <div class="jenkins-table__cell__button-wrapper">
+                      <l:icon src="symbol-status-red"/>
+                    </div>
+                  </td>
+                  <td>
+                    Failure
+                  </td>
+                  <td>
+                    Can't compile
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    <a href="#" class="jenkins-table__link">Link 3</a>
+                  </td>
+                  <td class="jenkins-table__cell--tight jenkins-table__icon">
+                    <div class="jenkins-table__cell__button-wrapper">
+                      <l:icon src="symbol-status-yellow"/>
+                    </div>
+                  </td>
+                  <td>
+                    Unstable
+                  </td>
+                  <td>
+                    Test Failed
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+            <t:iconSize/>
+          </div>
         </s:preview>
         <s:code file="index.jelly" />
       </s:group>

diff --git a/src/main/resources/scss/pages/_index.scss b/src/main/resources/scss/pages/_index.scss
@@ -9,3 +9,4 @@
 @use "notifications";
 @use "spacing";
 @use "symbols";
+@use "tables";
diff --git a/src/main/resources/scss/pages/_tables.scss b/src/main/resources/scss/pages/_tables.scss
@@ -0,0 +1,3 @@
+.jenkins-icon-size {
+  margin-bottom: 0;
+}
diff --git a/src/main/webapp/Table/index.jelly b/src/main/webapp/Table/index.jelly
@@ -1,20 +1,27 @@
-<table class="jenkins-table sortable">
-  <thead>
-    <th>
-      Name
-    </th>
-    <th>
-      Status
-    </th>
-    <th>
-      Reason
-    </th>
-  </thead>
-  <tbody>
+<t:setIconSize/>
+<table class="jenkins-table sortable ${iconSize == '16x16' ? 'jenkins-table--small' : iconSize == '24x24' ? 'jenkins-table--medium' : ''}">
+<thead>
+  <th>
+    Name
+  </th>
+  <th class="jenkins-table__cell--tight">S</th>
+  <th>
+    Status
+  </th>
+  <th>
+    Reason
+  </th>
+</thead>
+<tbody>
   <tr>
     <td>
       <a href="#" class="jenkins-table__link">Link 1</a>
     </td>
+    <td class="jenkins-table__cell--tight jenkins-table__icon">
+      <div class="jenkins-table__cell__button-wrapper">
+        <l:icon src="symbol-status-blue"/>
+      </div>
+    </td>
     <td>
       Success
       <a href="#" class="jenkins-table__link jenkins-table__badge model-link">#7</a>
@@ -27,6 +34,11 @@
     <td>
       <a href="#" class="jenkins-table__link">Link 2</a>
     </td>
+    <td class="jenkins-table__cell--tight jenkins-table__icon">
+      <div class="jenkins-table__cell__button-wrapper">
+        <l:icon src="symbol-status-red"/>
+      </div>
+    </td>
     <td>
       Failure
     </td>
@@ -38,12 +50,18 @@
     <td>
       <a href="#" class="jenkins-table__link">Link 3</a>
     </td>
+    <td class="jenkins-table__cell--tight jenkins-table__icon">
+      <div class="jenkins-table__cell__button-wrapper">
+        <l:icon src="symbol-status-yellow"/>
+      </div>
+    </td>
     <td>
       Unstable
     </td>
     <td>
       Test Failed
     </td>
   </tr>
-  </tbody>
+</tbody>
 </table>
+<t:iconSize/>