mirror of
https://github.com/OpenNebula/one.git
synced 2025-03-20 10:50:08 +03:00
feature #2835: Fix form inputs layout
This commit is contained in:
Daniel Molina
parent
0ca4430ef6
commit
4b9f9597b3
@ -25,7 +25,6 @@ var create_file_tmpl ='<div class="row">\
|
||||
</dl>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="reveal-body">\
|
||||
<form id="create_file_form_easy" action="" class="custom creation">\
|
||||
<div class="tabs-content">\
|
||||
<div id="file_easyTab" class="content active">\
|
||||
@ -97,15 +96,12 @@ var create_file_tmpl ='<div class="row">\
|
||||
</div>\
|
||||
</div>\
|
||||
</fieldset>\
|
||||
<div class="reveal-footer">\
|
||||
<div class="form_buttons">\
|
||||
<button class="button success radius right" id="create_file_submit" type="button" value="file/create">'+tr("Create")+'</button>\
|
||||
<button id="wizard_file_reset_button" class="button secondary radius" type="reset" value="reset">'+tr("Reset")+'</button>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div id="file_manualTab" class="content">\
|
||||
<div class="reveal-body">\
|
||||
<div class="row">\
|
||||
<div class="columns large-12">\
|
||||
<label for="file_datastores_raw">'+tr("Datastore")+':</label>\
|
||||
@ -118,8 +114,6 @@ var create_file_tmpl ='<div class="row">\
|
||||
<textarea id="template" rows="15" style="height:180px !important; width:100%;"></textarea>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="reveal-footer">\
|
||||
<div class="form_buttons">\
|
||||
<button class="button success radius right" id="create_file_submit_manual" value="file/create">'+tr("Create")+'</button>\
|
||||
<button id="advanced_file_reset_button" class="button secondary radius" type="reset" value="reset">'+tr("Reset")+'</button>\
|
||||
@ -593,7 +587,7 @@ function setupCreateFileDialog(){
|
||||
var dialog = $create_file_dialog;
|
||||
dialog.html(create_file_tmpl);
|
||||
|
||||
dialog.addClass("reveal-modal medium max-height").attr("data-reveal", "");
|
||||
dialog.addClass("reveal-modal medium").attr("data-reveal", "");
|
||||
|
||||
$('#files_file-uploader',dialog).closest('.row').hide();
|
||||
|
||||
|
||||
@ -29,65 +29,55 @@ var create_image_tmpl ='<div class="row create_image_header">\
|
||||
</dl>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="reveal-body">\
|
||||
<form id="create_image" action="" class="custom creation">\
|
||||
<div class="tabs-content">\
|
||||
<div id="img_easyTab" class="content active">\
|
||||
<div class="row vm_param">\
|
||||
<div class="large-6 columns">\
|
||||
<div class="row">\
|
||||
<div class="large-12 columns">\
|
||||
<label for="img_name">'+tr("Name")+
|
||||
'<span class="tip">'+tr("Name that the Image will get. Every image must have a unique name.")+'</span>\
|
||||
</label>\
|
||||
<input type="text" name="img_name" id="img_name" />\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="large-12 columns">\
|
||||
<label for="img_desc">'+tr("Description")+
|
||||
'<span class="tip">'+tr("Human readable description of the image for other users.")+'</span>\
|
||||
</label>\
|
||||
<textarea name="img_desc" id="img_desc" rows="4"></textarea>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="large-6 columns">\
|
||||
<div class="row">\
|
||||
<div class="large-12 columns">\
|
||||
<label for="img_type">'+tr("Type")+
|
||||
'<span class="tip">'+tr("Type of the image.")+'<br/><br/>'
|
||||
+ tr(" OS images contain a working operative system.")+'<br/><br/>'
|
||||
+ tr(" CDROM images are readonly data.")+'<br/><br/>'
|
||||
+ tr(" DATABLOCK images are a storage for data. They can be created from previous existing data, or as an empty drive.")+
|
||||
'</span>'+
|
||||
'</label>\
|
||||
<select name="img_type" id="img_type">\
|
||||
<option value="OS">'+tr("OS")+'</option>\
|
||||
<option value="CDROM">'+tr("CDROM")+'</option>\
|
||||
<option value="DATABLOCK">'+tr("DATABLOCK")+'</option>\
|
||||
</select>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="large-12 columns">\
|
||||
<label for="img_datastore">'+tr("Datastore")+
|
||||
'<span class="tip">'+tr("Select the datastore for this image")+'</span>'+
|
||||
'</label>\
|
||||
<div id="img_datastore" name="img_datastore">\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="large-12 columns">\
|
||||
<input type="checkbox" id="img_persistent" name="img_persistent" value="YES" />\
|
||||
<label for="img_persistent">'+tr("Persistent")+
|
||||
'<span class="tip">'+tr("Persistence of the image")+'</span>'+
|
||||
'</label>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="large-12 columns">\
|
||||
<label for="img_name">'+tr("Name")+
|
||||
'<span class="tip">'+tr("Name that the Image will get. Every image must have a unique name.")+'</span>\
|
||||
</label>\
|
||||
<input type="text" name="img_name" id="img_name" />\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="large-12 columns">\
|
||||
<label for="img_desc">'+tr("Description")+
|
||||
'<span class="tip">'+tr("Human readable description of the image for other users.")+'</span>\
|
||||
</label>\
|
||||
<textarea name="img_desc" id="img_desc" rows="4"></textarea>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="large-6 columns">\
|
||||
<label for="img_type">'+tr("Type")+
|
||||
'<span class="tip">'+tr("Type of the image.")+'<br/><br/>'
|
||||
+ tr(" OS images contain a working operative system.")+'<br/><br/>'
|
||||
+ tr(" CDROM images are readonly data.")+'<br/><br/>'
|
||||
+ tr(" DATABLOCK images are a storage for data. They can be created from previous existing data, or as an empty drive.")+
|
||||
'</span>'+
|
||||
'</label>\
|
||||
<select name="img_type" id="img_type">\
|
||||
<option value="OS">'+tr("OS")+'</option>\
|
||||
<option value="CDROM">'+tr("CDROM")+'</option>\
|
||||
<option value="DATABLOCK">'+tr("DATABLOCK")+'</option>\
|
||||
</select>\
|
||||
</div>\
|
||||
<div class="large-6 columns">\
|
||||
<label for="img_datastore">'+tr("Datastore")+
|
||||
'<span class="tip">'+tr("Select the datastore for this image")+'</span>'+
|
||||
'</label>\
|
||||
<div id="img_datastore" name="img_datastore">\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="large-6 columns">\
|
||||
<input type="checkbox" id="img_persistent" name="img_persistent" value="YES" />\
|
||||
<label for="img_persistent">'+tr("Persistent")+
|
||||
'<span class="tip">'+tr("Persistence of the image")+'</span>'+
|
||||
'</label>\
|
||||
</div>\
|
||||
</div>\
|
||||
<br>\
|
||||
<fieldset>\
|
||||
<legend>'+tr("Image location")+':</legend>\
|
||||
<div class="row" id="src_path_select">\
|
||||
@ -162,6 +152,7 @@ var create_image_tmpl ='<div class="row create_image_header">\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<br>\
|
||||
<div class="row">\
|
||||
<fieldset>\
|
||||
<legend>' + tr("Custom attributes") + '</legend>\
|
||||
@ -203,15 +194,12 @@ var create_image_tmpl ='<div class="row create_image_header">\
|
||||
</fieldset>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="reveal-footer">\
|
||||
<div class="form_buttons">\
|
||||
<button class="button success radius right" id="create_image_submit" type="button" value="image/create">'+tr("Create")+'</button>\
|
||||
<button id="wizard_image_reset_button" class="button secondary radius" type="reset" value="reset">'+tr("Reset")+'</button>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div id="img_manualTab" class="content">\
|
||||
<div class="reveal-body">\
|
||||
<div class="row">\
|
||||
<div class="columns large-12">\
|
||||
<label for="img_datastores_raw">'+tr("Datastore")+':</label>\
|
||||
@ -224,8 +212,6 @@ var create_image_tmpl ='<div class="row create_image_header">\
|
||||
<textarea id="template" rows="15" style="height:380px !important; width:100%;"></textarea>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="reveal-footer">\
|
||||
<div class="form_buttons">\
|
||||
<button class="button success radius right" id="create_image_submit_manual" value="image/create">'+tr("Create")+'</button>\
|
||||
<button id="advanced_image_reset_button" class="button secondary radius" type="reset" value="reset">'+tr("Reset")+'</button>\
|
||||
@ -853,7 +839,7 @@ function setupCreateImageDialog(dialog) {
|
||||
var dialog = $create_image_dialog;
|
||||
dialog.html(create_image_tmpl);
|
||||
|
||||
dialog.addClass("reveal-modal medium max-height").attr("data-reveal", "");
|
||||
dialog.addClass("reveal-modal medium").attr("data-reveal", "");
|
||||
|
||||
initialize_create_image_dialog(dialog);
|
||||
}
|
||||
|
||||
@ -26,7 +26,6 @@ var create_template_tmpl = '\
|
||||
'</dl>' +
|
||||
'</div>'+
|
||||
'</div>'+
|
||||
'<div class="reveal-body">'+
|
||||
'<div class="tabs-content">' +
|
||||
'<div class="content active" id="easy">' +
|
||||
'<form class="custom creation">'+
|
||||
@ -38,11 +37,9 @@ var create_template_tmpl = '\
|
||||
wizard_tab_content()+
|
||||
'</div>'+
|
||||
'</div>'+
|
||||
'<div class="reveal-footer">'+
|
||||
'<button class="success button radius" id="create_template_form_easy" value="OpenNebula.Template.create" style="float: right">'+tr("Create")+'</button>'+
|
||||
'<button class="button hidden radius" id="template_template_update_button" value="Template.update_template" style="float: right">'+tr("Update")+'</button>'+
|
||||
'<button class="button secondary radius" id="template_template_reset_button" value="reset" type="reset">'+tr("Reset")+'</button>'+
|
||||
'</div>'+
|
||||
'</form>'+
|
||||
'</div>' +
|
||||
'<div class="content" id="manual">' +
|
||||
@ -57,15 +54,12 @@ var create_template_tmpl = '\
|
||||
'<textarea id="template" rows="15"></textarea>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'<div class="reveal-footer">' +
|
||||
'<div class="form_buttons">' +
|
||||
'<button class="button success right radius" id="create_template_submit_manual" value="template/create">'+tr("Create")+'</button>' +
|
||||
'<button class="button hidden radius" id="manual_template_update_button" value="Template.update_template" style="float: right">'+tr("Update")+'</button>'+
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'</form>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'</div>'+
|
||||
'<a class="close-reveal-modal">×</a>';
|
||||
|
||||
@ -599,13 +593,15 @@ function updateTemplatesView(request, templates_list){
|
||||
|
||||
function generate_capacity_tab_content() {
|
||||
var html = '<div class="row vm_param">'+
|
||||
'<div id="template_name_form" class="large-6 columns">'+
|
||||
'<div id="template_name_form" class="large-12 columns">'+
|
||||
'<label for="NAME">'+tr("Name")+'\
|
||||
<span class="tip">'+tr("Name that the VM will get for description purposes.")+'</span>\
|
||||
</label>'+
|
||||
'<input type="text" id="NAME" name="name"/>'+
|
||||
'</div>'+
|
||||
'<div class="large-6 columns">'+
|
||||
'</div>'+
|
||||
'<div class="row">'+
|
||||
'<div class="large-12 columns">'+
|
||||
'<label for="DESCRIPTION">'+tr("Description")+'\
|
||||
<span class="tip">'+tr("Description of the template")+'</span>\
|
||||
</label>'+
|
||||
@ -3557,7 +3553,7 @@ function setupCreateTemplateDialog(){
|
||||
|
||||
//***CREATE VM DIALOG MAIN BODY***
|
||||
|
||||
dialogs_context.append('<div id="create_template_dialog" class="reveal-modal large max-height" data-reveal></div>');
|
||||
dialogs_context.append('<div id="create_template_dialog" class="reveal-modal large" data-reveal></div>');
|
||||
$create_template_dialog = $('#create_template_dialog',dialogs_context);
|
||||
var dialog = $create_template_dialog;
|
||||
|
||||
|
||||
@ -28,20 +28,22 @@ var create_vn_tmpl =
|
||||
</dl>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="reveal-body">\
|
||||
<div class="tabs-content">\
|
||||
<div class="content active" id="vnet_wizard">\
|
||||
<form id="create_vn_form_easy" action="" class="creation">\
|
||||
<div class="row">\
|
||||
<div class="large-6 columns">\
|
||||
<div class="large-12 columns">\
|
||||
<label for="name" >' + tr("Name") + ':</label>\
|
||||
<input type="text" name="name" id="name"/>\
|
||||
</div>\
|
||||
<div class="large-6 columns">\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="large-12 columns">\
|
||||
<label for="DESCRIPTION" >' + tr("Description") + ':</label>\
|
||||
<textarea type="text" id="DESCRIPTION" name="DESCRIPTION"/>\
|
||||
</div>\
|
||||
</div>\
|
||||
<br>\
|
||||
<div class="row">\
|
||||
<div class="large-12 columns">\
|
||||
<fieldset>\
|
||||
@ -155,6 +157,10 @@ var create_vn_tmpl =
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="large-6 columns">\
|
||||
<label for="bridge">'+tr("Bridge")+':</label>\
|
||||
<input type="text" name="bridge" id="bridge" />\
|
||||
</div>\
|
||||
<div class="large-6 columns">\
|
||||
<label for="network_mode">'+tr("Network model")+':</label>\
|
||||
<select name="network_mode" id="network_mode">\
|
||||
@ -167,20 +173,6 @@ var create_vn_tmpl =
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="large-6 columns">\
|
||||
<div class="row">\
|
||||
<div class="large-12 columns">\
|
||||
<label for="bridge">'+tr("Bridge")+':</label>\
|
||||
<input type="text" name="bridge" id="bridge" />\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="large-12 columns">\
|
||||
<label for="phydev">'+tr("Physical device")+':</label>\
|
||||
<input type="text" name="phydev" id="phydev" />\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="large-6 columns">\
|
||||
<div class="row">\
|
||||
<div class="large-12 columns">\
|
||||
@ -198,7 +190,16 @@ var create_vn_tmpl =
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="large-6 columns">\
|
||||
<div class="row">\
|
||||
<div class="large-12 columns">\
|
||||
<label for="phydev">'+tr("Physical device")+':</label>\
|
||||
<input type="text" name="phydev" id="phydev" />\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<br>\
|
||||
<div class="row">\
|
||||
<div class="large-12 columns">\
|
||||
<fieldset>\
|
||||
@ -237,14 +238,12 @@ var create_vn_tmpl =
|
||||
</fieldset>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="reveal-footer">\
|
||||
<div class="form_buttons">\
|
||||
<button class="button success radius right" id="create_vn_submit_easy" value="vn/create">\
|
||||
'+tr("Create")+'\
|
||||
</button>\
|
||||
<button id="wizard_vnet_reset_button" class="button secondary radius" type="reset" value="reset">'+tr("Reset")+'</button>\
|
||||
</div>\
|
||||
</div>\
|
||||
</form>\
|
||||
</div>\
|
||||
<div id="vnet_advanced" class="content">\
|
||||
@ -256,19 +255,16 @@ var create_vn_tmpl =
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="columns large-12">\
|
||||
<textarea id="template" rows="15" style="width:100%;"></textarea>\
|
||||
<textarea id="template" rows="15" style="width:100%; height:300px;"></textarea>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="reveal-footer">\
|
||||
<div class="form_buttons">\
|
||||
<button class="button success right radius" id="create_vn_submit_manual" value="vn/create">'+tr("Create")+'</button>\
|
||||
<button id="advanced_vnet_reset_button" class="button secondary radius" type="reset" value="reset">'+tr("Reset")+'</button>\
|
||||
</div>\
|
||||
</div>\
|
||||
</form>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<a class="close-reveal-modal">×</a>';
|
||||
|
||||
var update_vnet_tmpl =
|
||||
@ -913,7 +909,7 @@ function setupCreateVNetDialog() {
|
||||
var dialog = $create_vn_dialog;
|
||||
dialog.html(create_vn_tmpl);
|
||||
|
||||
dialog.addClass("reveal-modal medium max-height").attr("data-reveal", "");
|
||||
dialog.addClass("reveal-modal medium").attr("data-reveal", "");
|
||||
|
||||
//Make the tabs look nice for the creation mode
|
||||
//$('#vn_tabs',dialog).tabs();
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user