Revision 5e21ee35

b/ui/static/main.css
2227 2227
    color: #3D3D3D;
2228 2228
    padding:6px;
2229 2229
    vertical-align: middle;
2230
    height: 20px;
2230 2231
}
2231 2232

  
2232 2233
div.list table thead tr th {
......
2325 2326

  
2326 2327
.spinner, .action-indicator {
2327 2328
    clear: right;
2328
    float:right !important;
2329
    margin: 10px 6px 0 15px !important;
2329
    float:right;
2330
    margin: 10px 6px 0 15px;
2330 2331
}
2331 2332

  
2332 2333
.icon .spinner {
......
2338 2339
}
2339 2340

  
2340 2341
.action-indicator {
2341
    margin-right: 18px !important;
2342
    margin-right: 18px;
2343
}
2344

  
2345
.list span.action-indicator {
2346
    display: block;
2347
    width: 15px;
2348
    height: 20px;
2349
    margin: 0 !important;
2350
    float: none;
2342 2351
}
2343 2352

  
2344 2353
.wave {
......
3688 3697
    float: none !important;
3689 3698
}
3690 3699

  
3700
.icon div.action-indicator {
3701
    margin-top: 15px;
3702
    margin-right: 14px;
3703
}
3704

  
3691 3705
div.action-indicator {
3692 3706
    width: 15px;
3693 3707
    height: 20px;
b/ui/static/snf/js/ui/web/ui_list_view.js
30 30
            this.selected_action = undefined;
31 31
            this.available_actions = [];
32 32
            this.multi_view = synnefo.ui.main.multiple_actions_view;
33

  
34
            this.hovered = false;
33 35
        },
34 36

  
35 37
        set_handlers: function() {
......
37 39
            storage.vms.bind("change:pending_action", function() {
38 40
                if (!storage.vms.has_pending_actions()) {
39 41
                    self.parent.$(".actions a").removeClass("selected");
42
                    self.parent.clear_indicators();
40 43
                }
41
            })
44
            });
42 45
            
43 46
            var self = this;
44 47
            this.parent.$(".actions a.enabled").live('click', function() {
45 48
                self.parent.$(".actions a").removeClass("selected");
46 49
                $(this).addClass("selected");
47 50
                self.parent.select_action($(this).attr("id").replace("action-",""));
48
            })
51
            });
52

  
53
            this.parent.$(".actions a.enabled").live({
54
                'mouseenter': function() {
55
                    self.parent.set_indicator_for($(this).attr("id").replace("action-",""))
56
                    self.hovered = true;
57
                }, 
58
                'mouseleave': function() {
59
                    self.parent.clear_indicators();
60
                    self.hovered = false;
61
                }
62
            });
49 63
        },
50 64
        
51 65
        update_actions: function() {
......
220 234
            this.vm(vm).find(".spinner").hide();
221 235
            this.vm(vm).find(".wave").hide();
222 236
            this.vm(vm).find(".os_icon").show();
237
            this.vm(vm).find(".action-indicator").hide();
223 238
            
224 239
            // ancestor method
225 240
            this.__set_vm_handlers(vm);
......
243 258
            }, this));
244 259
        },
245 260

  
261
        set_indicator_for: function(action) {
262
            var vms = this.get_selected_vms();
263
            _.each(vms, _.bind(function(vm){
264
                var vmel = this.vm(vm);
265
                vmel.find("img.spinner, img.wave, img.os_icon").hide();
266
                vmel.find("span.action-indicator").show().removeClass().addClass(action + " action-indicator");
267
            }, this));
268
        },
269

  
270
        clear_indicators: function() {
271
            var vms = storage.vms.models;
272
            _.each(vms, _.bind(function(vm){
273
                var vmel = this.vm(vm);
274

  
275
                vmel.find("img.wave").hide();
276
                
277
                if (vm.pending_action) {
278
                    vmel.find("img.os_icon").hide();
279
                    vmel.find("span.action-indicator").show().removeClass().addClass(vm.pending_action + " action-indicator");
280
                    return;
281
                }
282

  
283
                if (vm.in_transition()) {
284
                    vmel.find("span.action-indicator").hide();
285
                    vmel.find("img.spinner").show();
286
                    return;
287
                }
288

  
289
                if (!this.actions.hovered) {
290
                    vmel.find("img.os_icon").show();
291
                    vmel.find("span.action-indicator").hide();
292
                    vmel.find("img.spinner").hide();
293
                }
294
                
295

  
296
            }, this));
297
        },
298

  
246 299
        get_vm_table_data: function(vm) {
247 300
            var checkbox = '<input type="checkbox" class="' + 
248 301
                views.ListView.STATE_CLASSES[vm.state()].join(" ") + 
......
251 304
            var img = '<img class="os_icon" src="'+ this.get_vm_icon_path(vm, "small") +'" />';
252 305
            img = img + '<img src="static/icons/indicators/small/progress.gif" class="spinner" />';
253 306
            img = img + '<img src="static/icons/indicators/medium/wave.gif" class="wave" />';
307
            img = img + '<span class="action-indicator" />';
254 308

  
255 309
            var name = util.truncate(vm.get('name'), 20);
256 310
            var flavor = vm.get_flavor().details_string();
......
268 322
                this.sel('vm_spinner', vm.id).show();
269 323
                this.sel('vm_wave', vm.id).hide();
270 324
                this.sel('os_icon', vm.id).hide();
325
                this.$(".action-indicator").hide();
271 326
            } else {
272 327
                this.sel('vm_spinner', vm.id).hide();
273 328
            }
......
275 330

  
276 331
        // display transition animations
277 332
        show_transition: function(vm) {
333
            if (!this.visible()) { return };
278 334
            var wave = this.sel('vm_wave', vm.id);
279 335
            if (!wave.length) {
280 336
                return

Also available in: Unified diff