mirror of https://github.com/apache/cloudstack.git
Update install wizard appearance
This commit is contained in:
Brian Federle
parent
ed39de83e3
commit
3e09925f58
|
|
@ -310,8 +310,9 @@ body.login {
|
|||
|
||||
.install-wizard .header {
|
||||
text-align: center;
|
||||
background: #0D6CAA;
|
||||
background: url(../images/bg-install-wizard-header.png);
|
||||
color: #FFFFFF;
|
||||
height: 365px;
|
||||
padding: 32px 0 89px;
|
||||
/*+text-shadow:0px 2px 2px #4B4B4B;*/
|
||||
-moz-text-shadow: 0px 2px 2px #4B4B4B;
|
||||
|
|
@ -321,6 +322,10 @@ body.login {
|
|||
z-index: 9;
|
||||
}
|
||||
|
||||
.install-wizard .header h3 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.install-wizard .step {
|
||||
max-width: 691px;
|
||||
margin: auto;
|
||||
|
|
@ -364,20 +369,15 @@ body.login {
|
|||
}
|
||||
|
||||
.install-wizard .body {
|
||||
width: 987px;
|
||||
width: 1012px;
|
||||
height: 626px;
|
||||
margin: -52px auto auto;
|
||||
margin: -352px auto auto;
|
||||
z-index: 10;
|
||||
/*+box-shadow:0px 3px 15px #696767;*/
|
||||
-moz-box-shadow: 0px 3px 15px #696767;
|
||||
-webkit-box-shadow: 0px 3px 15px #696767;
|
||||
-o-box-shadow: 0px 3px 15px #696767;
|
||||
box-shadow: 0px 3px 15px #696767;
|
||||
background: #FFFFFF;
|
||||
background: #FFFFFF -114px -141px;
|
||||
}
|
||||
|
||||
.install-wizard h2 {
|
||||
font-size: 24px;
|
||||
font-size: 28px;
|
||||
margin: 0 0 19px;
|
||||
}
|
||||
|
||||
|
|
@ -437,6 +437,123 @@ body.login {
|
|||
float: left;
|
||||
}
|
||||
|
||||
.install-wizard .step {
|
||||
z-index: 11;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.install-wizard .step .tooltip-info {
|
||||
/*+placement:shift 547px 50px;*/
|
||||
position: relative;
|
||||
left: 547px;
|
||||
top: 50px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/*** Diagram*/
|
||||
.install-wizard .diagram {
|
||||
width: 910px;
|
||||
height: 385px;
|
||||
/*+placement:shift 65px 397px;*/
|
||||
position: relative;
|
||||
left: 65px;
|
||||
top: 397px;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.install-wizard .diagram .part {
|
||||
background: url(../images/install-wizard-parts.png) no-repeat;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.install-wizard .diagram .part.zone {
|
||||
width: 742px;
|
||||
height: 135px;
|
||||
background-position: -267px -580px;
|
||||
/*+placement:shift 77px 222px;*/
|
||||
position: relative;
|
||||
left: 77px;
|
||||
top: 222px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.install-wizard .diagram .part.loading {
|
||||
width: 742px;
|
||||
height: 432px;
|
||||
background-position: -1264px -487px;
|
||||
/*+placement:shift 105px -67px;*/
|
||||
position: relative;
|
||||
left: 105px;
|
||||
top: -67px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.install-wizard .diagram .part.loading .icon {
|
||||
width: 61px;
|
||||
height: 76px;
|
||||
background: url(../images/ajax-loader.gif) no-repeat;
|
||||
/*+placement:shift 322px 130px;*/
|
||||
position: relative;
|
||||
left: 322px;
|
||||
top: 130px;
|
||||
}
|
||||
|
||||
.install-wizard .diagram .part.pod {
|
||||
width: 266px;
|
||||
height: 396px;
|
||||
background-position: -47px -3px;
|
||||
/*+placement:shift 313px -76px;*/
|
||||
position: relative;
|
||||
left: 313px;
|
||||
top: -76px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.install-wizard .diagram .part.cluster {
|
||||
width: 266px;
|
||||
height: 396px;
|
||||
background-position: -364px 1px;
|
||||
/*+placement:shift 313px -76px;*/
|
||||
position: relative;
|
||||
left: 313px;
|
||||
top: -76px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.install-wizard .diagram .part.host {
|
||||
width: 266px;
|
||||
height: 396px;
|
||||
background-position: -688px 1px;
|
||||
/*+placement:shift 313px -76px;*/
|
||||
position: relative;
|
||||
left: 313px;
|
||||
top: -76px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.install-wizard .diagram .part.primaryStorage {
|
||||
width: 275px;
|
||||
height: 396px;
|
||||
background-position: -1046px 1px;
|
||||
/*+placement:shift 306px -76px;*/
|
||||
position: relative;
|
||||
left: 306px;
|
||||
top: -76px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.install-wizard .diagram .part.secondaryStorage {
|
||||
width: 385px;
|
||||
height: 396px;
|
||||
background-position: -1469px 1px;
|
||||
/*+placement:shift 306px -76px;*/
|
||||
position: relative;
|
||||
left: 306px;
|
||||
top: -76px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/*** Setup form*/
|
||||
.install-wizard .step .setup-form {
|
||||
display: inline-block;
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 609 KiB |
|
|
@ -82,7 +82,7 @@
|
|||
|
||||
action: function(args) {
|
||||
var complete = args.response.success;
|
||||
var data = args.data
|
||||
var data = args.data;
|
||||
|
||||
/**
|
||||
* Step 1: add zone
|
||||
|
|
|
|||
|
|
@ -54,6 +54,13 @@
|
|||
* Generic page elements
|
||||
*/
|
||||
var elems = {
|
||||
tooltip: function(title, content) {
|
||||
return $('<div>').addClass('tooltip-info').append(
|
||||
$('<div>').addClass('arrow'),
|
||||
$('<div>').addClass('title').html(title),
|
||||
$('<div>').addClass('content').append($('<p>').html(content))
|
||||
);
|
||||
},
|
||||
header: function() {
|
||||
return $('<div></div>').addClass('header')
|
||||
.append(
|
||||
|
|
@ -72,9 +79,45 @@
|
|||
$('<input>').attr({ type: 'submit' }).addClass('button goTo').val(label);
|
||||
|
||||
return $button;
|
||||
},
|
||||
|
||||
diagramParts: function() {
|
||||
return $('<div>').addClass('diagram').append(
|
||||
$('<div>').addClass('part zone'),
|
||||
$('<div>').addClass('part pod'),
|
||||
$('<div>').addClass('part cluster'),
|
||||
$('<div>').addClass('part host'),
|
||||
$('<div>').addClass('part primaryStorage'),
|
||||
$('<div>').addClass('part secondaryStorage'),
|
||||
$('<div>').addClass('part loading').append($('<div>').addClass('icon'))
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
var $diagramParts = elems.diagramParts();
|
||||
|
||||
var showDiagram = function(parts) {
|
||||
$diagramParts.children().hide();
|
||||
$diagramParts.find(parts).show();
|
||||
};
|
||||
|
||||
/**
|
||||
* Show tooltip for focused form elements
|
||||
*/
|
||||
var showTooltip = function($formContainer) {
|
||||
var $tooltip = elems.tooltip('Hints', 'Help content goes here.');
|
||||
$formContainer.find('input').focus(function() {
|
||||
$tooltip.appendTo($formContainer);
|
||||
$tooltip.css({
|
||||
top: $(this).position().top - 20
|
||||
});
|
||||
});
|
||||
|
||||
$formContainer.find('input').blur(function() {
|
||||
$tooltip.remove();
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Layout/behavior for each step in wizard
|
||||
*/
|
||||
|
|
@ -170,6 +213,8 @@
|
|||
return false;
|
||||
});
|
||||
|
||||
showDiagram('.part.zone');
|
||||
|
||||
return $intro.append(
|
||||
$title, $subtitle,
|
||||
$copy,
|
||||
|
|
@ -203,6 +248,9 @@
|
|||
$addZoneForm.find('.main-desc, .conditional').remove();
|
||||
$addZoneForm.find('.field:last').remove();
|
||||
|
||||
showDiagram('.part.zone');
|
||||
showTooltip($addZoneForm);
|
||||
|
||||
return $addZone.append(
|
||||
$addZoneForm
|
||||
.prepend($title)
|
||||
|
|
@ -232,6 +280,9 @@
|
|||
return false;
|
||||
});
|
||||
|
||||
showDiagram('.part.zone');
|
||||
showTooltip($addIPRangeForm);
|
||||
|
||||
// Remove unneeded fields
|
||||
$addIPRangeForm.find('.main-desc, .conditional').remove();
|
||||
|
||||
|
|
@ -261,6 +312,8 @@
|
|||
return false;
|
||||
});
|
||||
|
||||
showDiagram('.part.zone, .part.pod');
|
||||
|
||||
return $intro.append(
|
||||
$title, $subtitle,
|
||||
$copy,
|
||||
|
|
@ -293,6 +346,9 @@
|
|||
// Remove unneeded fields
|
||||
$addPodForm.find('.main-desc, .conditional').remove();
|
||||
|
||||
showDiagram('.part.zone, .part.pod');
|
||||
showTooltip($addPodForm);
|
||||
|
||||
return $addPod.append(
|
||||
$addPodForm
|
||||
.prepend($title)
|
||||
|
|
@ -319,6 +375,8 @@
|
|||
return false;
|
||||
});
|
||||
|
||||
showDiagram('.part.zone, .part.cluster');
|
||||
|
||||
return $intro.append(
|
||||
$title, $subtitle,
|
||||
$copy,
|
||||
|
|
@ -357,6 +415,9 @@
|
|||
return false;
|
||||
});
|
||||
|
||||
showDiagram('.part.zone, .part.cluster');
|
||||
showTooltip($addClusterForm);
|
||||
|
||||
// Cleanup
|
||||
$addClusterForm.find('.message').remove();
|
||||
$addClusterForm.find('.form-item').addClass('field').find('label.error').hide();
|
||||
|
|
@ -387,6 +448,8 @@
|
|||
return false;
|
||||
});
|
||||
|
||||
showDiagram('.part.zone, .part.host');
|
||||
|
||||
return $intro.append(
|
||||
$title, $subtitle,
|
||||
$copy,
|
||||
|
|
@ -446,6 +509,9 @@
|
|||
return false;
|
||||
});
|
||||
|
||||
showDiagram('.part.zone, .part.host');
|
||||
showTooltip($addHostForm);
|
||||
|
||||
// Cleanup
|
||||
$addHostForm.find('.message').remove();
|
||||
$addHostForm.find('.form-item').addClass('field').find('label.error').hide();
|
||||
|
|
@ -476,6 +542,8 @@
|
|||
return false;
|
||||
});
|
||||
|
||||
showDiagram('.part.zone, .part.primaryStorage');
|
||||
|
||||
return $intro.append(
|
||||
$title, $subtitle,
|
||||
$copy,
|
||||
|
|
@ -532,6 +600,9 @@
|
|||
return false;
|
||||
});
|
||||
|
||||
showDiagram('.part.zone, .part.primaryStorage');
|
||||
showTooltip($addPrimaryStorageForm);
|
||||
|
||||
// Cleanup
|
||||
$addPrimaryStorageForm.find('.message').remove();
|
||||
$addPrimaryStorageForm.find('.form-item').addClass('field').find('label.error').hide();
|
||||
|
|
@ -562,6 +633,8 @@
|
|||
return false;
|
||||
});
|
||||
|
||||
showDiagram('.part.zone, .part.secondaryStorage');
|
||||
|
||||
return $intro.append(
|
||||
$title, $subtitle,
|
||||
$copy,
|
||||
|
|
@ -607,6 +680,9 @@
|
|||
return false;
|
||||
});
|
||||
|
||||
showDiagram('.part.zone, .part.secondaryStorage');
|
||||
showTooltip($addSecondaryStorageForm);
|
||||
|
||||
// Cleanup
|
||||
$addSecondaryStorageForm.find('.message').remove();
|
||||
$addSecondaryStorageForm.find('.form-item').addClass('field').find('label.error').hide();
|
||||
|
|
@ -635,6 +711,8 @@
|
|||
return false;
|
||||
});
|
||||
|
||||
showDiagram('.part.zone, .part.secondaryStorage');
|
||||
|
||||
return $intro.append(
|
||||
$title, $subtitle,
|
||||
$copy,
|
||||
|
|
@ -648,8 +726,7 @@
|
|||
launch: function(args) {
|
||||
var $intro = $('<div></div>').addClass('intro');
|
||||
var $title = $('<div></div>').addClass('title')
|
||||
.html('Now building your cloud...')
|
||||
.append($('<img>').attr({ src: 'images/ajax-loader.gif' }));
|
||||
.html('Now building your cloud...');
|
||||
var $subtitle = $('<div></div>').addClass('subtitle')
|
||||
.html('You may want to get a cup of coffee right now.');
|
||||
|
||||
|
|
@ -662,6 +739,8 @@
|
|||
}
|
||||
});
|
||||
|
||||
showDiagram('.part.loading');
|
||||
|
||||
return $intro.append(
|
||||
$title, $subtitle
|
||||
);
|
||||
|
|
@ -671,10 +750,9 @@
|
|||
var initialStep = steps.changeUser().addClass('step');
|
||||
|
||||
$installWizard.append(
|
||||
$.merge(
|
||||
elems.header(),
|
||||
elems.body().append(initialStep)
|
||||
)
|
||||
elems.header(),
|
||||
elems.body().append(initialStep),
|
||||
$diagramParts
|
||||
).appendTo($container);
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue