Fixes #9494: Add bootstrap on Rules form

Normation · Oct 24, 2016 · b49e92f · b49e92f
1 parent d86abcd
commit b49e92f
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 59 deletions.
diff --git a/rudder-web/src/main/scala/com/normation/rudder/web/components/RuleEditForm.scala b/rudder-web/src/main/scala/com/normation/rudder/web/components/RuleEditForm.scala
@@ -468,14 +468,18 @@ class RuleEditForm(
 
   private[this] val crName = new WBTextField("Name", rule.name) {
     override def setFilter = notNull _ :: trim _ :: Nil
-    override def className = "twoCol"
+    override def className = "form-control"
+    override def labelClassName = "col-xs-12"
+    override def subContainerClassName = "col-xs-12"
     override def validations =
       valMinLen(3, "The name must have at least 3 characters") _ :: Nil
   }
 
   private[this] val crShortDescription = {
     new WBTextField("Short description", rule.shortDescription) {
-      override def className = "twoCol"
+      override def className = "form-control"
+      override def labelClassName = "col-xs-12"
+      override def subContainerClassName = "col-xs-12"
       override def setFilter = notNull _ :: trim _ :: Nil
       override val maxLen = 255
       override def validations =  Nil
@@ -485,7 +489,9 @@ class RuleEditForm(
   private[this] val crLongDescription = {
     new WBTextAreaField("Description", rule.longDescription.toString) {
       override def setFilter = notNull _ :: trim _ :: Nil
-      override def className = "twoCol"
+      override def className = "form-control"
+      override def labelClassName = "col-xs-12"
+      override def subContainerClassName = "col-xs-12"
     }
   }
 
@@ -496,7 +502,9 @@ class RuleEditForm(
     }.getOrElse(Nil)
 
     new WBSelectField("Rule category", values, rule.categoryId.value) {
-      override def className = "twoCol"
+      override def className = "form-control"
+      override def labelClassName = "col-xs-12"
+      override def subContainerClassName = "col-xs-12"
     }
   }
 

diff --git a/rudder-web/src/main/webapp/style/rudder/rudder-menu.css b/rudder-web/src/main/webapp/style/rudder/rudder-menu.css
@@ -832,9 +832,36 @@ a.sidebar-toggle{
   opacity:1;
 }
 /* RULE PAGE */
+.tw-bs form hr,form .tw-bs hr{
+  width:100%;
+}
 #submitSearch #SubmitSearch{
   margin-left: 7px;
 }
+.fake-form-control{
+  float: left;
+  opacity: 1;
+  border: 1px solid #d0d0d0;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  display: block;
+  width: 100%;
+  height: 34px;
+  padding: 6px 12px;
+  line-height: 1.42857143;
+  color: #555;
+  background-image: none;
+  border-radius: 4px;
+  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+}
+.fake-form-control.readonly{
+  cursor:default;
+  background-color: #eee;
+}
+.fake-form-control.textarea{
+  min-height: 6em;
+  height:auto;
+}
 /* ----- </RULE FOOTER>  ----- */
 .rule-footer {
   width: calc(100% - 230px);
@@ -1226,11 +1253,11 @@ form .tooltip-content p {
   box-shadow: 0px 10px 10px -8px rgba(0, 0, 0, 0.18);
   transform: rotate(45deg);
 }
-.callout-fade div.marker span.glyphicon{
+.callout-fade div.marker span.glyphicon,.callout-fade div.marker span.fa{
   transform:rotate(-45deg);
   transition-duration:.2s;
 }
-.callout-fade:hover div.marker span.glyphicon{
+.callout-fade:hover div.marker span.glyphicon,.callout-fade:hover div.marker span.fa{
   transform:rotate(-65deg);
 }
 /* --- SUCCESS --- */

diff --git a/rudder-web/src/main/webapp/style/rudder/rudder.css b/rudder-web/src/main/webapp/style/rudder/rudder.css
@@ -1859,10 +1859,6 @@ template, a Directive, etc)
     padding:10px;
 }
 
-.object-details > * {
-    margin:10px;
-}
-
 .object-details fieldset {
     padding-left: 2px;
     padding-right: 20px;

diff --git a/rudder-web/src/main/webapp/templates-hidden/components/ComponentRuleEditForm.html b/rudder-web/src/main/webapp/templates-hidden/components/ComponentRuleEditForm.html
@@ -1,10 +1,8 @@
 <xml:group>
 
-
 <component:staticInit>
 <head>
   <style type="text/css">
-
     .topLevelAction .twoColumns {
       text-align: center;
       vertical-align: middle;
@@ -13,18 +11,15 @@
       display*: inline;
       zoom*: 1;
     }
-
     .topLevelAction .twoColumnsRight {
-      margin-left:20px
+      margin-left:20px;
       margin-right: 5px;
     }
-
     .topLevelAction .twoColumns > * {
       display: inline-block;
       vertical-align: middle;
       margin-left: 50px;
     }
-
     .disableNotice {
       margin-top:10px;
       font-size:0.9em;
@@ -33,28 +28,23 @@
     .editZone {
       margin-top:30px;
     }
-
     .groupedEditZone {
       margin-bottom:10px;
     }
-
     label.wbBaseFieldLabel {
       margin-right:5px;
       margin-bottom: 3px;
     }
-
     .reasonsFieldset {
       width:96%;
       margin-top: 15px;
       margin-right: 5px;
       display: inline-block;
     }
-
     .warnicon {
       margin-top:-7px;
       margin-right:9px;
     }
-
   </style>
 </head>
 </component:staticInit>
@@ -91,36 +81,51 @@
 
 <component:details>
 <div id="details" class="object-details">
-   <div id="ruleInfoSection" class="unfoldedSection" onclick="$('#ruleInfo').toggle(400); $('#ruleInfoSection').toggleClass('foldedSection');$('#ruleInfoSection').toggleClass('unfoldedSection');">
-      <div class="section-title">Summary</div>
-    </div>
-    <div id="ruleInfo"  >
-        <div>
-          <b>Name: </b>
+  <div id="ruleInfoSection" class="unfoldedSection" onclick="$('#ruleInfo').toggle(400); $('#ruleInfoSection').toggleClass('foldedSection');$('#ruleInfoSection').toggleClass('unfoldedSection');">
+    <div class="section-title">Summary</div>
+  </div>
+  <div id="ruleInfo" class="tw-bs">
+    <div class="row wbBaseField form-group">
+      <label class="col-xs-12">Name</label>
+      <div class="col-xs-12">
+        <div class="fake-form-control readonly">
           <span id="ruleName"/>
         </div>
-        <br />
-        <div>
-          <b>Category: </b>
+      </div>
+    </div>
+    <div class="row wbBaseField form-group">
+      <label class="col-xs-12">Category</label>
+      <div class="col-xs-12">
+        <div class="fake-form-control readonly">
           <span id="ruleCategory"/>
         </div>
-        <br />
-        <div>
-          <b >Short description: </b>
+      </div>
+    </div>
+    <div class="row wbBaseField form-group">
+      <label class="col-xs-12">Short description</label>
+      <div class="col-xs-12">
+        <div class="fake-form-control readonly">
           <span id="ruleShortDescription"/>
         </div>
-        <br />
-        <div >
-          <b>Long description: </b>
+      </div>
+    </div>
+    <div class="row wbBaseField form-group">
+      <label class="col-xs-12">Description</label>
+      <div class="col-xs-12">
+        <div class="fake-form-control textarea readonly">
           <span id="ruleLongDescription"/>
         </div>
-        <br />
-        <div class="RudderIdField">
-            <b>Rudder ID:</b>
-            <span id="rudderID">
-            Here comes the rudder ID
-            </span>
+      </div>
+    </div>
+    <div class="row wbBaseField form-group"">
+      <label class="col-xs-12">Rudder ID</label>
+      <div class="col-xs-12">
+        <div class="fake-form-control readonly">
+          <span id="rudderID"> Here comes the rudder ID </span>
         </div>
+      </div>
+    </div>
+    <hr/>
 	</div>
 	<div id="compliancedetails">
   </div>
@@ -130,46 +135,39 @@
 
 
 <component:form>
-<div  class="object-details">
+<div class="object-details">
 
-  <div id="pendingChangeRequestNotification">
-     <div>
-      <img src="/images/icWarn.png" alt="Warning!" height="32" width="32" class="warnicon"/>
-      <div style="float:left">
+  <div id="pendingChangeRequestNotification" class="tw-bs">
+    <div class="callout-fade callout-warning">
+      <div class="marker"><span class="glyphicon glyphicon-info-sign"></span></div>
       The following pending change requests affect this Rule, you should check that your modification is not already pending:
       <ul id="changeRequestList"/>
-      </div>
     </div>
   </div>
-  <hr class="spacer"/>
-
-  <div class="disableNotice">
+  <div class="tw-bs">
+  <div class="disableNotice callout-fade callout-danger">
+    <div class="marker"><span class="glyphicon glyphicon-exclamation-sign"></span></div>
     Note: the Rule will be applied only if its status is Enabled and
     its Directive, Technique and target node group are all Enabled.
   </div>
+  </div>
   <div id="notifications"></div>
 
-    <hr class="spacer" />
-
     <div class="section-title spacing-title">General information</div>
-    <div class="groupedEditZone">
+    <div class="groupedEditZone tw-bs">
       <div id="nameField">
         Here comes the name field
       </div>
-      <hr class="spacer" />
 		<div id="categoryField">
 		Here comes the category field
 		</div>
-      <hr class="spacer" />
       <div id="shortDescriptionField">
         Here comes the shortDescription field
       </div>
-      <hr class="spacer" />
       <div id="longDescriptionField">
         Here comes the longDescription field
       </div>
-
-      <hr class="spacer" />
+      <hr/>
     </div>
 
     <div class="groupedEditZone tw-bs">