12:58 p.m.
From: samhenri <samuel.guimaraes(a)eldorado.org.br>
Signed-off-by: Andre Teodoro <andreteodoro.work(a)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
-@import "modules/jqueryui";
-// Wok ISO / VM / Template list
+
@import "modules/iso-list";
-// To do - Group into Kimchi
-// Templates - To do: move to Kimchi
+
+@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">×</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