diff --git a/apps/files/js/files.js b/apps/files/js/files.js index 1b498769dd..034045ee40 100644 --- a/apps/files/js/files.js +++ b/apps/files/js/files.js @@ -61,7 +61,7 @@ if (response.data !== undefined && response.data.uploadMaxFilesize !== undefined) { $('#max_upload').val(response.data.uploadMaxFilesize); $('#free_space').val(response.data.freeSpace); - $('#upload.button').attr('original-title', response.data.maxHumanFilesize); + $('#upload.button').attr('data-original-title', response.data.maxHumanFilesize); $('#usedSpacePercent').val(response.data.usedSpacePercent); $('#owner').val(response.data.owner); $('#ownerDisplayName').val(response.data.ownerDisplayName); @@ -72,7 +72,7 @@ } if (response[0].uploadMaxFilesize !== undefined) { $('#max_upload').val(response[0].uploadMaxFilesize); - $('#upload.button').attr('original-title', response[0].maxHumanFilesize); + $('#upload.button').attr('data-original-title', response[0].maxHumanFilesize); $('#usedSpacePercent').val(response[0].usedSpacePercent); Files.displayStorageWarnings(); } diff --git a/bower.json b/bower.json index a1bfa40f23..1dc737b01e 100644 --- a/bower.json +++ b/bower.json @@ -25,6 +25,7 @@ "zxcvbn": "*", "snapjs": "~2.0.0-rc1", "strengthify": "0.4.1", - "underscore": "~1.6.0" + "underscore": "~1.6.0", + "bootstrap": "~3.3.5" } } diff --git a/core/css/jquery-tipsy.css b/core/css/jquery-tipsy.css deleted file mode 100644 index 957385a269..0000000000 --- a/core/css/jquery-tipsy.css +++ /dev/null @@ -1,25 +0,0 @@ -.tipsy { font-size:10px; position:absolute; padding:5px; z-index:100000; } -.tipsy-inner { background-color:#000; color:#FFF; max-width:200px; padding:5px 8px 4px 8px; text-align:center; } - -/* Rounded corners */ -.tipsy-inner { border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; } - -/* Uncomment for shadow */ -/*.tipsy-inner { box-shadow:0 0 5px #000000; -webkit-box-shadow:0 0 5px #000000; -moz-box-shadow:0 0 5px #000000; }*/ - -.tipsy-arrow { position:absolute; width:0; height:0; border:5px solid transparent; } - -/* Rules to colour arrows */ -.tipsy-arrow-n { border-bottom-color:#000; } -.tipsy-arrow-s { border-top-color:#000; } -.tipsy-arrow-e { border-left-color:#000; } -.tipsy-arrow-w { border-right-color:#000; } - -.tipsy-n .tipsy-arrow, .tipsy-nw .tipsy-arrow, .tipsy-ne .tipsy-arrow { top:0; border-top:none; } -.tipsy-s .tipsy-arrow, .tipsy-sw .tipsy-arrow, .tipsy-se .tipsy-arrow { bottom:0; border-bottom:none; } -.tipsy-n .tipsy-arrow, .tipsy-s .tipsy-arrow { left:50%; margin-left:-5px; } -.tipsy-nw .tipsy-arrow, .tipsy-sw .tipsy-arrow { left:10px; } -.tipsy-ne .tipsy-arrow, .tipsy-se .tipsy-arrow { right:10px; } -.tipsy-e .tipsy-arrow, .tipsy-w .tipsy-arrow { top:50%; margin-top:-5px; } -.tipsy-e .tipsy-arrow { right:0; border-right:none; } -.tipsy-w .tipsy-arrow { left:0; border-left:none; } diff --git a/core/css/tooltip.css b/core/css/tooltip.css new file mode 100644 index 0000000000..34d0ec6c70 --- /dev/null +++ b/core/css/tooltip.css @@ -0,0 +1,119 @@ +/*! + * Bootstrap v3.3.5 (http://getbootstrap.com) + * Copyright 2011-2015 Twitter, Inc. + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) + */ +.tooltip { + position: absolute; + z-index: 1070; + display: block; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-style: normal; + font-weight: normal; + letter-spacing: normal; + line-break: auto; + line-height: 1.42857143; + text-align: left; + text-align: start; + text-decoration: none; + text-shadow: none; + text-transform: none; + white-space: normal; + word-break: normal; + word-spacing: normal; + word-wrap: normal; + font-size: 12px; + opacity: 0; + filter: alpha(opacity=0); +} +.tooltip.in { + opacity: 0.9; + filter: alpha(opacity=90); +} +.tooltip.top { + margin-top: -3px; + padding: 5px 0; +} +.tooltip.right { + margin-left: 3px; + padding: 0 5px; +} +.tooltip.bottom { + margin-top: 3px; + padding: 5px 0; +} +.tooltip.left { + margin-left: -3px; + padding: 0 5px; +} +.tooltip-inner { + max-width: 200px; + padding: 3px 8px; + color: #ffffff; + text-align: center; + background-color: #000000; + border-radius: 4px; +} +.tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; +} +.tooltip.top .tooltip-arrow { + bottom: 0; + left: 50%; + margin-left: -5px; + border-width: 5px 5px 0; + border-top-color: #000000; +} +.tooltip.top-left .tooltip-arrow { + bottom: 0; + right: 5px; + margin-bottom: -5px; + border-width: 5px 5px 0; + border-top-color: #000000; +} +.tooltip.top-right .tooltip-arrow { + bottom: 0; + left: 5px; + margin-bottom: -5px; + border-width: 5px 5px 0; + border-top-color: #000000; +} +.tooltip.right .tooltip-arrow { + top: 50%; + left: 0; + margin-top: -5px; + border-width: 5px 5px 5px 0; + border-right-color: #000000; +} +.tooltip.left .tooltip-arrow { + top: 50%; + right: 0; + margin-top: -5px; + border-width: 5px 0 5px 5px; + border-left-color: #000000; +} +.tooltip.bottom .tooltip-arrow { + top: 0; + left: 50%; + margin-left: -5px; + border-width: 0 5px 5px; + border-bottom-color: #000000; +} +.tooltip.bottom-left .tooltip-arrow { + top: 0; + right: 5px; + margin-top: -5px; + border-width: 0 5px 5px; + border-bottom-color: #000000; +} +.tooltip.bottom-right .tooltip-arrow { + top: 0; + left: 5px; + margin-top: -5px; + border-width: 0 5px 5px; + border-bottom-color: #000000; +} diff --git a/core/js/core.json b/core/js/core.json index e75db53455..0f052b798a 100644 --- a/core/js/core.json +++ b/core/js/core.json @@ -6,11 +6,11 @@ "underscore/underscore.js", "moment/min/moment-with-locales.js", "handlebars/handlebars.js", - "blueimp-md5/js/md5.js" + "blueimp-md5/js/md5.js", + "bootstrap/js/tooltip.js" ], "libraries": [ "jquery-showpassword.js", - "jquery-tipsy.js", "jquery.avatar.js", "placeholder.js" ], diff --git a/core/js/jquery-tipsy.js b/core/js/jquery-tipsy.js deleted file mode 100644 index ef4bbfd87a..0000000000 --- a/core/js/jquery-tipsy.js +++ /dev/null @@ -1,242 +0,0 @@ -// tipsy, facebook style tooltips for jquery -// version 1.0.0a -// (c) 2008-2010 jason frame [jason@onehackoranother.com] -// released under the MIT license - -(function($) { - - function maybeCall(thing, ctx) { - return (typeof thing == 'function') ? (thing.call(ctx)) : thing; - }; - - function Tipsy(element, options) { - this.$element = $(element); - this.options = options; - this.enabled = true; - this.fixTitle(); - }; - - Tipsy.prototype = { - show: function() { - var title = this.getTitle(); - if (title && this.enabled) { - var $tip = this.tip(); - - $tip.find('.tipsy-inner')[this.options.html ? 'html' : 'text'](title); - $tip[0].className = 'tipsy'; // reset classname in case of dynamic gravity - $tip.remove().css({top: 0, left: 0, visibility: 'hidden', display: 'block'}).prependTo(document.body); - - var pos = $.extend({}, this.$element.offset(), { - width: this.$element[0].offsetWidth, - height: this.$element[0].offsetHeight - }); - - if (this.options.className) { - $tip.addClass(maybeCall(this.options.className, this.$element[0])); - } - - var actualWidth = $tip[0].offsetWidth, - actualHeight = $tip[0].offsetHeight, - gravity = maybeCall(this.options.gravity, this.$element[0]); - - var tp; - switch (gravity.charAt(0)) { - case 'n': - tp = {top: pos.top + pos.height + this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2}; - break; - case 's': - tp = {top: pos.top - actualHeight - this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2}; - break; - case 'e': - tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth - this.options.offset}; - break; - case 'w': - tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width + this.options.offset}; - break; - } - - if (gravity.length == 2) { - if (gravity.charAt(1) == 'w') { - tp.left = pos.left + pos.width / 2 - 15; - } else { - tp.left = pos.left + pos.width / 2 - actualWidth + 15; - } - } - - $tip.css(tp).addClass('tipsy-' + gravity); - $tip.find('.tipsy-arrow')[0].className = 'tipsy-arrow tipsy-arrow-' + gravity.charAt(0); - - if (this.options.fade) { - $tip.stop().css({opacity: 0, display: 'block', visibility: 'visible'}).animate({opacity: this.options.opacity}); - } else { - $tip.css({visibility: 'visible', opacity: this.options.opacity}); - } - } - }, - - hide: function() { - if (this.options.fade) { - this.tip().stop().fadeOut(function() { $(this).remove(); }); - } else { - this.tip().remove(); - } - }, - - fixTitle: function() { - var $e = this.$element; - if ($e.attr('title') || typeof($e.attr('original-title')) != 'string') { - $e.attr('original-title', $e.attr('title') || '').removeAttr('title'); - } - }, - - getTitle: function() { - var title, $e = this.$element, o = this.options; - this.fixTitle(); - var title, o = this.options; - if (typeof o.title == 'string') { - title = $e.attr(o.title == 'title' ? 'original-title' : o.title); - } else if (typeof o.title == 'function') { - title = o.title.call($e[0]); - } - title = ('' + title).replace(/(^\s*|\s*$)/, ""); - return title || o.fallback; - }, - - tip: function() { - if (!this.$tip) { - this.$tip = $('
').html(''); - } - return this.$tip; - }, - - validate: function() { - if (!this.$element[0].parentNode) { - this.hide(); - this.$element = null; - this.options = null; - } - }, - - enable: function() { this.enabled = true; }, - disable: function() { this.enabled = false; }, - toggleEnabled: function() { this.enabled = !this.enabled; } - }; - - $.fn.tipsy = function(options) { - - if (options === true) { - return this.data('tipsy'); - } else if (typeof options == 'string') { - var tipsy = this.data('tipsy'); - if (tipsy) tipsy[options](); - return this; - } - - options = $.extend({}, $.fn.tipsy.defaults, options); - - function get(ele) { - var tipsy = $.data(ele, 'tipsy'); - if (!tipsy) { - tipsy = new Tipsy(ele, $.fn.tipsy.elementOptions(ele, options)); - $.data(ele, 'tipsy', tipsy); - } - return tipsy; - } - - function enter() { - var tipsy = get(this); - tipsy.hoverState = 'in'; - if (options.delayIn == 0) { - tipsy.show(); - } else { - tipsy.fixTitle(); - setTimeout(function() { if (tipsy.hoverState == 'in') tipsy.show(); }, options.delayIn); - } - }; - - function leave() { - var tipsy = get(this); - tipsy.hoverState = 'out'; - if (options.delayOut == 0) { - tipsy.hide(); - } else { - setTimeout(function() { if (tipsy.hoverState == 'out') tipsy.hide(); }, options.delayOut); - } - }; - - if (!options.live) this.each(function() { get(this); }); - - if (options.trigger != 'manual') { - var binder = options.live ? 'live' : 'bind', - eventIn = options.trigger == 'hover' ? 'mouseenter' : 'focus', - eventOut = options.trigger == 'hover' ? 'mouseleave' : 'blur'; - this[binder](eventIn, enter)[binder](eventOut, leave); - } - - return this; - - }; - - $.fn.tipsy.defaults = { - className: null, - delayIn: 0, - delayOut: 0, - fade: false, - fallback: '', - gravity: 'n', - html: false, - live: false, - offset: 0, - opacity: 0.8, - title: 'title', - trigger: 'hover' - }; - - // 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.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'; - }; - - /** - * yields a closure of the supplied parameters, producing a function that takes - * no arguments and is suitable for use as an autogravity function like so: - * - * @param margin (int) - distance from the viewable region edge that an - * element should be before setting its tooltip's gravity to be away - * from that edge. - * @param prefer (string, e.g. 'n', 'sw', 'w') - the direction to prefer - * if there are no viewable region edges effecting the tooltip's - * gravity. It will try to vary from this minimally, for example, - * if 'sw' is preferred and an element is near the right viewable - * region edge, but not the top edge, it will set the gravity for - * that element's tooltip to be 'se', preserving the southern - * component. - */ - $.fn.tipsy.autoBounds = function(margin, prefer) { - return function() { - var dir = {ns: prefer[0], ew: (prefer.length > 1 ? prefer[1] : false)}, - boundTop = $(document).scrollTop() + margin, - boundLeft = $(document).scrollLeft() + margin, - $this = $(this); - - if ($this.offset().top < boundTop) dir.ns = 'n'; - if ($this.offset().left < boundLeft) dir.ew = 'w'; - if ($(window).width() + $(document).scrollLeft() - $this.offset().left < margin) dir.ew = 'e'; - if ($(window).height() + $(document).scrollTop() - $this.offset().top < margin) dir.ns = 's'; - - return dir.ns + (dir.ew ? dir.ew : ''); - } - }; - -})(jQuery); diff --git a/core/js/js.js b/core/js/js.js index ba456b54c6..226fea3a3c 100644 --- a/core/js/js.js +++ b/core/js/js.js @@ -1839,3 +1839,61 @@ function getScrollBarWidth() { return (w1 - w2); } + +/** + * jQuery tipsy shim for the bootstrap tooltip + */ +jQuery.fn.tipsy = function(argument) { + console.warn('Deprecation warning: tipsy is deprecated. Use tooltip instead.'); + if(typeof argument === 'object' && argument !== null) { + + // tipsy defaults + var options = { + placement: 'bottom', + delay: { 'show': 0, 'hide': 0}, + trigger: 'hover', + html: false + }; + if(argument.gravity) { + switch(argument.gravity) { + case 'n': + case 'nw': + case 'ne': + options.placement='bottom'; + break; + case 's': + case 'sw': + case 'se': + options.placement='top'; + break; + case 'w': + options.placement='right'; + break; + case 'e': + options.placement='left'; + break; + } + } + if(argument.trigger) { + options.trigger = argument.trigger; + } + if(argument.delayIn) { + options.delay["show"] = argument.delayIn; + } + if(argument.delayOut) { + options.delay["hide"] = argument.delayOut; + } + if(argument.html) { + options.html = true; + } + if(argument.title) { + options.title = argument.title; + } + // destroy old tooltip in case the title has changed + jQuery.fn.tooltip.call(this, 'destroy'); + jQuery.fn.tooltip.call(this, options); + } else { + this.tooltip(argument); + jQuery.fn.tooltip.call(this, argument); + } +} diff --git a/core/vendor/.gitignore b/core/vendor/.gitignore index 14b80df506..95ad4d67ea 100644 --- a/core/vendor/.gitignore +++ b/core/vendor/.gitignore @@ -112,3 +112,9 @@ snapjs/dist/2.0.0-rc1 snapjs/dist/latest/snap.css snapjs/dist/latest/snap.min.js snapjs/scripts + +# bootstrap - only include the tooltip plugin +bootstrap/** +!bootstrap/js +bootstrap/js/* +!bootstrap/js/tooltip.js diff --git a/core/vendor/bootstrap/js/tooltip.js b/core/vendor/bootstrap/js/tooltip.js new file mode 100644 index 0000000000..c3fe4b06ca --- /dev/null +++ b/core/vendor/bootstrap/js/tooltip.js @@ -0,0 +1,514 @@ +/* ======================================================================== + * Bootstrap: tooltip.js v3.3.5 + * http://getbootstrap.com/javascript/#tooltip + * Inspired by the original jQuery.tipsy by Jason Frame + * ======================================================================== + * Copyright 2011-2015 Twitter, Inc. + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) + * ======================================================================== */ + + ++function ($) { + 'use strict'; + + // TOOLTIP PUBLIC CLASS DEFINITION + // =============================== + + var Tooltip = function (element, options) { + this.type = null + this.options = null + this.enabled = null + this.timeout = null + this.hoverState = null + this.$element = null + this.inState = null + + this.init('tooltip', element, options) + } + + Tooltip.VERSION = '3.3.5' + + Tooltip.TRANSITION_DURATION = 150 + + Tooltip.DEFAULTS = { + animation: true, + placement: 'top', + selector: false, + template: '