From: samhenri <samuel.guimaraes@eldorado.org.br> Signed-off-by: samhenri <samuel.guimaraes@eldorado.org.br> --- .../kimchi/ui/js/src/kimchi.guest_add_main.js | 10 +- .../plugins/kimchi/ui/pages/guest-add.html.tmpl | 114 ++++++++++----------- src/wok/plugins/kimchi/ui/pages/guests.html.tmpl | 58 +++++++---- 3 files changed, 102 insertions(+), 80 deletions(-) diff --git a/src/wok/plugins/kimchi/ui/js/src/kimchi.guest_add_main.js b/src/wok/plugins/kimchi/ui/js/src/kimchi.guest_add_main.js index 6be6f9a..ef8324a 100644 --- a/src/wok/plugins/kimchi/ui/js/src/kimchi.guest_add_main.js +++ b/src/wok/plugins/kimchi/ui/js/src/kimchi.guest_add_main.js @@ -22,6 +22,10 @@ kimchi.guest_add_main = function() { if (result && result.length) { $('#prompt-create-template').addClass('hidden'); $('#prompt-choose-template').removeClass('hidden'); + $('#guest-add-window .guest-pager').animate({ + height: "530px" + }); + var html = ''; var tmpl = $('#tmpl-template').html(); $.each(result, function(index, value) { @@ -34,13 +38,17 @@ kimchi.guest_add_main = function() { $('#btn-create-template').on('click', function(event) { wok.topic('templateCreated').subscribe(showTemplates); - wok.window.open('plugins/kimchi/template-add.html'); + wok.window.open('plugins/kimchi/template-add.html','extendCreateTemplate'); event.preventDefault(); }); $('#prompt-choose-template').addClass('hidden'); $('#prompt-create-template').removeClass('hidden'); + $('#guest-add-window .guest-pager').animate({ + height: "90px" + }); + }, function(err) { wok.message.error(err.responseJSON.reason); }); diff --git a/src/wok/plugins/kimchi/ui/pages/guest-add.html.tmpl b/src/wok/plugins/kimchi/ui/pages/guest-add.html.tmpl index 3770d96..614606c 100644 --- a/src/wok/plugins/kimchi/ui/pages/guest-add.html.tmpl +++ b/src/wok/plugins/kimchi/ui/pages/guest-add.html.tmpl @@ -24,72 +24,64 @@ <!DOCTYPE html> <html> <body> -<div class="window" style="width: 900px;height: 580px;"> - <header> - <h1 class="title h1 grey">$_("Create a New Virtual Machine")</h1> - </header> - <div class="content"> - <form id="form-vm-add"> - <section class="form-section"> - <h2>1. $_("Virtual Machine Name")</h2> - <div class="field"> - <input type="text" class="text" style="width: 300px" name="name"><br> - <div class="icon-info-circled light-grey c1 help-inline"></div> - <p class="text-help help-inline"> - $_("The name used to identify the virtual machine. If omitted, a name will be chosen based on the template used.") - </p> +<div id="guest-add-window" class="window modal-content"> + <div class="modal-header"> + <h4 class="modal-title" id="guestsModalLabel">$_("Create a New Virtual Machine")</h4> </div> - </section> - <section class="form-section"> - <h2>2. $_("Template")</h2> - <div class="field"> - <div class="text-help"> - <div id="prompt-create-template" class="hidden"> - <div class="icon-info-circled light-grey c1 help-inline"></div> - <div class="text-help help-inline">$_("Please create a template first.")</div> - <a id="btn-create-template" class="btn-normal" href="templates.html"> - <span class="text">$_("Create a Template")</span> - </a> + <div class="modal-body"> + <form id="form-vm-add"> + <div class="guest-modal-container"> + <div class="form-group"> + <label for="guest-vm-name">$_("Virtual Machine Name")</label> + <input type="text" class="form-control" name="name" id="guest-vm-name" /> + <p class="help-block"><i class="fa fa-info-circle"></i> $_("The name used to identify the virtual machine. If omitted, a name will be chosen based on the template used.") + </p> + </div> </div> - <div id="prompt-choose-template" class="hidden"> - <span class="icon-info-circled light-grey c1"></span> - <span class="text-help">$_("Please choose a template.")</span> - </div> - </div> - <ul id="templateTile" class="tile-check tile-template"> - </ul> - <script type="html/text" id="tmpl-template" class="tmpl-html"> - <li> - <label> - <input type="radio" name="template" value="/plugins/kimchi/templates/{name}"> - <div class="info"> - <div class="summary os-icon"> - <img src="{icon}"> - <span class="title">{name}</span> - </div> - <ul class="list-info"> - <li><label>$_("OS")</label><span>{os_distro}</span></li> - <li><label>$_("OS Version")</label><span>{os_version}</span></li> - <li><label>$_("CPUS")</label><span>{cpus}</span></li> - <li><label>$_("Memory")</label><span>{memory}M</span></li> - </ul> + <div class="guest-pager"> + <div class="page-list"> + <div class="page"> + <div class="row"> + <div id="prompt-create-template" class="hidden"> + <p>$_("Please create a template first.")</p> + <a id="btn-create-template" class="btn btn-primary" href="templates.html">$_("Create a Template")</a> + </div> + <p id="prompt-choose-template" class="hidden">$_("Please choose a template.")</p> + </div> + <ul id="templateTile" class="list-template tile-check tile-template"> + </ul> + <script type="html/text" id="tmpl-template" class="tmpl-html"> + <li class="col-md-3"> + <label class="box-iso-outer"> + <input type="radio" name="template" value="/plugins/kimchi/templates/{name}" class="iso-radio-hidden"> + <span class="box-iso-border"> + <span class="box-iso-inner"> + <h3 class="iso-title {os_distro}" title="{name}">{name}</h3> + <dl class="iso-info"> + <dt>{os_distro}</dt> + <dd>$_("OS: ")</dd> + <dt>{os_version}</dt> + <dd>$_("Version: ")</dd> + <dt>{cpus}</dt> + <dd>$_("CPUS")</dd> + <dt>{memory}M</dt> + <dd>$_("Memory")</dd> + </dl> + </span> + </span> + </label> + </li> + </script> </div> - </label> - </li> - </script> + </div> + </div> + </form> </div> - </section> - </form> + <div class="modal-footer"> + <button id="vm-doAdd" class="btn btn-default" disabled="disabled" href="javascript:void(0);">$_("Create")</button> + <button id="vm-doAdding" class="btn btn-default" disabled="disabled" style="display:none" href="javascript:void(0);"><span class="wok-loading-icon"></span> $_("Creating...")</button> + <button id="vm-add=cancel" class="btn btn-default" data-dismiss="modal" type="button">$_("Cancel")</button> </div> - <footer> - <div class="btn-group"> - <button id="vm-doAdd" class="btn-normal" disabled="disabled" href="javascript:void(0);"><span class="text">$_("Create")</span></button> - <button id="vm-doAdding" class="btn-normal" disabled="disabled" style="display:none" href="javascript:void(0);"><span class="text">$_("Creating...")</span></button> - <button id="vm-add=cancel" class="btn-normal close" type="button"> - <span class="text">$_("Cancel")</span> - </button> - </div> - </footer> </div> <script> kimchi.guest_add_main(); diff --git a/src/wok/plugins/kimchi/ui/pages/guests.html.tmpl b/src/wok/plugins/kimchi/ui/pages/guests.html.tmpl index b8a1259..5dfb70a 100644 --- a/src/wok/plugins/kimchi/ui/pages/guests.html.tmpl +++ b/src/wok/plugins/kimchi/ui/pages/guests.html.tmpl @@ -34,26 +34,48 @@ </head> <body> <div id="guests-root-container"> - <div class="toolbar"> - <div class="tools" style="display:none"> - <a id="vm-add" class="btn-tool" href="javascript:void(0);"><span class="icon add">+</span></a> + <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="vm-add" class="btn-tool" href="javascript:void(0);"><i class="fa fa-plus-circle"></i><span>Add a Guest</span></a></li> + </ul> + </div> + </div> + </nav> + <div id="guest-content-container"> + <div class="container"> + <div id="guestListField" style="display: none"> + <ul class="list-title"> + <li class="guest-type">$_("Name")</li> + <li class="guest-cpu">$_("CPU")</li> + <li class="guest-storage">$_("Disk I/O")</li> + <li class="guest-network">$_("Network I/O")</li> + <li class="guest-tile">$_("Livetile")</li> + <li class="guest-actions">$_("Actions")</li> + </ul> + <ul id="guestList" class="list-vm empty-when-logged-off"> + </ul> + </div> + <div id="noGuests" class="list-no-result" style="display: none;"> + $_("No guests found.") + </div> </div> </div> - <div id="guestListField" style="display: none"> - <ul class="list-title"> - <li class="guest-type">$_("Name")</li> - <li class="guest-cpu">$_("CPU")</li> - <li class="guest-storage">$_("Disk I/O")</li> - <li class="guest-network">$_("Network I/O")</li> - <li class="guest-tile">$_("Livetile")</li> - <li class="guest-actions">$_("Actions")</li> - </ul> - <ul id="guestList" class="list-vm empty-when-logged-off"> - </ul> - </div> - <div id="noGuests" class="list-no-result" style="display: none;"> - $_("No guests found.") - </div> +<div id="modalWindow" class="modal fade host-modal guests-modal" tabindex="-1" role="dialog" aria-labelledby="guestsModalLabel" aria-hidden="true"> +</div> +<div id="extendCreateTemplate" class="modal fade host-modal templates-modal" tabindex="-1" role="dialog" aria-labelledby="guestsModalLabel" aria-hidden="true"> +</div> <script id="guest-tmpl" type="kimchi/template"> $ht(file=$data.ui_dir + "/pages/guest.html.tmpl", searchList=[self, {'lang':$lang}]) </script> -- 1.9.3