Revision 550d9733

b/ui/static/main.css
1035 1035
    margin: 0;
1036 1036
}
1037 1037

  
1038
div.ip, div.ips {
1038
.icon div.ip, .icon div.ips {
1039 1039
    font-size: 75%;
1040 1040
}
1041 1041

  
......
4509 4509

  
4510 4510
.overlay .header .subtitle img {
4511 4511
    vertical-align: middle;
4512
    margin-left: 5px;
4512
    margin-left: 10px;
4513 4513
    margin-bottom: 2px;
4514 4514
}
4515 4515

  
4516
.overlay-info .content {
4517
    background-repeat: no-repeat;
4518
    background-position: 110% 110%;
4519
    background-color: rgba(255,255,255,0.6)
4520
}
4521

  
4516 4522
.overlay-info .header {
4517 4523
    background-color: #4085A5;
4518 4524
}
......
4769 4775
    color: #fff;
4770 4776
}
4771 4777

  
4778
#createvm-overlay-content {
4779
    padding: 0;
4780
}
4781

  
4782
.create-vm .header-step.current {
4783
    font-weight: bold;
4784
}
4785

  
4786
.create-vm .create-step-cont {
4787
    margin: 20px;
4788
    min-height: 240px;
4789
}
4790
.create-vm .create-controls {
4791
    padding: 10px;
4792
}
4793

  
4794
.create-vm ul li {
4795
    cursor: pointer;
4796
    padding: 4px;
4797
}
4798

  
4799
.create-vm ul li.selected {
4800
    background-color: #aaa;
4801
}
4772 4802

  
4773 4803
.cont-toggler {
4774 4804
    background-image: url("./down-arrow.png");
......
5323 5353
.create-vm .meta input {
5324 5354
    font-size: 0.8em;
5325 5355
}
5356

  
5357
.vm-connect .connect-cont {
5358
    margin-bottom: 20px;
5359
    border-bottom: 1px solid #A1C8DB;
5360
    padding-bottom: 20px;
5361
}
b/ui/static/snf/js/ui/web/ui_connect_view.js
1
;(function(root){
2

  
3
    // root
4
    var root = root;
5
    
6
    // setup namepsaces
7
    var snf = root.synnefo = root.synnefo || {};
8
    var models = snf.models = snf.models || {}
9
    var storage = snf.storage = snf.storage || {};
10
    var ui = snf.ui = snf.ui || {};
11
    var util = snf.util = snf.util || {};
12

  
13
    var views = snf.views = snf.views || {}
14

  
15
    // shortcuts
16
    var bb = root.Backbone;
17

  
18

  
19
    views.VMConnectView = views.VMOverlay.extend({
20
        
21
        view_id: "connect_view",
22
        content_selector: "#vm-connect-overlay-content",
23
        css_class: 'overlay-vmconnect overlay-info',
24
        overlay_id: "vmconnect-overlay",
25

  
26
        subtitle: "",
27
        title: "Connect to machine",
28

  
29
        initialize: function(options) {
30
            views.VMConnectView.__super__.initialize.apply(this);
31
        },
32

  
33
        handle_vm_change: function(vm) {
34
            if (this.vm.state() == "DESTROY") {
35
                this.hide();
36
            }
37
            this._update_vm_details();
38
        },
39
        
40
        update_vm_details: function() {
41
        }
42

  
43
    });
44
    
45
})(this);
b/ui/static/snf/js/ui/web/ui_icon_view.js
170 170
    });
171 171
    
172 172
    // VM connect interaction view
173
    views.VMConnectView = views.View.extend({
173
    views.IconVMConnectView = views.View.extend({
174 174
        
175 175
        initialize: function(vm, view) {
176 176
            // parent view (single, icon, list)
......
178 178
            this.vm = vm;
179 179
            this.el = view.vm(vm);
180 180
            this.set_handlers();
181
            views.VMConnectView.__super__.initialize.call(this);
181
            views.IconVMConnectView.__super__.initialize.call(this);
182 182
        },
183 183
        
184 184
        // set the appropriate handlers
......
190 190
            // element that triggers the connect handler
191 191
            var connect = el.find("div.connect-arrow, .logo");
192 192
            // connect status handler
193
            var handler = _.bind(this.connect_handler, {vm:vm, el:el});
193
            var handler = _.bind(this.connect_handler, {vm:vm, el:el, view:this.parent});
194 194
            $(connect).bind({'mouseover': handler, 'mouseleave': handler, 
195
                            'mousedown': handler, 'mouseup': handler});
195
                            'mousedown': handler, 'mouseup': handler,
196
                            'click': handler });
196 197
            
197 198
            // setup connect arrow display handlers 
198 199
            // while hovering vm container
......
247 248
                    logo.addClass('single-image-state2');
248 249
                    break;
249 250

  
250
                case "mouseclick":
251
                    logo.addCLass('single-image-state4');
251
                case "click":
252
                    //logo.addCLass('single-image-state4');
253
                    this.view.connect_to_console(vm);
254
                    //this.view.connect_overlay.show(this.vm);
252 255
                    break;
253 256

  
254 257
                default:
......
567 570
            this.action_views[vm.id] = new views.VMActionsView(vm, this, this.vm(vm), this.hide_actions);
568 571
            this.rename_views[vm.id] = new views.IconRenameView(vm, this);
569 572
            this.stats_views[vm.id] = new views.VMStatsView(vm, this, {el:'.vm-stats'});
570
            this.connect_views[vm.id] = new views.VMConnectView(vm, this);
573
            this.connect_views[vm.id] = new views.IconVMConnectView(vm, this);
571 574
            this.tags_views[vm.id] = new views.VMTagsView(vm, this);
572 575
            this.details_views[vm.id] = new views.VMDetailsView(vm, this);
573 576
            this.info_views[vm.id] = new views.IconInfoView(vm, this);
b/ui/static/snf/js/ui/web/ui_single_view.js
151 151
            // same as icon view
152 152
            this.action_views[vm.id] = new views.VMActionsView(vm, this, this.vm(vm), this.hide_actions);
153 153
            this.stats_views[vm.id] = new views.VMStatsView(vm, this, {stats_type: 'series'});
154
            this.connect_views[vm.id] = new views.VMConnectView(vm, this);
154
            this.connect_views[vm.id] = new views.IconVMConnectView(vm, this);
155 155
            this.tags_views[vm.id] = new views.VMTagsView(vm, this, true, 20, 10, 35);
156 156
            this.details_views[vm.id] = new views.SingleDetailsView(vm, this);
157 157
        },
b/ui/static/snf/js/ui/web/ui_vms_base_view.js
36 36
            this.set_storage_handlers();
37 37
            this.set_handlers();
38 38
            this.vms_updated_handler();
39

  
40
            this.connect_overlay = new views.VMConnectView();
39 41
        },
40 42

  
41 43
        // Helpers
b/ui/static/snf/js/views.js
221 221
            } else {
222 222
                delay = 0;
223 223
            }
224
            
225 224
            window.setTimeout(_.bind(function(){ this.overlay.load() }, this), delay)
226 225
            return this;
227 226
        },
228 227

  
229 228
        hide: function() {
230
            this.overlay.close();
229
            if (!this.overlay.isOpened()) {
230
                // if its not opened events wont trigger
231
                this._onClose()
232
            } else {
233
                this.overlay.close();
234
            }
231 235
            return this;
232 236
        }
233 237
    });
234 238

  
239
    
240
    // overlay view helper
241
    views.VMOverlay = views.Overlay.extend({
242

  
243
        initialize: function() {
244
            views.VMOverlay.__super__.initialize.apply(this);
245
            this.vm = undefined;
246
            this.view_id_tpl = this.view_id;
247

  
248
            _.bindAll(this, "handle_vm_change", "handle_vm_remove");
249
        },
250

  
251
        set_vm: function(vm) {
252
            if (this.vm) { this.unbind_vm_handlers };
253
            this.vm = vm;
254
            this.view_id = this.view_id + "_" + vm.id;
255
            this.bind_vm_handlers();
256
        },
257

  
258
        bind_vm_handlers: function() {
259
            this.log.debug("binding handlers");
260
            this.vm.bind("change", this.handle_vm_change);
261
            storage.vms.bind("remove", this.handle_vm_remove);
262
        },
263
        
264
        unbind_vm_handlers: function() {
265
            this.log.debug("unbinding handlers", this.vm);
266
            if (!this.vm) { return };
267
            this.vm.unbind("change", this.handle_vm_change);
268
            storage.vms.unbind("remove", this.handle_vm_remove);
269
        },
270
        
271
        _update_vm_details: function() { 
272
            if (!this.vm) { console.error("invalid view state"); return }
273
            this.set_subtitle(this.vm.get("name") + snf.ui.helpers.vm_icon_tag(this.vm, "small"));
274

  
275
            var ico_path = snf.ui.helpers.os_icon_path(this.vm.get("OS"), "oslarge");
276
            this.$(".content").css({"background-image":"url(" + ico_path +")"})
277
            this.update_vm_details() 
278
        },
279

  
280
        update_vm_details: function() {},
281

  
282
        handle_vm_remove: function(vm, collection) {
283
            if (this.vm && vm.id == this.vm.id) {
284
                this.hide();
285
            }
286
        },
287

  
288
        handle_vm_change: function(vm) {
289
            this._update_vm_details();
290
        },
291
        
292
        beforeClose: function() {
293
            this.unbind_vm_handlers();
294
            this.vm = undefined;
295
        },
296

  
297
        show: function(vm) {
298
            this.set_vm(vm);
299
            views.VMOverlay.__super__.show.apply(this, arguments);
300
            this._update_vm_details();
301
        }
302

  
303
    });
304

  
235 305
})(this);
b/ui/templates/home.html
54 54
    <script src="static/snf/js/ui/web/ui_metadata_view.js"></script>
55 55
    <script src="static/snf/js/ui/web/ui_feedback_view.js"></script>
56 56
    <script src="static/snf/js/ui/web/ui_create_view.js"></script>
57
    <script src="static/snf/js/ui/web/ui_connect_view.js"></script>
57 58

  
58 59
    <!-- the following views require refactor -->
59 60
    <!--<script src="static/snf/js/ui/create_view.js"></script>-->
b/ui/templates/partials/machines.html
30 30

  
31 31
{% include "partials/create_vm.html" %}
32 32
{% include "partials/manage_metadata.html" %}
33
{% include "partials/vm_connect.html" %}
b/ui/templates/partials/vm_connect.html
1
{% load i18n %}
2
<div id="vm-connect-overlay-content" class="hidden vm-connect">
3
    <div class="connect-cont">
4
        <h4>{% trans "Connection details" %}</h4>
5
        <div class="desc">
6
            <p>{% blocktrans %}Blah blah blha lbha blahb glbh{% endblocktrans %}</p>
7
        </div>
8
        <div class="ips">
9
            <div class="ip-cont">
10
            <span class="title">IP v4</span>
11
            <span class="value ipv4">195.2.2.12</span>
12
            </div>
13
            <div class="ip-cont">
14
            <span class="title">IP v4</span>
15
            <span class="value ipv6">2001:db8::a800:ff:fe4e:ccd2</span>
16
            </div>
17
        </div>
18
    </div>
19
    <div class="connect-cont">
20
        <h4>{% trans "Connect using SSH" %}</h4>
21
        <div class="desc">
22
            <p>{% blocktrans %}Blah blah blha lbha blahb glbh{% endblocktrans %}</p>
23
        </div>
24
        <div class="ips">
25
            <div class="ip-cont">
26
            <span class="title">IP v4</span>
27
            <span class="value ipv4">195.2.2.12</span>
28
            </div>
29
            <div class="ip-cont">
30
            <span class="title">IP v4</span>
31
            <span class="value ipv6">2001:db8::a800:ff:fe4e:ccd2</span>
32
            </div>
33
        </div>
34
    </div>
35
    <div class="connect-cont">
36
        <h4>{% trans "Connect with out of bound console" %}</h4>
37
        <div class="desc">
38
            <p>{% blocktrans %}Blah blah blha lbha blahb glbh{% endblocktrans %}</p>
39
        </div>
40
        <div class="ips">
41
            <div class="ip-cont">
42
            <span class="title">IP v4</span>
43
            <span class="value ipv4">195.2.2.12</span>
44
            </div>
45
            <div class="ip-cont">
46
            <span class="title">IP v4</span>
47
            <span class="value ipv6">2001:db8::a800:ff:fe4e:ccd2</span>
48
            </div>
49
        </div>
50
    </div>
51
</div>

Also available in: Unified diff