Commit 0810b76c authored by Kostas Papadimitriou's avatar Kostas Papadimitriou
Browse files

ui: Network/IPs/Public keys action indicators

parent 6bb5c4da
......@@ -4127,6 +4127,12 @@ tbody.machines div.action-indicator {
position: relative;
top: -2px;
}
div.state .connect, tbody.machines .connect {
background-image: url("../images/icons/actions/medium/connect.png");
}
div.state .disconnect, tbody.machines .disconnect {
background-image: url("../images/icons/actions/medium/disconnect.png");
}
div.state .destroy, tbody.machines .destroy {
background-image: url("../images/icons/actions/medium/destroy.png");
}
......@@ -6704,6 +6710,17 @@ input.has-errors {
background-color: #A1C8DB;
}
.pane-view .collection-list-view .model-view .main-content.inner .state-indicator {
top: 5px;
}
.pane-view .collection-list-view .model-view .main-content .state-indicator {
width: 50px;
position: absolute;
top: 30px;
right: 5px;
}
.pane-view .collection-list-view .model-view .main-content .title {
font-weight: normal;
}
......@@ -6733,6 +6750,10 @@ input.has-errors {
float: left;
}
.pane-view .collection-list-view .model-view .main-content .entry-right {
position: relative;
}
.pane-view .collection-list-view .model-view .main-content .entry {
width: 290px;
padding-top: 5px;
......@@ -6798,6 +6819,8 @@ input.has-errors {
}
.model-item .status-indicator {
width: 110px;
float: right;
}
.model-item .actions-content {
......@@ -6973,8 +6996,8 @@ input.has-errors {
/* end vm sprites */
/* ips */
.ip-port-view .vm-logo {
width:
.ip-port-view .title {
width: 100%;
}
.model-item .vm-name {
......
......@@ -2266,6 +2266,7 @@
this.reset_pending();
}
this.set(data);
this.trigger("set-pending", action);
},
reset_pending: function() {
......@@ -2274,6 +2275,7 @@
data[action] = this.status.INACTIVE;
}, this);
this.set(data);
this.trigger("reset-pending");
}
});
......
......@@ -290,6 +290,8 @@
this.firewall_visible = this.firewall_toggler.hasClass("open");
if (!this.firewall_visible) {
this.firewall_apply.fadeOut(50);
} else {
this.model.actions.reset_pending();
}
this.update_firewall();
},
......
......@@ -453,17 +453,63 @@
}
},
action_cls_map: {
'remove': 'destroy'
},
_set_confirm: function(action) {
this.pending_action = action;
this.set_action_indicator(action);
},
_unset_confirm: function(action) {
this.pending_action = undefined;
this.reset_action_indicator(action);
},
set_action_indicator: function(action) {
action = this.action_cls_map[action] || action;
var indicator = this.el.find(".action-indicator");
indicator = $(indicator[indicator.length - 1]);
indicator.attr("class", "").addClass("state action-indicator " + action);
},
reset_action_indicator: function() {
var indicator = this.el.find(".action-indicator");
indicator = $(indicator[indicator.length - 1]);
indicator.attr("class", "").addClass("state action-indicator");
if (this.pending_action) {
this.set_action_indicator(this.pending_action);
}
},
set_confirm: function() {},
unset_confirm: function() {},
init_action_methods: function(actions) {
var self = this;
if (this.model && this.model.actions) {
this.model.actions.bind("reset-pending", function() {
this._unset_confirm();
}, this);
this.model.actions.bind("set-pending", function(action) {
console.log("ACTION", action);
this._set_confirm(action)
}, this);
}
_.each(actions.actions, function(action) {
this.el.find(".action-container." + action).hover(function() {
self.set_action_indicator(action);
}, function() {
self.reset_action_indicator();
});
var method;
method = 'set_{0}_confirm'.format(action);
if (this[method]) { return }
this[method] = _.bind(function(model, ev) {
if (ev) { ev.stopPropagation() }
var data = {};
this._set_confirm(action);
this.set_confirm(action);
this.model.actions.set_pending_action(action);
}, this);
......@@ -472,6 +518,7 @@
this[method] = _.bind(function(model, ev) {
if (ev) { ev.stopPropagation() }
var data = {};
this._unset_confirm(action);
this.unset_confirm(action);
this.model.actions.unset_pending_action(action);
}, this);
......
......@@ -42,6 +42,9 @@
<div class="indicator indicator3"></div>
<div class="indicator indicator4"></div>
</div>
<div class="state state-indicator">
<div class="action-indicator"></div>
</div>
<div data-show="model.status|in_progress" class="status-progress"></div>
</div>
</div>
......
......@@ -73,7 +73,8 @@
<div class="collection">
<div class="empty-list item-list hidden nested">
<div class="border">
<i class="add" data-rv-on-click="view.show_connect_vms_overlay">+</i>
<i class="add icon-action connect"
data-rv-on-click="view.show_connect_vms_overlay">+</i>
</div>
<div class="border2"></div>
</div>
......@@ -87,13 +88,16 @@
<div class="outer">
<div class="border">
<i data-rv-show="model.can_disconnect"
class="remove"
class="remove icon-action"
data-rv-on-click="view.set_disconnect_confirm">X</i>
</div>
<div class="border2"></div>
<div class="inner clearfix main-content">
<img class="model-logo" data-rv-src="model.vm.status|vm_logo_url" />
<h5 class="title" data-rv-text="model.vm.name|truncate 35"></h5>
<div class="state state-indicator">
<div class="action-indicator"></div>
</div>
<ul class="ip-addresses">
<li data-rv-each-item="model.fixed_ips">
<span data-rv-text="item:ip_address|ip_type" class="type"></span>
......@@ -124,7 +128,7 @@
<input type="radio" class="checkboxes"
value="ENABLED"
data-rv-name="model.id|prefix firewall-" />
<span class="checkbox-legends">Fully protecte mode (Firewall on)</span>
<span class="checkbox-legends">Fully protected mode (Firewall on)</span>
<br />
<input type="radio" class="checkboxes"
data-rv-name="model.id|prefix firewall-"
......@@ -192,6 +196,9 @@
<span data-rv-text="model.cidr|status_display">STATUS</span>
<span data-rv-show="model.in_progress">...</span>
</div>
<div class="state state-indicator">
<div class="action-indicator"></div>
</div>
<div class="status-indicator clearfix">
<div class="indicator indicator1"></div>
<div class="indicator indicator2"></div>
......@@ -204,7 +211,7 @@
</div>
</div>
<div class="actions-content">
<div class="action-container"
<div class="action-container connect"
data-rv-class-isactive="model.can_connect"
data-rv-on-click="view.show_connect_vms_overlay">
<a>{% trans "Connect machine" %}</a>
......
......@@ -66,6 +66,11 @@
</textarea>
</div>
</div>
<div class="entry-right">
<div class="state state-indicator">
<div class="action-indicator"></div>
</div>
</div>
</div>
</div>
<div class="actions-content">
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment