Revision a583aa29
| b/ui/static/main.css | ||
|---|---|---|
| 2391 | 2391 |
width: 70px !important; |
| 2392 | 2392 |
} |
| 2393 | 2393 |
|
| 2394 |
.spinner {
|
|
| 2394 |
.spinner, .action-indicator {
|
|
| 2395 | 2395 |
clear: right; |
| 2396 | 2396 |
float:right !important; |
| 2397 | 2397 |
margin: 10px 6px 0 15px !important; |
| 2398 | 2398 |
} |
| 2399 |
.action-indicator {
|
|
| 2400 |
margin-right: 18px !important; |
|
| 2401 |
} |
|
| 2399 | 2402 |
|
| 2400 | 2403 |
.wave {
|
| 2401 | 2404 |
clear: right; |
| ... | ... | |
| 3187 | 3190 |
margin-left: -5px; |
| 3188 | 3191 |
} |
| 3189 | 3192 |
|
| 3190 |
.single .spinner {
|
|
| 3193 |
.single .spinner, .single .action-indicator {
|
|
| 3191 | 3194 |
margin: 15px 45px 0 0px !important |
| 3192 | 3195 |
} |
| 3193 | 3196 |
|
| 3197 |
.single .action-indicator {
|
|
| 3198 |
margin-right: 55px !important; |
|
| 3199 |
} |
|
| 3200 |
|
|
| 3194 | 3201 |
.single .wave {
|
| 3195 | 3202 |
margin: 15px 53px 0 0px !important |
| 3196 | 3203 |
} |
| ... | ... | |
| 3536 | 3543 |
visibility: hidden; |
| 3537 | 3544 |
font-size: 0; |
| 3538 | 3545 |
} |
| 3546 |
|
|
| 3547 |
#machinesview-list div.action-indicator {
|
|
| 3548 |
margin:0 !important; |
|
| 3549 |
float: none !important; |
|
| 3550 |
} |
|
| 3551 |
|
|
| 3552 |
div.action-indicator {
|
|
| 3553 |
width: 15px; |
|
| 3554 |
height: 20px; |
|
| 3555 |
background-repeat: no-repeat; |
|
| 3556 |
background-position: 0 0; |
|
| 3557 |
} |
|
| 3558 |
div.action-indicator.destroy {
|
|
| 3559 |
background-image: url("./icons/actions/medium/destroy.png");
|
|
| 3560 |
} |
|
| 3561 |
div.action-indicator.start {
|
|
| 3562 |
background-image: url("./icons/actions/medium/start.png");
|
|
| 3563 |
} |
|
| 3564 |
div.action-indicator.reboot {
|
|
| 3565 |
background-image: url("./icons/actions/medium/reboot.png");
|
|
| 3566 |
} |
|
| 3567 |
div.action-indicator.shutdown {
|
|
| 3568 |
background-image: url("./icons/actions/medium/shutdown.png");
|
|
| 3569 |
} |
|
| 3570 |
|
|
| b/ui/static/synnefo.js | ||
|---|---|---|
| 50 | 50 |
} |
| 51 | 51 |
}); |
| 52 | 52 |
|
| 53 |
|
|
| 54 |
// jquery hide event |
|
| 55 |
var _oldshow = $.fn.show; |
|
| 56 |
$.fn.show = function(speed, callback) {
|
|
| 57 |
$(this).trigger('show');
|
|
| 58 |
return _oldshow.apply(this,arguments); |
|
| 59 |
} |
|
| 60 |
|
|
| 53 | 61 |
function ISODateString(d){
|
| 54 | 62 |
//return a date in an ISO 8601 format using UTC. |
| 55 | 63 |
//do not include time zone info (Z) at the end |
| ... | ... | |
| 1588 | 1596 |
$("a#metadata-scrollable").overlay().close();
|
| 1589 | 1597 |
} catch(err) {}
|
| 1590 | 1598 |
} |
| 1599 |
|
|
| 1600 |
// action indicators |
|
| 1601 |
function init_action_indicator_handlers(machines_view) |
|
| 1602 |
{
|
|
| 1603 |
if (machines_view == "list") |
|
| 1604 |
{
|
|
| 1605 |
// totally different logic for list view |
|
| 1606 |
init_action_indicator_list_handlers(); |
|
| 1607 |
return; |
|
| 1608 |
} |
|
| 1609 |
|
|
| 1610 |
var has_active_indicators = function(el) |
|
| 1611 |
{
|
|
| 1612 |
return ($("img.spinner:visible", el.parent().parent()).length >= 1) || ($("img.wave:visible", el.parent().parent()).length >= 1)
|
|
| 1613 |
} |
|
| 1614 |
|
|
| 1615 |
// action indicators |
|
| 1616 |
$(".action-container").live('mouseover', function(evn){
|
|
| 1617 |
var el = $(evn.currentTarget); |
|
| 1618 |
// we dont need the single-action class |
|
| 1619 |
var action_class = el.attr("class").replace("action-container","");
|
|
| 1620 |
// pass the hovered element action related class to the indicator image |
|
| 1621 |
$("div.action-indicator", el.parent().parent()).attr("class", "action-indicator " + action_class);
|
|
| 1622 |
|
|
| 1623 |
// spinner || wave indicators already visible. dont show action image to avoid clutter |
|
| 1624 |
if (has_active_indicators(el)) |
|
| 1625 |
{
|
|
| 1626 |
return; |
|
| 1627 |
} |
|
| 1628 |
$("div.action-indicator", el.parent().parent()).show();
|
|
| 1629 |
}); |
|
| 1630 |
|
|
| 1631 |
// hide action indicator image on mouse out, spinner appear, wave appear |
|
| 1632 |
$(".action-container").live("mouseout", function(evn){
|
|
| 1633 |
var el = $(evn.currentTarget); |
|
| 1634 |
$("div.action-indicator").hide();
|
|
| 1635 |
|
|
| 1636 |
var pending_for_confirm_action = $(".confirm_single:visible", el.parent().parent());
|
|
| 1637 |
// if we mouse out and another action is in confirmation mode |
|
| 1638 |
if (!has_active_indicators(el)) |
|
| 1639 |
{
|
|
| 1640 |
// no actions pending |
|
| 1641 |
if (pending_for_confirm_action.length == 0) |
|
| 1642 |
{
|
|
| 1643 |
return; |
|
| 1644 |
} |
|
| 1645 |
|
|
| 1646 |
// find action pending and show icon |
|
| 1647 |
var action_container = $($(pending_for_confirm_action[0]).parent()); |
|
| 1648 |
var action_class = action_container.attr("class").replace("action-container","");
|
|
| 1649 |
$("div.action-indicator", action_container.parent().parent()).attr("class", "action-indicator " + action_class);
|
|
| 1650 |
$("div.action-indicator").show();
|
|
| 1651 |
} |
|
| 1652 |
|
|
| 1653 |
}); |
|
| 1654 |
|
|
| 1655 |
$("img.spinner, img.wave").live('show', function(){
|
|
| 1656 |
$("div.action-indicator").hide();
|
|
| 1657 |
}); |
|
| 1658 |
} |
|
| 1659 |
|
|
| 1660 |
function init_action_indicator_list_handlers() |
|
| 1661 |
{
|
|
| 1662 |
var skip_actions = { 'console':'','connect':'','details':'' };
|
|
| 1663 |
|
|
| 1664 |
var has_pending_confirmation = function() |
|
| 1665 |
{
|
|
| 1666 |
return $(".confirm_multiple:visible").length >= 1
|
|
| 1667 |
} |
|
| 1668 |
|
|
| 1669 |
function update_action_indicator_icons(force_action, skip_pending) |
|
| 1670 |
{
|
|
| 1671 |
// pending action based on the element class |
|
| 1672 |
var pending_action = $(".selected", $(".actions"))[0];
|
|
| 1673 |
var selected = get_list_view_selected_machine_rows(); |
|
| 1674 |
|
|
| 1675 |
// reset previous state |
|
| 1676 |
list_view_hide_action_indicators(); |
|
| 1677 |
|
|
| 1678 |
if (pending_action == undefined && !force_action) |
|
| 1679 |
{
|
|
| 1680 |
// no action selected |
|
| 1681 |
return; |
|
| 1682 |
} |
|
| 1683 |
|
|
| 1684 |
if (force_action != undefined) |
|
| 1685 |
{
|
|
| 1686 |
// user forced action choice |
|
| 1687 |
var action_class = force_action; |
|
| 1688 |
} else {
|
|
| 1689 |
// retrieve action name (reboot, stop, etc..) |
|
| 1690 |
var action_class = $(pending_action).attr("id").replace("action-","");
|
|
| 1691 |
} |
|
| 1692 |
|
|
| 1693 |
selected.each(function(index, el) {
|
|
| 1694 |
if (has_pending_confirmation() && skip_pending) |
|
| 1695 |
{
|
|
| 1696 |
return; |
|
| 1697 |
} |
|
| 1698 |
var el = $(el); |
|
| 1699 |
var logo = $("img.list-logo", el);
|
|
| 1700 |
$(".action-indicator", el).remove();
|
|
| 1701 |
var cls = "action-indicator " + action_class; |
|
| 1702 |
// add icon div |
|
| 1703 |
logo.after('<div class="' + cls + '"></div>');
|
|
| 1704 |
// hide os logo |
|
| 1705 |
$("img.list-logo", el).hide();
|
|
| 1706 |
}); |
|
| 1707 |
} |
|
| 1708 |
|
|
| 1709 |
// on mouseover we force the images to the hovered action |
|
| 1710 |
$(".actions a").live("mouseover", function(evn) {
|
|
| 1711 |
var el = $(evn.currentTarget); |
|
| 1712 |
if (!el.hasClass("enabled"))
|
|
| 1713 |
{
|
|
| 1714 |
return; |
|
| 1715 |
} |
|
| 1716 |
var action_class = el.attr("id").replace("action-","");
|
|
| 1717 |
if (action_class in skip_actions) |
|
| 1718 |
{
|
|
| 1719 |
return; |
|
| 1720 |
} |
|
| 1721 |
update_action_indicator_icons(action_class, false); |
|
| 1722 |
}); |
|
| 1723 |
|
|
| 1724 |
$(".actions a").live("click", function(evn) {
|
|
| 1725 |
var el = $(evn.currentTarget); |
|
| 1726 |
el.addClass("selected");
|
|
| 1727 |
update_action_indicator_icons(undefined, false); |
|
| 1728 |
}); |
|
| 1729 |
|
|
| 1730 |
$(".actions a").live("mouseout", function(evn) {
|
|
| 1731 |
update_action_indicator_icons(undefined, false); |
|
| 1732 |
}); |
|
| 1733 |
|
|
| 1734 |
$(".confirm_multiple button.no").click(function(){
|
|
| 1735 |
list_view_hide_action_indicators(); |
|
| 1736 |
}); |
|
| 1737 |
|
|
| 1738 |
$(".confirm_multiple button.yes").click(function(){
|
|
| 1739 |
list_view_hide_action_indicators(); |
|
| 1740 |
}); |
|
| 1741 |
|
|
| 1742 |
$("input[type=checkbox]").live('change', function(){
|
|
| 1743 |
// pending_actions will become empty on every checkbox click/change |
|
| 1744 |
// line 154 machines_list.html |
|
| 1745 |
pending_actions = []; |
|
| 1746 |
if (pending_actions.length == 0) |
|
| 1747 |
{
|
|
| 1748 |
$(".confirm_multiple").hide();
|
|
| 1749 |
$("a.selected").each(function(index, el){$(el).removeClass("selected")});
|
|
| 1750 |
} |
|
| 1751 |
update_action_indicator_icons(undefined, false); |
|
| 1752 |
}); |
|
| 1753 |
|
|
| 1754 |
} |
|
| 1755 |
|
|
| 1756 |
function list_view_hide_action_indicators() |
|
| 1757 |
{
|
|
| 1758 |
$("tr td .action-indicator").remove();
|
|
| 1759 |
$("tr td img.list-logo").show();
|
|
| 1760 |
} |
|
| 1761 |
|
|
| 1762 |
function get_list_view_selected_machine_rows() |
|
| 1763 |
{
|
|
| 1764 |
var table = $("table.list-machines");
|
|
| 1765 |
var rows = $("tr:has(input[type=checkbox]:checked)",table);
|
|
| 1766 |
return rows; |
|
| 1767 |
} |
|
| 1768 |
|
|
| b/ui/templates/machines_icon.html | ||
|---|---|---|
| 105 | 105 |
<div class="indicator3"></div> |
| 106 | 106 |
<div class="indicator4"></div> |
| 107 | 107 |
</div> |
| 108 |
<div class="action-indicator" style="display:none"></div> |
|
| 108 | 109 |
<img class="spinner" style="display:none" src="static/icons/indicators/medium/progress.gif" /> |
| 109 | 110 |
<img class="wave" style="display:none" src="static/icons/indicators/medium/wave.gif" /> |
| 110 | 111 |
</div> |
| ... | ... | |
| 161 | 162 |
<script> |
| 162 | 163 |
CONFIRMBOX_OFFSET = 200; |
| 163 | 164 |
|
| 165 |
init_action_indicator_handlers('icon');
|
|
| 166 |
|
|
| 164 | 167 |
// actions on machine mouseover |
| 165 | 168 |
$("#machinesview-icon.standard .machine").live('mouseover', function() {
|
| 166 | 169 |
// show connect button only if the machine is active |
| b/ui/templates/machines_list.html | ||
|---|---|---|
| 89 | 89 |
|
| 90 | 90 |
<script> |
| 91 | 91 |
|
| 92 |
init_action_indicator_handlers('list');
|
|
| 93 |
|
|
| 92 | 94 |
// select/deselect all from checkbox widget of table headers |
| 93 | 95 |
$("#machinesview .list table thead tr th.selection :checkbox").live('change', function() {
|
| 94 | 96 |
if ( $(this).is(":checked") ) {
|
| b/ui/templates/machines_single.html | ||
|---|---|---|
| 52 | 52 |
<div class="indicator3"></div> |
| 53 | 53 |
<div class="indicator4"></div> |
| 54 | 54 |
</div> |
| 55 |
<div class="action-indicator" style="display:none"></div> |
|
| 55 | 56 |
<img class="spinner" style="display:none" src="static/icons/indicators/medium/progress.gif" /> |
| 56 | 57 |
<img class="wave" style="display:none" src="static/icons/indicators/medium/wave.gif" /> |
| 57 | 58 |
</div> |
| ... | ... | |
| 185 | 186 |
|
| 186 | 187 |
<script> |
| 187 | 188 |
|
| 189 |
init_action_indicator_handlers('single');
|
|
| 190 |
|
|
| 188 | 191 |
//hide the all of the tags contents |
| 189 | 192 |
$("#machinesview-single.single .tags-content").hide();
|
| 190 | 193 |
|
Also available in: Unified diff