Merge pull request #800 from hypothesis/spinner-component

Adjust spinner positioning and convert to component

src/sidebar/components/spinner.js

+'use strict';
+
+// @ngInject
+function SpinnerController($animate, $element) {
+  // ngAnimate conflicts with the spinners own CSS
+  $animate.enabled(false, $element);
+}
+
+module.exports = {
+  controller: SpinnerController,
+  controllerAs: 'vm',
+  template: `
+    <div class="spinner__container">
+      <span class="spinner">
+        <span><span>
+        </span></span>
+      </span>
+    </div>
+  `,
+};

src/sidebar/components/test/search-input-test.js

@@ -46,13 +46,13 @@ describe('searchInput', function () {
   describe('loading indicator', function () {
     it('is hidden when there are no network requests in flight', function () {
       const el = util.createDirective(document, 'search-input', {});
-      const spinner = el[0].querySelector('.spinner');
+      const spinner = el[0].querySelector('spinner');
       assert.equal(util.isHidden(spinner), true);
     });
 
     it('is visible when there are network requests in flight', function () {
       const el = util.createDirective(document, 'search-input', {});
-      const spinner = el[0].querySelector('.spinner');
+      const spinner = el[0].querySelector('spinner');
       fakeHttp.pendingRequests.push([{}]);
       el.scope.$digest();
       assert.equal(util.isHidden(spinner), false);

src/sidebar/directive/test/spinner-test.js → src/sidebar/components/test/spinner-test.js

@@ -2,6 +2,8 @@
 
 const angular = require('angular');
 
+const util = require('../../directive/test/util');
+
 const module = angular.mock.module;
 const inject = angular.mock.inject;
 
@@ -11,19 +13,18 @@ describe('spinner', function () {
   let sandbox = null;
 
   before(function () {
-    angular.module('h', []).directive('spinner', require('../spinner'));
+    angular.module('h', []).component('spinner', require('../spinner'));
   });
 
   beforeEach(module('h'));
 
-  beforeEach(inject(function (_$animate_, $compile, $rootScope) {
+  beforeEach(inject(function (_$animate_) {
     sandbox = sinon.sandbox.create();
 
     $animate = _$animate_;
     sandbox.spy($animate, 'enabled');
 
-    $element = angular.element('<span class="spinner"></span>');
-    $compile($element)($rootScope.$new());
+    $element = util.createDirective(document, 'spinner');
   }));
 
   afterEach(function () {
@@ -31,6 +32,10 @@ describe('spinner', function () {
   });
 
   it('disables ngAnimate animations for itself', function () {
-    assert.calledWith($animate.enabled, false, sinon.match($element));
+    assert.calledOnce($animate.enabled);
+
+    const [enabled, jqElement] = $animate.enabled.getCall(0).args;
+    assert.equal(enabled, false);
+    assert.equal(jqElement[0], $element[0]);
   });
 });

src/sidebar/directive/spinner.js

-'use strict';
-
-module.exports = ['$animate', function($animate) {
-  return {
-    link: function(scope, elem) {
-      // ngAnimate conflicts with the spinners own CSS
-      $animate.enabled(false, elem);
-    },
-    restrict: 'C',
-    template: '<span><span></span></span>',
-  };
-}];

src/sidebar/index.js

@@ -160,6 +160,7 @@ function startAngularApp(config) {
   .component('sidebarTutorial', require('./components/sidebar-tutorial'))
   .component('shareDialog', require('./components/share-dialog'))
   .component('sortDropdown', require('./components/sort-dropdown'))
+  .component('spinner', require('./components/spinner'))
   .component('streamContent', require('./components/stream-content'))
   .component('svgIcon', require('./components/svg-icon'))
   .component('tagEditor', require('./components/tag-editor'))
@@ -171,7 +172,6 @@ function startAngularApp(config) {
   .directive('hBranding', require('./directive/h-branding'))
   .directive('hOnTouch', require('./directive/h-on-touch'))
   .directive('hTooltip', require('./directive/h-tooltip'))
-  .directive('spinner', require('./directive/spinner'))
   .directive('windowScroll', require('./directive/window-scroll'))
 
   .service('analytics', require('./services/analytics'))

src/sidebar/templates/search-input.html

@@ -10,7 +10,5 @@
   <button type="button" class="simple-search-icon top-bar__btn" ng-hide="vm.loading">
     <i class="h-icon-search"></i>
   </button>
-  <button type="button" class="simple-search-icon btn btn-clean" ng-show="vm.loading" disabled>
-    <span class="btn-icon"><span class="spinner"></span></span>
-  </button>
+  <spinner class="top-bar__btn" ng-show="vm.loading" title="Loading…"></spinner>
 </form>

src/styles/sidebar/components/spinner.scss

@@ -15,6 +15,14 @@ $part-height: 3 * $part-width;
   to { transform: rotate(1turn); }
 }
 
+// Container which centers the spinner vertically.
+.spinner__container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+// The actual spinner itself.
 .spinner {
   position: relative;
   display: inline-block;