Revision afa2ebd2
| b/ui/static/main.css | ||
|---|---|---|
| 375 | 375 |
background-color: #999; |
| 376 | 376 |
} |
| 377 | 377 |
|
| 378 |
.selecteddiv {
|
|
| 379 |
background-color: #999 !important; |
|
| 380 |
} |
|
| 381 |
|
|
| 378 | 382 |
#wizard label a:hover strong {
|
| 379 | 383 |
color: white; |
| 380 | 384 |
} |
| ... | ... | |
| 386 | 390 |
|
| 387 | 391 |
#wizard div.image .radio {
|
| 388 | 392 |
float: left; |
| 393 |
margin-top: 10px; |
|
| 389 | 394 |
} |
| 390 | 395 |
|
| 391 | 396 |
#wizard div.image span.image-id, #wizard div.image span.description {
|
| ... | ... | |
| 422 | 427 |
font-size: 110%; |
| 423 | 428 |
font-weight: normal; |
| 424 | 429 |
display: inline; |
| 425 |
margin-top: 15px;
|
|
| 430 |
margin-top: 10px;
|
|
| 426 | 431 |
position: absolute; |
| 427 | 432 |
} |
| 428 | 433 |
|
| 434 |
#wizard .first {
|
|
| 435 |
margin-left: -7px; |
|
| 436 |
} |
|
| 437 |
|
|
| 429 | 438 |
#wizard .topruler {
|
| 430 | 439 |
background-color: #CCCCCC; |
| 431 | 440 |
border: 0 none; |
| ... | ... | |
| 445 | 454 |
} |
| 446 | 455 |
|
| 447 | 456 |
#wizard #cancel {
|
| 457 |
text-align: center; |
|
| 458 |
} |
|
| 459 |
|
|
| 460 |
#wizard #start {
|
|
| 461 |
text-align: center; |
|
| 462 |
background-color: #FF6600; |
|
| 463 |
border-color: #FF6600; |
|
| 464 |
} |
|
| 448 | 465 |
|
| 466 |
#wizard #start:hover {
|
|
| 467 |
background-color: #FF9651; |
|
| 468 |
border-color: #FF9651; |
|
| 449 | 469 |
} |
| 450 | 470 |
|
| 451 | 471 |
.page ul {
|
| ... | ... | |
| 472 | 492 |
#status li {
|
| 473 | 493 |
float:left; |
| 474 | 494 |
color:#7D7D7D; |
| 475 |
padding: 9px 70px 0 40px; |
|
| 495 |
padding: 0px 81px 0 40px; |
|
| 496 |
margin-top:10px; |
|
| 476 | 497 |
} |
| 477 | 498 |
|
| 478 | 499 |
#status li.active .headernumber {
|
| ... | ... | |
| 556 | 577 |
margin: -3px 0 0 15px; |
| 557 | 578 |
padding: 2px 10px 2px 0; |
| 558 | 579 |
text-align: right; |
| 559 |
width: 40px; |
|
| 580 |
width: 40px; |
|
| 581 |
border-width:1px; |
|
| 582 |
} |
|
| 583 |
|
|
| 584 |
.selectedrange {
|
|
| 585 |
border: 1px inset blue; |
|
| 560 | 586 |
} |
| 561 | 587 |
|
| 562 | 588 |
#credits-indicator {
|
| 563 | 589 |
background-color: #ECECEC; |
| 564 | 590 |
float: none; |
| 565 | 591 |
margin: 0 0 0 8px; |
| 592 |
border-width:1px; |
|
| 566 | 593 |
} |
| 567 | 594 |
|
| 568 | 595 |
div.machine {
|
| ... | ... | |
| 753 | 780 |
background-color: #666666; |
| 754 | 781 |
border:none; |
| 755 | 782 |
margin-left: -1px; |
| 783 |
text-align: left; |
|
| 756 | 784 |
} |
| 757 | 785 |
|
| 758 | 786 |
.image-logo {
|
| 759 | 787 |
float: left; |
| 760 | 788 |
margin-right: 1em; |
| 761 | 789 |
margin-left: 1.5em; |
| 790 |
margin-top: 4px; |
|
| 762 | 791 |
} |
| 763 | 792 |
|
| 764 | 793 |
div.image {
|
| ... | ... | |
| 925 | 954 |
} |
| 926 | 955 |
|
| 927 | 956 |
#wizard div.panes {
|
| 928 |
height: 250px;
|
|
| 957 |
height: 252px;
|
|
| 929 | 958 |
margin-bottom: 6px; |
| 930 | 959 |
clear:both; |
| 931 | 960 |
} |
| 932 | 961 |
|
| 962 |
.typebody {
|
|
| 963 |
font-size: 80%; |
|
| 964 |
font-weight: normal; |
|
| 965 |
position: relative; |
|
| 966 |
top: -3px; |
|
| 967 |
} |
|
| 968 |
|
|
| 969 |
.typehover {
|
|
| 970 |
color: #666666; |
|
| 971 |
} |
|
| 972 |
|
|
| 973 |
#label-name {
|
|
| 974 |
margin-top: 15px; |
|
| 975 |
} |
|
| 976 |
|
|
| 933 | 977 |
/* single tab */ |
| 934 | 978 |
#wizard ul.tabs li {
|
| 935 | 979 |
margin-bottom: 0; |
| ... | ... | |
| 948 | 992 |
outline:0; |
| 949 | 993 |
background-color: #CCCCCC; |
| 950 | 994 |
text-align: center; |
| 951 |
width: 90px; |
|
| 995 |
width: 100px; |
|
| 996 |
white-space: nowrap; |
|
| 952 | 997 |
} |
| 953 | 998 |
|
| 954 | 999 |
#wizard ul.tabs a:hover {
|
| 955 | 1000 |
color: black; |
| 956 |
background-color:#F7F7F7;
|
|
| 1001 |
background-color:#AAAAAA;
|
|
| 957 | 1002 |
} |
| 958 | 1003 |
|
| 959 | 1004 |
/* selected tab */ |
| b/ui/static/synnefo.js | ||
|---|---|---|
| 299 | 299 |
img.find(".description").text(image.metadata.values.description);
|
| 300 | 300 |
} |
| 301 | 301 |
if (image.metadata.values.size != undefined) {
|
| 302 |
img.find(".size").text(image.metadata.values.size);
|
|
| 302 |
img.find("#size").text(image.metadata.values.size);
|
|
| 303 | 303 |
} |
| 304 | 304 |
} |
| 305 | 305 |
img.find("input.radio").attr('id',"img-radio-" + image.id);
|
| ... | ... | |
| 339 | 339 |
progress: true, |
| 340 | 340 |
max:ram.length-1}); |
| 341 | 341 |
$("#small").click();
|
| 342 |
|
|
| 342 |
|
|
| 343 | 343 |
// update the indicators when sliding |
| 344 | 344 |
$("#cpu:range").data().rangeinput.onSlide(function(event,value){
|
| 345 | 345 |
$("#cpu-indicator")[0].value = cpus[Number(value)];
|
| 346 |
$("#cpu-indicator").addClass('selectedrange');
|
|
| 346 | 347 |
}); |
| 347 | 348 |
$("#cpu:range").data().rangeinput.change(function(event,value){
|
| 348 | 349 |
$("#cpu-indicator")[0].value = cpus[Number(value)];
|
| 349 | 350 |
$("#custom").click();
|
| 350 |
$("#custom input").attr('checked', 'checked');
|
|
| 351 |
$("#custom input").attr('checked', 'checked');
|
|
| 352 |
$("#cpu-indicator").removeClass('selectedrange');
|
|
| 351 | 353 |
}); |
| 352 | 354 |
$("#ram:range").data().rangeinput.onSlide(function(event,value){
|
| 353 | 355 |
$("#ram-indicator")[0].value = ram[Number(value)];
|
| 356 |
$("#ram-indicator").addClass('selectedrange');
|
|
| 354 | 357 |
}); |
| 355 | 358 |
$("#ram:range").data().rangeinput.change(function(event,value){
|
| 356 | 359 |
$("#ram-indicator")[0].value = ram[Number(value)];
|
| 357 | 360 |
$("#custom").click();
|
| 358 | 361 |
$("#custom input").attr('checked', 'checked');
|
| 362 |
$("#ram-indicator").removeClass('selectedrange');
|
|
| 359 | 363 |
}); |
| 360 | 364 |
$("#storage:range").data().rangeinput.onSlide(function(event,value){
|
| 361 | 365 |
$("#storage-indicator")[0].value = disks[Number(value)];
|
| 366 |
$("#storage-indicator").addClass('selectedrange');
|
|
| 362 | 367 |
}); |
| 363 | 368 |
$("#storage:range").data().rangeinput.change(function(event,value){
|
| 364 | 369 |
$("#storage-indicator")[0].value = disks[Number(value)];
|
| 365 | 370 |
$("#custom").click();
|
| 366 | 371 |
$("#custom input").attr('checked', 'checked');
|
| 372 |
$("#storage-indicator").removeClass('selectedrange');
|
|
| 367 | 373 |
}); |
| 368 | 374 |
} |
| 369 | 375 |
|
| b/ui/templates/machines.html | ||
|---|---|---|
| 27 | 27 |
<div class="modal" id="wizard"> |
| 28 | 28 |
<!-- status bar --> |
| 29 | 29 |
<ul id="status"> |
| 30 |
<li class="active"><span class="headernumber">1</span><div class="headerbody">{% trans "Image" %}</div></li>
|
|
| 30 |
<li class="active"><span class="headernumber" class="first">1</span><div class="headerbody first">{% trans "Image" %}</div></li>
|
|
| 31 | 31 |
<li><span class="headernumber">2</span><div class="headerbody">{% trans "Flavor" %}</div></li>
|
| 32 | 32 |
<li><span class="headernumber">3</span><div class="headerbody">{% trans "Name" %}</div></li>
|
| 33 | 33 |
</ul> |
| ... | ... | |
| 47 | 47 |
<a> |
| 48 | 48 |
<div class="image-container"> |
| 49 | 49 |
<div class="image"> |
| 50 |
<input class="radio" type="radio" name="image-id" id="image-id" />
|
|
| 50 |
<input class="radio" type="radio" name="imageGroup" id="image-id" />
|
|
| 51 | 51 |
<img src="" class="image-logo"/> |
| 52 | 52 |
<strong class="image-title">image.title</strong> |
| 53 | 53 |
<br /> |
| 54 | 54 |
<span class="description">image.description</span> |
| 55 |
<span class="size">?? MB</span>
|
|
| 55 |
<span id="size" class="size">?? MB</span><span class="size">MB</span>
|
|
| 56 | 56 |
</div> |
| 57 | 57 |
</div> |
| 58 | 58 |
</a> |
| ... | ... | |
| 77 | 77 |
<div class="machine-type"> |
| 78 | 78 |
<label for="small" id="small"> |
| 79 | 79 |
<input type="radio" id="small" name="machine-type" value="small" checked="true" /> |
| 80 |
<strong>{% trans "small" %}</strong>
|
|
| 80 |
<span class="typebody" id="small-body">{% trans "small" %}</span>
|
|
| 81 | 81 |
</label> |
| 82 | 82 |
</div> |
| 83 | 83 |
<div class="machine-type"> |
| 84 | 84 |
<label for="medium" id="medium"> |
| 85 | 85 |
<input type="radio" id="medium" name="machine-type" value="medium" /> |
| 86 |
<strong>{% trans "medium" %}</strong>
|
|
| 86 |
<span class="typebody" id="medium-body">{% trans "medium" %}</span>
|
|
| 87 | 87 |
</label> |
| 88 | 88 |
</div> |
| 89 | 89 |
<div class="machine-type"> |
| 90 | 90 |
<label for="large" id="large"> |
| 91 | 91 |
<input type="radio" id="large" name="machine-type" value="large" /> |
| 92 |
<strong>{% trans "large" %}</strong>
|
|
| 92 |
<span class="typebody" id="large-body">{% trans "large" %}</span>
|
|
| 93 | 93 |
</label> |
| 94 | 94 |
</div> |
| 95 | 95 |
<div class="machine-type"> |
| 96 | 96 |
<label for="custom" id="custom"> |
| 97 | 97 |
<input type="radio" name="machine-type" id="custom" value="large" /> |
| 98 |
<strong>{% trans "custom" %}</strong>
|
|
| 98 |
<span class="typebody" id="custom-body">{% trans "custom" %}</span>
|
|
| 99 | 99 |
</label> |
| 100 | 100 |
</div> |
| 101 | 101 |
</li> |
| ... | ... | |
| 133 | 133 |
<h2>{% trans "Confirm your settings" %}</h2>
|
| 134 | 134 |
<hr class="topruler" /> |
| 135 | 135 |
<ul id="page3-container"> |
| 136 |
<li class="required"> |
|
| 136 |
<li class="required" id="label-name">
|
|
| 137 | 137 |
<label> |
| 138 | 138 |
<strong>Name:</strong> |
| 139 | 139 |
<input type="text" class="text" name="machine_name" id="name" value="My Ubuntu 10.04 x86_64 server"/> |
| ... | ... | |
| 195 | 195 |
<div id="machines" class="separator"></div> |
| 196 | 196 |
|
| 197 | 197 |
<script> |
| 198 |
//add hover to labels |
|
| 199 |
$('span.typebody').mouseover(function() {
|
|
| 200 |
$(this).addClass('typehover')
|
|
| 201 |
}); |
|
| 202 |
$('span.typebody').mouseout(function() {
|
|
| 203 |
$(this).removeClass('typehover')
|
|
| 204 |
}); |
|
| 205 |
|
|
| 198 | 206 |
// return value from metadata key "OS", if it exists |
| 199 | 207 |
function os_icon(metadata) {
|
| 200 | 208 |
if (!metadata) {
|
| ... | ... | |
| 208 | 216 |
} |
| 209 | 217 |
} |
| 210 | 218 |
|
| 211 |
|
|
| 212 | 219 |
// switch to list view |
| 213 | 220 |
$("a#list").click(function(){
|
| 214 | 221 |
list_view(); |
| 215 | 222 |
return false; |
| 216 | 223 |
}); |
| 217 | 224 |
|
| 225 |
|
|
| 218 | 226 |
// switch to standard view |
| 219 | 227 |
$("a#standard").click(function(){
|
| 220 | 228 |
standard_view(); |
| ... | ... | |
| 316 | 324 |
$("#storage").attr('disabled',true);
|
| 317 | 325 |
} |
| 318 | 326 |
|
| 327 |
if($('.radio:checked').val() == 'true') {
|
|
| 328 |
$(this).parent().addClass('selecteddiv');
|
|
| 329 |
} |
|
| 330 |
|
|
| 331 |
//update radio button when clicking on text |
|
| 332 |
$("#small-body").live('click' ,function() {
|
|
| 333 |
$(this).parent().find("#small").click();
|
|
| 334 |
}); |
|
| 335 |
$("#medium-body").live('click' ,function() {
|
|
| 336 |
$(this).parent().find("#medium").click();
|
|
| 337 |
}); |
|
| 338 |
$("#large-body").live('click' ,function() {
|
|
| 339 |
$(this).parent().find("#large").click();
|
|
| 340 |
}); |
|
| 341 |
$("#custom-body").live('click' ,function() {
|
|
| 342 |
$(this).parent().find("#custom").click();
|
|
| 343 |
}); |
|
| 344 |
|
|
| 345 |
//select image div on radio button select |
|
| 346 |
$('.radio').live('click' ,function() {
|
|
| 347 |
$(this).parents("div").find(".image").removeClass('selecteddiv');
|
|
| 348 |
if($(this).is(':checked')) {
|
|
| 349 |
$(this).parent().addClass('selecteddiv');
|
|
| 350 |
} |
|
| 351 |
}); |
|
| 352 |
|
|
| 319 | 353 |
// confirm all actions |
| 320 | 354 |
$("div.confirm_multiple .yes").live('click', function(){
|
| 321 | 355 |
while(pending_actions.length > 0){ // if there is a pending action for this server execute it
|
Also available in: Unified diff