Fixes #24174: The display of the description field is broken

Normation · Mar 8, 2024 · 720a337 · 720a337
1 parent 027b9c4
commit 720a337
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 20 deletions.
diff --git a/webapp/sources/rudder/rudder-web/src/main/javascript/rudder/rudder.js b/webapp/sources/rudder/rudder-web/src/main/javascript/rudder/rudder.js
@@ -725,14 +725,14 @@ function setupMarkdown(initialValue, id) {
 }
 
 function togglePreview(target, id) {
-  $("#"+ id + "MarkdownPreviewContainer").toggle();
+  $("#"+ id + "MarkdownPreviewContainer").toggleClass("visually-hidden");
   $(target).toggleClass('fa-eye-slash fa-eye');
   $('#'+ id).toggleClass('col-xs-6 col-xs-12');
 }
 
 function toggleMarkdownEditor(id) {
-  $("#"+ id + "Container").toggle();
-  $("#"+ id + "MarkdownContainer").toggle();
+  $("#"+ id + "Container").toggleClass("visually-hidden");
+  $("#"+ id + "MarkdownContainer").toggleClass("visually-hidden");
 }
 
 function toggleOpacity(target) {

diff --git a/...der/rudder-web/src/main/scala/com/normation/rudder/web/components/DirectiveEditForm.scala b/...der/rudder-web/src/main/scala/com/normation/rudder/web/components/DirectiveEditForm.scala
@@ -479,9 +479,9 @@ class DirectiveEditForm(
     new WBTextAreaField("Description", directive.longDescription) {
       override def setFilter             = notNull _ :: trim _ :: Nil
       override def className             = "form-control"
-      override def labelClassName        = "row col-xs-12"
-      override def subContainerClassName = "row col-xs-12"
-      override def containerClassName    = "col-xs-6 row"
+      override def labelClassName        = ""
+      override def subContainerClassName = ""
+      override def containerClassName    = "col-6 pe-2"
       override def inputAttributes: Seq[(String, String)] = Seq(("rows", "15"))
       override def labelExtensions: NodeSeq               = {
         <i class="fa fa-check text-success cursorPointer half-opacity"     onmouseenter="toggleOpacity(this)" title="Valid description" onmouseout="toggleOpacity(this)" onclick="toggleMarkdownEditor('longDescriptionField')"></i> ++ Text(

diff --git a/.../rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/NodeGroupForm.scala b/.../rudder/rudder-web/src/main/scala/com/normation/rudder/web/components/NodeGroupForm.scala
@@ -470,9 +470,9 @@ class NodeGroupForm(
     new WBTextAreaField("Description", desc) {
       override def setFilter             = notNull _ :: trim _ :: Nil
       override def className             = "form-control"
-      override def labelClassName        = "col-12"
-      override def subContainerClassName = "col-12"
-      override def containerClassName    = "col-6"
+      override def labelClassName        = ""
+      override def subContainerClassName = ""
+      override def containerClassName    = "pe-2"
       override def errorClassName        = "field_errors paddscala"
       override def inputAttributes: Seq[(String, String)] = Seq(("rows", "15"))
       override def labelExtensions: NodeSeq               = {

diff --git a/...er/rudder-web/src/main/webapp/templates-hidden/components/ComponentDirectiveEditForm.html b/...er/rudder-web/src/main/webapp/templates-hidden/components/ComponentDirectiveEditForm.html
@@ -128,21 +128,21 @@ <h1>
                 Here comes the shortDescription field
               </div>
               <div id="longDescriptionFieldMarkdownContainer">
-                <label class="wbBaseFieldLabel"><span class="text-fit">Description</span>
+                <label><span class="text-fit">Description</span>
                   <i class="fa fa-pencil text-primary cursorPointer half-opacity edit-description-icon" onmouseenter="toggleOpacity(this)" title="Edit description" onmouseout="toggleOpacity(this)" onclick="toggleMarkdownEditor('longDescriptionField')"></i>
                 </label>
                 <div class="markdown">
                   <div id="longDescriptionFieldMarkdown"></div>
                   <p id="longDescriptionFieldMarkdownEmpty" class="nodisplay half-opacity">No description defined, click on <i class="fa fa-pencil text-primary cursorPointer half-opacity" onmouseenter="toggleOpacity(this)" onmouseout="toggleOpacity(this)" onclick="toggleMarkdownEditor('longDescriptionField')"></i> to edit </p>
                 </div>
               </div>
-              <div id="longDescriptionFieldContainer" class="nodisplay">
+              <div id="longDescriptionFieldContainer" class="d-flex visually-hidden">
                 <div id="longDescriptionField">
                   Here comes the longDescription field
                 </div>
-                <div id="longDescriptionFieldMarkdownPreviewContainer" class="wbBaseField col-xs-6 row">
-                  <label class="col-xs-12 row wbBaseFieldLabel"><span class="text-fit">Preview</span></label>
-                  <div id="longDescriptionFieldPreviewMarkdown" class=" col-xs-12 row markdown"></div>
+                <div id="longDescriptionFieldMarkdownPreviewContainer" class="col-sm-6 ps-2">
+                  <label><span class="text-fit">Preview</span></label>
+                  <div id="longDescriptionFieldPreviewMarkdown" class="markdown"></div>
                 </div>
               </div>
 

diff --git a/.../sources/rudder/rudder-web/src/main/webapp/templates-hidden/components/NodeGroupForm.html b/.../sources/rudder/rudder-web/src/main/webapp/templates-hidden/components/NodeGroupForm.html
@@ -73,7 +73,7 @@ <h1>
             <group-pendingchangerequest></group-pendingchangerequest>
             <group-name></group-name>
             <div id="longDescriptionFieldMarkdownContainer" class="form-group">
-              <label class="wbBaseFieldLabel"><span class="text-fit">Description</span>
+              <label><span class="text-fit">Description</span>
                 <lift:authz role="group_write">
                   <i class="fa fa-pencil text-primary cursorPointer half-opacity" onmouseenter="toggleOpacity(this)" title="Edit description" onmouseout="toggleOpacity(this)" onclick="toggleMarkdownEditor('longDescriptionField')"></i>
                 </lift:authz>
@@ -83,13 +83,13 @@ <h1>
                 <p id="longDescriptionFieldMarkdownEmpty" class="nodisplay half-opacity">No description defined, click on <i class="fa fa-pencil text-primary cursorPointer half-opacity" onmouseenter="toggleOpacity(this)" onmouseout="toggleOpacity(this)" onclick="toggleMarkdownEditor('longDescriptionField')"></i> to edit </p>
               </div>
             </div>
-            <div id="longDescriptionFieldContainer" class="nodisplay form-group">
-              <div id="longDescriptionField">
+            <div id="longDescriptionFieldContainer" class="d-flex visually-hidden">
+              <div id="longDescriptionField" class="col-6">
                 Here comes the longDescription field
               </div>
-              <div id="longDescriptionFieldMarkdownPreviewContainer" class="col-6">
-                <label class="col-12 wbBaseFieldLabel"><span class="text-fit">Preview</span></label>
-                <div id="longDescriptionFieldPreviewMarkdown" class=" col-12 markdown"></div>
+              <div id="longDescriptionFieldMarkdownPreviewContainer" class="col-6 ps-2">
+                <label><span class="text-fit">Preview</span></label>
+                <div id="longDescriptionFieldPreviewMarkdown" class="markdown"></div>
               </div>
             </div>
             <group-rudderid></group-rudderid>