commit bfb119874fef8718f84011ac743192aebfe80aff
Author: Kostas Papadimitriou <kpap@grnet.gr>
Date:   Thu Nov 21 17:13:59 2013 +0200

    ui: Network/IPs/Public keys action indicators

diff --git a/snf-cyclades-app/synnefo/ui/static/snf/css/main.css b/snf-cyclades-app/synnefo/ui/static/snf/css/main.css
index ea8d1cc..cd0392c 100644
--- a/snf-cyclades-app/synnefo/ui/static/snf/css/main.css
+++ b/snf-cyclades-app/synnefo/ui/static/snf/css/main.css
@@ -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 {
diff --git a/snf-cyclades-app/synnefo/ui/static/snf/images/icons/actions/medium/connect.png b/snf-cyclades-app/synnefo/ui/static/snf/images/icons/actions/medium/connect.png
new file mode 100644
index 0000000..024138e
Binary files /dev/null and b/snf-cyclades-app/synnefo/ui/static/snf/images/icons/actions/medium/connect.png differ
diff --git a/snf-cyclades-app/synnefo/ui/static/snf/images/icons/actions/medium/disconnect.png b/snf-cyclades-app/synnefo/ui/static/snf/images/icons/actions/medium/disconnect.png
new file mode 100644
index 0000000..b335cb1
Binary files /dev/null and b/snf-cyclades-app/synnefo/ui/static/snf/images/icons/actions/medium/disconnect.png differ
diff --git a/snf-cyclades-app/synnefo/ui/static/snf/js/models.js b/snf-cyclades-app/synnefo/ui/static/snf/js/models.js
index eaf8f09..d7aa65e 100644
--- a/snf-cyclades-app/synnefo/ui/static/snf/js/models.js
+++ b/snf-cyclades-app/synnefo/ui/static/snf/js/models.js
@@ -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");
       }
     });
 
diff --git a/snf-cyclades-app/synnefo/ui/static/snf/js/ui/web/ui_networks_view.js b/snf-cyclades-app/synnefo/ui/static/snf/js/ui/web/ui_networks_view.js
index da8c206..9f51d76 100644
--- a/snf-cyclades-app/synnefo/ui/static/snf/js/ui/web/ui_networks_view.js
+++ b/snf-cyclades-app/synnefo/ui/static/snf/js/ui/web/ui_networks_view.js
@@ -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();
       },
diff --git a/snf-cyclades-app/synnefo/ui/static/snf/js/views_ext.js b/snf-cyclades-app/synnefo/ui/static/snf/js/views_ext.js
index 5515db2..d0b671b 100644
--- a/snf-cyclades-app/synnefo/ui/static/snf/js/views_ext.js
+++ b/snf-cyclades-app/synnefo/ui/static/snf/js/views_ext.js
@@ -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);
diff --git a/snf-cyclades-app/synnefo/ui/templates/partials/ips.html b/snf-cyclades-app/synnefo/ui/templates/partials/ips.html
index ad4b91f..20432b7 100644
--- a/snf-cyclades-app/synnefo/ui/templates/partials/ips.html
+++ b/snf-cyclades-app/synnefo/ui/templates/partials/ips.html
@@ -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>
diff --git a/snf-cyclades-app/synnefo/ui/templates/partials/networks.html b/snf-cyclades-app/synnefo/ui/templates/partials/networks.html
index 3aa0059..e314c91 100644
--- a/snf-cyclades-app/synnefo/ui/templates/partials/networks.html
+++ b/snf-cyclades-app/synnefo/ui/templates/partials/networks.html
@@ -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>
diff --git a/snf-cyclades-app/synnefo/ui/templates/partials/public_keys.html b/snf-cyclades-app/synnefo/ui/templates/partials/public_keys.html
index 0dc7655..f6e3fba 100644
--- a/snf-cyclades-app/synnefo/ui/templates/partials/public_keys.html
+++ b/snf-cyclades-app/synnefo/ui/templates/partials/public_keys.html
@@ -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">
