mirror of
https://github.com/ansible/awx.git
synced 2026-01-13 02:50:02 -03:30
Latest changes to Inventory help. Re-styled dialogs. Fixed presentation so that Next and Previous are possible. Added close button.
This commit is contained in:
Chris Houseknecht
parent
a21332a2d4
commit
763ed5241d
@ -7,59 +7,59 @@
|
||||
*
|
||||
* @dict
|
||||
*/
|
||||
|
||||
angular.module('InventoryGroupsHelpDefinition', [])
|
||||
.value(
|
||||
'InventoryGroupsHelp', {
|
||||
story: {
|
||||
hdr: 'Building your inventory',
|
||||
steps: {
|
||||
step1: {
|
||||
intro: 'Start by creating a group:',
|
||||
img: { src: 'groups001.png', maxWidth: 338 , maxHeight: 222 },
|
||||
box: "Click <i class=\"fa fa-plus\"></i> on the groups list (the left side of the page) to add a new group.",
|
||||
autoOffNotice: true,
|
||||
height: 500
|
||||
},
|
||||
step2: {
|
||||
intro: ' ',
|
||||
img: { src: 'groups002.png', maxWidth: 443, maxHeight: 251 },
|
||||
box: "Provide a name, description and any variables.",
|
||||
height: 500
|
||||
},
|
||||
step3: {
|
||||
intro: ' ',
|
||||
img: { src: 'groups003.png', maxWidth: 412, maxHeight: 215 },
|
||||
box: "If this is a cloud inventory, choose a Source and provide credentials.",
|
||||
height: 500
|
||||
},
|
||||
step4: {
|
||||
intro: ' ',
|
||||
img: { src: 'groups004.png', maxWidth: 261, maxHeight: 221 },
|
||||
box: "For a cloud inventory, start the sync process by clicking <i class=\"fa fa-exchange\"></i>.",
|
||||
height: 500
|
||||
},
|
||||
step5: {
|
||||
intro: "Groups can have subgroups:",
|
||||
img: { src: 'groups005.png', maxWidth: 430, maxHeight: 206 },
|
||||
box: "<div class=\"text-left\">First, select a group. Then click <i class=\"fa fa-plus\"></i> to create a new group. The new group " +
|
||||
"will be added to the selected group.</div>",
|
||||
height: 500
|
||||
},
|
||||
step6: {
|
||||
intro: 'Copy or move groups:',
|
||||
img: { src: 'groups006.png', maxWidth: 263, maxHeight: 211 },
|
||||
box: "<div class=\"text-left\">Copy or move a group by dragging and dropping its name onto another group name. A dialog will appear asking " +
|
||||
"if the group should be coppied or moved.</div>",
|
||||
height: 500
|
||||
},
|
||||
step7: {
|
||||
intro: 'Next, add hosts:',
|
||||
img: { src: 'groups007.png', maxWidth: 466, maxHeight: 178 },
|
||||
box: "<div class=\"text-left\"><p>First, select a Group. " +
|
||||
"Then click <i class=\"fa fa-plus\"></i> on the hosts list (the right side of the page) to create a host. " +
|
||||
"The new host will be part of the selected group.</p><p>Note hosts cannot be added to the All Hosts group.</p></div>",
|
||||
height: 500
|
||||
}
|
||||
width: 510,
|
||||
height: 560,
|
||||
steps: [
|
||||
{
|
||||
intro: 'Start by creating a group:',
|
||||
img: { src: 'groups001.png', maxWidth: 338 , maxHeight: 222 },
|
||||
box: "Click <i class=\"fa fa-plus\"></i> on the groups list (the left side of the page) to add a new group.",
|
||||
autoOffNotice: true
|
||||
},
|
||||
{
|
||||
intro: 'Enter group properties:',
|
||||
img: { src: 'groups002.png', maxWidth: 443, maxHeight: 251 },
|
||||
box: 'Enter the group name, a description and any inventory variables. Variables can be entered using either JSON or YAML syntax. ' +
|
||||
'For more on inventory variables, see <a href=\"http://docs.ansible.com/intro_inventory.html\" target="_blank"> ' +
|
||||
'docs.ansible.com/intro_inventory.html</a>'
|
||||
},
|
||||
{
|
||||
intro: 'Cloud inventory: select cloud source',
|
||||
img: { src: 'groups003.png', maxWidth: 412, maxHeight: 215 },
|
||||
box: "For a cloud inventory, choose the cloud provider from the list and select your credentials. If you have not already setup " +
|
||||
"credentials for the provider, you will need to do that first on the <a href=\"/#/credentials\" " +
|
||||
"target=\"_blank\">Credentials</a> tab."
|
||||
},
|
||||
{
|
||||
intro: 'Cloud inventory: synchronize Tower with the cloud',
|
||||
img: { src: 'groups004.png', maxWidth: 261, maxHeight: 221 },
|
||||
box: "To pull the cloud inventory into Tower, initiate an inventory sync by clicking <i class=\"fa fa-exchange\"></i>.",
|
||||
},
|
||||
{
|
||||
intro: "Groups can have subgroups:",
|
||||
img: { src: 'groups005.png', maxWidth: 430, maxHeight: 206 },
|
||||
box: "<div class=\"text-left\">First, select a group. Then click <i class=\"fa fa-plus\"></i> to create a new group. The new group " +
|
||||
"will be added to the selected group.</div>"
|
||||
},
|
||||
{
|
||||
intro: 'Copy or move groups:',
|
||||
img: { src: 'groups006.png', maxWidth: 263, maxHeight: 211 },
|
||||
box: "<div class=\"text-left\">Copy or move a group by dragging and dropping its name onto another group name. A dialog will appear " +
|
||||
"asking if the group should be coppied or moved.</div>"
|
||||
},
|
||||
{
|
||||
intro: 'Adding hosts:',
|
||||
img: { src: 'groups007.png', maxWidth: 466, maxHeight: 178 },
|
||||
box: "<div class=\"text-left\"><p>First, select a Group. " +
|
||||
"Then click <i class=\"fa fa-plus\"></i> on the hosts list (the right side of the page) to create a host. " +
|
||||
"The new host will be part of the selected group.</p><p>Note hosts cannot be added to the All Hosts group.</p></div>"
|
||||
}
|
||||
]
|
||||
}
|
||||
});
|
||||
|
||||
@ -78,6 +78,7 @@ angular.module('JobsHelper', ['Utilities', 'FormGenerator', 'JobSummaryDefinitio
|
||||
y = (500 > wh) ? wh : 500;
|
||||
maxrows = 10;
|
||||
}
|
||||
|
||||
// Create the modal
|
||||
$('#status-modal-dialog').dialog({
|
||||
buttons: { "OK": function() { $( this ).dialog( "close" ); } },
|
||||
|
||||
@ -75,7 +75,7 @@ angular.module('StreamWidget', ['RestServices', 'Utilities', 'StreamListDefiniti
|
||||
$rootScope.breadcrumbs = [];
|
||||
var paths = $location.path().split('/');
|
||||
paths.splice(0,1);
|
||||
var path, title;
|
||||
var path, title, j;
|
||||
for (var i=0; i < paths.length; i++) {
|
||||
if (/^\d+/.test(paths[i])) {
|
||||
path='';
|
||||
|
||||
@ -17,6 +17,7 @@
|
||||
@blue-link: #1778c3;
|
||||
@blue-dark: #2a6496; /* link hover */
|
||||
@grey: #A9A9A9;
|
||||
@grey-txt: #707070;
|
||||
@well: #f5f5f5; /* well background color */
|
||||
@info: #d9edf7; /* alert info background color */
|
||||
@info-border: #bce8f1; /* alert info border color */
|
||||
@ -1341,37 +1342,35 @@ tr td button i {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
/* help dialog */
|
||||
|
||||
/* Help modal dialog */
|
||||
|
||||
#help-modal {
|
||||
overflow: hidden;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
max-width: 450px;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 15px;
|
||||
border: 1px solid @grey;
|
||||
box-shadow: 3px 3px 5px 0 @grey;
|
||||
}
|
||||
}
|
||||
|
||||
#help-modal .img-container {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.help-box {
|
||||
text-align: center;
|
||||
border: 1px solid @info-border;
|
||||
border-radius: 6px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px;
|
||||
background-color: @info;
|
||||
color: @info-color;
|
||||
}
|
||||
|
||||
.help-intro {
|
||||
width: 100;
|
||||
text-align: left;
|
||||
margin: 15px 0 30px 0;
|
||||
font-weight: normal;
|
||||
font-size: 16px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.step-no {
|
||||
font-weight: bold;
|
||||
}
|
||||
width: 100%;
|
||||
margin-top: 15px;
|
||||
border-radius: 6px;
|
||||
padding: 8px;
|
||||
color: @grey-txt;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
||||
/* Activity Stream Widget */
|
||||
|
||||
@ -57,8 +57,14 @@
|
||||
}
|
||||
|
||||
.ui-dialog-buttonset {
|
||||
button.btn.btn-default.ui-state-hover,
|
||||
button.btn.btn-default.ui-state-active,
|
||||
button.btn.btn-default.ui-state-focus {
|
||||
font-weight: normal;
|
||||
}
|
||||
button.btn.btn-primary.ui-state-hover,
|
||||
button.btn.btn-primary.ui-state-active {
|
||||
button.btn.btn-primary.ui-state-active,
|
||||
button.btn.btn-primary.ui-state-focus {
|
||||
background-image: none;
|
||||
color: @white;
|
||||
background-color: @blue-dark;
|
||||
|
||||
@ -29,6 +29,13 @@ angular.module('Utilities',['RestServices', 'Utilities'])
|
||||
$(this).remove();
|
||||
});
|
||||
|
||||
try {
|
||||
$('#help-modal').dialog('close');
|
||||
}
|
||||
catch(e) {
|
||||
// ignore
|
||||
}
|
||||
|
||||
$(window).unbind('resize');
|
||||
|
||||
}
|
||||
@ -250,112 +257,133 @@ angular.module('Utilities',['RestServices', 'Utilities'])
|
||||
// HelpDialog({ defn: <HelpDefinition> })
|
||||
//
|
||||
|
||||
function showHelp(params) {
|
||||
// Using a function inside a function so we can recurse
|
||||
// over the steps in the help story
|
||||
|
||||
var defn = params.defn;
|
||||
var nxtStory = { story: { steps: { } } };
|
||||
var width, height;
|
||||
var autoShow = params.autoShow || false;
|
||||
|
||||
var defn = params.defn;
|
||||
var current_step = params.step;
|
||||
var autoShow = params.autoShow || false;
|
||||
|
||||
function showHelp(step) {
|
||||
var width, height, isOpen=false;
|
||||
current_step = step;
|
||||
|
||||
function buildHtml(step) {
|
||||
var html = '';
|
||||
html += (step.intro) ? "<div class=\"help-intro\">" + step.intro + "</div>" : "";
|
||||
if (step.img) {
|
||||
html += "<img src=\"" + $basePath + "img/help/" + step.img.src + "\" ";
|
||||
html += "style=\"";
|
||||
html += (step.img.maxWidth) ? "max-width:" + step.img.maxWidth + "px;" : "";
|
||||
html += (step.img.maxHeight) ? " max-height: " + step.img.maxHeight + "px;" : "";
|
||||
html += "\" ";
|
||||
html += ">";
|
||||
}
|
||||
html += (step.box) ? "<div class=\"help-box\">" + step.box + "</div>" : "";
|
||||
//html += (step.intro) ? "<div class=\"help-intro\">" + step.intro + "</div>" : "";
|
||||
html += "<h4>" + step.intro + "</h4>\n";
|
||||
html += "<div class=\"img-container\">\n";
|
||||
html += "<img src=\"" + $basePath + "img/help/" + step.img.src + "\" >";
|
||||
html += "</div>\n";
|
||||
html += "<div class=\"help-box\">" + step.box + "</div>";
|
||||
html += (autoShow && step.autoOffNotice) ? "<div class=\"help-auto-off\"><label><input type=\"checkbox\" name=\"auto-off-checkbox\" " +
|
||||
"id=\"auto-off-checkbox\"> Do not show this message in the future</label></div>\n" : "";
|
||||
"id=\"auto-off-checkbox\"> Do not show this message in the future</label></div>\n" : "";
|
||||
return html;
|
||||
}
|
||||
|
||||
var nxt;
|
||||
for (var step in defn.story.steps) {
|
||||
nxt = step;
|
||||
break;
|
||||
}
|
||||
|
||||
width = (defn.story.steps[nxt].width !== undefined) ? defn.story.steps[nxt].width : 500;
|
||||
height = (defn.story.steps[nxt].height !== undefined) ? defn.story.steps[nxt].height : 600;
|
||||
|
||||
if (Object.keys(defn.story.steps).length > 1) {
|
||||
// We have multiple steps
|
||||
for (var step in defn.story.steps) {
|
||||
if (step !== nxt) {
|
||||
nxtStory.story.steps[step] = defn.story.steps[step];
|
||||
}
|
||||
}
|
||||
nxtStory.story.hdr = defn.story.hdr;
|
||||
width = (defn.story.width) ? defn.story.width : 510;
|
||||
height = (defn.story.height) ? defn.story.height : 600;
|
||||
|
||||
// Limit modal width to width of viewport
|
||||
var ww = $(document).width();
|
||||
width = (width > ww) ? ww : width;
|
||||
|
||||
var nxtStep = function() {
|
||||
showHelp({ defn: nxtStory });
|
||||
}
|
||||
|
||||
try {
|
||||
$('#help-modal').dialog('hide');
|
||||
}
|
||||
catch(e) {
|
||||
// ignore
|
||||
}
|
||||
$('#help-modal').html(buildHtml(defn.story.steps[nxt])).dialog({
|
||||
position: { my: "center top", at: "center top+150", of: 'body' },
|
||||
title: defn.story.hdr,
|
||||
width: width,
|
||||
height: height,
|
||||
buttons: [{ text: "Next", click: nxtStep }],
|
||||
closeOnEscape: true,
|
||||
show: 500,
|
||||
hide: 500,
|
||||
close: function() { $('#help-modal').empty(); },
|
||||
focus: function() { $('.ui-dialog-buttonset button').blur(); }
|
||||
});
|
||||
$('.ui-dialog-buttonset button').attr({ 'class': 'btn btn-primary' }).blur();
|
||||
$('.ui-dialog[aria-describedby="help-modal"]').find('.ui-dialog-titlebar button')
|
||||
.empty().attr({ 'class': 'close' }).text('x');
|
||||
try {
|
||||
isOpen = $('#help-modal').dialog('isOpen');
|
||||
}
|
||||
catch(e) {
|
||||
// ignore
|
||||
}
|
||||
|
||||
if (isOpen) {
|
||||
$('#help-modal').html(buildHtml(defn.story.steps[current_step]));
|
||||
}
|
||||
else {
|
||||
try {
|
||||
$('#help-modal').dialog('hide');
|
||||
}
|
||||
catch(e) {
|
||||
// ignore
|
||||
}
|
||||
$('#help-modal').html(buildHtml(defn.story.steps[nxt])).dialog({
|
||||
position: { my: "center top", at: "center top+150", of: 'body' },
|
||||
title: defn.story.hdr,
|
||||
width: width,
|
||||
height: height,
|
||||
buttons: [ { text: "OK", click: function() { $( this ).dialog( "close" ); } } ],
|
||||
closeOnEscape: true,
|
||||
show: 500,
|
||||
hide: 500,
|
||||
close: function() { $('#help-modal').empty(); },
|
||||
focus: function() { $('.ui-dialog-buttonset button').blur(); }
|
||||
});
|
||||
$('.ui-dialog-buttonset button').attr({ 'class': 'btn btn-primary' }).blur();
|
||||
$('.ui-dialog[aria-describedby="help-modal"]').find('.ui-dialog-titlebar button')
|
||||
.empty().attr({ 'class': 'close' }).text('x');
|
||||
// Define buttons based on story length
|
||||
var btns = [];
|
||||
if (defn.story.steps.length > 1) {
|
||||
btns.push({
|
||||
text: "Prev",
|
||||
click: function(e, ui) {
|
||||
if (current_step - 1 == 0) {
|
||||
$(e.target).button('disable');
|
||||
}
|
||||
if (current_step - 1 < defn.story.steps.length - 1) {
|
||||
$(e.target).next().button('enable');
|
||||
}
|
||||
showHelp(current_step - 1);
|
||||
},
|
||||
disabled: true
|
||||
});
|
||||
btns.push({
|
||||
text: "Next",
|
||||
click: function(e, ui) {
|
||||
if (current_step + 1 > 0) {
|
||||
$(e.target).prev().button('enable');
|
||||
}
|
||||
if (current_step + 1 == defn.story.steps.length - 1) {
|
||||
$(e.target).button('disable');
|
||||
}
|
||||
showHelp(current_step + 1);
|
||||
}
|
||||
});
|
||||
}
|
||||
btns.push({ text: "Close",
|
||||
click: function() { $('#help-modal').dialog('close'); }
|
||||
});
|
||||
// Show the dialog
|
||||
$('#help-modal').html(buildHtml(defn.story.steps[current_step])).dialog({
|
||||
position: { my: "center top", at: "center top+150", of: 'body' },
|
||||
title: defn.story.hdr,
|
||||
width: width,
|
||||
height: height,
|
||||
buttons: btns,
|
||||
closeOnEscape: true,
|
||||
show: 500,
|
||||
hide: 500,
|
||||
close: function() { $('#help-modal').empty(); },
|
||||
resizeStop: function(e, ui) {
|
||||
// for some reason, after resizing the dialog the content doesn't expand to 100%
|
||||
var dialog = $('.ui-dialog[aria-describedby="help-modal"]');
|
||||
var content = dialog.find('#help-modal');
|
||||
content.width( dialog.width() - 20);
|
||||
}
|
||||
});
|
||||
|
||||
// Make the buttons look like TB and add FA icons
|
||||
$('.ui-dialog-buttonset button').each( function(idx) {
|
||||
var c, h, l;
|
||||
l = $(this).text();
|
||||
if (l === 'Close') {
|
||||
h = "fa-times";
|
||||
c = "btn btn-default";
|
||||
$(this).attr({ 'class': c }).html("<i class=\"fa " + h + "\"></i> Close");
|
||||
}
|
||||
else if (l === 'Prev') {
|
||||
h = "fa-chevron-left";
|
||||
c = "btn btn-primary";
|
||||
$(this).attr({ 'class': c }).html("<i class=\"fa " + h + "\"></i> Prev");
|
||||
}
|
||||
else {
|
||||
h = "fa-chevron-right";
|
||||
c = "btn btn-primary";
|
||||
$(this).attr({ 'class': c }).html("Next <i class=\"fa " + h + "\"></i>").css({ 'margin-right': '20px'});
|
||||
}
|
||||
});
|
||||
|
||||
$('.ui-dialog[aria-describedby="help-modal"]').find('.ui-dialog-titlebar button')
|
||||
.empty().attr({ 'class': 'close' }).text('x');
|
||||
|
||||
// If user clicks the checkbox, update local storage
|
||||
$('#auto-off-checkbox').click(function() {
|
||||
if ($('input[name="auto-off-checkbox"]:checked').length) {
|
||||
Store('inventoryAutoHelp','off');
|
||||
}
|
||||
else {
|
||||
Store('inventoryAutoHelp','on');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// If user clicks the checkbox, update local storage
|
||||
$('#auto-off-checkbox').click(function() {
|
||||
if ($('input[name="auto-off-checkbox"]:checked').length) {
|
||||
Store('inventoryAutoHelp','off');
|
||||
}
|
||||
else {
|
||||
Store('inventoryAutoHelp','on');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
showHelp(params);
|
||||
showHelp(0);
|
||||
|
||||
}
|
||||
}])
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user