Revision 1325fc64
| b/ui/static/main.css | ||
|---|---|---|
| 1056 | 1056 |
-webkit-transition: background-color .75s ease-out; |
| 1057 | 1057 |
-o-transition: background-color .75s ease-out; |
| 1058 | 1058 |
-moz-transition: background-color .75s ease-out; |
| 1059 |
transition: color .75s ease-out; |
|
| 1059 |
transition: background-color .75s ease-out;
|
|
| 1060 | 1060 |
} |
| 1061 | 1061 |
|
| 1062 | 1062 |
.view-separator {
|
| ... | ... | |
| 5185 | 5185 |
|
| 5186 | 5186 |
.form-action.prev:hover, |
| 5187 | 5187 |
.form-action.cancel:hover {
|
| 5188 |
background-color: #fff;
|
|
| 5189 |
color: #800;
|
|
| 5188 |
background-color: #CC0000;
|
|
| 5189 |
color: #fff;
|
|
| 5190 | 5190 |
} |
| 5191 | 5191 |
|
| 5192 | 5192 |
.form-action.next, |
| ... | ... | |
| 5197 | 5197 |
|
| 5198 | 5198 |
.form-action.next:hover, |
| 5199 | 5199 |
.form-action.ok:hover {
|
| 5200 |
background-color: #fff;
|
|
| 5201 |
color: #080;
|
|
| 5200 |
background-color: #00aa00;
|
|
| 5201 |
color: #fff;
|
|
| 5202 | 5202 |
} |
| 5203 | 5203 |
|
| 5204 | 5204 |
.form-action .create, |
| ... | ... | |
| 5463 | 5463 |
} |
| 5464 | 5464 |
|
| 5465 | 5465 |
.create-vm .step-header {
|
| 5466 |
padding: 10px; |
|
| 5467 | 5466 |
padding-bottom:0; |
| 5468 |
margin-bottom: 10px; |
|
| 5469 |
background-color: #A1C8DB; |
|
| 5470 |
border-bottom: 1px solid #aaa; |
|
| 5471 | 5467 |
position: relative; |
| 5472 | 5468 |
} |
| 5473 | 5469 |
|
| ... | ... | |
| 5509 | 5505 |
overflow: hidden; |
| 5510 | 5506 |
} |
| 5511 | 5507 |
|
| 5508 |
.create-vm .steps-history .steps-history-cont.current .title {
|
|
| 5509 |
display: block; |
|
| 5510 |
top: 23px; |
|
| 5511 |
left: 39px; |
|
| 5512 |
font-size: 1.2em; |
|
| 5513 |
color: #ffffff; |
|
| 5514 |
font-weight: bold; |
|
| 5515 |
font-family: 'Ubuntu' !important; |
|
| 5516 |
} |
|
| 5517 |
|
|
| 5518 |
.create-vm .steps-history .steps-history-cont.current .subnum {
|
|
| 5519 |
display: none; |
|
| 5520 |
float: none; |
|
| 5521 |
font-size: 0.9em; |
|
| 5522 |
font-family: 'Ubuntu' !important; |
|
| 5523 |
} |
|
| 5524 |
|
|
| 5525 |
.create-vm .steps-history .steps-history-cont.current .subtitle, |
|
| 5526 |
.create-vm .steps-history .steps-history-cont.current .description {
|
|
| 5527 |
font-family: 'Ubuntu' !important; |
|
| 5528 |
} |
|
| 5529 |
|
|
| 5530 |
.create-vm .steps-history .steps-history-cont.current .info {
|
|
| 5531 |
display: block; |
|
| 5532 |
font-family: 'Ubuntu' !important; |
|
| 5533 |
} |
|
| 5534 |
|
|
| 5535 |
.create-vm .steps-history .steps-history-cont.completed .title, |
|
| 5536 |
.create-vm .steps-history .steps-history-cont.completed .num {
|
|
| 5537 |
color: #A1C8DB; |
|
| 5538 |
} |
|
| 5539 |
|
|
| 5540 |
.create-vm .steps-history .steps-history-cont.completed {
|
|
| 5541 |
background-color: #4085A5; |
|
| 5542 |
color: #fff; |
|
| 5543 |
cursor: pointer; |
|
| 5544 |
} |
|
| 5545 |
|
|
| 5546 |
.create-vm .steps-history .steps-history-cont.completed .steps-history-step {
|
|
| 5547 |
background-image: url("./check.png");
|
|
| 5548 |
} |
|
| 5549 |
|
|
| 5550 |
.create-vm .steps-history .steps-history-cont.current .steps-history-step {
|
|
| 5551 |
width: 380px; |
|
| 5552 |
} |
|
| 5553 |
|
|
| 5554 |
.create-vm .steps-history .steps-history-cont.current .num {
|
|
| 5555 |
color: #fff; |
|
| 5556 |
} |
|
| 5557 |
|
|
| 5558 |
.create-vm .steps-history .steps-history-cont.current .info {
|
|
| 5559 |
color: #4085A5; |
|
| 5560 |
font-size: 0.8em; |
|
| 5561 |
} |
|
| 5562 |
|
|
| 5563 |
.create-vm .steps-history .steps-history-cont.current {
|
|
| 5564 |
background-color: #A1C8DB; |
|
| 5565 |
color: #fff; |
|
| 5566 |
width: 462px; |
|
| 5567 |
} |
|
| 5568 |
|
|
| 5569 |
.create-vm .steps-history-step {
|
|
| 5570 |
padding: 4px; |
|
| 5571 |
padding-left: 10px; |
|
| 5572 |
font-size: 1em; |
|
| 5573 |
font-family: 'Ubuntu' !important; |
|
| 5574 |
margin-right: 5px; |
|
| 5575 |
padding-top: 12px; |
|
| 5576 |
background-position: right 30px; |
|
| 5577 |
background-image: none; |
|
| 5578 |
background-repeat: no-repeat; |
|
| 5579 |
} |
|
| 5580 |
|
|
| 5581 |
.create-vm .steps-history {
|
|
| 5582 |
background-color: #4085A5; |
|
| 5583 |
} |
|
| 5584 |
|
|
| 5585 |
.create-vm .steps-history .steps-history-cont.last {
|
|
| 5586 |
border-right: none; |
|
| 5587 |
} |
|
| 5588 |
|
|
| 5589 |
.create-vm .steps-history .steps-history-cont .num {
|
|
| 5590 |
margin-left: 5px; |
|
| 5591 |
margin-top: -10px; |
|
| 5592 |
padding-bottom: 10px; |
|
| 5593 |
} |
|
| 5594 |
|
|
| 5595 |
.create-vm .steps-history .steps-history-cont .title {
|
|
| 5596 |
display: none; |
|
| 5597 |
position: absolute; |
|
| 5598 |
bottom: 0px; |
|
| 5599 |
text-align: center; |
|
| 5600 |
padding-bottom: 2px; |
|
| 5601 |
left:0; |
|
| 5602 |
width: 60px; |
|
| 5603 |
margin-left:0; |
|
| 5604 |
margin-top:0; |
|
| 5605 |
font-size: 0.8em; |
|
| 5606 |
} |
|
| 5607 |
|
|
| 5608 |
.create-vm .steps-history .steps-history-cont .subnum, |
|
| 5609 |
.create-vm .steps-history .steps-history-cont .info {
|
|
| 5610 |
display: none; |
|
| 5611 |
} |
|
| 5612 |
|
|
| 5613 |
.create-vm .steps-history .steps-history-cont {
|
|
| 5614 |
height: 70px; |
|
| 5615 |
width: 60px; |
|
| 5616 |
float: left; |
|
| 5617 |
color: #fff; |
|
| 5618 |
border-right: 1px solid #A1C8DB; |
|
| 5619 |
color: #A1C8DB; |
|
| 5620 |
background-color: #4085A5; |
|
| 5621 |
background-position: center right; |
|
| 5622 |
background-image: none; |
|
| 5623 |
background-repeat: no-repeat; |
|
| 5624 |
|
|
| 5625 |
-webkit-transition: background-color .15s ease-in; |
|
| 5626 |
-o-transition: background-color .15s ease-in; |
|
| 5627 |
-moz-transition: background-color .15s ease-in; |
|
| 5628 |
transition: background-color .15s ease-in; |
|
| 5629 |
|
|
| 5630 |
border-bottom: 1px solid #aaa; |
|
| 5631 |
} |
|
| 5632 |
|
|
| 5512 | 5633 |
.create-vm .step-header .header-step .num {
|
| 5634 |
color: #225871; |
|
| 5513 | 5635 |
font-size: 4em; |
| 5514 | 5636 |
margin-bottom: -5px; |
| 5515 | 5637 |
font-family: 'Ubuntu'; |
| ... | ... | |
| 5517 | 5639 |
} |
| 5518 | 5640 |
|
| 5519 | 5641 |
.create-vm .step-header .header-step {
|
| 5520 |
color: #DCEBF1;
|
|
| 5642 |
color: #; |
|
| 5521 | 5643 |
margin-bottom: -6px; |
| 5522 | 5644 |
width: 25%; |
| 5523 | 5645 |
padding-left: 0%; |
| b/ui/static/snf/js/ui/web/ui_create_view.js | ||
|---|---|---|
| 661 | 661 |
this.confirm.find("li.disk .value").text(params.flavor.get("disk"));
|
| 662 | 662 |
|
| 663 | 663 |
if (!this.name_changed && this.parent.visible()) {
|
| 664 |
if (!$.browser.msie) {
|
|
| 664 |
if (!$.browser.msie && !$.browser.opera) {
|
|
| 665 | 665 |
this.$("#create-vm-name").select();
|
| 666 | 666 |
} else {
|
| 667 | 667 |
window.setTimeout(_.bind(function(){
|
| 668 | 668 |
this.$("#create-vm-name").select();
|
| 669 |
}, this), 100)
|
|
| 669 |
}, this), 400)
|
|
| 670 | 670 |
} |
| 671 | 671 |
} |
| 672 | 672 |
|
| ... | ... | |
| 725 | 725 |
this.steps[2] = new views.CreateFlavorSelectView(this); |
| 726 | 726 |
this.steps[3] = new views.CreateSubmitView(this); |
| 727 | 727 |
|
| 728 |
this.cancel_btn = this.$(".create-controls .cancel")
|
|
| 729 |
this.next_btn = this.$(".create-controls .next")
|
|
| 730 |
this.prev_btn = this.$(".create-controls .prev")
|
|
| 731 |
this.submit_btn = this.$(".create-controls .submit")
|
|
| 728 |
this.cancel_btn = this.$(".create-controls .cancel");
|
|
| 729 |
this.next_btn = this.$(".create-controls .next");
|
|
| 730 |
this.prev_btn = this.$(".create-controls .prev");
|
|
| 731 |
this.submit_btn = this.$(".create-controls .submit");
|
|
| 732 |
|
|
| 733 |
this.history = this.$(".steps-history");
|
|
| 734 |
this.history_steps = this.$(".steps-history .steps-history-step");
|
|
| 732 | 735 |
|
| 733 | 736 |
this.init_handlers(); |
| 734 | 737 |
}, |
| 735 | 738 |
|
| 736 | 739 |
init_handlers: function() {
|
| 740 |
var self = this; |
|
| 737 | 741 |
this.next_btn.click(_.bind(function(){
|
| 738 | 742 |
this.set_step(this.current_step + 1); |
| 739 | 743 |
this.update_layout(); |
| ... | ... | |
| 748 | 752 |
this.submit_btn.click(_.bind(function(){
|
| 749 | 753 |
this.submit(); |
| 750 | 754 |
}, this)) |
| 755 |
|
|
| 756 |
this.history.find(".completed").live("click", function() {
|
|
| 757 |
var step = parseInt($(this).attr("id").replace("vm-create-step-history-", ""));
|
|
| 758 |
self.set_step(step); |
|
| 759 |
self.update_layout(); |
|
| 760 |
}) |
|
| 751 | 761 |
}, |
| 752 | 762 |
|
| 753 | 763 |
set_step: function(st) {
|
| ... | ... | |
| 831 | 841 |
this.steps[step].show(); |
| 832 | 842 |
var width = this.el.find('.container').width();
|
| 833 | 843 |
var left = (step -1) * width * -1; |
| 834 |
this.$(".steps-container").css({"margin-left": left + "px"});
|
|
| 844 |
this.$(".steps-container").animate({"margin-left": left + "px"}, 300);
|
|
| 845 |
|
|
| 846 |
this.update_steps_history(); |
|
| 847 |
}, |
|
| 848 |
|
|
| 849 |
update_steps_history: function() {
|
|
| 850 |
var self = this; |
|
| 851 |
function get_step(s) {
|
|
| 852 |
return self.history.find(".step" + s + "h");
|
|
| 853 |
} |
|
| 854 |
|
|
| 855 |
var current_step = parseInt(this.current_view.step); |
|
| 856 |
_.each(this.steps, function(stepv) {
|
|
| 857 |
var step = parseInt(stepv.step); |
|
| 858 |
get_step(step).removeClass("completed").removeClass("current");
|
|
| 859 |
if (step == current_step) {
|
|
| 860 |
get_step(step).removeClass("completed").addClass("current");
|
|
| 861 |
} |
|
| 862 |
if (step < current_step) {
|
|
| 863 |
get_step(step).removeClass("current").addClass("completed");
|
|
| 864 |
} |
|
| 865 |
}); |
|
| 835 | 866 |
}, |
| 836 | 867 |
|
| 837 | 868 |
update_controls: function() {
|
| b/ui/templates/partials/create_vm.html | ||
|---|---|---|
| 1 | 1 |
{% load i18n %}
|
| 2 | 2 |
<div id="createvm-overlay-content" class="hidden create-vm"> |
| 3 |
<div class="steps-container clearfix"> |
|
| 4 |
<div class="step-1 select-image create-step-cont clearfix"> |
|
| 5 |
<div class="clearfix step-header"> |
|
| 3 |
|
|
| 4 |
<div class="steps-history clearfix"> |
|
| 5 |
<div class="steps-history-cont step1h completed step-header" |
|
| 6 |
id="vm-create-step-history-1"> |
|
| 7 |
<div class="steps-history-step clearfix"> |
|
| 6 | 8 |
<span class="header-step step-1 clearfix"> |
| 7 |
<span class="num">1/3</span>
|
|
| 9 |
<span class="num">1<span class="subnum">/3</span></span>
|
|
| 8 | 10 |
<span class="title"> |
| 9 | 11 |
{% trans "Image" %}
|
| 10 | 12 |
</span> |
| ... | ... | |
| 18 | 20 |
</div> |
| 19 | 21 |
</span> |
| 20 | 22 |
</div> |
| 23 |
</div> |
|
| 24 |
<div class="steps-history-cont step2h current step-header" |
|
| 25 |
id="vm-create-step-history-2" > |
|
| 26 |
<div class="steps-history-step clearfix"> |
|
| 27 |
<span class="header-step step-2 clearfix"> |
|
| 28 |
<span class="num">2<span class="subnum">/3</span></span> |
|
| 29 |
<span class="title"> |
|
| 30 |
{% trans "Flavor" %}
|
|
| 31 |
</span> |
|
| 32 |
<div class="info"> |
|
| 33 |
<span class="subtitle"> |
|
| 34 |
{% trans "Select CPUs, RAM and Disk Size" %}
|
|
| 35 |
</span> |
|
| 36 |
<span class="description"> |
|
| 37 |
{% trans "Available options are filtered based on the selected image" %}
|
|
| 38 |
</span> |
|
| 39 |
</div> |
|
| 40 |
</span> |
|
| 41 |
</div> |
|
| 42 |
</div> |
|
| 43 |
<div class="steps-history-cont step3h last step-header"> |
|
| 44 |
<div class="steps-history-step clearfix" |
|
| 45 |
id="vm-create-step-history-3"> |
|
| 46 |
<span class="header-step step-3 clearfix"> |
|
| 47 |
<span class="num">3<span class="subnum">/3</span></span> |
|
| 48 |
<span class="title"> |
|
| 49 |
{% trans "Name" %}
|
|
| 50 |
</span> |
|
| 51 |
<div class="info"> |
|
| 52 |
<span class="subtitle"> |
|
| 53 |
{% trans "Confirm your settings" %}
|
|
| 54 |
</span> |
|
| 55 |
<span class="description"> |
|
| 56 |
{% trans "Confirm that the options you have selected are correct" %}
|
|
| 57 |
</span> |
|
| 58 |
</div> |
|
| 59 |
</span> |
|
| 60 |
</div> |
|
| 61 |
</div> |
|
| 62 |
</div> |
|
| 63 |
<div class="steps-container clearfix"> |
|
| 64 |
<div class="step-1 select-image create-step-cont clearfix"> |
|
| 65 |
<div class="clearfix step-header"> |
|
| 66 |
</div> |
|
| 21 | 67 |
<div class="step-cont clearfix"> |
| 22 | 68 |
<div class="images-filter-cont content-cont"> |
| 23 | 69 |
<div class="images-filters"> |
| ... | ... | |
| 69 | 115 |
</div> |
| 70 | 116 |
<div class="step-2 select-flavor create-step-cont clearfix"> |
| 71 | 117 |
<div class="clearfix step-header"> |
| 72 |
<span class="header-step step-2 clearfix"> |
|
| 73 |
<span class="num">2/3</span> |
|
| 74 |
<span class="title"> |
|
| 75 |
{% trans "Flavor" %}
|
|
| 76 |
</span> |
|
| 77 |
<div class="info"> |
|
| 78 |
<span class="subtitle"> |
|
| 79 |
{% trans "Select CPUs, RAM and Disk Size" %}
|
|
| 80 |
</span> |
|
| 81 |
<span class="description"> |
|
| 82 |
{% trans "Available options are filtered based on the selected image" %}
|
|
| 83 |
</span> |
|
| 84 |
</div> |
|
| 85 |
</span> |
|
| 86 | 118 |
</div> |
| 87 | 119 |
<div class="step-cont clearfix"> |
| 88 | 120 |
<div class="flavors-predefined-cont content-cont"> |
| ... | ... | |
| 122 | 154 |
</div> |
| 123 | 155 |
<div class="step-3 vm-confirm create-step-cont clearfix"> |
| 124 | 156 |
<div class="clearfix step-header"> |
| 125 |
<span class="header-step step-3 clearfix"> |
|
| 126 |
<span class="num">3/3</span> |
|
| 127 |
<span class="title"> |
|
| 128 |
{% trans "Name" %}
|
|
| 129 |
</span> |
|
| 130 |
<div class="info"> |
|
| 131 |
<span class="subtitle"> |
|
| 132 |
{% trans "Confirm your settings" %}
|
|
| 133 |
</span> |
|
| 134 |
<span class="description"> |
|
| 135 |
{% trans "Confirm that the options you have selected are correct" %}
|
|
| 136 |
</span> |
|
| 137 |
</div> |
|
| 138 |
</span> |
|
| 139 | 157 |
</div> |
| 140 | 158 |
<div class="step-cont clearfix"> |
| 141 | 159 |
<div class="rename"> |
| ... | ... | |
| 217 | 235 |
</div> |
| 218 | 236 |
</div> |
| 219 | 237 |
</div> |
| 238 |
|
|
| 220 | 239 |
<div class="create-controls clearfix"> |
| 221 |
<span class="form-action cancel">{% trans "cancel" %}</span>
|
|
| 222 |
<span class="form-action next">{% trans "next" %}</span>
|
|
| 223 |
<span class="form-action prev">{% trans "previous" %}</span>
|
|
| 224 |
<span class="form-action create submit">{% trans "create machine" %}</span>
|
|
| 240 |
<div class="form-action cancel">{% trans "cancel" %}</div>
|
|
| 241 |
<div class="form-action next">{% trans "next" %}</div>
|
|
| 242 |
<div class="form-action prev">{% trans "previous" %}</div>
|
|
| 243 |
<div class="form-action create submit">{% trans "create machine" %}</div>
|
|
| 225 | 244 |
</div> |
| 226 | 245 |
</div> |
| 227 | 246 |
|
Also available in: Unified diff