Minor footer appearance tweaks

core/src/main/resources/lib/layout/layout.jelly

@@ -214,8 +214,7 @@ THE SOFTWARE.
     </div>
 
     <j:if test="${layoutType!='full-screen'}">
-    <footer class="page-footer">
-      <div class="container-fluid">
+      <footer class="page-footer jenkins-mobile-hide">
         <div class="page-footer__flex-row">
           <div class="page-footer__footer-id-placeholder" id="footer"></div>
 
@@ -225,20 +224,40 @@ THE SOFTWARE.
             </j:forEach>
           </j:if>
 
-          <j:if test="${!empty(it.api)}">
-            <div class="page-footer__links rest_api hidden-xs">
-              <a href="api/">REST API</a>
-            </div>
-          </j:if>
+          <div class="page-footer__links">
+            <j:if test="${!empty(it.api)}">
+              <a class="jenkins-button jenkins-button--tertiary rest-api" href="api/">REST API</a>
+            </j:if>
 
-          <div class="page-footer__links page-footer__links--white jenkins_ver">
-            <a href="${h.getFooterURL()}" rel="noopener noreferrer" target="_blank">Jenkins ${h.version}</a>
+            <l:overflowButton text="Jenkins ${h.version}"
+                              clazz="jenkins-button--tertiary jenkins_ver"
+                              icon="${null}"
+                              tooltip="${null}">
+              <l:hasPermission permission="${app.SYSTEM_READ}">
+                <a class="jenkins-dropdown__item" href="${rootURL}/manage/about">
+                  <div class="jenkins-dropdown__item__icon">
+                    <l:icon src="symbol-jenkins" />
+                  </div>
+                  ${%About Jenkins}
+                </a>
+                <div class="jenkins-dropdown__separator"></div>
+              </l:hasPermission>
+              <a class="jenkins-dropdown__item" href="https://www.jenkins.io/participate/" rel="noopener noreferrer" target="_blank">
+                <div class="jenkins-dropdown__item__icon">
+                  <l:icon src="symbol-heart" />
+                </div>
+                ${%Get involved}
+              </a>
+              <a class="jenkins-dropdown__item" href="${h.getFooterURL()}" rel="noopener noreferrer" target="_blank">
+                <div class="jenkins-dropdown__item__icon">
+                  <l:icon src="symbol-external" />
+                </div>
+                ${%Website}
+              </a>
+            </l:overflowButton>
           </div>
-
         </div>
-
-      </div>
-    </footer>
+      </footer>
     </j:if>
   </body>
 </html>

core/src/main/resources/lib/layout/overflowButton.jelly

@@ -0,0 +1,65 @@
+<!--
+The MIT License
+
+Copyright (c) 2023, Jan Faracik
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+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:d="jelly:define">
+  <st:documentation>
+    <st:attribute name="icon">
+      Optional icon to be used for the button, defaults to three dots
+    </st:attribute>
+    <st:attribute name="text">
+      Optional text to be displayed on the button
+    </st:attribute>
+    <st:attribute name="tooltip">
+      Optional tooltip of the button, defaults to 'More actions'
+    </st:attribute>
+    <st:attribute name="clazz">
+      Additional CSS class names for the button
+    </st:attribute>
+  </st:documentation>
+
+  <button class="jenkins-button ${attrs.clazz}"
+          tooltip="${attrs.containsKey('tooltip') ? attrs.tooltip : '%More actions'}"
+          type="button" data-dropdown="true">
+    <j:choose>
+      <j:when test="${attrs.containsKey('icon')}">
+        <j:if test="${attrs.icon != null}">
+          <l:icon src="${attrs.icon}" />
+        </j:if>
+      </j:when>
+      <j:otherwise>
+        <div class="jenkins-overflow-button__ellipsis">
+          <span />
+          <span />
+          <span />
+        </div>
+      </j:otherwise>
+    </j:choose>
+
+    ${attrs.text}
+  </button>
+  <template>
+    <d:invokeBody />
+  </template>
+</j:jelly>

war/src/main/js/components/dropdowns/index.js

@@ -1,9 +1,11 @@
 import Jumplists from "@/components/dropdowns/jumplists";
 import InpageJumplist from "@/components/dropdowns/inpage-jumplist";
+import OverflowButton from "@/components/dropdowns/overflow-button";
 
 function init() {
   Jumplists.init();
   InpageJumplist.init();
+  OverflowButton.init();
 }
 
 export default { init };

war/src/main/js/components/dropdowns/overflow-button.js

@@ -0,0 +1,20 @@
+import Utils from "@/components/dropdowns/utils";
+import behaviorShim from "@/util/behavior-shim";
+
+/**
+ * Creates a new dropdown based on the element's next sibling
+ */
+function init() {
+  behaviorShim.specify(
+    "[data-dropdown='true']",
+    "-dropdown-",
+    1000,
+    (element) => {
+      Utils.generateDropdown(element, (instance) => {
+        instance.setContent(element.nextElementSibling.content);
+      });
+    }
+  );
+}
+
+export default { init };

war/src/main/js/components/tooltips/index.js

@@ -15,7 +15,7 @@ const TOOLTIP_BASE = {
  * @param {HTMLElement} element - Registers the tooltips for the given element
  */
 function registerTooltip(element) {
-  if (element._tippy) {
+  if (element._tippy && element._tippy.props.theme === "tooltip") {
     element._tippy.destroy();
   }
 

war/src/main/scss/modules/buttons.scss

@@ -15,7 +15,7 @@
   outline: none;
   margin: 0;
   padding: 0.5rem 0.85rem;
-  font-size: 0.8rem;
+  font-size: 0.8125rem;
   font-weight: 500;
   text-decoration: none !important;
   background: transparent;

war/src/main/scss/modules/dropdowns.scss

@@ -1,7 +1,9 @@
 @use "../abstracts/mixins";
 
+$dropdown-padding: 0.4rem;
+
 .tippy-box[data-theme~="dropdown"] {
-  padding: 0.4rem;
+  padding: $dropdown-padding;
   border-radius: 15px;
   box-shadow: var(--dropdown-box-shadow);
   outline: none !important;
@@ -42,7 +44,7 @@
   &__separator {
     position: relative;
     height: 0.125rem;
-    margin: 0.3rem -0.3rem;
+    margin: $dropdown-padding calc($dropdown-padding * -1);
     border: none;
 
     &::before {
@@ -56,8 +58,8 @@
 
   &__heading {
     color: var(--text-color-secondary) !important;
-    margin: 0.4rem 0.55rem;
-    font-size: 0.8rem;
+    margin: $dropdown-padding 0.55rem;
+    font-size: 0.8125rem;
     font-weight: 600;
     opacity: 0.8;
 
@@ -68,8 +70,8 @@
 
   &__placeholder {
     color: var(--text-color-secondary) !important;
-    margin: 0.4rem 0.55rem;
-    font-size: 0.8rem;
+    margin: $dropdown-padding 0.55rem;
+    font-size: 0.8125rem;
     opacity: 0.8;
   }
 
@@ -87,8 +89,8 @@
     border: none;
     outline: none;
     margin: 0;
-    padding: 0.4rem 1.75rem 0.4rem 0.6rem;
-    font-size: 0.8rem;
+    padding: $dropdown-padding 1.75rem $dropdown-padding 0.6rem;
+    font-size: 0.8125rem;
     font-weight: 500;
     text-decoration: none !important;
     background: transparent;

war/src/main/scss/modules/page-footer.scss

@@ -1,7 +1,6 @@
 @use "../abstracts/mixins";
 
 .page-footer {
-  background-color: var(--footer-background);
   width: 100%;
   clear: both;
   font-size: var(--font-size-sm);
@@ -12,16 +11,17 @@
 }
 
 .page-footer__flex-row {
-  min-height: 3.5rem;
   display: flex;
   align-items: stretch;
   flex-wrap: wrap;
 }
 
 .page-footer__flex-row > *:not(script) {
-  padding: 0.5rem 1.25rem;
   display: flex;
   align-items: center;
+  padding: calc(var(--section-padding) / 2)
+    calc(var(--section-padding) - 0.85rem);
+  gap: calc(var(--section-padding) / 2);
 }
 
 .page-footer__footer-id-placeholder {
@@ -33,14 +33,15 @@
   display: inline-block;
 }
 
-.page-footer__links {
-  &:not(:last-child) {
-    border-right: 1px solid var(--breadcrumbs-bg);
-  }
-}
+.page-footer .jenkins-button {
+  transition: var(--standard-transition);
 
-.page-footer a {
-  @include mixins.link-dark;
+  &:hover {
+    color: var(--text-color) !important;
+  }
 
-  font-weight: 600;
+  svg,
+  .jenkins-overflow-button__ellipsis {
+    display: none;
+  }
 }