Add the option to toggle the left menu bar

Change-Id: I729bd049461564fb0bf48bfd72bc75cbf444315a
Signed-off-by: Maxime Millette-Coulombe <mmcoulombe@inocybe.com>
(cherry picked from commit 7657b1afa31b937e88f18767f89a0d87c44260e9)

diff --git a/dlux-web/src/less/main.less b/dlux-web/src/less/main.less
index aa9ba0a3ae991e66e9bb57182956951a405627e2..663493553482b16957c1ef9627b607d8e6c416bc 100644 (file)
--- a/dlux-web/src/less/main.less
+++ b/dlux-web/src/less/main.less
@@ -127,4 +127,5 @@ h2 {
 @import '../app/yangvisualizer/yangvisualizer.less';\r
 @import '../app/yangui/abn_tree.less';\r
 @import '../common/login/login.less';\r
+@import '../common/topbar/topbar.less';\r
 @import '../app/topology/topology.less';
\ No newline at end of file

diff --git a/modules/common-layout-resources/src/main/resources/layout/index.tpl.html b/modules/common-layout-resources/src/main/resources/layout/index.tpl.html
index 7a6bbe6b0990d1d8442ef0305d8cda5bc60718b3..97faee48533494a6812a75232bd6fedb1e959fd2 100644 (file)
--- a/modules/common-layout-resources/src/main/resources/layout/index.tpl.html
+++ b/modules/common-layout-resources/src/main/resources/layout/index.tpl.html
@@ -1,28 +1,17 @@
 
-      <nav class="navbar navbar-default" style="margin:0;" ui-view="topbar"></nav>
-      <div id="red"></div>
-      <div id="gray"></div>
-      <nav class="navbar-default navbar-static-side menu-sidebar ng-scope" ui-view="navigation" role="navigation"></nav>
-
-      <div id="page-wrapper">
-        <div class="row">
-          <div class="col-lg-12">
-            <div id="topology"></div>
-            <!--<h1 ng-bind="title">
-
-                  <small>
-                    <i class="icon-double-angle-right"></i>
-                    <span ng-bind="description"></span>
-                  </small>
-                </h1>-->
-          </div>
-        </div>
-        <div class="row content-row">
-
-          <div class="col-xs-12" style="margin-bottom: 50px" ui-view="content">
-            <!-- PAGE CONTENT BEGINS -->
-          </div><!-- /.col -->
-        </div><!-- /.row -->
-      </div><!-- /.page-content -->
-    </div><!-- /.main-content -->
-
+<div ui-view="topbar"></div>
+<div id="red"></div>
+<div id="gray"></div>
+<div id="wrapper">
+  <nav id="sideMenu" ui-view="navigation" role="navigation"></nav>
+  <div id="page-wrapper-content">
+    <div class="container-fluid">
+      <div class="row content-row">
+        <div id="pageContent" class="col-xs-12" ui-view="content">
+          <!-- PAGE CONTENT BEGINS -->
+        </div><!-- /.col -->
+      </div><!-- /.row -->
+    </div>
+  </div><!-- /.page-content -->
+</div>
+</div><!-- /.main-content -->

diff --git a/modules/common-layout-resources/src/main/resources/layout/layout.module.js b/modules/common-layout-resources/src/main/resources/layout/layout.module.js
index d8a5e90217584bf78997b89a7d3484fd211e248f..faef8bafe699ed8514237845351921ba7223731b 100644 (file)
--- a/modules/common-layout-resources/src/main/resources/layout/layout.module.js
+++ b/modules/common-layout-resources/src/main/resources/layout/layout.module.js
@@ -18,7 +18,8 @@ define(['angularAMD' ,'angular-ui-router', 'ocLazyLoad', 'common/general/common.
           controller: 'NavCtrl'
         },
         'topbar@main' : {
-          template : TopBarHelperProvider.getViews()
+          template : TopBarHelperProvider.getViews(),
+          controller: 'TopbarCtrl'
         },
         'content@main' : {
           template : ContentHelperProvider.getViews()

diff --git a/modules/common-topbar-resources/src/main/resources/topbar/topbar.controller.js b/modules/common-topbar-resources/src/main/resources/topbar/topbar.controller.js
index cf6fa60e727a89b38bac78649723198214303a29..8a83baff640ef1efac648da01418413e3596c9ce 100644 (file)
--- a/modules/common-topbar-resources/src/main/resources/topbar/topbar.controller.js
+++ b/modules/common-topbar-resources/src/main/resources/topbar/topbar.controller.js
@@ -1,5 +1,12 @@
 define(['common/topbar/topbar.module'], function(topbar) {
 
+    topbar.register.controller('TopbarCtrl', function() {
+        $('#toggleMenu').click(function(e) {
+          e.preventDefault();
+          $('#wrapper').toggleClass('toggled');
+        });
+    });
+
     topbar.register.controller('topBarTasksCtrl',function ($scope, taskFactory) {
         $scope.tasks = taskFactory.getTaskData();
     });

diff --git a/modules/common-topbar-resources/src/main/resources/topbar/topbar.less b/modules/common-topbar-resources/src/main/resources/topbar/topbar.less
new file mode 100644 (file)
index 0000000..e85b446
--- /dev/null
+++ b/modules/common-topbar-resources/src/main/resources/topbar/topbar.less
@@ -0,0 +1,28 @@
+#toggleMenu {
+    display:block;
+    text-align: right;
+    padding:9px;
+    color:white !important;
+}
+
+#toggleMenu:focus, #toggleMenu:hover  {
+    background-color: inherit; 
+}
+
+#wrapper.toggled {
+    padding-left: 0;
+}
+
+#wrapper.toggled #sideMenu {
+    width:0;
+}
+
+#wrapper.toggled #sideMenu ul {
+    display:none;
+}
+
+div > nav.navbar {
+  margin-bottom:0;
+}
+
+

diff --git a/modules/common-topbar-resources/src/main/resources/topbar/topbar.tpl.html b/modules/common-topbar-resources/src/main/resources/topbar/topbar.tpl.html
index 9fa9d4c6538a6e1f57b286244b109305898eebe7..6f6915c1a308a424b65b5ef4ef9411fa8f314e8b 100644 (file)
--- a/modules/common-topbar-resources/src/main/resources/topbar/topbar.tpl.html
+++ b/modules/common-topbar-resources/src/main/resources/topbar/topbar.tpl.html
@@ -1,4 +1,4 @@
-<nav class="navbar navbar-default navbar-static-top" style="margin-bottom: 0" role="navigation">
+<nav class="navbar navbar-default navbar-static-top" role="navigation">
  <!-- the script for the resizing was here -->
 
 
@@ -7,9 +7,10 @@
 <div style="background-color:red;display:inline;width:100%;"></div>
 
       <ul class="nav navbar-top-links navbar-right">
-       <!--<img src="assets/images/User.png" class="right-topbar" border="0" alt="OpenDayLight" />
-       <img src="assets/images/Info.png" class="right-topbar" border="0" alt="OpenDayLight" />
-       <img src="assets/images/OSGI.png" class="right-topbar" border="0" alt="OpenDayLight" />-->
+            <li><a id="toggleMenu" class="btn" href="#"><i class="icon-reorder icon-2x"></i></a></li>
+            <!--<img src="assets/images/User.png" class="right-topbar" border="0" alt="OpenDayLight" />
+            <img src="assets/images/Info.png" class="right-topbar" border="0" alt="OpenDayLight" />
+            <img src="assets/images/OSGI.png" class="right-topbar" border="0" alt="OpenDayLight" />-->
             <!-- for now no image since we dont use them.... -->
             <!-- 
             Don't need them for now...    

diff --git a/modules/loader-resources/src/main/resources/assets/css/sb-admin.css b/modules/loader-resources/src/main/resources/assets/css/sb-admin.css
index 5480e2492bc9a552db0e4be2973885cc4c9b850d..efcedda30283797ea549a8694a2a43b1a210af40 100644 (file)
--- a/modules/loader-resources/src/main/resources/assets/css/sb-admin.css
+++ b/modules/loader-resources/src/main/resources/assets/css/sb-admin.css
@@ -3,31 +3,37 @@
 /* ------------------------------- */\r
 \r
  body {\r
-    background-color: #f8f8f8;\r
+    background-color: #414040;\r
 }\r
 \r
 /* Wrappers */\r
 \r
 /* ------------------------------- */\r
 \r
- #wrapper {\r
+#wrapper {\r
     width: 100%;\r
+    padding-left:250px;\r
 }\r
 \r
-#page-wrapper {\r
-    padding: 0 15px;\r
-    min-height: 568px;\r
-    background-color: #fff;\r
+#pageContent {\r
+  margin-bottom:50px;\r
 }\r
 \r
-@media(min-width:768px) {\r
-    #page-wrapper {\r
-        position: inherit;\r
-        margin: 0 0 0 250px;\r
-        padding: 0 30px;\r
-        min-height: 1300px;\r
-        border-left: 1px solid #e7e7e7;\r
-    }\r
+#sideMenu {\r
+  z-index: 1000;\r
+  position: absolute;\r
+  left: 250px;\r
+  width: 250px;\r
+  height: 100%;\r
+  margin-left: -250px;\r
+  overflow-y: auto;\r
+  background: #808285;\r
+}\r
+\r
+#page-wrapper-content {\r
+    padding:0 15px;\r
+    position: relative;\r
+    width:100%;\r
 }\r
 \r
 .navbar-static-side ul li {\r
@@ -304,4 +310,4 @@ table.dataTable thead .sorting:after {
 \r
 .show-grid {\r
     margin: 15px 0;\r
-}
\ No newline at end of file
+}\r

diff --git a/modules/loader-resources/src/main/resources/index.html b/modules/loader-resources/src/main/resources/index.html
index a1865f13219ecbe6a38aeb79c76018575f284b8b..29b6af8bed9f743327db140dc777bd2683ab6722 100644 (file)
--- a/modules/loader-resources/src/main/resources/index.html
+++ b/modules/loader-resources/src/main/resources/index.html
@@ -18,8 +18,14 @@
     <script src="assets/js/respond.min.js"></script>
     <![endif]-->
 
-    <!-- compiled CSS --><% styles.forEach( function ( file ) { %>
-    <link rel="stylesheet" type="text/css" href="<%= file %>" /><% }); %>
+    <!-- compiled CSS -->
+    <link rel="stylesheet" type="text/css" href="vendor/ng-grid/ng-grid.min.css" />
+    <link rel="stylesheet" type="text/css" href="vendor/select2-bootstrap-css/select2-bootstrap.css" />
+    <link rel="stylesheet" type="text/css" href="vendor/footable/css/footable.core.min.css" />
+    <link rel="stylesheet" type="text/css" href="vendor/footable/css/footable.standalone.min.css" />
+    <link rel="stylesheet" type="text/css" href="vendor/vis/dist/vis.min.css" />
+    <link rel="stylesheet" type="text/css" href="vendor/ng-slider/dist/css/ng-slider.min.css" />
+    <link rel="stylesheet" type="text/css" href="assets/opendaylight-dlux-0.2.0.css" />
     <link rel="stylesheet" href="assets/css/sb-admin.css" />
 
     <script type="text/javascript" data-main="src/main.js" src="vendor/requirejs/require.js"></script>
@@ -30,6 +36,6 @@
   </head>
 
   <body class="skin-3">
-  <div id="wrapper"  ui-view="mainContent"></div>
+  <div ui-view="mainContent"></div>
   </body>
 </html>