mirror of https://github.com/apache/cloudstack.git
Update dialog appearance; add UI support for zone network providers
This commit is contained in:
Brian Federle
parent
7eb51d65d0
commit
8e12c9aa21
|
|
@ -2047,12 +2047,14 @@ Dialogs*/
|
|||
}
|
||||
|
||||
.ui-dialog .ui-widget-content {
|
||||
padding: 10px;
|
||||
padding: 8px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.ui-dialog-buttonset {
|
||||
width: 285px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ui-dialog .ui-button {
|
||||
|
|
@ -2069,10 +2071,6 @@ Dialogs*/
|
|||
-webkit-border-radius: 5px;
|
||||
-khtml-border-radius: 5px;
|
||||
border-radius: 5px 5px 5px 5px;
|
||||
/*+placement:shift 0px -35px;*/
|
||||
position: relative;
|
||||
left: 0px;
|
||||
top: -35px;
|
||||
}
|
||||
|
||||
.ui-dialog .ui-button:hover {
|
||||
|
|
@ -2126,8 +2124,8 @@ Dialogs*/
|
|||
.ui-dialog span.message {
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin: 0 0 30px;
|
||||
color: #445361;
|
||||
font-size: 15px;
|
||||
/*+text-shadow:0px 1px 1px #FFFFFF;*/
|
||||
-moz-text-shadow: 0px 1px 1px #FFFFFF;
|
||||
-webkit-text-shadow: 0px 1px 1px #FFFFFF;
|
||||
|
|
@ -2184,10 +2182,8 @@ Dialogs*/
|
|||
.ui-dialog div.form-container {
|
||||
height: 106px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
padding-bottom: 37px;
|
||||
text-align: left;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.ui-dialog div.form-container span.message {
|
||||
|
|
@ -2198,7 +2194,7 @@ Dialogs*/
|
|||
|
||||
.ui-dialog div.form-container div.form-item {
|
||||
display: inline-block;
|
||||
height: 38px;
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
|
||||
.ui-dialog div.form-container div.name {
|
||||
|
|
@ -2217,9 +2213,9 @@ Dialogs*/
|
|||
|
||||
.ui-dialog div.form-container div.name label {
|
||||
display: block;
|
||||
width: 100%;
|
||||
width: 119px;
|
||||
text-align: right;
|
||||
font-size: 14px;
|
||||
font-size: 13px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
|
|
@ -2228,6 +2224,7 @@ Dialogs*/
|
|||
overflow: hidden;
|
||||
float: right;
|
||||
margin: 0 0 0 15px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.ui-dialog div.form-container div.value input {
|
||||
|
|
@ -2239,6 +2236,12 @@ Dialogs*/
|
|||
-webkit-border-radius: 4px;
|
||||
-khtml-border-radius: 4px;
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
border: 1px solid #AFAFAF;
|
||||
/*+box-shadow:inset 0px 1px 0px #727272;*/
|
||||
-moz-box-shadow: inset 0px 1px 0px #727272;
|
||||
-webkit-box-shadow: inset 0px 1px 0px #727272;
|
||||
-o-box-shadow: inset 0px 1px 0px #727272;
|
||||
box-shadow: inset 0px 1px 0px #727272;
|
||||
float: left;
|
||||
}
|
||||
|
||||
|
|
@ -2259,6 +2262,46 @@ Dialogs*/
|
|||
display: none;
|
||||
}
|
||||
|
||||
.ui-dialog div.form-container div.multi-array {
|
||||
display: inline-block;
|
||||
background: #FFFFFF;
|
||||
padding: 4px;
|
||||
/*+border-radius:10px;*/
|
||||
-moz-border-radius: 10px;
|
||||
-webkit-border-radius: 10px;
|
||||
-khtml-border-radius: 10px;
|
||||
border-radius: 10px 10px 10px 10px;
|
||||
border: 1px solid #808080;
|
||||
/*+box-shadow:inset 0px 1px 1px #929292;*/
|
||||
-moz-box-shadow: inset 0px 1px 1px #929292;
|
||||
-webkit-box-shadow: inset 0px 1px 1px #929292;
|
||||
-o-box-shadow: inset 0px 1px 1px #929292;
|
||||
box-shadow: inset 0px 1px 1px #929292;
|
||||
}
|
||||
|
||||
.ui-dialog div.form-container div.multi-array .item {
|
||||
width: 111px;
|
||||
float: left;
|
||||
margin: 0 0 13px;
|
||||
}
|
||||
|
||||
.ui-dialog div.form-container div.multi-array .item .name {
|
||||
font-size: 11px;
|
||||
width: 61px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.ui-dialog div.form-container div.multi-array .item .value {
|
||||
width: 13px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.ui-dialog div.form-container div.multi-array .item .value input {
|
||||
float: left;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ui-dialog.create-form .ui-button.ok {
|
||||
margin-left: 0;
|
||||
float: right;
|
||||
|
|
@ -3013,8 +3056,12 @@ Dialogs*/
|
|||
background-position: 0px -767px;
|
||||
}
|
||||
|
||||
.zone-chart ul li.disabled .view-all.normal {
|
||||
display: none;
|
||||
.zone-chart ul li .view-all.configure {
|
||||
/*+placement:anchor-bottom-right -1px 11px;*/
|
||||
position: absolute;
|
||||
right: -1px;
|
||||
bottom: 11px;
|
||||
text-indent: -2px;
|
||||
}
|
||||
|
||||
.zone-chart ul li .view-details {
|
||||
|
|
@ -3069,10 +3116,10 @@ Dialogs*/
|
|||
}
|
||||
|
||||
.zone-chart .resources.naas ul.system-main li.main .view-all {
|
||||
/*+placement:shift 43px 30px;*/
|
||||
/*+placement:shift 65px 29px;*/
|
||||
position: relative;
|
||||
left: 43px;
|
||||
top: 30px;
|
||||
left: 65px;
|
||||
top: 29px;
|
||||
position: absolute;
|
||||
text-align: left;
|
||||
text-indent: -2px;
|
||||
|
|
@ -3182,6 +3229,114 @@ Dialogs*/
|
|||
margin-left: 92px;
|
||||
}
|
||||
|
||||
/*** Add initial resource form*/
|
||||
.panel .add-first-network-resource {
|
||||
padding: 37px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.panel .add-first-network-resource .title {
|
||||
font-size: 26px;
|
||||
color: #3984D1;
|
||||
/*+text-shadow:0px 1px 2px #BCBCBC;*/
|
||||
-moz-text-shadow: 0px 1px 2px #BCBCBC;
|
||||
-webkit-text-shadow: 0px 1px 2px #BCBCBC;
|
||||
-o-text-shadow: 0px 1px 2px #BCBCBC;
|
||||
text-shadow: 0px 1px 2px #BCBCBC;
|
||||
margin: 0 0 17px;
|
||||
}
|
||||
|
||||
.panel .add-first-network-resource .message {
|
||||
display: block;
|
||||
color: #545151;
|
||||
margin: 0 0 30px;
|
||||
}
|
||||
|
||||
.panel .add-first-network-resource .form-item {
|
||||
width: 409px;
|
||||
height: 39px;
|
||||
padding: 5px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.panel .add-first-network-resource .form-item label {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.panel .add-first-network-resource .form-item label.error {
|
||||
display: none;
|
||||
font-size: 10px;
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
left: 137px;
|
||||
}
|
||||
|
||||
.panel .add-first-network-resource .form-item input {
|
||||
float: right;
|
||||
/*+border-radius:6px;*/
|
||||
-moz-border-radius: 6px;
|
||||
-webkit-border-radius: 6px;
|
||||
-khtml-border-radius: 6px;
|
||||
border-radius: 6px 6px 6px 6px;
|
||||
font-size: 16px;
|
||||
border: 1px solid #B7B7B7;
|
||||
}
|
||||
|
||||
.panel .add-first-network-resource .form-item input[type=text] {
|
||||
width: 276px;
|
||||
}
|
||||
|
||||
.panel .add-first-network-resource .button {
|
||||
padding: 11px 23px 11px 21px;
|
||||
cursor: pointer;
|
||||
background: url(../images/bg-gradients.png) repeat-x 0px -221px;
|
||||
margin: 29px 0 0;
|
||||
/*+border-radius:10px;*/
|
||||
-moz-border-radius: 10px;
|
||||
-webkit-border-radius: 10px;
|
||||
-khtml-border-radius: 10px;
|
||||
border-radius: 10px 10px 10px 10px;
|
||||
border: 1px solid #858585;
|
||||
color: #FFFFFF;
|
||||
clear: both;
|
||||
/*[empty]font-size:;*/
|
||||
}
|
||||
|
||||
.panel .add-first-network-resource .multi-array {
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #DCDCDC;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
padding: 12px;
|
||||
clear: both;
|
||||
width: 383px;
|
||||
margin: 3px 0 0;
|
||||
/*+border-radius:7px;*/
|
||||
-moz-border-radius: 7px;
|
||||
-webkit-border-radius: 7px;
|
||||
-khtml-border-radius: 7px;
|
||||
border-radius: 7px 7px 7px 7px;
|
||||
}
|
||||
|
||||
.panel .add-first-network-resource .multi-array .item {
|
||||
max-width: 155px;
|
||||
float: left;
|
||||
margin: 6px 0 0 24px;
|
||||
}
|
||||
|
||||
.panel .add-first-network-resource .multi-array .item .name {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.panel .add-first-network-resource .multi-array .item .value {
|
||||
float: right;
|
||||
margin: 0 0 0 13px;
|
||||
}
|
||||
|
||||
.panel .add-first-network-resource .multi-array .item .value input {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/*Form validation*/
|
||||
input.error {
|
||||
background: #FEE5E5;
|
||||
|
|
@ -3456,7 +3611,7 @@ label.error {
|
|||
border: 1px solid #E2DDDD;
|
||||
clear: both;
|
||||
height: 72% !important;
|
||||
width: 94%;
|
||||
width: 95%;
|
||||
margin: auto;
|
||||
overflow: auto;
|
||||
height: 591px;
|
||||
|
|
@ -3468,6 +3623,10 @@ label.error {
|
|||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
.multi-wizard .content.tab-view div.ui-tabs-panel.ui-tabs-hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.multi-wizard.instance-wizard .select-iso .content .select .hypervisor {
|
||||
float: left;
|
||||
display: block;
|
||||
|
|
@ -4274,7 +4433,7 @@ div.detail-group td.view-all div.view-all div.end {
|
|||
|
||||
div.panel.ui-dialog div.list-view div.fixed-header {
|
||||
top: 33px;
|
||||
left: 22px;
|
||||
left: 20px;
|
||||
width: 759px;
|
||||
height: 49px;
|
||||
background-color: #EAECEF;
|
||||
|
|
@ -4658,6 +4817,9 @@ div.panel.ui-dialog div.list-view div.fixed-header {
|
|||
top: 2px;
|
||||
}
|
||||
|
||||
.recurring-snapshots .schedule .forms > div {
|
||||
}
|
||||
|
||||
.recurring-snapshots .schedule .forms form {
|
||||
font-size: 12px;
|
||||
color: #4F6171;
|
||||
|
|
@ -4907,6 +5069,10 @@ div.panel.ui-dialog div.list-view div.fixed-header {
|
|||
top: 0px;
|
||||
}
|
||||
|
||||
.recurring-snapshots .ui-tabs div.ui-tabs-panel.ui-tabs-hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*Network detail chat*/
|
||||
.network-chart {
|
||||
width: 100%;
|
||||
|
|
@ -5713,6 +5879,10 @@ div.panel.ui-dialog div.list-view div.fixed-header {
|
|||
height: 185px;
|
||||
}
|
||||
|
||||
.new-project .review .ui-tabs .ui-widget-content.ui-tabs-hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.new-project .review .ui-tabs li {
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -28,11 +28,11 @@
|
|||
|
||||
$(function() {
|
||||
var $container = $('#cloudStack3-container');
|
||||
|
||||
|
||||
// Login
|
||||
cloudStack.uiCustom.login({
|
||||
$container: $container,
|
||||
|
||||
|
||||
// Use this for checking the session, to bypass login screen
|
||||
bypassLoginCheck: function(args) {
|
||||
var disabledLogin = document.location.href.split('?')[1] == 'login=disabled';
|
||||
|
|
@ -66,13 +66,31 @@
|
|||
return args.response.error();
|
||||
},
|
||||
|
||||
// Show cloudStack main UI widget
|
||||
complete: function(args) {
|
||||
$container.cloudStack($.extend(cloudStack, {
|
||||
context: {
|
||||
users: [args.user]
|
||||
var context = {
|
||||
users: [args.user]
|
||||
};
|
||||
var cloudStackArgs = $.extend(cloudStack, {
|
||||
context: context
|
||||
});
|
||||
|
||||
// Check to invoke install wizard
|
||||
cloudStack.installWizard.check({
|
||||
context: context,
|
||||
response: {
|
||||
success: function(args) {
|
||||
if (args.doInstall) {
|
||||
cloudStack.uiCustom.installWizard({
|
||||
$container: $container,
|
||||
context: context
|
||||
});
|
||||
} else {
|
||||
// Show cloudStack main UI
|
||||
$container.cloudStack(cloudStackArgs);
|
||||
}
|
||||
}
|
||||
}
|
||||
}));
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -46,22 +46,21 @@
|
|||
}
|
||||
],
|
||||
dataProvider: function(args) {
|
||||
args.response.success({ _custom: {
|
||||
physicalNetwork: {
|
||||
ip: '192.168.1.1'
|
||||
}
|
||||
}, data: testData.data.networks[0] });
|
||||
args.response.success({
|
||||
data: testData.data.networks[0]
|
||||
});
|
||||
}
|
||||
},
|
||||
ipAddresses: {
|
||||
title: 'IP Addresses',
|
||||
custom: function(args) {
|
||||
return $('<div></div>').multiEdit({
|
||||
context: args.context,
|
||||
noSelect: true,
|
||||
fields: {
|
||||
'gateway': { edit: true, label: 'Gateway' },
|
||||
'netmask': { edit: true, label: 'Netmask' },
|
||||
'vlanid': { edit: true, label: 'VLAN' },
|
||||
'vlanid': { edit: true, label: 'VLAN', isOptional: true },
|
||||
'startip': { edit: true, label: 'Start IP' },
|
||||
'endip': { edit: true, label: 'End IP' },
|
||||
'add-rule': { label: 'Add', addButton: true }
|
||||
|
|
@ -97,7 +96,13 @@
|
|||
dataProvider: function(args) {
|
||||
setTimeout(function() {
|
||||
args.response.success({
|
||||
data: []
|
||||
data: [
|
||||
{
|
||||
gateway: '10.223.110.223',
|
||||
netmask: '255.255.255.0',
|
||||
vlanid: '1480'
|
||||
}
|
||||
]
|
||||
});
|
||||
}, 100);
|
||||
}
|
||||
|
|
@ -286,7 +291,7 @@
|
|||
return {
|
||||
virtualRouter: 'enabled',
|
||||
netscaler: 'disabled',
|
||||
f5: 'shutdown',
|
||||
f5: 'enabled',
|
||||
srx: 'enabled',
|
||||
securityGroups: 'enabled'
|
||||
};
|
||||
|
|
@ -332,7 +337,7 @@
|
|||
state: 'Enabled'
|
||||
}
|
||||
]
|
||||
});
|
||||
});
|
||||
}, 500);
|
||||
}
|
||||
},
|
||||
|
|
@ -392,19 +397,9 @@
|
|||
name: 'Router0001S',
|
||||
ipaddress: '192.168.1.1',
|
||||
state: 'Enabled'
|
||||
},
|
||||
{
|
||||
name: 'Router0001B',
|
||||
ipaddress: '192.168.1.155',
|
||||
state: 'Enabled'
|
||||
},
|
||||
{
|
||||
name: 'Router0002',
|
||||
ipaddress: '192.168.1.13',
|
||||
state: 'Enabled'
|
||||
}
|
||||
]
|
||||
});
|
||||
});
|
||||
}, 500);
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -262,11 +262,12 @@
|
|||
var itemID = $li.attr('rel');
|
||||
var status = $li.attr('network-status');
|
||||
var networkProviderArgs = naas.networkProviders.types[itemID];
|
||||
var createForm = networkProviderArgs.actions.add.createForm;
|
||||
var action = networkProviderArgs.actions.add;
|
||||
var action = networkProviderArgs.actions ? networkProviderArgs.actions.add : null;
|
||||
var createForm = action ? networkProviderArgs.actions.add.createForm : null;
|
||||
var itemName = networkProviderArgs.label;
|
||||
|
||||
$browser.cloudBrowser('addPanel', {
|
||||
title: itemID + ' details',
|
||||
title: itemName + ' details',
|
||||
maximizeIfSelected: true,
|
||||
complete: function($newPanel) {
|
||||
if (status == 'disabled') {
|
||||
|
|
@ -278,13 +279,17 @@
|
|||
action.action($.extend(args, {
|
||||
response: {
|
||||
success: function(args) {
|
||||
$newPanel.find('form').prepend($('<div>').addClass('loading-overlay'));
|
||||
$('div.notifications').notifications('add', {
|
||||
desc: action.messages.notification({}),
|
||||
interval: 1000,
|
||||
poll: action.notification.poll
|
||||
});
|
||||
$newPanel.html('').listView({
|
||||
listView: naas.networkProviders.types[itemID]
|
||||
poll: action.notification.poll,
|
||||
complete: function(args) {
|
||||
refreshChart();
|
||||
$newPanel.html('').listView({
|
||||
listView: naas.networkProviders.types[itemID]
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -293,22 +298,25 @@
|
|||
noDialog: true
|
||||
});
|
||||
|
||||
var $formContainer = formData.$formContainer;
|
||||
var $formContainer = formData.$formContainer.addClass('add-first-network-resource');
|
||||
var $form = $formContainer.find('form');
|
||||
var completeAction = formData.completeAction;
|
||||
|
||||
$newPanel.append(
|
||||
$.merge(
|
||||
$formContainer,
|
||||
$('<div>')
|
||||
.addClass('button submit')
|
||||
.append($('<span>').html('Add'))
|
||||
.click(function() {
|
||||
if ($form.valid()) {
|
||||
completeAction($formContainer);
|
||||
}
|
||||
})
|
||||
)
|
||||
$formContainer
|
||||
.prepend(
|
||||
$('<div>').addClass('title').html('Add new ' + itemName + ' device')
|
||||
)
|
||||
.append(
|
||||
$('<div>')
|
||||
.addClass('button submit')
|
||||
.append($('<span>').html('Add'))
|
||||
.click(function() {
|
||||
if ($form.valid()) {
|
||||
completeAction($formContainer);
|
||||
}
|
||||
})
|
||||
)
|
||||
);
|
||||
} else {
|
||||
$newPanel.listView({
|
||||
|
|
@ -327,10 +335,13 @@
|
|||
}
|
||||
});
|
||||
|
||||
$refresh.click(function() {
|
||||
var refreshChart = function() {
|
||||
$charts.children().remove();
|
||||
loadNetworkData();
|
||||
};
|
||||
|
||||
$refresh.click(function() {
|
||||
refreshChart();
|
||||
return false;
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -142,9 +142,29 @@
|
|||
selectFn(selectArgs);
|
||||
}
|
||||
} else if (this.isBoolean) {
|
||||
$input = $('<input>').attr({ name: key, type: 'checkbox' }).appendTo($value);
|
||||
if (this.isChecked) {
|
||||
$input.attr('checked', 'checked');
|
||||
if (this.multiArray) {
|
||||
$input = $('<div>')
|
||||
.addClass('multi-array').addClass(key).appendTo($value);
|
||||
|
||||
$.each(this.multiArray, function(itemKey, itemValue) {
|
||||
$input.append(
|
||||
$('<div>').addClass('item')
|
||||
.append(
|
||||
$.merge(
|
||||
$('<div>').addClass('name').html(itemValue.label),
|
||||
$('<div>').addClass('value').append(
|
||||
$('<input>').attr({ name: itemKey, type: 'checkbox' }).appendTo($value)
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
});
|
||||
|
||||
} else {
|
||||
$input = $('<input>').attr({ name: key, type: 'checkbox' }).appendTo($value);
|
||||
if (this.isChecked) {
|
||||
$input.attr('checked', 'checked');
|
||||
}
|
||||
}
|
||||
} else {
|
||||
$input = $('<input>').attr({
|
||||
|
|
|
|||
|
|
@ -381,7 +381,7 @@
|
|||
name: this,
|
||||
type: 'text'
|
||||
})
|
||||
.addClass(!field.isOptional ? 'required': null)
|
||||
.addClass(!field.isOptional ? 'required' : null)
|
||||
.attr('disabled', field.isDisabled ? 'disabled' : false)
|
||||
.appendTo(
|
||||
$('<div>').addClass('range-item').appendTo($range)
|
||||
|
|
@ -393,7 +393,7 @@
|
|||
name: fieldName,
|
||||
type: field.isPassword ? 'password' : 'text'
|
||||
})
|
||||
.addClass(!field.isOptional ? 'required': null)
|
||||
.addClass(!field.isOptional ? 'required' : null)
|
||||
.attr('disabled', field.isDisabled ? 'disabled' : false)
|
||||
.appendTo($td);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -58,6 +58,7 @@
|
|||
.append(
|
||||
$('<div>').addClass('remove')
|
||||
);
|
||||
var additionalComplete = args.complete;
|
||||
|
||||
// Get information for specified section path
|
||||
$item.data('notification-section', args.section);
|
||||
|
|
@ -77,6 +78,8 @@
|
|||
notifications.cornerAlert({ message: $item.html() });
|
||||
notifications.activeTasks.pop(pollTimer);
|
||||
$item.removeClass('pending');
|
||||
|
||||
if (additionalComplete) additionalComplete();
|
||||
},
|
||||
incomplete: function(args) {},
|
||||
error: function(args) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue