Merge branch 'refine-description' into add-parameters-detail

Author: janfaracik

core/src/main/resources/hudson/model/Run/new-build-page.jelly

@@ -33,15 +33,16 @@ THE SOFTWARE.
       <script src="${resURL}/jsbundles/pages/job.js" type="text/javascript" defer="true" />
 
       <j:set var="controls">
-        <t:editDescriptionButton permission="${it.UPDATE}"/>
         <l:hasPermission permission="${it.UPDATE}">
           <st:include page="logKeep.jelly" />
         </l:hasPermission>
       </j:set>
 
       <t:buildCaption controls="${controls}">${it.displayName}</t:buildCaption>
 
-      <l:details-bar it="${it}" />
+      <l:details-bar it="${it}">
+        <t:editDescriptionButton permission="${it.UPDATE}" compact="true" />
+      </l:details-bar>
 
       <div>
         <t:editableDescription permission="${it.UPDATE}" hideButton="true"/>

core/src/main/resources/lib/hudson/editDescriptionButton.jelly

@@ -13,20 +13,36 @@
         <st:attribute name="submissionUrl">
             Optional submission URL. If not specified, will use 'submitDescription'.
         </st:attribute>
+        <st:attribute name="compact">
+            If set, the button becomes compact and the button label hides.
+        </st:attribute>
     </st:documentation>
-    <j:set var="actualDescription" value="${description}" defaultValue="${it.description}"/>
+
+    <j:set var="actualDescription" value="${description}" defaultValue="${it.description}" />
+
+    <j:set var="label">
+        <j:choose>
+            <j:when test="${empty(actualDescription)}">
+                ${%add description}
+            </j:when>
+            <j:otherwise>
+                ${%edit description}
+            </j:otherwise>
+        </j:choose>
+    </j:set>
+
     <l:hasPermission permission="${permission}">
-        <st:adjunct includes="lib.hudson.editable-description"/>
-        <a class="jenkins-button jenkins-hidden" id="description-link" href="editDescription" data-description="${actualDescription}" data-url="${submissionUrl}">
-            <l:icon src="symbol-edit" />
-            <j:choose>
-                <j:when test="${empty(actualDescription)}">
-                    ${%add description}
-                </j:when>
-                <j:otherwise>
-                    ${%edit description}
-                </j:otherwise>
-            </j:choose>
+        <st:adjunct includes="lib.hudson.editable-description" />
+        <a class="jenkins-button jenkins-hidden ${attrs.compact ? 'jenkins-details__button' : ''}"
+             id="description-link"
+             href="editDescription"
+             data-description="${actualDescription}"
+             data-url="${submissionUrl}"
+             tooltip="${attrs.compact ? label : null}">
+            <l:icon src="symbol-description" />
+            <j:if test="${!attrs.compact}">
+                ${label}
+            </j:if>
         </a>
     </l:hasPermission>
-</j:jelly>
+</j:jelly>

core/src/main/resources/lib/layout/details-bar.jelly

@@ -22,7 +22,7 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 -->
 <?jelly escape-by-default='true'?>
-<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:l="/lib/layout" xmlns:x="jelly:xml">
+<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:l="/lib/layout" xmlns:x="jelly:xml" xmlns:d="jelly:define">
   <st:documentation>
     A wrappable bar of details about the given object.
 
@@ -51,5 +51,6 @@ THE SOFTWARE.
         </st:include>
       </j:forEach>
     </j:forEach>
+    <d:invokeBody />
   </div>
 </j:jelly>

src/main/scss/components/_details.scss

@@ -5,7 +5,7 @@ $icon-size: 1.125rem;
 .jenkins-details {
   display: flex;
   align-items: center;
-  gap: 0.625rem 1.25rem;
+  gap: 0.75rem 1.25rem;
   flex-wrap: wrap;
 
   button.jenkins-details__item,
@@ -42,7 +42,7 @@ $icon-size: 1.125rem;
         height: $icon-size;
 
         * {
-          stroke-width: 40px;
+          stroke-width: 36px;
         }
       }
     }
@@ -53,4 +53,26 @@ $icon-size: 1.125rem;
     opacity: 0.5;
     margin-inline: -0.5rem;
   }
+
+  &__button {
+    --button-background: transparent !important;
+
+    min-width: 51px;
+    min-height: 2rem;
+    padding-block: 0;
+    color: var(--text-color-secondary) !important;
+
+    &:not(:hover, :active, :focus-visible) {
+      --jenkins-border--subtle: var(--jenkins-border);
+    }
+
+    svg {
+      width: $icon-size;
+      height: $icon-size;
+
+      * {
+        stroke-width: 36px;
+      }
+    }
+  }
 }