From: samhenri <samuel.guimaraes@eldorado.org.br> Signed-off-by: Andre Teodoro <andreteodoro.work@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