[Kimchi-devel] [PATCH] [Wok 10/10] About Window

[sguimaraes943 at gmail.com]

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

Signed-off-by: Andre Teodoro <andreteodoro.work at gmail.com>
---
 ui/css/src/modules/_about.scss | 32 ++++++++++++++++++++++++++++++++
 ui/css/src/wok.scss            | 18 +++++++++---------
 ui/js/src/wok.main.js          |  5 +++--
 ui/pages/wok-ui.html.tmpl      | 40 +++++++++++++++++++---------------------
 4 files changed, 63 insertions(+), 32 deletions(-)
 create mode 100644 ui/css/src/modules/_about.scss

diff --git a/ui/css/src/modules/_about.scss b/ui/css/src/modules/_about.scss
new file mode 100644
index 0000000..4d9cdae
--- /dev/null
+++ b/ui/css/src/modules/_about.scss
@@ -0,0 +1,32 @@
+//
+// Project Wok
+//
+// Copyright IBM, Corp. 2015
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+#aboutModal  .modal-body > .content {
+    text-align: center;
+    margin: 0 auto;
+
+    > img {
+        width: 225px;
+    }
+
+    h2 {
+        border-top: 1px solid $gray-light;
+        padding-top: 15px;
+    }
+
+}
\ No newline at end of file
diff --git a/ui/css/src/wok.scss b/ui/css/src/wok.scss
index db31c57..184606a 100755
--- a/ui/css/src/wok.scss
+++ b/ui/css/src/wok.scss
@@ -74,21 +74,21 @@
 @import "modules/wok-confirm";
 // Form validation classes
 @import "modules/validation";
-// Wok jQuery-UI Accordion
- at import "modules/jqueryui";
-// Wok ISO / VM / Template list
+
 @import "modules/iso-list";
-// To do - Group into Kimchi
-// Templates - To do: move to Kimchi
+
+ at import "modules/about";
+
 @import "modules/guests";
-// Templates - To do: move to Kimchi
+
 @import "modules/edit-guests";
-// Templates - To do: move to Kimchi
+
 @import "modules/templates";
-// Networks - To do: move to Kimchi
+
 @import "modules/network";
-// Networks - To do: move to Kimchi
+
 @import "modules/storage";
+
 // Utils
 .absolute-middle {
     margin: auto;
diff --git a/ui/js/src/wok.main.js b/ui/js/src/wok.main.js
index e672259..b7b13a2 100644
--- a/ui/js/src/wok.main.js
+++ b/ui/js/src/wok.main.js
@@ -335,9 +335,10 @@ wok.main = function() {
 
         // Set handler for about button
         $('#btn-about').on('click', function(event) {
-            wok.window.open({"content": $('#about-tmpl').html()});
             event.preventDefault();
-            });
+        });
+
+        $("#aboutModal").append($("#about-tmpl").html());
 
         // Set handler for help button
         $('#btn-help').on('click', wok.openHelp);
diff --git a/ui/pages/wok-ui.html.tmpl b/ui/pages/wok-ui.html.tmpl
index 2e7e94f..e315b91 100644
--- a/ui/pages/wok-ui.html.tmpl
+++ b/ui/pages/wok-ui.html.tmpl
@@ -120,7 +120,7 @@
                     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-question-circle"></i><span class="topbar-text">$_("Help")</span><span class="caret"></span></a>
                     <ul class="dropdown-menu">
                         <li><a id="btn-help" href="javascript: void(0);">$_("Help")</a></li>
-                        <li><a id="btn-about" href="javascript:void(0);">$_("About")</a></li>
+                        <li><a id="btn-about" href="#" data-toggle="modal" data-target="#aboutModal">$_("About")</a></li>
                     </ul>
                 </li>
             </ul>
@@ -159,27 +159,25 @@
         </div>
     </div>
 
-<script id="about-tmpl" type="wok/template">
-    <div class="window about-window">
-        <header>
-            <h1 class="title"><img alt="Kimchi logo" src="images/logo.ico"/> $_("About")</h1>
-            <div class="close">X</div>
-        </header>
-        <div class="content" align="center">
-            <center>
-                <div>
-                    <br/>
-                    <br/>
-                    <img src="images/theme-default/logo-plain.gif"/>
-                    <br/>
-                    <br/>
-                    <h2>Kimchi</h2>
-                    <p>$_("Version:") $get_version()</p>
-                </div>
-            </center>
-        </div>
+    <div class="modal fade host-modal" id="aboutModal" tabindex="-1" role="dialog" labelledby="aboutModalLabel" aria-hidden="true">
     </div>
-</script>
 
+    <script id="about-tmpl" type="wok/template">
+        <div class="modal-dialog modal-sm" role="document">
+            <div class="modal-content" >
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                    <h4 class="modal-title">$_("About")</h4>
+                </div>
+                <div class="modal-body">
+                    <div class="content">
+                                <img src="images/theme-default/logo-flat.svg" />
+                                <h2>Kimchi</h2>
+                                <p>$_("Version:") $get_version()</p>
+                    </div>
+                 </div>
+            </div>
+         </div>
+    </script>
 </body>
 </html>
-- 
1.9.3