Fixes #9341: Wrong alignement of fields on group page

Normation · Oct 18, 2016 · 42e1d21 · 42e1d21
1 parent b7f18d3
commit 42e1d21
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 27 deletions.
diff --git a/rudder-web/src/main/scala/com/normation/rudder/web/components/NodeGroupForm.scala b/rudder-web/src/main/scala/com/normation/rudder/web/components/NodeGroupForm.scala
@@ -166,15 +166,20 @@ class NodeGroupForm(
      bind("group", html,
       "pendingchangerequest" ->  PendingChangeRequestDisplayer.checkByGroup(pendingChangeRequestXml,nodeGroup.id, workflowEnabled),
       "name" -> groupName.toForm_!,
-      "rudderid" -> <div><b class="threeCol">Rudder ID: </b>{nodeGroup.id.value}</div>,
-      "cfeclasses" -> <div>
-                        <a href="#" onclick={s"$$('#cfe-${nodeGroup.id.value}').toggle(300); return false;"}>
-                        <b class="threeCol">Display CFEngine classes</b>
+      "rudderid" -> <div class="form-group row">
+                      <label class="wbBaseFieldLabel">Rudder ID</label>
+                      <input disabled="" class="form-control" value={nodeGroup.id.value}/>
+                    </div>,
+      "cfeclasses" -> <div class="form-group row">
+                        <a href="#" onclick={s"$$('#cfe-${nodeGroup.id.value}').toggle(300);$$(this).toggleClass('open');return false;"} class="toggle-caret">
+                          <label class="wbBaseFieldLabel">Display CFEngine classes</label>
+                          <span class="caret"></span>
                         </a>
-                        <span class="twoCol" style="display: none" id={s"cfe-${nodeGroup.id.value}"}>
+                        <div class="well row" style="display: none" id={s"cfe-${nodeGroup.id.value}"}>
                           {RuleTarget.toCFEngineClassName(nodeGroup.id.value)}<br/>
                           {RuleTarget.toCFEngineClassName(nodeGroup.name)}
-                        </span></div>,
+                        </div>
+                      </div>,
       "description" -> groupDescription.toForm_!,
       "container" -> groupContainer.toForm_!,
       "static" -> groupStatic.toForm_!,
@@ -201,7 +206,9 @@ class NodeGroupForm(
   private[this] val groupName = {
     new WBTextField("Group name", nodeGroup.name) {
       override def setFilter = notNull _ :: trim _ :: Nil
-      override def className = "rudderBaseFieldClassName"
+      override def className = "form-control"
+      override def labelClassName = ""
+      override def subContainerClassName = ""
       override def inputField = super.inputField %("onkeydown" , "return processKey(event , '%s')".format(saveButtonId))
       override def validations =
         valMinLen(3, "The name must have at least 3 characters") _ :: Nil
@@ -211,7 +218,9 @@ class NodeGroupForm(
   private[this] val groupDescription = {
     new WBTextAreaField("Group description", nodeGroup.description) {
       override def setFilter = notNull _ :: trim _ :: Nil
-      override def inputField = super.inputField  % ("style" -> "height:10em")
+      override def className = "form-control"
+      override def labelClassName = ""
+      override def subContainerClassName = ""
       override def validations =  Nil
       override def errorClassName = "field_errors paddscala"
     }
@@ -230,13 +239,18 @@ class NodeGroupForm(
        }
     ) {
       override def setFilter = notNull _ :: trim _ :: Nil
+      override def className = ""
+      override def labelClassName = ""
+      override def subContainerClassName = ""
     }
   }
 
   private[this] val groupContainer = new WBSelectField("Group container",
       (categoryHierarchyDisplayer.getCategoriesHierarchy(rootCategory, None).map { case (id, name) => (id.value -> name)}),
       parentCategoryId.value) {
-    override def className = "rudderBaseFieldSelectClassName"
+      override def className = "form-control"
+      override def labelClassName = ""
+      override def subContainerClassName = ""
   }
 
   private[this] val formTracker = new FormTracker(List(groupName, groupDescription, groupContainer, groupStatic))

diff --git a/rudder-web/src/main/scala/com/normation/rudder/web/snippet/node/Groups.scala b/rudder-web/src/main/scala/com/normation/rudder/web/snippet/node/Groups.scala
@@ -425,7 +425,8 @@ class Groups extends StatefulSnippet with SpringExtendableSnippet[Groups] with L
   private[this] def displayCategory(workflowEnabled: Boolean)(category : NodeGroupCategory) : JsCmd = {
     selectedCategoryId = Full(category.id)
     //update UI - no modification here, so no refreshGroupLib
-    refreshRightPanel(CategoryForm(category), workflowEnabled)
+    refreshRightPanel(CategoryForm(category), workflowEnabled) &
+    JsRaw("""$('#groupDetails').show();""")
   }
 
   //adaptater

diff --git a/rudder-web/src/main/webapp/style/rudder/rudder-menu.css b/rudder-web/src/main/webapp/style/rudder/rudder-menu.css
@@ -723,7 +723,60 @@ a.sidebar-toggle{
   color: #FFFFFF;
 }
 /* ----- </DROPDOWN MENU>  ----- */
-
+/* GROUP PAGE */
+#groupParametersTab .page-title{
+  margin-left: 12px;
+  margin-right: 12px;
+  margin-bottom: 5px;
+}
+#groupParametersTab .section-title{
+  margin: 15px 13px 8px 8px;
+}
+.toggle-caret,.tw-bs .toggle-caret,.tw-bs label.toggle-caret{
+	display:block;
+	text-decoration:none !important;
+}
+.toggle-caret label{
+  cursor: pointer;
+}
+.toggle-caret .caret{
+	transition-duration:.2s;
+	-webkit-transform: rotate(-90deg);
+  -ms-transform: rotate(-90deg);
+  -o-transform: rotate(-90deg);
+  transform: rotate(-90deg);
+  color:#333;
+}
+.toggle-caret.open .caret{
+  -webkit-transform: rotate(0deg);
+  -ms-transform: rotate(0deg);
+  -o-transform: rotate(0deg);
+  transform: rotate(0deg);
+}
+.toggle-caret + .well{
+  color:#555;
+  padding: 6px 12px;
+  background-color: #eeeeee;
+  border: 1px solid #d0d0d0;
+}
+#groupDetails .form-group.row{
+  padding: 0px 27px 0px 22px;
+}
+#groupDetails .well.row{
+	margin-left:auto;
+	margin-right:auto;
+}
+#groupDetails .radio-inline .radioTextLabel{
+  margin:0;
+}
+#groupDetails .radio-inline .tooltip{
+  position:relative;
+  opacity:1;
+}
+#groupDetails textarea.form-control{
+	resize:vertical;
+	min-height:6em;
+}
 /* RULE PAGE */
 #submitSearch #SubmitSearch{
   margin-left: 7px;

diff --git a/rudder-web/src/main/webapp/templates-hidden/components/NodeGroupForm.html b/rudder-web/src/main/webapp/templates-hidden/components/NodeGroupForm.html
@@ -42,22 +42,16 @@
              Group details
            </div>
            <div class="inner-portlet-content" style="display: inline-block">
-             <group:notifications ></group:notifications>
-             <hr class="spacer"/>
-             <group:pendingChangeRequest></group:pendingChangeRequest>
-             <hr class="spacer"/>
-             <group:name></group:name>
-             <hr class="spacer"/>
-             <group:container></group:container>
-             <hr class="spacer"/>
-             <group:static></group:static>
-             <hr class="spacer"/>
-             <group:description></group:description>
-             <hr class="spacer"/>
-             <group:rudderID></group:rudderID>
-             <hr class="spacer"/>
-             <group:cfeclasses></group:cfeclasses>
-             <hr class="spacer"/>
+             <div class="tw-bs">
+               <group:notifications ></group:notifications>
+               <group:pendingChangeRequest></group:pendingChangeRequest>
+               <group:name></group:name>
+               <group:container></group:container>
+               <group:static></group:static>
+               <group:description></group:description>
+               <group:rudderID></group:rudderID>
+               <group:cfeclasses></group:cfeclasses>
+             </div>
              <div class="searchNodes section-title">Group criteria</div>
              <div id="SearchNodes">
                <group:showGroup ></group:showGroup>