[Kimchi-devel] [PATCH 9/9] Adding new-ui to Guests tab
sguimaraes943 at gmail.com
sguimaraes943 at gmail.com
Tue Oct 27 21:23:03 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.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
More information about the Kimchi-devel
mailing list