[Kimchi-devel] [PATCH 7/9] Adding new-ui to Storage tab

sguimaraes943 at gmail.com sguimaraes943 at gmail.com
Tue Oct 27 21:23:01 UTC 2015


From: samhenri <samuel.guimaraes at eldorado.org.br>

Signed-off-by: samhenri <samuel.guimaraes at eldorado.org.br>
---
 .../kimchi/ui/js/src/kimchi.storage_main.js        |  6 +-
 src/wok/plugins/kimchi/ui/pages/storage.html.tmpl  | 74 ++++++++++++++--------
 2 files changed, 49 insertions(+), 31 deletions(-)

diff --git a/src/wok/plugins/kimchi/ui/js/src/kimchi.storage_main.js b/src/wok/plugins/kimchi/ui/js/src/kimchi.storage_main.js
index 40a43f6..7492d83 100644
--- a/src/wok/plugins/kimchi/ui/js/src/kimchi.storage_main.js
+++ b/src/wok/plugins/kimchi/ui/js/src/kimchi.storage_main.js
@@ -30,16 +30,16 @@ kimchi.doListStoragePools = function() {
                 }
             });
             if($('#storageGrid').hasClass('grid'))
-                $('#storageGrid').grid('destroy');
+                $('#storageGrid').dataGrid('destroy');
             $('#storagepoolsList').html(listHtml);
             if(wok.tabMode['storage'] === 'admin') {
                 $('.storage-button').attr('style','display');
             } else {
                 $('.storage-allocate').addClass('storage-allocate-padding-user');
             }
-            $('#storageGrid').grid({enableSorting: false});
+            $('#storageGrid').dataGrid({enableSorting: false});
             $('input', $('.grid-control', '.storage')).on('keyup', function(){
-                $('#storageGrid').grid('filter', $(this).val());
+                $('#storageGrid').dataGrid('filter', $(this).val());
             });
             kimchi.storageBindClick();
         } else {
diff --git a/src/wok/plugins/kimchi/ui/pages/storage.html.tmpl b/src/wok/plugins/kimchi/ui/pages/storage.html.tmpl
index dfc006e..56dc2dd 100644
--- a/src/wok/plugins/kimchi/ui/pages/storage.html.tmpl
+++ b/src/wok/plugins/kimchi/ui/pages/storage.html.tmpl
@@ -28,35 +28,53 @@
 <script src="plugins/kimchi/js/kimchi.min.js"></script>
 </head>
 <body>
-<div class="toolbar">
-    <div class="tools" style="display:none">
-        <a id="storage-pool-add" class="btn-tool" href="javascript:void(0);"><span class="icon add">+</span></a>
-    </div>
-</div>
-<div class='storage'>
-<div class="grid-control"><input type="text" class="filter" placeholder="$_("Filter")"></div>
-<div id='storageGrid'>
-    <div>
-        <span class="storage-name">
-            <span>$_("Name")</span>
-            <span class="usage">$_("%Used")</span>
-        </span>
-        <span class="storage-state" >$_("State")</span>
-        <span class="storage-type">$_("Type")</span>
-        <span class="storage-capacity">$_("Capacity")</span>
-        <span class="storage-allocate">$_("Allocated")</span>
-        <span class="storage-location">$_("Location")</span>
+<div id="storage-root-container">
+    <nav class="navbar navbar-default toolbar">
+        <div class="container">
+            <!-- Brand and toggle get grouped for better mobile display -->
+            <div class="navbar-header">
+              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#toolbar" aria-expanded="false">
+                <span class="sr-only">Toggle navigation</span>
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+              </button>
+            </div>        
+            <!-- Collect the nav links, forms, and other content for toggling -->
+            <div class="collapse navbar-collapse" id="toolbar">
+                <ul class="nav navbar-nav navbar-right tools" display="none">
+                    <li><a id="storage-pool-add" class="btn-tool" href="javascript:void(0);"><i class="fa fa-plus-circle"></i><span>Add a Storage</span></a></li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+    <div class='storage'>
+        <div class="container">
+            <div class="grid-control"><input type="text" class="filter" placeholder="$_("Filter")"></div>
+            <div id='storageGrid'>
+                <div>
+                    <span class="storage-name">
+                        <span>$_("Name")</span>
+                        <span class="usage">$_("%Used")</span>
+                    </span>
+                    <span class="storage-state" >$_("State")</span>
+                    <span class="storage-type">$_("Type")</span>
+                    <span class="storage-capacity">$_("Capacity")</span>
+                    <span class="storage-allocate">$_("Allocated")</span>
+                    <span class="storage-location">$_("Location")</span>
+                </div>
+                <div id="storagepoolsList" class="list-storage empty-when-logged-off"></div>
+            </div>
+            <div id="logicalPoolExtend" title="$_("Device path")">
+                 <p id="loading-info" class="text-help">
+                     <img src = "plugins/kimchi/images/theme-default/loading.gif" />
+                     $_("Looking for available partitions ...")
+                 </p>
+                 <div class="host-partition">
+                 </div>
+            </div>
+        </div>
     </div>
-    <div id="storagepoolsList" class="list-storage empty-when-logged-off"></div>
-</div>
-</div>
-<div id="logicalPoolExtend" title="$_("Device path")">
-     <p id="loading-info" class="text-help">
-         <img src = "plugins/kimchi/images/theme-default/loading.gif" />
-         $_("Looking for available partitions ...")
-     </p>
-     <div class="host-partition">
-     </div>
 </div>
 <script id="storageTmpl" type="html/text">
         <div id="{name}" class="storage-li in" data-name="{name}" data-stat="{state}">
-- 
1.9.3




More information about the Kimchi-devel mailing list