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@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@cn.ibm.com> + * Adam King <rak@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