From 6c4d075bd656497e793c230818c53fa085cbbbf9 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Fri, 12 Aug 2011 11:26:13 +0200 Subject: [PATCH] added jquery-tipsy for nice title tooltips --- core/css/jquery-tipsy.css | 7 ++ core/img/jquery-tipsy.gif | Bin 0 -> 867 bytes core/js/jquery-showpassword.js | 113 ++++++++++++++++++++++++++++++ core/js/jquery-tipsy.js | 108 +++++++++++++++++++++++++++++ core/js/js.js | 121 ++------------------------------- files/css/files.css | 2 +- files/js/files.js | 4 ++ files/templates/index.php | 9 ++- lib/base.php | 5 +- 9 files changed, 246 insertions(+), 123 deletions(-) create mode 100644 core/css/jquery-tipsy.css create mode 100644 core/img/jquery-tipsy.gif create mode 100644 core/js/jquery-showpassword.js create mode 100644 core/js/jquery-tipsy.js diff --git a/core/css/jquery-tipsy.css b/core/css/jquery-tipsy.css new file mode 100644 index 00000000000..5075f41c9f6 --- /dev/null +++ b/core/css/jquery-tipsy.css @@ -0,0 +1,7 @@ +.tipsy { padding: 5px; font-size: 10px; opacity: 0.8; filter: alpha(opacity=80); background-repeat: no-repeat; background-image: url(../img/jquery-tipsy.gif); } + .tipsy-inner { padding: 5px 8px 4px 8px; background-color: black; color: white; max-width: 200px; text-align: center; } + .tipsy-inner { -moz-border-radius:3px; -webkit-border-radius:3px; } + .tipsy-north { background-position: top center; } + .tipsy-south { background-position: bottom center; } + .tipsy-east { background-position: right center; } + .tipsy-west { background-position: left center; } diff --git a/core/img/jquery-tipsy.gif b/core/img/jquery-tipsy.gif new file mode 100644 index 0000000000000000000000000000000000000000..eb7718dfc168c3c63382c36c55e0fc3ab53974c1 GIT binary patch literal 867 zcmV-p1DyOvNk%w1Vf6v^0e}Gj00030|NkNR1OWg50RSuj0002>0rdd@0{@JUsmtvT zqnxzbi}MA#`wxcVNS5Y_rs^63E(^!!{tpZahs2_Vhcqge%%<}R4Irn{ zs`ZM^YPa03_X`e-$K-YS={|^`_I7nD%c!-#&xX9S( z_y`#(IZ0V*d5M{+xyjk-`3V{-I!an`U)E>J4;(@dyAW^yUW|_`wJW_ zJWO0{e2ko|yv*F}{0to}JxyJ0eT|*1z0KY2{S6*2K2Bb4evY25zRuq6{th26KTlt8 ze~+K9zt7+A{|_*rz<~q{8a#+Fp~8g>8#;UlF`~qY6f0W1h%uwajsF}wdi)47q{xvZ zOPV~1GNsCuEL*yK2{We5nKWzKyoocX&Ye7a`uqtrsL-KAiyA$OG^x_1Oq)7=3N@kh3pcLZxpeE=y^A-m-o1SL`uz(y zu;9Uj3mZO+II-fzj2kC~%Rzm7e-_U+ue zd;bnTy!i3t%bP!sKE3+&?AyD44?n*A`Sk1CzmGq^{{8&>`~UwBV1SBoz#oALyilNl z2K11ifk`yT0TmEN$l!htN`at-87`<`ej6UpA$}nWNMea5o`_m9*b"); + + // Name added for JQuery Validation compatibility + // Element name is required to avoid script warning. + $clone.attr({ + 'type' : 'text', + 'class' : $element.attr('class'), + 'style' : $element.attr('style'), + 'size' : $element.attr('size'), + 'name' : $element.attr('name')+'-clone', + 'tabindex' : $element.attr('tabindex') + }); + + return $clone; + + }; + + // Transfers values between two elements + var update = function(a,b){ + b.val(a.val()); + }; + + // Shows a or b depending on checkbox + var setState = function( checkbox, a, b ){ + + if(checkbox.is(':checked')){ + update(a,b); + b.show(); + a.hide(); + } else { + update(b,a); + b.hide(); + a.show(); + } + + }; + + return this.each(function() { + + var $input = $(this), + $checkbox = $($input.data('typetoggle')); + + // Create clone + var $clone = cloneElement($input); + $clone.insertAfter($input); + + // Set callback arguments + if(callback.fn){ + callback.args.input = $input; + callback.args.checkbox = $checkbox; + callback.args.clone = $clone; + } + + + + $checkbox.bind('click', function() { + setState( $checkbox, $input, $clone ); + }); + + $input.bind('keyup', function() { + update( $input, $clone ) + }); + + $clone.bind('keyup', function(){ + update( $clone, $input ); + + // Added for JQuery Validation compatibility + // This will trigger validation if it's ON for keyup event + $input.trigger('keyup'); + + }); + + // Added for JQuery Validation compatibility + // This will trigger validation if it's ON for blur event + $clone.bind('blur', function() { $input.trigger('focusout'); }); + + setState( $checkbox, $input, $clone ); + + if( callback.fn ){ + callback.fn( callback.args ); + } + + }); + } + }); +})(jQuery); diff --git a/core/js/jquery-tipsy.js b/core/js/jquery-tipsy.js new file mode 100644 index 00000000000..58d834771ff --- /dev/null +++ b/core/js/jquery-tipsy.js @@ -0,0 +1,108 @@ +// tipsy - Facebook-style tooltip plugin for jQuery +// (c) 2008-2009 Jason Frame (jason@onehackoranother.com) +// Released under The MIT License. + +(function($) { + $.fn.tipsy = function(options) { + + options = $.extend({}, $.fn.tipsy.defaults, options); + + return this.each(function() { + + var opts = $.fn.tipsy.elementOptions(this, options); + + $(this).hover(function() { + + $.data(this, 'cancel.tipsy', true); + + var tip = $.data(this, 'active.tipsy'); + if (!tip) { + tip = $('
'); + tip.css({position: 'absolute', zIndex: 100000}); + $.data(this, 'active.tipsy', tip); + } + + if ($(this).attr('title') || typeof($(this).attr('original-title')) != 'string') { + $(this).attr('original-title', $(this).attr('title') || '').removeAttr('title'); + } + + var title; + if (typeof opts.title == 'string') { + title = $(this).attr(opts.title == 'title' ? 'original-title' : opts.title); + } else if (typeof opts.title == 'function') { + title = opts.title.call(this); + } + + tip.find('.tipsy-inner')[opts.html ? 'html' : 'text'](title || opts.fallback); + + var pos = $.extend({}, $(this).offset(), {width: this.offsetWidth, height: this.offsetHeight}); + tip.get(0).className = 'tipsy'; // reset classname in case of dynamic gravity + tip.remove().css({top: 0, left: 0, visibility: 'hidden', display: 'block'}).appendTo(document.body); + var actualWidth = tip[0].offsetWidth, actualHeight = tip[0].offsetHeight; + var gravity = (typeof opts.gravity == 'function') ? opts.gravity.call(this) : opts.gravity; + + switch (gravity.charAt(0)) { + case 'n': + tip.css({top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2}).addClass('tipsy-north'); + break; + case 's': + tip.css({top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2}).addClass('tipsy-south'); + break; + case 'e': + tip.css({top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth}).addClass('tipsy-east'); + break; + case 'w': + tip.css({top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width}).addClass('tipsy-west'); + break; + } + + if (opts.fade) { + tip.css({opacity: 0, display: 'block', visibility: 'visible'}).animate({opacity: 0.8}); + } else { + tip.css({visibility: 'visible'}); + } + + }, function() { + $.data(this, 'cancel.tipsy', false); + var self = this; + setTimeout(function() { + if ($.data(this, 'cancel.tipsy')) return; + var tip = $.data(self, 'active.tipsy'); + if (opts.fade) { + tip.stop().fadeOut(function() { $(this).remove(); }); + } else { + tip.remove(); + } + }, 100); + + }); + + }); + + }; + + // Overwrite this method to provide options on a per-element basis. + // For example, you could store the gravity in a 'tipsy-gravity' attribute: + // return $.extend({}, options, {gravity: $(ele).attr('tipsy-gravity') || 'n' }); + // (remember - do not modify 'options' in place!) + $.fn.tipsy.elementOptions = function(ele, options) { + return $.metadata ? $.extend({}, options, $(ele).metadata()) : options; + }; + + $.fn.tipsy.defaults = { + fade: false, + fallback: '', + gravity: 'n', + html: false, + title: 'title' + }; + + $.fn.tipsy.autoNS = function() { + return $(this).offset().top > ($(document).scrollTop() + $(window).height() / 2) ? 's' : 'n'; + }; + + $.fn.tipsy.autoWE = function() { + return $(this).offset().left > ($(document).scrollLeft() + $(window).width() / 2) ? 'e' : 'w'; + }; + +})(jQuery); diff --git a/core/js/js.js b/core/js/js.js index 30cf01d0b22..b66f0a559dd 100644 --- a/core/js/js.js +++ b/core/js/js.js @@ -288,7 +288,11 @@ $(document).ready(function(){ }); $('#settings #expand').hover(function(){ $('#settings #expand+span').fadeToggle(); - }) + }); + + $('a.file_action').tipsy({gravity:'s', live:true}); + $('.selectedActions a').tipsy({gravity:'n', live:true}); + $('.selectedActions a.delete').tipsy({gravity: 'ne', live:true}); }); if (!Array.prototype.map){ @@ -314,118 +318,3 @@ if (!Array.prototype.map){ return res; }; } - - -/* -* @name Show Password -* @descripton -* @version 1.3 -* @requires Jquery 1.5 -* -* @author Jan Jarfalk -* @author-email jan.jarfalk@unwrongest.com -* @author-website http://www.unwrongest.com -* -* @special-thanks Michel Gratton -* -* @licens MIT License - http://www.opensource.org/licenses/mit-license.php -*/ -(function($){ - $.fn.extend({ - showPassword: function(c) { - - // Setup callback object - var callback = {'fn':null,'args':{}} - callback.fn = c; - - // Clones passwords and turn the clones into text inputs - var cloneElement = function( element ) { - - var $element = $(element); - - $clone = $(""); - - // Name added for JQuery Validation compatibility - // Element name is required to avoid script warning. - $clone.attr({ - 'type' : 'text', - 'class' : $element.attr('class'), - 'style' : $element.attr('style'), - 'size' : $element.attr('size'), - 'name' : $element.attr('name')+'-clone', - 'tabindex' : $element.attr('tabindex') - }); - - return $clone; - - }; - - // Transfers values between two elements - var update = function(a,b){ - b.val(a.val()); - }; - - // Shows a or b depending on checkbox - var setState = function( checkbox, a, b ){ - - if(checkbox.is(':checked')){ - update(a,b); - b.show(); - a.hide(); - } else { - update(b,a); - b.hide(); - a.show(); - } - - }; - - return this.each(function() { - - var $input = $(this), - $checkbox = $($input.data('typetoggle')); - - // Create clone - var $clone = cloneElement($input); - $clone.insertAfter($input); - - // Set callback arguments - if(callback.fn){ - callback.args.input = $input; - callback.args.checkbox = $checkbox; - callback.args.clone = $clone; - } - - - - $checkbox.bind('click', function() { - setState( $checkbox, $input, $clone ); - }); - - $input.bind('keyup', function() { - update( $input, $clone ) - }); - - $clone.bind('keyup', function(){ - update( $clone, $input ); - - // Added for JQuery Validation compatibility - // This will trigger validation if it's ON for keyup event - $input.trigger('keyup'); - - }); - - // Added for JQuery Validation compatibility - // This will trigger validation if it's ON for blur event - $clone.bind('blur', function() { $input.trigger('focusout'); }); - - setState( $checkbox, $input, $clone ); - - if( callback.fn ){ - callback.fn( callback.args ); - } - - }); - } - }); -})(jQuery); diff --git a/files/css/files.css b/files/css/files.css index c856d3a6bdd..2ff985cfc3b 100644 --- a/files/css/files.css +++ b/files/css/files.css @@ -39,7 +39,7 @@ table th .name { float:left; margin-left:.5em; } table th.multiselect { background:#ddd; color:#000; font-weight:bold; } table th, table td { border-bottom:1px solid #ddd; text-align:left; font-weight:normal; } table td { border-bottom:1px solid #eee; font-style:normal; background-position:1em .5em; background-repeat:no-repeat; } -table th#headerSize, table td.filesize { width:5em; padding:0 1em; text-align:right; } +table th#headerSize, table td.filesize { width:3em; padding:0 1em; text-align:right; } table th#headerDate, table td.date { width:11em; padding:0 .1em 0 1em; text-align:left; } table td.selection, table th.selection, table td.fileaction { width:2em; text-align:center; } table td.filename a.name { display:block; height:1.5em; vertical-align:middle; margin-left:3em; } diff --git a/files/js/files.js b/files/js/files.js index 6af021c35bc..8fd4b95ec7b 100644 --- a/files/js/files.js +++ b/files/js/files.js @@ -17,6 +17,10 @@ $(document).ready(function() { $('#file_upload_start').trigger('click'); return false; }); + + $('#file_upload_button_wrapper').tipsy({gravity:'e'}); + $('td.filesize').tipsy({gravity:'se', live:true}); + $('td .modified').tipsy({gravity:'s', live:true}); // Sets the file-action buttons behaviour : $('tr').live('mouseenter',function(event) { diff --git a/files/templates/index.php b/files/templates/index.php index a2cf037c756..7ebb6e46949 100644 --- a/files/templates/index.php +++ b/files/templates/index.php @@ -6,10 +6,9 @@
- + - +
@@ -33,8 +32,8 @@ - t( 'Size MB' ); ?> - t( 'Modified' ); ?><?php echo $l->t('Delete')?> + t( 'Size' ); ?> + t( 'Modified' ); ?><?php echo $l->t('Delete')?> diff --git a/lib/base.php b/lib/base.php index 2e735514347..dc3ed4129cd 100644 --- a/lib/base.php +++ b/lib/base.php @@ -148,12 +148,15 @@ OC_Group::setBackend( OC_Config::getValue( "groupbackend", "database" )); // Add the stuff we need always OC_Util::addScript( "jquery-1.6.2.min" ); OC_Util::addScript( "jquery-ui-1.8.14.custom.min" ); +OC_Util::addScript( "jquery-showpassword" ); +OC_Util::addScript( "jquery-tipsy" ); OC_Util::addScript( "js" ); OC_Util::addScript( "multiselect" ); OC_Util::addScript('search','result'); -OC_Util::addStyle( "jquery-ui-1.8.14.custom" ); OC_Util::addStyle( "styles" ); OC_Util::addStyle( "multiselect" ); +OC_Util::addStyle( "jquery-ui-1.8.14.custom" ); +OC_Util::addStyle( "jquery-tipsy" ); // Load Apps // This includes plugins for users and filesystems as well