diff --git a/docs/THIRDPARTY b/docs/THIRDPARTY
index 39d163e09a..70707713f1 100644
--- a/docs/THIRDPARTY
+++ b/docs/THIRDPARTY
@@ -186,10 +186,6 @@ Files: static/third/spectrum/*
Copyright: 2013 Brian Grinstead
License: Expat
-Files: static/third/spin/spin.js
-Copyright: 2011-2013 Felix Gnass
-License: Expat
-
Files: static/third/underscore/underscore.js
Copyright: 2009-2015 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
License: Expat
diff --git a/frontend_tests/node_tests/templates.js b/frontend_tests/node_tests/templates.js
index c2e30262f2..4e32ee451a 100644
--- a/frontend_tests/node_tests/templates.js
+++ b/frontend_tests/node_tests/templates.js
@@ -483,6 +483,7 @@ function render(template_name, args) {
},
];
+ render('loader');
var html = render('message_group', {message_groups: groups, use_match_properties: true});
var first_message_text = $(html).next('.recipient_row').find('div.messagebox:first .message_content').text().trim();
diff --git a/static/js/loading.js b/static/js/loading.js
index 603b930205..c51ba0feba 100644
--- a/static/js/loading.js
+++ b/static/js/loading.js
@@ -20,6 +20,7 @@ exports.make_indicator = function (outer_container, opts) {
}
var spinner_elem = $('');
+ spinner_elem.html(templates.render("loader"));
container.append(spinner_elem);
var text_width = 0;
@@ -44,25 +45,8 @@ exports.make_indicator = function (outer_container, opts) {
outer_container.css({display: 'block',
'white-space': 'nowrap'});
- var spinner = new Spinner({
- lines: 8,
- length: 0,
- width: 9,
- radius: 9,
- speed: 1.25,
- shadow: false,
- zIndex: 1000
- }).spin(spinner_elem[0]);
- outer_container.data("spinner_obj", spinner);
- outer_container.data("destroying", false);
- // Make the spinner appear in the center of its enclosing
- // element. spinner.el is a 0x0 div. The parts of the spinner
- // are arranged so that they're centered on the upper-left corner
- // of spinner.el. So, by setting spinner.el's position to
- // relative and top/left to 50%, the center of the spinner will
- // be located at the center of spinner_elem.
- $(spinner.el).css({left: '50%', top: '50%'});
+ outer_container.data("destroying", false);
};
exports.destroy_indicator = function (container) {
diff --git a/static/styles/zulip.css b/static/styles/zulip.css
index 41fd88fc00..331e5dbe93 100644
--- a/static/styles/zulip.css
+++ b/static/styles/zulip.css
@@ -454,7 +454,7 @@ li.actual-dropdown-menu i {
.message_area_padder {
/* The height of the header and the tabbar plus a small gap */
- margin-top: 68px;
+ margin-top: 100px;
/* This is needed for the floating recipient bar
in Firefox only, for some reason; otherwise it gets
a scrollbar */
@@ -1764,8 +1764,8 @@ div.floating_recipient {
/* If you change these, make sure to adjust the constants in
* loading.make_indicator as well */
margin-left: 20px;
- font-size: 33px;
- font-weight: bold;
+ font-size: 1.2em;
+ font-weight: 300;
line-height: 38px;
}
@@ -1909,9 +1909,7 @@ div.floating_recipient {
#loading_more_messages_indicator_box {
position: relative;
left: -50%;
- top: 25px;
- border: 1px rgb(100, 100, 100) solid;
- background-color: rgba(230, 230, 230, 0.8);
+ top: -40px;
z-index: 1;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
diff --git a/static/templates/loader.handlebars b/static/templates/loader.handlebars
new file mode 100644
index 0000000000..38ca4204a4
--- /dev/null
+++ b/static/templates/loader.handlebars
@@ -0,0 +1,13 @@
+
diff --git a/static/third/spin/spin.js b/static/third/spin/spin.js
deleted file mode 100644
index 25fe313683..0000000000
--- a/static/third/spin/spin.js
+++ /dev/null
@@ -1,373 +0,0 @@
-//fgnass.github.com/spin.js#v1.3
-
-/** @preserve
- Software from "Spin.js", which dynamically creates activity indicators, is
- Copyright (c) 2011-2013 Felix Gnass and is provided under the following license:
- --
- Permission is hereby granted, free of charge, to any person obtaining a copy
- of this software and associated documentation files (the "Software"), to deal
- in the Software without restriction, including without limitation the rights
- to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- copies of the Software, and to permit persons to whom the Software is
- furnished to do so, subject to the following conditions:
-
- The above copyright notice and this permission notice shall be included in
- all copies or substantial portions of the Software.
-
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
- THE SOFTWARE.
- --
-*/
-
-/**
- * Copyright (c) 2011-2013 Felix Gnass
- * Licensed under the MIT license
- */
-(function(root, factory) {
-
- /* CommonJS */
- if (typeof exports == 'object') module.exports = factory()
-
- /* AMD module */
- else if (typeof define == 'function' && define.amd) define(factory)
-
- /* Browser global */
- else root.Spinner = factory()
-}
-(this, function() {
- "use strict";
-
- var prefixes = ['webkit', 'Moz', 'ms', 'O'] /* Vendor prefixes */
- , animations = {} /* Animation rules keyed by their name */
- , useCssAnimations /* Whether to use CSS animations or setTimeout */
-
- /**
- * Utility function to create elements. If no tag name is given,
- * a DIV is created. Optionally properties can be passed.
- */
- function createEl(tag, prop) {
- var el = document.createElement(tag || 'div')
- , n
-
- for(n in prop) el[n] = prop[n]
- return el
- }
-
- /**
- * Appends children and returns the parent.
- */
- function ins(parent /* child1, child2, ...*/) {
- for (var i=1, n=arguments.length; i> 1) : parseInt(o.left, 10) + mid) + 'px',
- top: (o.top == 'auto' ? tp.y-ep.y + (target.offsetHeight >> 1) : parseInt(o.top, 10) + mid) + 'px'
- })
- }
-
- el.setAttribute('role', 'progressbar')
- self.lines(el, self.opts)
-
- if (!useCssAnimations) {
- // No CSS animation support, use setTimeout() instead
- var i = 0
- , start = (o.lines - 1) * (1 - o.direction) / 2
- , alpha
- , fps = o.fps
- , f = fps/o.speed
- , ostep = (1-o.opacity) / (f*o.trail / 100)
- , astep = f/o.lines
-
- ;(function anim() {
- i++;
- for (var j = 0; j < o.lines; j++) {
- alpha = Math.max(1 - (i + (o.lines - j) * astep) % f * ostep, o.opacity)
-
- self.opacity(el, j * o.direction + start, alpha, o)
- }
- self.timeout = self.el && setTimeout(anim, ~~(1000/fps))
- })()
- }
- return self
- },
-
- /**
- * Stops and removes the Spinner.
- */
- stop: function() {
- var el = this.el
- if (el) {
- clearTimeout(this.timeout)
- if (el.parentNode) el.parentNode.removeChild(el)
- this.el = undefined
- }
- return this
- },
-
- /**
- * Internal method that draws the individual lines. Will be overwritten
- * in VML fallback mode below.
- */
- lines: function(el, o) {
- var i = 0
- , start = (o.lines - 1) * (1 - o.direction) / 2
- , seg
-
- function fill(color, shadow) {
- return css(createEl(), {
- position: 'absolute',
- width: (o.length+o.width) + 'px',
- height: o.width + 'px',
- background: color,
- boxShadow: shadow,
- transformOrigin: 'left',
- transform: 'rotate(' + ~~(360/o.lines*i+o.rotate) + 'deg) translate(' + o.radius+'px' +',0)',
- borderRadius: (o.corners * o.width>>1) + 'px'
- })
- }
-
- for (; i < o.lines; i++) {
- seg = css(createEl(), {
- position: 'absolute',
- top: 1+~(o.width/2) + 'px',
- transform: o.hwaccel ? 'translate3d(0,0,0)' : '',
- opacity: o.opacity,
- animation: useCssAnimations && addAnimation(o.opacity, o.trail, start + i * o.direction, o.lines) + ' ' + 1/o.speed + 's linear infinite'
- })
-
- if (o.shadow) ins(seg, css(fill('#000', '0 0 4px ' + '#000'), {top: 2+'px'}))
-
- ins(el, ins(seg, fill(o.color, '0 0 1px rgba(0,0,0,.1)')))
- }
- return el
- },
-
- /**
- * Internal method that adjusts the opacity of a single line.
- * Will be overwritten in VML fallback mode below.
- */
- opacity: function(el, i, val) {
- if (i < el.childNodes.length) el.childNodes[i].style.opacity = val
- }
-
- })
-
-
- function initVML() {
-
- /* Utility function to create a VML tag */
- function vml(tag, attr) {
- return createEl('<' + tag + ' xmlns="urn:schemas-microsoft.com:vml" class="spin-vml">', attr)
- }
-
- // No CSS transforms but VML support, add a CSS rule for VML elements:
- sheet.addRule('.spin-vml', 'behavior:url(#default#VML)')
-
- Spinner.prototype.lines = function(el, o) {
- var r = o.length+o.width
- , s = 2*r
-
- function grp() {
- return css(
- vml('group', {
- coordsize: s + ' ' + s,
- coordorigin: -r + ' ' + -r
- }),
- { width: s, height: s }
- )
- }
-
- var margin = -(o.width+o.length)*2 + 'px'
- , g = css(grp(), {position: 'absolute', top: margin, left: margin})
- , i
-
- function seg(i, dx, filter) {
- ins(g,
- ins(css(grp(), {rotation: 360 / o.lines * i + 'deg', left: ~~dx}),
- ins(css(vml('roundrect', {arcsize: o.corners}), {
- width: r,
- height: o.width,
- left: o.radius,
- top: -o.width>>1,
- filter: filter
- }),
- vml('fill', {color: o.color, opacity: o.opacity}),
- vml('stroke', {opacity: 0}) // transparent stroke to fix color bleeding upon opacity change
- )
- )
- )
- }
-
- if (o.shadow)
- for (i = 1; i <= o.lines; i++)
- seg(i, -2, 'progid:DXImageTransform.Microsoft.Blur(pixelradius=2,makeshadow=1,shadowopacity=.3)')
-
- for (i = 1; i <= o.lines; i++) seg(i)
- return ins(el, g)
- }
-
- Spinner.prototype.opacity = function(el, i, val, o) {
- var c = el.firstChild
- o = o.shadow && o.lines || 0
- if (c && i+o < c.childNodes.length) {
- c = c.childNodes[i+o]; c = c && c.firstChild; c = c && c.firstChild
- if (c) c.opacity = val
- }
- }
- }
-
- var probe = css(createEl('group'), {behavior: 'url(#default#VML)'})
-
- if (!vendor(probe, 'transform') && probe.adj) initVML()
- else useCssAnimations = vendor(probe, 'animation')
-
- return Spinner
-
-}));
diff --git a/zproject/settings.py b/zproject/settings.py
index 8ae5547700..b9ce544e72 100644
--- a/zproject/settings.py
+++ b/zproject/settings.py
@@ -759,7 +759,6 @@ JS_SPECS = {
'third/jquery-filedrop/jquery.filedrop.js',
'third/jquery-caret/jquery.caret.1.5.2.js',
'third/xdate/xdate.dev.js',
- 'third/spin/spin.js',
'third/jquery-mousewheel/jquery.mousewheel.js',
'third/jquery-throttle-debounce/jquery.ba-throttle-debounce.js',
'third/jquery-idle/jquery.idle.js',