diff --git a/xCAT-UI/css/style.css b/xCAT-UI/css/style.css index 2dfdd2895..1ffd880e4 100644 --- a/xCAT-UI/css/style.css +++ b/xCAT-UI/css/style.css @@ -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; } \ No newline at end of file diff --git a/xCAT-UI/js/custom/zvm.js b/xCAT-UI/js/custom/zvm.js index fa7566e07..0df69a000 100644 --- a/xCAT-UI/js/custom/zvm.js +++ b/xCAT-UI/js/custom/zvm.js @@ -59,15 +59,15 @@ zvmPlugin.prototype.loadClonePage = function(node) { var cloneForm = $('
'); cloneForm.append(statBar); cloneForm.append(infoBar); - cloneForm.append('
'); - cloneForm.append('
'); - cloneForm.append('
'); - cloneForm.append('
'); + cloneForm.append('
'); + cloneForm.append('
'); + cloneForm.append('
'); + cloneForm.append('
'); // Create group input var group = $('
'); var groupLabel = $(''); - var groupInput = $(''); + var groupInput = $(''); 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 = $('
'); var poolLabel = $(''); - var poolInput = $('').autocomplete(diskPools.split(',')); + var poolInput = $('').autocomplete(diskPools.split(',')); poolDiv.append(poolLabel); poolDiv.append(poolInput); cloneForm.append(poolDiv); - cloneForm.append('
'); + cloneForm.append('
'); + // 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('
'); addNodeForm.append('
'); addNodeForm.append('
'); - + // Open form as a dialog addNodeForm.dialog({ modal: true, diff --git a/xCAT-UI/js/jquery/tooltip.min.js b/xCAT-UI/js/jquery/tooltip.min.js new file mode 100644 index 000000000..370a39eba --- /dev/null +++ b/xCAT-UI/js/jquery/tooltip.min.js @@ -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:"
",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); diff --git a/xCAT-UI/js/nodes/nodes.js b/xCAT-UI/js/nodes/nodes.js index f03707241..ed5896b2c 100644 --- a/xCAT-UI/js/nodes/nodes.js +++ b/xCAT-UI/js/nodes/nodes.js @@ -152,7 +152,7 @@ function loadGroups(data) { }); // Create link to add nodes - var addNodeLink = $('Add node'); + var addNodeLink = $('Add node'); addNodeLink.bind('click', function(event) { var info = createInfoBar('Select the hardware management for the new node range'); var addNodeForm = $('
'); @@ -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('', 'node', 'ping', 'power'); - + // 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('
'); - unlockForm.append('
'); + unlockForm.append('
'); + unlockForm.append('
'); + // 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 = $('
'); + var tgt = $('
'); 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 = $('