Updated the template to use the new circle gauge widget.
Also retooled the template so that insertions can be handled by DOM
manipulation rather than string manipulation.
Signed-off-by: Adam King <rak(a)linux.vnet.ibm.com>
---
ui/css/theme-default/list.css | 27 +++++++++++++++++++++++++--
ui/pages/guest.html.tmpl | 41 +++++++++++++++++++++--------------------
2 files changed, 46 insertions(+), 22 deletions(-)
diff --git a/ui/css/theme-default/list.css b/ui/css/theme-default/list.css
index c435261..57ad610 100644
--- a/ui/css/theme-default/list.css
+++ b/ui/css/theme-default/list.css
@@ -92,17 +92,38 @@
.list-vm .tile .imgload {
display: none;
- max-height: 110px;
+}
+
+.list-vm .tile.shutoff .imgactive {
+max-height: 110px;
+ max-width: 170px;
+ height: auto;
+ width: auto;
+ display:inline;
+ border: none;
+}
+
+.list-vm .tile.running .imgactive{
+ max-height: 110px;
max-width: 170px;
height: auto;
width: auto;
+ display:inline;
+ border: none;
+ cursor: crosshair;
+ cursor: -moz-zoom-in;
+ cursor: -webkit-zoom-in;
}
-.list-vm .tile .imgactive {
+.list-vm .tile .overlay {
max-height: 110px;
max-width: 170px;
height: auto;
width: auto;
+ position:absolute;
+ bottom:0;
+ right:0;
+ display:none;
}
.guest-type {
@@ -221,10 +242,12 @@
margin: 10px;
}
+
.list-vm .tile:not(.shutoff) img {
box-shadow: -1px -1px 2px rgb(0, 0, 0, .25), 3px 3px 3px #fff;
}
+
.list-vm .shutoff {
box-shadow: none !important;
}
diff --git a/ui/pages/guest.html.tmpl b/ui/pages/guest.html.tmpl
index 6d83d57..cbf76ca 100644
--- a/ui/pages/guest.html.tmpl
+++ b/ui/pages/guest.html.tmpl
@@ -5,6 +5,7 @@
*
* Authors:
* Hongliang Wang <hlwanghl(a)cn.ibm.com>
+ * Adam King <rak(a)us.ibm.com>
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
@@ -24,43 +25,43 @@
#silent t = gettext.translation($lang.domain, $lang.localedir, languages=$lang.lang)
#silent _ = t.gettext
#silent _t = t.gettext
- <li id="{name}">
+ <li name="guest" class="guest">
<div class="sortable guest-type">
<div class="guest-general">
<h2 class="title"
title="{name}">{name}</h2>
</div>
</div>
- <div class="sortable guest-cpu">
- <div class="circle"
data-value="{stats}"></div>
+ <div name="cpu_utilization" class="sortable">
+ <div class="circleGauge"></div>
</div>
- <div class="sortable guest-network">
- <div class="circle"
data-value="{stats}"></div>
+ <div name="io_throughput" class="sortable">
+ <div class="circleGauge"></div>
<div class="subtitle">KB/s</div>
</div>
- <div class="sortable guest-storage">
- <div class="circle"
data-value="{stats}"></div>
+ <div name="net_throughput" class="sortable">
+ <div class="circleGauge"></div>
<div class="subtitle">KB/s</div>
</div>
- <div class="sortable guest-tile">
- <div class="tile {state}">
- <img class="imgactive" alt=""
src="{tile-src}">
- <img class="imgload" alt=""
src="{load-src}">
+ <div name="guest-tile" class="sortable
guest-tile">
+ <div class="tile ">
+ <img class="imgactive" alt=""
src="">
+ <img class="imgload" alt=""
src="">
+ <img class="overlay shutoff-hidden"
alt="$_("Start")"
src="/images/theme-default/icon-power-down.png" >
</div>
</div>
- <div class="sortable guest-actions">
+ <div class="sortable guest-actions"
name="guest-actions">
<div class="top">
- <a class="btn vm-reset" data-vmstate="{state}"
data-vm="{name}" href="javascript:void(0);"
title="$_("Reset")"><span class="icon
reset"></span></a>
- <a class="btn vm-start" data-vmstate="{state}"
data-vm="{name}" href="javascript:void(0);"
title="$_("Start")"><span class="icon
power-down"></span></a>
- <a class="btn vm-stop" data-vmstate="{state}"
data-vm="{name}" href="javascript:void(0);"
title="$_("Stop")"><span class="icon
power-up"></span></a>
+ <a class="btn shutoff-disabled"
name="vm-reset" href="javascript:void(0);"
title="$_("Reset")"><span class="icon
reset"></span></a>
+ <a class="btn running-hidden" name="vm-start"
href="javascript:void(0);" title="$_("Start")"><span
class="icon power-down"></span></a>
+ <a class="btn shutoff-hidden" name="vm-stop"
href="javascript:void(0);" title="$_("Stop")"><span
class="icon power-up"></span></a>
</div>
<div class="bottom">
- <div class="btn dropdown popable vm-action"
data-vmstate="{state}" data-graphics="{graphics.type}"
data-vm="{name}" style="width: 70px">
+ <div name="actionmenu" class="btn dropdown popable
vm-action" style="width: 70px">
<span
class="text">$_("Actions")</span><span
class="arrow"></span>
<div class="popover actionsheet right-side"
style="width: 250px">
- <button class="button-big vm-vnc"
data-vm="{name}"><span
class="text">VNC</span></button>
- <button class="button-big vm-spice"
data-vm="{name}"><span
class="text">SPICE</span></button>
- <button class="button-big vm-edit"
data-vm="{name}"><span
class="text">$_("Edit")</span></button>
- <a class="button-big red vm-delete"
data-vm="{name}">$_("Delete")</a>
+ <button class="button-big shutoff-disabled"
name="vm-console" ><span
class="text">$_("Console")</span></button>
+ <button class="button-big running-disabled"
name="vm-edit"><span
class="text">$_("Edit")</span></button>
+ <a class="button-big red "
name="vm-delete">$_("Delete")</a>
</div>
</div>
</div>
--
1.8.1.4