arif/xcat-core
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added tooltips to forms.

Browse Source 
git-svn-id: https://svn.code.sf.net/p/xcat/code/xcat-core/trunk@7989 8638fb3e-16cb-4fca-ae20-7b5d299a9bcd
This commit is contained in:
phamt
2010-11-01 14:06:53 +00:00
parent 123771010b
commit 07b7006872
8 changed files with 137 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
xCAT-UI/css/style.css
View File

@@ -4,7 +4,7 @@
font: 12px verdana, arial, helvetica, sans-serif;
}
.ui-dialog label, .ui-dialog input, .ui-dialog p, .ui-dialog button {
.ui-dialog label,.ui-dialog input,.ui-dialog p,.ui-dialog button {
font: 12px verdana, arial, helvetica, sans-serif;
}
@@ -12,9 +12,24 @@
font: 12px verdana, arial, helvetica, sans-serif;
}
/***************** Tooltip *****************/
.tooltip {
background-color: #000;
border: 1px solid #fff;
padding: 10px 15px;
width: 200px;
display: none;
color: #fff;
text-align: left;
font-size: 10px;
/* Outline radius for firefox only */
-moz-box-shadow: 0 0 10px #000;
-webkit-box-shadow: 0 0 10px #000;
}
/****************** Header ******************/
#header {
height : 40px;
height: 40px;
width: 1000px;
margin: 0px auto;
background: url(../images/header-gloss-wave.png) 50% 50% repeat-x;
@@ -25,7 +40,7 @@
}
#header ul {
float : left;
float: left;
list-style: none;
padding: 0 0 0 30px;
margin: 0;
@@ -54,11 +69,11 @@
background-color: #A9D0F5;
}
/* User name and log out */
/* User name and log out */
#header div {
float: right;
}
#header div span {
color: #424242;
padding: 2px 15px 0px 2px; /* Top right left bottom*/
@@ -161,7 +176,8 @@ span.ui-icon-info {
}
.ui-button:hover {
background: url(../images/jquery/ui-bg_inset-hard_100_fcfdfd_1x100.png) 50% 50% repeat-x;
background: url(../images/jquery/ui-bg_inset-hard_100_fcfdfd_1x100.png)
50% 50% repeat-x;
}
/****************** Tabs ******************/
@@ -216,7 +232,7 @@ span.ui-icon-info {
vertical-align: middle;
}
.tab span a, .tab li a {
.tab span a,.tab li a {
text-decoration: none;
cursor: pointer;
}
@@ -524,7 +540,7 @@ span.ui-icon-info {
display: inline-table;
}
.form input, .form textarea, .form select {
.form input,.form textarea,.form select {
font: 12px verdana, arial, helvetica, sans-serif;
border: solid 1px #BDBDBD;
padding: 5px;
@@ -595,12 +611,12 @@ table a:hover {
}
/****************** Provision and monitor forms ******************/
.provision div, .monitor div {
.provision div,.monitor div {
margin: 10px 0;
display: block;
}
.provision textarea, .monitor textarea {
.provision textarea,.monitor textarea {
font: 12px verdana, arial, helvetica, sans-serif;
border: solid 1px #BDBDBD;
padding: 5px;
@@ -609,15 +625,15 @@ table a:hover {
height: 150px;
}
.monitorsumdiv{
width : 300px;
height : 150px;
float : left;
margin : 0px 0px 10px 0px;
.monitorsumdiv {
width: 300px;
height: 150px;
float: left;
margin: 0px 0px 10px 0px;
}
.monitornodediv{
width : 240px;
height : 120px;
margin : 0px 0px 15px 0px;
.monitornodediv {
width: 240px;
height: 120px;
margin: 0px 0px 15px 0px;
}

24
xCAT-UI/js/custom/zvm.js
View File

@@ -59,15 +59,15 @@ zvmPlugin.prototype.loadClonePage = function(node) {
var cloneForm = $('<div class="form"></div>');
cloneForm.append(statBar);
cloneForm.append(infoBar);
cloneForm.append('<div><label>Target node range:</label><input type="text" id="tgtNode" name="tgtNode"/></div>');
cloneForm.append('<div><label>Target user ID range:</label><input type="text" id="tgtUserId" name="tgtUserId"/></div>');
cloneForm.append('<div><label>Clone source:</label><input type="text" id="srcNode" name="srcNode" readonly="readonly" value="' + node + '"/></div>');
cloneForm.append('<div><label>Hardware control point:</label><input type="text" id="newHcp" name="newHcp" readonly="readonly" value="' + hcp + '"/></div>');
cloneForm.append('<div><label>Target node range:</label><input type="text" id="tgtNode" name="tgtNode" title="You must give a node or a node range. A node range must be given as: node1-node9 or node[1-9]."/></div>');
cloneForm.append('<div><label>Target user ID range:</label><input type="text" id="tgtUserId" name="tgtUserId" title="You must give a user ID or a user ID range. A user ID range must be given as: user1-user9 or user[1-9]."/></div>');
cloneForm.append('<div><label>Clone source:</label><input type="text" id="srcNode" name="srcNode" readonly="readonly" value="' + node + '" title="The source node to be cloned"/></div>');
cloneForm.append('<div><label>Hardware control point:</label><input type="text" id="newHcp" name="newHcp" readonly="readonly" value="' + hcp + '" title="The System z hardware control point (zHCP) responsible for managing the node(s). It must be the same as the source node."/></div>');
// Create group input
var group = $('<div></div>');
var groupLabel = $('<label for="group">Group:</label>');
var groupInput = $('<input type="text" id="newGroup" name="newGroup"/>');
var groupInput = $('<input type="text" id="newGroup" name="newGroup" title="You must give the group where the new node(s) will be placed under."/>');
groupInput.one('focus', function(){
var groupNames = $.cookie('Groups');
if (groupNames) {
@@ -86,13 +86,21 @@ zvmPlugin.prototype.loadClonePage = function(node) {
// Create disk pool input
var poolDiv = $('<div></div>');
var poolLabel = $('<label>Disk pool:</label>');
var poolInput = $('<input type="text" id="diskPool" name="diskPool"/>').autocomplete(diskPools.split(','));
var poolInput = $('<input type="text" id="diskPool" name="diskPool" title="You must give a disk pool. xCAT relies on DirMaint to allocate minidisks out of a pool of DASD volumes. These DASD volume pools are defined in the EXTENT CONTROL file."/>').autocomplete(diskPools.split(','));
poolDiv.append(poolLabel);
poolDiv.append(poolInput);
cloneForm.append(poolDiv);
cloneForm.append('<div><label>Disk password:</label><input type="password" id="diskPw" name="diskPw"/></div>');
cloneForm.append('<div><label>Disk password:</label><input type="password" id="diskPw" name="diskPw" title="The password that will be used for accessing the disk. This input is optional."/></div>');
// Generate tooltips
cloneForm.find('div input[title]').tooltip({
position: "center right", // Place tooltip on the right edge
offset: [-2, 10], // A little tweaking of the position
effect: "fade", // Use the built-in fadeIn/fadeOut effect
opacity: 0.7 // Custom opacity setting
});
/**
* Clone node
*/
@@ -915,7 +923,7 @@ zvmPlugin.prototype.addNode = function() {
addNodeForm.append('<div><label for="userId">User ID range:</label><input type="text" id="userId" name="userId"/></div>');
addNodeForm.append('<div><label for="hcp">Hardware control point:</label><input type="text" id="hcp" name="hcp"/></div>');
addNodeForm.append('<div><label for="group">Group:</label><input type="text" id="group" name="group"/></div>');
// Open form as a dialog
addNodeForm.dialog({
modal: true,

18
xCAT-UI/js/jquery/tooltip.min.js vendored Normal file
View File

@@ -0,0 +1,18 @@
/*
jQuery Tools 1.2.5 Tooltip - UI essentials
NO COPYRIGHTS OR LICENSES. DO WHAT YOU LIKE.
http://flowplayer.org/tools/tooltip/
Since: November 2008
Date: Wed Sep 22 06:02:10 2010 +0000
*/
(function(f){function p(a,b,c){var h=c.relative?a.position().top:a.offset().top,d=c.relative?a.position().left:a.offset().left,i=c.position[0];h-=b.outerHeight()-c.offset[0];d+=a.outerWidth()+c.offset[1];if(/iPad/i.test(navigator.userAgent))h-=f(window).scrollTop();var j=b.outerHeight()+a.outerHeight();if(i=="center")h+=j/2;if(i=="bottom")h+=j;i=c.position[1];a=b.outerWidth()+a.outerWidth();if(i=="center")d-=a/2;if(i=="left")d-=a;return{top:h,left:d}}function u(a,b){var c=this,h=a.add(c),d,i=0,j=
0,m=a.attr("title"),q=a.attr("data-tooltip"),r=o[b.effect],l,s=a.is(":input"),v=s&&a.is(":checkbox, :radio, select, :button, :submit"),t=a.attr("type"),k=b.events[t]||b.events[s?v?"widget":"input":"def"];if(!r)throw'Nonexistent effect "'+b.effect+'"';k=k.split(/,\s*/);if(k.length!=2)throw"Tooltip: bad events configuration for "+t;a.bind(k[0],function(e){clearTimeout(i);if(b.predelay)j=setTimeout(function(){c.show(e)},b.predelay);else c.show(e)}).bind(k[1],function(e){clearTimeout(j);if(b.delay)i=
setTimeout(function(){c.hide(e)},b.delay);else c.hide(e)});if(m&&b.cancelDefault){a.removeAttr("title");a.data("title",m)}f.extend(c,{show:function(e){if(!d){if(q)d=f(q);else if(b.tip)d=f(b.tip).eq(0);else if(m)d=f(b.layout).addClass(b.tipClass).appendTo(document.body).hide().append(m);else{d=a.next();d.length||(d=a.parent().next())}if(!d.length)throw"Cannot find tooltip for "+a;}if(c.isShown())return c;d.stop(true,true);var g=p(a,d,b);b.tip&&d.html(a.data("title"));e=e||f.Event();e.type="onBeforeShow";
h.trigger(e,[g]);if(e.isDefaultPrevented())return c;g=p(a,d,b);d.css({position:"absolute",top:g.top,left:g.left});l=true;r[0].call(c,function(){e.type="onShow";l="full";h.trigger(e)});g=b.events.tooltip.split(/,\s*/);if(!d.data("__set")){d.bind(g[0],function(){clearTimeout(i);clearTimeout(j)});g[1]&&!a.is("input:not(:checkbox, :radio), textarea")&&d.bind(g[1],function(n){n.relatedTarget!=a[0]&&a.trigger(k[1].split(" ")[0])});d.data("__set",true)}return c},hide:function(e){if(!d||!c.isShown())return c;
e=e||f.Event();e.type="onBeforeHide";h.trigger(e);if(!e.isDefaultPrevented()){l=false;o[b.effect][1].call(c,function(){e.type="onHide";h.trigger(e)});return c}},isShown:function(e){return e?l=="full":l},getConf:function(){return b},getTip:function(){return d},getTrigger:function(){return a}});f.each("onHide,onBeforeShow,onShow,onBeforeHide".split(","),function(e,g){f.isFunction(b[g])&&f(c).bind(g,b[g]);c[g]=function(n){n&&f(c).bind(g,n);return c}})}f.tools=f.tools||{version:"1.2.5"};f.tools.tooltip=
{conf:{effect:"toggle",fadeOutSpeed:"fast",predelay:0,delay:30,opacity:1,tip:0,position:["top","center"],offset:[0,0],relative:false,cancelDefault:true,events:{def:"mouseenter,mouseleave",input:"focus,blur",widget:"focus mouseenter,blur mouseleave",tooltip:"mouseenter,mouseleave"},layout:"<div/>",tipClass:"tooltip"},addEffect:function(a,b,c){o[a]=[b,c]}};var o={toggle:[function(a){var b=this.getConf(),c=this.getTip();b=b.opacity;b<1&&c.css({opacity:b});c.show();a.call()},function(a){this.getTip().hide();
a.call()}],fade:[function(a){var b=this.getConf();this.getTip().fadeTo(b.fadeInSpeed,b.opacity,a)},function(a){this.getTip().fadeOut(this.getConf().fadeOutSpeed,a)}]};f.fn.tooltip=function(a){var b=this.data("tooltip");if(b)return b;a=f.extend(true,{},f.tools.tooltip.conf,a);if(typeof a.position=="string")a.position=a.position.split(/,?\s/);this.each(function(){b=new u(f(this),a);f(this).data("tooltip",b)});return a.api?b:this}})(jQuery);

35
xCAT-UI/js/nodes/nodes.js
View File

@@ -152,7 +152,7 @@ function loadGroups(data) {
});
// Create link to add nodes
var addNodeLink = $('<a>Add node</a>');
var addNodeLink = $('<a title="Add a node or a node range to xCAT">Add node</a>');
addNodeLink.bind('click', function(event) {
var info = createInfoBar('Select the hardware management for the new node range');
var addNodeForm = $('<div class="form"></div>');
@@ -209,6 +209,15 @@ function loadGroups(data) {
});
});
// Generate tooltips
addNodeLink.tooltip({
position: "center right", // Place tooltip on the right edge
offset: [-2, 10], // A little tweaking of the position
effect: "fade", // Use the built-in fadeIn/fadeOut effect
opacity: 0.7 // Custom opacity setting
});
$('#groups').append(addNodeLink);
}
@@ -264,7 +273,7 @@ function loadNodes(data) {
sorted.unshift('<input type="checkbox" onclick="selectAllCheckbox(event, $(this))">', 'node',
'<a>ping</a><img src="images/loader.gif"></img>',
'<a>power</a><img src="images/loader.gif"></img>');
// Create a datatable
var dTable = new DataTable('nodesDataTable');
dTable.init(sorted);
@@ -815,9 +824,17 @@ function loadUnlockPage(tgtNodes) {
var infoBar = createInfoBar('Give the root password for this node range to setup its SSH keys');
unlockForm.append(infoBar);
unlockForm.append('<div><label>Target node range:</label><input type="text" id="node" name="node" readonly="readonly" value="' + tgtNodes + '"/></div>');
unlockForm.append('<div><label>Password:</label><input type="password" id="password" name="password"/></div>');
unlockForm.append('<div><label>Target node range:</label><input type="text" id="node" name="node" readonly="readonly" value="' + tgtNodes + '" title="The node or node range to unlock"/></div>');
unlockForm.append('<div><label>Password:</label><input type="password" id="password" name="password" title="The root password to unlock this node"/></div>');
// Generate tooltips
unlockForm.find('div input[title]').tooltip({
position: "center right", // Place tooltip on the right edge
offset: [-2, 10], // A little tweaking of the position
effect: "fade", // Use the built-in fadeIn/fadeOut effect
opacity: 0.7 // Custom opacity setting
});
/**
* Ok
*/
@@ -901,7 +918,7 @@ function loadScriptPage(tgtNodes) {
scriptForm.append(infoBar);
// Target node or group
var tgt = $('<div><label for="target">Target node range:</label><input type="text" name="target" value="' + tgtNodes + '"/></div>');
var tgt = $('<div><label for="target">Target node range:</label><input type="text" name="target" value="' + tgtNodes + '" title="The node or node range to run a given script against"/></div>');
scriptForm.append(tgt);
// Upload file
@@ -913,6 +930,14 @@ function loadScriptPage(tgtNodes) {
upload.append(file);
upload.append(subBtn);
scriptForm.append(upload);
// Generate tooltips
scriptForm.find('div input[title]').tooltip({
position: "center right", // Place tooltip on the right edge
offset: [-2, 10], // A little tweaking of the position
effect: "fade", // Use the built-in fadeIn/fadeOut effect
opacity: 0.7 // Custom opacity setting
});
// Script
var script = $('<div><label>Script:</label><textarea/>');

16
xCAT-UI/js/nodes/nodeset.js
View File

@@ -50,7 +50,7 @@ function loadNodesetPage(tgtNodes) {
nodesetForm.append(infoBar);
// Create target node or group
var tgt = $('<div><label for="target">Target node range:</label><input type="text" name="target" value="' + tgtNodes + '"/></div>');
var tgt = $('<div><label for="target">Target node range:</label><input type="text" name="target" value="' + tgtNodes + '" title="The node or node range to set the boot state for"/></div>');
nodesetForm.append(tgt);
// Create boot method drop down
@@ -82,7 +82,7 @@ function loadNodesetPage(tgtNodes) {
// Create operating system input
var os = $('<div></div>');
var osLabel = $('<label for="os">Operating system:</label>');
var osInput = $('<input type="text" name="os"/>');
var osInput = $('<input type="text" name="os" title="You must give the operating system of this node or node range, e.g. rhel5.5"/>');
osInput.one('focus', function(){
var tmp = $.cookie('OSVers');
if (tmp) {
@@ -97,7 +97,7 @@ function loadNodesetPage(tgtNodes) {
// Create architecture input
var arch = $('<div></div>');
var archLabel = $('<label for="arch">Architecture:</label>');
var archInput = $('<input type="text" name="arch"/>');
var archInput = $('<input type="text" name="arch" title="You must give the architecture of this node or node range, e.g. s390x"/>');
archInput.one('focus', function(){
var tmp = $.cookie('OSArchs');
if (tmp) {
@@ -112,7 +112,7 @@ function loadNodesetPage(tgtNodes) {
// Create profiles input
var profile = $('<div></div>');
var profileLabel = $('<label for="profile">Profile:</label>');
var profileInput = $('<input type="text" name="profile"/>');
var profileInput = $('<input type="text" name="profile" title="You must give the profile for this node or node range. The typical default profile is: compute."/>');
profileInput.one('focus', function(){
tmp = $.cookie('Profiles');
if (tmp) {
@@ -124,6 +124,14 @@ function loadNodesetPage(tgtNodes) {
profile.append(profileInput);
nodesetForm.append(profile);
// Generate tooltips
nodesetForm.find('div input[title]').tooltip({
position: "center right", // Place tooltip on the right edge
offset: [-2, 10], // A little tweaking of the position
effect: "fade", // Use the built-in fadeIn/fadeOut effect
opacity: 0.7 // Custom opacity setting
});
/**
* Ok
*/

12
xCAT-UI/js/nodes/rnetboot.js
View File

@@ -47,7 +47,7 @@ function loadNetbootPage(tgtNodes) {
netbootForm.append(infoBar);
// Create target node or group input
var target = $('<div><label for="target">Target node range:</label><input type="text" name="target" value="' + tgtNodes + '"/></div>');
var target = $('<div><label for="target">Target node range:</label><input type="text" name="target" value="' + tgtNodes + '" title="The node or node range to boot to network"/></div>');
netbootForm.append(target);
// Create options
@@ -94,11 +94,19 @@ function loadNetbootPage(tgtNodes) {
// If it is zvm
if (mgt == 'zvm') {
// Add IPL input
netbootForm.append('<div><label for="ipl">IPL:</label><input type="text" name="ipl"/></div>');
netbootForm.append('<div><label for="ipl">IPL:</label><input type="text" name="ipl" title="The virtual address to IPL"/></div>');
break;
}
}
// Generate tooltips
netbootForm.find('div input[title]').tooltip({
position: "center right", // Place tooltip on the right edge
offset: [-2, 10], // A little tweaking of the position
effect: "fade", // Use the built-in fadeIn/fadeOut effect
opacity: 0.7 // Custom opacity setting
});
/**
* Ok
*/

16
xCAT-UI/js/nodes/updatenode.js
View File

@@ -61,7 +61,7 @@ function loadUpdatenodePage(tgtNodes) {
updatenodeForm.append(infoBar);
// Create target node or group input
var target = $('<div><label for="target">Target node range:</label><input type="text" name="target" value="' + tgtNodes + '"/></div>');
var target = $('<div><label for="target">Target node range:</label><input type="text" name="target" value="' + tgtNodes + '" title="The node or node range to update"/></div>');
updatenodeForm.append(target);
// Create options
@@ -101,7 +101,7 @@ function loadUpdatenodePage(tgtNodes) {
updateOpt.append('Update existing software');
// Create source directory input
var scrDirectory = $('<li><label for="srcDirectory">Source directory:</label><input type="text" name="srcDirectory"/></li>');
var scrDirectory = $('<li><label for="srcDirectory">Source directory:</label><input type="text" name="srcDirectory" title="You must give the source directory containing the updated software packages"/></li>');
scrDirectory.hide();
optsList.append(scrDirectory);
@@ -152,7 +152,7 @@ function loadUpdatenodePage(tgtNodes) {
optsList.append(postOpt);
postOpt.append(postChkBox);
postOpt.append('Run postscripts');
var postscripts = $('<li><label for="postscripts">Postscripts:</label><input type="text" name="postscripts"/></li>');
var postscripts = $('<li><label for="postscripts">Postscripts:</label><input type="text" name="postscripts" title="You must give the postscript(s) to run"/></li>');
postscripts.hide();
optsList.append(postscripts);
@@ -177,7 +177,7 @@ function loadUpdatenodePage(tgtNodes) {
var os = $('<li></li>').hide();
var osLabel = $('<label for="os">Operating system:</label>');
var osInput = $('<input type="text" name="os"/>');
var osInput = $('<input type="text" name="os" title="You must give the operating system to upgrade to, e.g. rhel5.5"/>');
osInput.one('focus', function(){
var tmp = $.cookie('OSVers');
if (tmp) {
@@ -199,6 +199,14 @@ function loadUpdatenodePage(tgtNodes) {
});
}
// Generate tooltips
updatenodeForm.find('div input[title]').tooltip({
position: "center right", // Place tooltip on the right edge
offset: [-2, 10], // A little tweaking of the position
effect: "fade", // Use the built-in fadeIn/fadeOut effect
opacity: 0.7 // Custom opacity setting
});
/**
* Ok
*/

5
xCAT-UI/js/ui.js
View File

@@ -414,7 +414,7 @@ function createMenu(items) {
* @return Nothing
*/
function initPage() {
// Load javascripts
// JQuery plugins
includeJs("js/jquery/jquery.dataTables.min.js");
includeJs("js/jquery/jquery.form.js");
includeJs("js/jquery/jquery.jeditable.js");
@@ -425,6 +425,9 @@ function initPage() {
includeJs("js/jquery/hoverIntent.js");
includeJs("js/jquery/jquery.tree.js");
includeJs("js/jquery/jquery.flot.js");
includeJs("js/jquery/tooltip.min.js");
// Page plugins
includeJs("js/configure/configure.js");
includeJs("js/monitor/monitor.js");
includeJs("js/nodes/nodes.js");