Revision 770ad9fa
| b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/common.js | ||
|---|---|---|
| 339 | 339 |
if($('#picker').length>0) {
|
| 340 | 340 |
$('#picker').farbtastic('#color');
|
| 341 | 341 |
}; |
| 342 |
|
|
| 342 | 343 |
}) |
| 343 | 344 |
|
| 344 | 345 |
|
| b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/vm-wizard.js | ||
|---|---|---|
| 24 | 24 |
data_next_array: ['el0','el2','el4','el7'], |
| 25 | 25 |
|
| 26 | 26 |
focusFun: function(){
|
| 27 |
// $('.nav.next').attr('data-step',ui.wizard.current_step);
|
|
| 28 |
// $('.nav.next').removeAttr('data-next');
|
|
| 29 |
// $('.nav.next').attr('data-next', ui.wizard.data_next_array[ui.wizard.current_step]);
|
|
| 30 |
// $('.'+ui.wizard.data_next_array[ui.wizard.current_step]+'').first().focus();
|
|
| 31 |
// console.log('focusFun',ui.wizard.data_next_array[ui.wizard.current_step]);
|
|
| 27 |
$('.firstfocus-'+ui.wizard.current_step+'').first().focus();
|
|
| 28 |
$('.nav.next').removeAttr('data-next');
|
|
| 29 |
$('.nav.next').attr('data-next', ui.wizard.data_next_array[ui.wizard.current_step]);
|
|
| 32 | 30 |
}, |
| 33 | 31 |
|
| 34 | 32 |
move: function () {
|
| ... | ... | |
| 354 | 352 |
$('a').keyup(function(e){
|
| 355 | 353 |
var self = this; |
| 356 | 354 |
if (e.keyCode==9||e.which==9){
|
| 357 |
if ($(self).attr('data-next')) {
|
|
| 358 |
$(self).focusout(function(e){
|
|
| 359 |
var classname = $(self).data('next');
|
|
| 360 |
console.log('tab goes to ',classname);
|
|
| 361 |
$('.'+classname+'').first().focus();
|
|
| 362 |
}) |
|
| 355 |
if(e.shiftKey) {
|
|
| 356 |
} else {
|
|
| 357 |
//Focus next input |
|
| 358 |
if ($(self).attr('data-next')) {
|
|
| 359 |
$(self).focusout(function(e){
|
|
| 360 |
var classname = $(self).data('next');
|
|
| 361 |
console.log('tab goes to ',classname);
|
|
| 362 |
$('.'+classname+'').first().focus();
|
|
| 363 |
}); |
|
| 364 |
} |
|
| 363 | 365 |
} |
| 364 | 366 |
} |
| 365 | 367 |
}) |
| 366 | 368 |
|
| 367 |
|
|
| 368 |
// make sure that is always correctly moved |
|
| 369 |
/*$('a, input').focus(function(e){
|
|
| 370 |
if ($(this).parents('.step').data('step')> 0) {
|
|
| 371 |
if ( ui.wizard.current_step == ($(this).parents('.step').data('step'))) {
|
|
| 372 |
} else {
|
|
| 373 |
ui.wizard.current_step = $(this).parents('.step').data('step');
|
|
| 374 |
ui.wizard.move(); |
|
| 375 |
} |
|
| 376 |
} |
|
| 377 |
}) |
|
| 378 |
*//* end of focus and tabs functionality */ |
|
| 369 |
/* end of focus and tabs functionality */ |
|
| 379 | 370 |
|
| 380 | 371 |
$('#vm-wizard').find('a').click(function(e) {
|
| 381 | 372 |
e.preventDefault(); |
| b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_overlays.scss | ||
|---|---|---|
| 749 | 749 |
font-size: emCalc(12px); |
| 750 | 750 |
top:($bar-height - 30px)/2; |
| 751 | 751 |
width: 100px; |
| 752 |
&:hover {
|
|
| 752 |
&:hover, |
|
| 753 |
&:focus {
|
|
| 753 | 754 |
@include transition(background, 0ms, ease-out); |
| 754 | 755 |
} |
| 755 | 756 |
span {
|
| ... | ... | |
| 757 | 758 |
height: 30px; |
| 758 | 759 |
line-height:30px; |
| 759 | 760 |
float: left; |
| 760 |
&:hover {
|
|
| 761 |
&:hover, |
|
| 762 |
&:focus {
|
|
| 761 | 763 |
@include transition(background, 0ms, linear); |
| 762 | 764 |
} |
| 763 | 765 |
} |
| ... | ... | |
| 772 | 774 |
background:url('../images/nav-lt.png') no-repeat right top;
|
| 773 | 775 |
} |
| 774 | 776 |
&:hover, |
| 775 |
&.active {
|
|
| 777 |
&.active, |
|
| 778 |
&:focus {
|
|
| 776 | 779 |
background-position:left bottom; |
| 777 | 780 |
span {
|
| 778 | 781 |
background-position:right bottom; |
| ... | ... | |
| 790 | 793 |
float: right; |
| 791 | 794 |
} |
| 792 | 795 |
&:hover, |
| 793 |
&.active {
|
|
| 796 |
&.active, |
|
| 797 |
&:focus {
|
|
| 794 | 798 |
background-position:right bottom; |
| 795 | 799 |
span {
|
| 796 | 800 |
background-position:left bottom; |
| b/snf-cyclades-app/synnefo/ui/new_ui/ui/stylesheets/app.css | ||
|---|---|---|
| 9061 | 9061 |
top: 10px; |
| 9062 | 9062 |
width: 100px; |
| 9063 | 9063 |
} |
| 9064 |
/* line 752, ../sass/_overlays.scss */
|
|
| 9065 |
.wizard .bottom .nav:hover {
|
|
| 9064 |
/* line 753, ../sass/_overlays.scss */
|
|
| 9065 |
.wizard .bottom .nav:hover, .wizard .bottom .nav:focus {
|
|
| 9066 | 9066 |
-webkit-transition: background 0ms ease-out; |
| 9067 | 9067 |
-moz-transition: background 0ms ease-out; |
| 9068 | 9068 |
-ms-transition: background 0ms ease-out; |
| 9069 | 9069 |
-o-transition: background 0ms ease-out; |
| 9070 | 9070 |
transition: background 0ms ease-out; |
| 9071 | 9071 |
} |
| 9072 |
/* line 755, ../sass/_overlays.scss */
|
|
| 9072 |
/* line 756, ../sass/_overlays.scss */
|
|
| 9073 | 9073 |
.wizard .bottom .nav span {
|
| 9074 | 9074 |
display: inline-block; |
| 9075 | 9075 |
height: 30px; |
| 9076 | 9076 |
line-height: 30px; |
| 9077 | 9077 |
float: left; |
| 9078 | 9078 |
} |
| 9079 |
/* line 760, ../sass/_overlays.scss */
|
|
| 9080 |
.wizard .bottom .nav span:hover {
|
|
| 9079 |
/* line 762, ../sass/_overlays.scss */
|
|
| 9080 |
.wizard .bottom .nav span:hover, .wizard .bottom .nav span:focus {
|
|
| 9081 | 9081 |
-webkit-transition: background 0ms linear; |
| 9082 | 9082 |
-moz-transition: background 0ms linear; |
| 9083 | 9083 |
-ms-transition: background 0ms linear; |
| 9084 | 9084 |
-o-transition: background 0ms linear; |
| 9085 | 9085 |
transition: background 0ms linear; |
| 9086 | 9086 |
} |
| 9087 |
/* line 765, ../sass/_overlays.scss */
|
|
| 9087 |
/* line 767, ../sass/_overlays.scss */
|
|
| 9088 | 9088 |
.wizard .bottom .prev {
|
| 9089 | 9089 |
float: left; |
| 9090 | 9090 |
height: 30px; |
| 9091 | 9091 |
padding-left: 18px; |
| 9092 | 9092 |
background: url("../images/nav-edge-lt.png") no-repeat left top;
|
| 9093 | 9093 |
} |
| 9094 |
/* line 770, ../sass/_overlays.scss */
|
|
| 9094 |
/* line 772, ../sass/_overlays.scss */
|
|
| 9095 | 9095 |
.wizard .bottom .prev span {
|
| 9096 | 9096 |
padding-right: 10px; |
| 9097 | 9097 |
background: url("../images/nav-lt.png") no-repeat right top;
|
| 9098 | 9098 |
} |
| 9099 |
/* line 775, ../sass/_overlays.scss */
|
|
| 9100 |
.wizard .bottom .prev:hover, .wizard .bottom .prev.active, .wizard .bottom .items-list li .container:hover .prev.check, .items-list li .container:hover .wizard .bottom .prev.check {
|
|
| 9099 |
/* line 778, ../sass/_overlays.scss */
|
|
| 9100 |
.wizard .bottom .prev:hover, .wizard .bottom .prev.active, .wizard .bottom .items-list li .container:hover .prev.check, .items-list li .container:hover .wizard .bottom .prev.check, .wizard .bottom .prev:focus {
|
|
| 9101 | 9101 |
background-position: left bottom; |
| 9102 | 9102 |
} |
| 9103 |
/* line 777, ../sass/_overlays.scss */
|
|
| 9104 |
.wizard .bottom .prev:hover span, .wizard .bottom .prev.active span, .wizard .bottom .items-list li .container:hover .prev.check span, .items-list li .container:hover .wizard .bottom .prev.check span {
|
|
| 9103 |
/* line 780, ../sass/_overlays.scss */
|
|
| 9104 |
.wizard .bottom .prev:hover span, .wizard .bottom .prev.active span, .wizard .bottom .items-list li .container:hover .prev.check span, .items-list li .container:hover .wizard .bottom .prev.check span, .wizard .bottom .prev:focus span {
|
|
| 9105 | 9105 |
background-position: right bottom; |
| 9106 | 9106 |
} |
| 9107 |
/* line 782, ../sass/_overlays.scss */
|
|
| 9107 |
/* line 785, ../sass/_overlays.scss */
|
|
| 9108 | 9108 |
.wizard .bottom .next {
|
| 9109 | 9109 |
float: right; |
| 9110 | 9110 |
height: 30px; |
| 9111 | 9111 |
padding-right: 18px; |
| 9112 | 9112 |
background: url("../images/nav-edge-rt.png") no-repeat right top;
|
| 9113 | 9113 |
} |
| 9114 |
/* line 787, ../sass/_overlays.scss */
|
|
| 9114 |
/* line 790, ../sass/_overlays.scss */
|
|
| 9115 | 9115 |
.wizard .bottom .next span {
|
| 9116 | 9116 |
padding-left: 10px; |
| 9117 | 9117 |
background: url("../images/nav-rt.png") no-repeat left top;
|
| 9118 | 9118 |
float: right; |
| 9119 | 9119 |
} |
| 9120 |
/* line 793, ../sass/_overlays.scss */
|
|
| 9121 |
.wizard .bottom .next:hover, .wizard .bottom .next.active, .wizard .bottom .items-list li .container:hover .next.check, .items-list li .container:hover .wizard .bottom .next.check {
|
|
| 9120 |
/* line 797, ../sass/_overlays.scss */
|
|
| 9121 |
.wizard .bottom .next:hover, .wizard .bottom .next.active, .wizard .bottom .items-list li .container:hover .next.check, .items-list li .container:hover .wizard .bottom .next.check, .wizard .bottom .next:focus {
|
|
| 9122 | 9122 |
background-position: right bottom; |
| 9123 | 9123 |
} |
| 9124 |
/* line 795, ../sass/_overlays.scss */
|
|
| 9125 |
.wizard .bottom .next:hover span, .wizard .bottom .next.active span, .wizard .bottom .items-list li .container:hover .next.check span, .items-list li .container:hover .wizard .bottom .next.check span {
|
|
| 9124 |
/* line 799, ../sass/_overlays.scss */
|
|
| 9125 |
.wizard .bottom .next:hover span, .wizard .bottom .next.active span, .wizard .bottom .items-list li .container:hover .next.check span, .items-list li .container:hover .wizard .bottom .next.check span, .wizard .bottom .next:focus span {
|
|
| 9126 | 9126 |
background-position: left bottom; |
| 9127 | 9127 |
float: right; |
| 9128 | 9128 |
} |
| 9129 | 9129 |
|
| 9130 |
/* line 805, ../sass/_overlays.scss */
|
|
| 9130 |
/* line 809, ../sass/_overlays.scss */
|
|
| 9131 | 9131 |
.wizard-content {
|
| 9132 | 9132 |
overflow: hidden; |
| 9133 | 9133 |
width: 100%; |
| 9134 | 9134 |
} |
| 9135 |
/* line 808, ../sass/_overlays.scss */
|
|
| 9135 |
/* line 812, ../sass/_overlays.scss */
|
|
| 9136 | 9136 |
.wizard-content .vm-wizard-carousel {
|
| 9137 | 9137 |
position: relative; |
| 9138 | 9138 |
left: 0; |
| 9139 | 9139 |
} |
| 9140 |
/* line 811, ../sass/_overlays.scss */
|
|
| 9140 |
/* line 815, ../sass/_overlays.scss */
|
|
| 9141 | 9141 |
.wizard-content .vm-wizard-carousel .step {
|
| 9142 | 9142 |
float: left; |
| 9143 | 9143 |
} |
| 9144 | 9144 |
|
| 9145 | 9145 |
/* Responive ------------------------------------------------ */ |
| 9146 | 9146 |
@media only screen and (max-width: 768px) {
|
| 9147 |
/* line 823, ../sass/_overlays.scss */
|
|
| 9147 |
/* line 827, ../sass/_overlays.scss */
|
|
| 9148 | 9148 |
.wizard .top {
|
| 9149 | 9149 |
position: static; |
| 9150 | 9150 |
} |
| 9151 |
/* line 826, ../sass/_overlays.scss */
|
|
| 9151 |
/* line 830, ../sass/_overlays.scss */
|
|
| 9152 | 9152 |
.wizard .middle {
|
| 9153 | 9153 |
padding-top: 0; |
| 9154 | 9154 |
} |
| 9155 | 9155 |
|
| 9156 |
/* line 831, ../sass/_overlays.scss */
|
|
| 9156 |
/* line 835, ../sass/_overlays.scss */
|
|
| 9157 | 9157 |
.overlay-wrapper .overlay-area {
|
| 9158 | 9158 |
top: 0; |
| 9159 | 9159 |
} |
| b/snf-cyclades-app/synnefo/ui/new_ui/ui/vm_list.html | ||
|---|---|---|
| 76 | 76 |
<div class="row"> |
| 77 | 77 |
<nav class="sub-menu" data-step=1> |
| 78 | 78 |
<ul> |
| 79 |
<li><a href="" class="current preselected el2">System</a></li> |
|
| 79 |
<li><a href="" class="current preselected el2 firstfocus-1">System</a></li>
|
|
| 80 | 80 |
<li><a href="">My images</a></li> |
| 81 | 81 |
<li><a href="">Shared with me</a></li> |
| 82 | 82 |
<li><a href="" data-next="el1">Public</a></li> |
| ... | ... | |
| 84 | 84 |
</nav> |
| 85 | 85 |
<nav class="sub-menu" data-step=2> |
| 86 | 86 |
<ul> |
| 87 |
<li><a href="" class="current preselected el4" data-size="small">Small</a></li> |
|
| 87 |
<li><a href="" class="current preselected el4 firstfocus-2" data-size="small">Small</a></li>
|
|
| 88 | 88 |
<li><a href="" data-size="medium">Medium</a></li> |
| 89 | 89 |
<li><a href="" data-size="large" data-next="el5">Large</a></li> |
| 90 | 90 |
</ul> |
| ... | ... | |
| 154 | 154 |
<li> |
| 155 | 155 |
<div class="row"> |
| 156 | 156 |
<div class="img-col"><img src="images/os-fedora.png" alt=""></div> |
| 157 |
<a href="" class="name-col" data-next="el3">Fedora</a>
|
|
| 157 |
<a href="" class="name-col">Fedora</a> |
|
| 158 | 158 |
<div class="size-col">3.67 GB</div> |
| 159 | 159 |
<div class="btn-col"><a href="">details</a></div> |
| 160 | 160 |
</div> |
| ... | ... | |
| 210 | 210 |
<div class="img-col"><img src="images/os-windows.png" alt=""></div> |
| 211 | 211 |
<a href="" class="name-col">Windows Server 2008</a> |
| 212 | 212 |
<div class="size-col">10.79 GB</div> |
| 213 |
<div class="btn-col"><a href="">details</a></div> |
|
| 213 |
<div class="btn-col"><a href="" data-next="el3">details</a></div>
|
|
| 214 | 214 |
</div> |
| 215 | 215 |
<div class="details"> |
| 216 | 216 |
<div class="row"> |
| ... | ... | |
| 356 | 356 |
</div> |
| 357 | 357 |
<ul class="options vm-storage-selection"> |
| 358 | 358 |
<li><a href="" class="current preselected">DRBD</a></li> |
| 359 |
<li><a href="" data-next="el6">Archipelago</a></li>
|
|
| 359 |
<li><a href="" data-next="el3">Archipelago</a></li>
|
|
| 360 | 360 |
</ul> |
| 361 | 361 |
</div> |
| 362 | 362 |
</li> |
| ... | ... | |
| 611 | 611 |
</div> |
| 612 | 612 |
<div class="bottom"> |
| 613 | 613 |
<div class="row"> |
| 614 |
<a href="" class="nav prev el3 el6"><span>CANCEL</span></a>
|
|
| 614 |
<a href="" class="nav prev el3"><span>CANCEL</span></a> |
|
| 615 | 615 |
<a href="" class="nav next" data-step="1" data-next="el2"><span>NEXT</span></a> |
| 616 | 616 |
</div> |
| 617 | 617 |
</div> |
Also available in: Unified diff