From 6c4d075bd656497e793c230818c53fa085cbbbf9 Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <JanCBorchardt@fsfe.org>
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(^!<OxN~}=bp>!{tpZahs2_Vhcqge%%<}R4Irn{
zs`ZM^YPa03_X`e-$K<m4j83c9?6&(2kIU!uy8VvN>-YS={|^`_I7nD%c!-#&xX9S(
z_y`#(IZ0V*d5M{+xyjk-`3V{-I!an<dWxE=y2{$>`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@<K
zsZ^_4y^1xf)~#H-di@GEtk|(+%bGolHm%yVY}>kh3pcLZxpeE=y^A-m-o1SL`uz(y
zu;9Uj3mZO+II-fzj2k<C3^}so$&@QwzKl7u=FOZtd;SbMwCK^KOPfB8I<@N6tXsQ&
z4Li2%*|clhzKuJ#?%lk5`~D3)xbWe`iyJ?VJh}4a%$qxZ4n4Z`>C~%Rzm7e-_U+ue
zd;bnTy!i3t%bP!sKE3+&?AyD44?n*A`Sk1CzmGq^{{8&>`~UwBV1SBoz#oALyilNl
z2K11ifk`yT0TmEN$l!htN`at-87`<`ej6UpA$}nWNMea5o`_<KDz3<4i!QzhV~jG+
zNMnsQ-iTw4I_}70k3RkgWROA*No0{m9*Ja<N-oJ{lTJPfWt37*NoAE*UWsLvT5ic@
zmtKAeW|(4*NoJX5o{46fYOcv<n{K`dXPk1*NoSpQ-ic?PdhW?*pML%cXrO`)N@$^m
z9*St9iZ04%qmDibX{3@)N@=B*UW#d^nr_Nzr=ETaYN(=)N@}U5o{DO!s;<gvtFFEZ
zYpk-)N^7mQ-im9ky6(zrufF~YY_P%(OKh>m9*b<U$~rE~Y_rZj3vIO0PD^dI)?SNk
tw%TsXZMWWj3vRgLj!SO2=AMggy6UdWu76WpIN^sAl31aDBNkKu06PSIzj*)v
literal 0
HcmV?d00001
diff --git a/core/js/jquery-showpassword.js b/core/js/jquery-showpassword.js
new file mode 100644
index 00000000000..0f4678327a3
--- /dev/null
+++ b/core/js/jquery-showpassword.js
@@ -0,0 +1,113 @@
+/*
+* @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 = $("<input />");
+
+ // 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 = $('<div class="tipsy"><div class="tipsy-inner"/></div>');
+ 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 = $("<input />");
-
- // 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 @@
<input type="hidden" class="max_human_file_size" value="(max <?php echo $_['uploadMaxHumanFilesize']; ?>)">
<input type="hidden" name="dir" value="<?php echo $_['dir'] ?>" id="dir">
<div class="file_upload_wrapper" class="svg">
- <input type="submit" class="file_upload_filename" value="<?php echo $l->t('Upload');
- if($_['uploadMaxFilesize']<(10000000000)){echo ' (max. '.$_['uploadMaxHumanFilesize'].')';}?>"/>
+ <input type="submit" class="file_upload_filename" value="<?php echo $l->t('Upload'); ?>"/>
<input id="file_upload_start" class="file_upload_start" type="file" name='files[]'/>
- <a href="#" id="file_upload_button_wrapper" onclick="return false;"></a>
+ <a href="#" id="file_upload_button_wrapper" onclick="return false;" title="<?php echo 'max. '.$_['uploadMaxHumanFilesize'] ?>"></a>
</div>
<iframe name="file_upload_target_1" class='file_upload_target' src=""></iframe>
</form>
@@ -33,8 +32,8 @@
<!--<a href="" title="" class="share">Share</a>-->
</span>
</th>
- <th id='headerSize'><?php echo $l->t( 'Size MB' ); ?></th>
- <th id='headerDate'><span id="modified"><?php echo $l->t( 'Modified' ); ?></span><span class='selectedActions'><a href="" title="Delete" class="delete"><img class='svg' alt="<?php echo $l->t('Delete')?>" src="../core/img/actions/delete.svg" /></a></span></th>
+ <th id="headerSize"><?php echo $l->t( 'Size' ); ?></th>
+ <th id="headerDate"><span id="modified"><?php echo $l->t( 'Modified' ); ?></span><span class="selectedActions"><a href="" title="Delete" class="delete"><img class="svg" alt="<?php echo $l->t('Delete')?>" src="../core/img/actions/delete.svg" /></a></span></th>
</tr>
</thead>
<tbody id="fileList">
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
--
GitLab