Update widget appearance (#279)

jenkinsci · Dec 19, 2023 · 0e0b379 · 0e0b379
1 parent 845e91b
commit 0e0b379
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 28 deletions.
diff --git a/...ources/hudson/plugins/timestamper/annotator/TimestampAnnotatorFactory3/settingsForm.jelly b/...ources/hudson/plugins/timestamper/annotator/TimestampAnnotatorFactory3/settingsForm.jelly
@@ -1,17 +1,29 @@
 <?jelly escape-by-default='true'?>
 <j:jelly xmlns:j="jelly:core">
-<form>
-    <label>
-        <input type="radio" name="timestamps" id="timestamper-systemTime">${%System clock time}</input>
-    </label>
-    <label>
-        <input type="checkbox" id="timestamper-localTime" style="margin-left: 15px;">${%Use browser timezone}</input>
-    </label>
-    <label>
-        <input type="radio" name="timestamps" id="timestamper-elapsedTime">${%Elapsed time}</input>
-    </label>
-    <label>
-        <input type="radio" name="timestamps" id="timestamper-none">${%None}</input>
-    </label>
-</form>
-</j:jelly>
+    <form>
+        <div class="jenkins-radio">
+            <input type="radio" name="timestamps" id="timestamper-systemTime" class="jenkins-radio__input" />
+            <label for="timestamper-systemTime" class="jenkins-radio__label">
+                ${%System clock time}
+            </label>
+        </div>
+        <div class="jenkins-checkbox jenkins-!-margin-left-2">
+            <input type="checkbox" id="timestamper-localTime" />
+            <label for="timestamper-localTime">
+                ${%Use browser timezone}
+            </label>
+        </div>
+        <div class="jenkins-radio">
+            <input type="radio" name="timestamps" id="timestamper-elapsedTime" class="jenkins-radio__input" />
+            <label for="timestamper-elapsedTime" class="jenkins-radio__label">
+                ${%Elapsed time}
+            </label>
+        </div>
+        <div class="jenkins-radio">
+            <input type="radio" name="timestamps" id="timestamper-none" class="jenkins-radio__input" />
+            <label for="timestamper-none" class="jenkins-radio__label">
+                ${%None}
+            </label>
+        </div>
+    </form>
+</j:jelly>
diff --git a/...ources/hudson/plugins/timestamper/annotator/TimestampAnnotatorFactory3/usersettings.jelly b/...ources/hudson/plugins/timestamper/annotator/TimestampAnnotatorFactory3/usersettings.jelly
@@ -29,23 +29,36 @@ THE SOFTWARE.
 
   <l:ajax>
     <style>
-      .timestamper-form-pane {
-        padding: .5rem 1rem;
-        clear: both
+      #timestamper-pane .pane-header-title {
+        display: flex;
+        justify-content: space-between;
       }
-      .timestamper-form-pane label {
-        line-height: 2rem;
-        display: block;
+      .timestamper-form-pane {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+
+        form {
+          display: contents;
+        }
+
+        * {
+          margin-top: 0 !important;
+          margin-bottom: 0 !important;
+          top: 0 !important;
+        }
       }
     </style>
-    <div>
-      <div class="pane-header col-xs-24">
-        <span class="pane-header-title">${%Timestamps}</span>
-        <span><a class="timestamper-plain-text" href="${it.plainTextUrl}">${%View as plain text}</a></span>
-      </div>
-      <div class="timestamper-form-pane">
+
+    <j:set var="title">
+      <span class="pane-header-title">${%Timestamps}</span>
+      <a class="timestamper-plain-text" href="${it.plainTextUrl}">${%View as plain text}</a>
+    </j:set>
+
+    <l:pane width="3" title="${title}" id="timestamper-pane">
+      <div class="timestamper-form-pane jenkins-!-padding-2">
         <st:include page="settingsForm.jelly"/>
       </div>
-    </div>
+    </l:pane>
   </l:ajax>
 </j:jelly>