Add bootstrap grid system in tools panel - See #862

camptocamp · Mar 22, 2016 · bc74ce2 · bc74ce2
1 parent 484afcd
commit bc74ce2
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 21 deletions.
diff --git a/contribs/gmf/apps/desktop/index.html b/contribs/gmf/apps/desktop/index.html
@@ -56,28 +56,62 @@
           </button>
           <button ngeo-btn class="btn btn-default" ng-model="measureActive"
             data-toggle="tooltip" data-placement="left" data-original-title="{{'Measure tools'|translate}}">
-            <span class="fa fa-circle">
+            <span class="fa fa-circle"></span>
           </button>
         </div>
-        <div class="tools-content" ng-class="{active: mainCtrl.toolsActive}">
-          <div ng-show="mainCtrl.loginActive">
-            <a class="btn close" ng-click="mainCtrl.loginActive = false">&times;</a>
-            <div class="tools-content-heading">
-              Login
-            </div>
-            <gmf-authentication></gmf-authentication>
-            <br>
-          </div>
-          <div ng-show="printActive">
-            <a class="btn close" ng-click="printActive = false">&times;</a>
-            <div class="tools-content-heading">
-              Print
-            </div>
-          </div>
-          <div ng-show="measureActive">
-            <a class="btn close" ng-click="measureActive = false">&times;</a>
-            <div class="tools-content-heading">
-              Measure
+        <div class="tools-content container-fluid" ng-class="{active: mainCtrl.toolsActive}">
+          <div class="row">
+            <div class="col-sm-12">
+              <div ng-show="mainCtrl.loginActive" class="row">
+                <div class="col-sm-12">
+                  <div class="tools-content-heading">
+                    Print
+                    <a class="btn close" ng-click="mainCtrl.loginActive = false">&times;</a>
+                  </div>
+                  <gmf-authentication></gmf-authentication>
+                </div>
+              </div>
+              <div ng-show="printActive" class="row">
+                <div class="col-sm-12">
+                  <div class="tools-content-heading">
+                    Print
+                    <a class="btn close" ng-click="printActive = false">&times;</a>
+                  </div>
+                  <div class="form-horizontal">
+                    <div class="form-group">
+                      <div class="col-sm-12">
+                        <input type="text" class="form-control" id="inputPrintTitle" placeholder="{{'title'|translate}}">
+                      </div>
+                    </div>
+                    <div class="form-group">
+                      <div class="col-sm-12">
+                    <textarea  class="form-control" id="inputPrintDescription" placeholder="{{'description'|translate}}">
+                    </textarea>
+                      </div>
+                    </div>
+                    <div class="form-group">
+                      <label for="inputEmail3" class="col-xs-3 control-label">Email</label>
+                      <div class="col-xs-9">
+                        <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
+                      </div>
+                    </div>
+                    <div class="form-group">
+                      <label for="inputEmail3" class="col-xs-3 control-label">Email</label>
+                      <div class="col-xs-9">
+                        <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div ng-show="measureActive" class="row">
+                <div class="col-sm-12">
+                  <div class="tools-content-heading">
+                    Measure
+                    <a class="btn close" ng-click="measureActive = false">&times;</a>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
         </div>

diff --git a/contribs/gmf/less/desktop.less b/contribs/gmf/less/desktop.less
@@ -145,7 +145,6 @@ gmf-layertree ul .treenode {
   background-color: @brand-secondary;
 
   .tools-content {
-    padding: @app-margin;
     width: @right-panel-width;
     margin-right: -@right-panel-width + @toolbar-width;
     transition: margin-right 0.2s ease;
@@ -165,6 +164,7 @@ gmf-layertree ul .treenode {
       color: @color;
       padding-bottom: @app-margin;
       margin-bottom: @app-margin;
+      margin-top: @grid-gutter-width / 2;
       border-bottom: 1px solid @color;
     }
   }