[Kimchi-devel] [PATCH v2 1/4] Update the guest.html.tmpl to use the new circleGauge widget

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&gt; --- 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&gt; + * Adam King <rak(a)us.ibm.com&gt; * * 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