Fix schedule creation layouts, disabled input styles, input group ali…

…gnment on the updated theme (#8927)
uyuni-project · Jul 24, 2024 · 7808370 · 7808370
1 parent a3dc948
commit 7808370
Show file tree

Hide file tree

Showing 13 changed files with 71 additions and 13 deletions.
diff --git a/java/code/src/com/suse/manager/webui/utils/ViewHelper.java b/java/code/src/com/suse/manager/webui/utils/ViewHelper.java
@@ -101,7 +101,9 @@ public enum ViewHelper {
         "/rhn/systems/details/SystemRemoteCommand.do",
         "/rhn/manager/systems/details/highstate",
         "/rhn/manager/systems/details/recurring-actions",
-        "/rhn/manager/cm/build"
+        "/rhn/manager/cm/build",
+        "/rhn/admin/ScheduleDetail.do",
+        "/rhn/manager/systems/cmd"
     );
 
     ViewHelper() { }

diff --git a/java/code/webapp/WEB-INF/pages/admin/scheduleDetail.jsp b/java/code/webapp/WEB-INF/pages/admin/scheduleDetail.jsp
@@ -70,7 +70,7 @@
                     <label for="parent" class="col-lg-3 control-label">
                         <bean:message key="schedule.edit.jsp.frequency"/>:
                     </label>
-                    <div class="">
+                    <div class="col-lg-9">
                         <jsp:include page="/WEB-INF/pages/common/fragments/repeat-task-picker.jspf">
                             <jsp:param name="widget" value="date"/>
                         </jsp:include>

diff --git a/java/spacewalk-java.changes.eth.inputs-and-friends b/java/spacewalk-java.changes.eth.inputs-and-friends
@@ -0,0 +1 @@
+- Fix input alignment and style issues on schedule creation page
diff --git a/web/html/src/branding/css/susemanager/components/buttons.suma.scss b/web/html/src/branding/css/susemanager/components/buttons.suma.scss
@@ -203,10 +203,6 @@
     bottom: -1px;
     left: -1px;
   }
-
-  &:last-child {
-    margin-left: -1px;
-  }
 }
 
 .btn-group .btn {

diff --git a/web/html/src/branding/css/susemanager/components/inputs.less b/web/html/src/branding/css/susemanager/components/inputs.less
@@ -53,9 +53,11 @@
 
 // TODO: Bind this class to the react-select control once we upgrade react-select, see https://react-select.com/styles#the-classnames-prop
 .form-control--react-select > div:first-of-type {
-  &:hover {
+  outline: none !important;
+
+  &[class*="--is-focused"],
+  &[class*="--menu-is-open"] {
     border-color: @eos-bc-blue-500 !important;
-    outline: none !important;
   }
 }
 
@@ -72,7 +74,12 @@ select[size] {
 }
 
 .input-group-addon {
+  color: @eos-bc-gray-900;
   border-color: @input-border-color !important;
   background: @gray-lighter;
   font-size: 1em;
+
+  > .fa:first-child:last-child {
+    margin: 0;
+  }
 }
diff --git a/web/html/src/branding/css/susemanager/components/inputs.scss b/web/html/src/branding/css/susemanager/components/inputs.scss
@@ -24,6 +24,20 @@ $input-height: 35px;
   &:active {
     background: #fff;
   }
+
+  // This is like writing `div&`, except this nonsense is valid syntax, see https://stackoverflow.com/a/28357148/1470607
+  @at-root #{selector-unify(&, div)},
+  &[disabled],
+  &[readonly],
+  fieldset[disabled] & {
+    background-color: $gray-lighter;
+    opacity: 1;
+  }
+
+  &[disabled],
+  fieldset[disabled] & {
+    cursor: not-allowed;
+  }
 }
 
 .form-control {
@@ -80,9 +94,11 @@ div.form-control {
 
 // TODO: Bind this class to the react-select control once we upgrade react-select, see https://react-select.com/styles#the-classnames-prop
 .form-control--react-select > div:first-of-type {
-  &:hover {
-    border: 1px solid $eos-bc-blue-500 !important;
-    outline: none !important;
+  outline: none !important;
+
+  &[class*="--is-focused"],
+  &[class*="--menu-is-open"] {
+    border-color: $eos-bc-blue-500 !important;
   }
 }
 
@@ -92,6 +108,16 @@ select[size] {
   height: auto;
 }
 
+// We need to manually handle these cases to fix legacy DOM structures
+.input-group {
+  --bs-border-width: 1px;
+}
+
+.input-group-btn:not(:first-child) .btn {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
 .input-group-text {
   --bs-border-width: 1px;
   font-size: 1em;
@@ -106,3 +132,9 @@ select[size] {
 .input-group {
   align-items: center;
 }
+
+.input-group-addon {
+  color: $eos-bc-gray-900;
+  background: $gray-lighter;
+  font-size: 1em;
+}
diff --git a/web/html/src/branding/css/susemanager/components/legend.scss b/web/html/src/branding/css/susemanager/components/legend.scss
@@ -0,0 +1,13 @@
+// These styles are migrated verbatim from the old theme, please don't use it for new code
+legend {
+  display: block;
+  width: 100%;
+  padding: 0;
+  margin-bottom: 21px;
+  font-size: 21px;
+  line-height: inherit;
+  color: inherit;
+  border: 0;
+  // TODO: Here and elsewhere, standardize border colors after the Bootstrap migration is complete
+  border-bottom: 1px solid #e5e5e5;
+}
diff --git a/web/html/src/branding/css/susemanager/components/modal.less b/web/html/src/branding/css/susemanager/components/modal.less
@@ -42,6 +42,7 @@
 .modal-footer {
   margin: 0;
   padding: 15px;
+  // TODO: Here and elsewhere, standardize border colors after the Bootstrap migration is complete
   border-top: 1px solid #e5e5e5;
 }
 

diff --git a/web/html/src/branding/css/susemanager/components/modal.scss b/web/html/src/branding/css/susemanager/components/modal.scss
@@ -3,6 +3,7 @@
 }
 
 .modal-header {
+  // TODO: Here and elsewhere, standardize border colors after the Bootstrap migration is complete
   border-bottom: 1px solid #e5e5e5;
   padding: 15px;
 
@@ -57,6 +58,7 @@
 .modal-footer {
   margin: 0;
   padding: 15px;
+  // TODO: Here and elsewhere, standardize border colors after the Bootstrap migration is complete
   border-top: 1px solid #e5e5e5;
 
   .btn + .btn {

diff --git a/web/html/src/branding/css/susemanager/index.scss b/web/html/src/branding/css/susemanager/index.scss
@@ -27,6 +27,7 @@
 @import "./components/address.scss";
 @import "./components/pre.scss";
 @import "./components/label.scss";
+@import "./components/legend.scss";
 
 @import "./bootstrap-fixes.scss";
 @import "../base/fixes.scss";

diff --git a/web/html/src/components/datetime/DateTimePicker.tsx b/web/html/src/components/datetime/DateTimePicker.tsx
@@ -125,7 +125,7 @@ export const DateTimePicker = (props: Props) => {
               data-picker-type="date"
               onClick={() => openDatePicker()}
             >
-              &nbsp;<i className="fa fa-calendar"></i>
+              <i className="fa fa-calendar"></i>
             </span>
             <ReactDatePicker
               key="date-picker"
@@ -171,7 +171,7 @@ export const DateTimePicker = (props: Props) => {
               data-picker-type="time"
               onClick={openTimePicker}
             >
-              &nbsp;<i className="fa fa-clock-o"></i>
+              <i className="fa fa-clock-o"></i>
             </span>
             <ReactDatePicker
               key="time-picker"

diff --git a/web/html/src/core/spa/view-helper.ts b/web/html/src/core/spa/view-helper.ts
@@ -45,6 +45,8 @@ const BOOTSTRAP_READY_PAGES: string[] = [
   "/rhn/manager/systems/details/highstate",
   "/rhn/manager/systems/details/recurring-actions",
   "/rhn/manager/cm/build",
+  "/rhn/admin/ScheduleDetail.do",
+  "/rhn/manager/systems/cmd",
 ];
 
 export const onEndNavigate = () => {

diff --git a/web/spacewalk-web.changes.eth.inputs-and-friends b/web/spacewalk-web.changes.eth.inputs-and-friends
@@ -0,0 +1 @@
+- Fix input alignment and style issues on schedule creation page
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		- Fix input alignment and style issues on schedule creation page