🔥 remove unused gh-spin-button component

closes https://github.com/TryGhost/Ghost/issues/7865
- `gh-spin-button` has been replaced with `gh-task-button`
This commit is contained in:
Kevin Ansfield 2017-04-25 16:03:28 +01:00 committed by Austin Burdine
parent 5e5003126c
commit e6bd8cbe3f
4 changed files with 0 additions and 144 deletions

View File

@ -1,64 +0,0 @@
import Component from 'ember-component';
import Ember from 'ember';
import {equal} from 'ember-computed';
import observer from 'ember-metal/observer';
import run from 'ember-runloop';
// ember-cli-shims doesn't export Ember.Testing
const {testing} = Ember;
export default Component.extend({
tagName: 'button',
buttonText: '',
submitting: false,
showSpinner: false,
showSpinnerTimeout: null,
autoWidth: true,
// Disable Button when isLoading equals true
attributeBindings: ['disabled', 'type', 'tabindex'],
// Must be set on the controller
disabled: equal('showSpinner', true),
click() {
if (this.get('action')) {
this.sendAction('action');
return false;
}
return true;
},
toggleSpinner: observer('submitting', function () {
let submitting = this.get('submitting');
let timeout = this.get('showSpinnerTimeout');
let delay = testing ? 10 : 1000;
if (submitting) {
this.set('showSpinner', true);
this.set('showSpinnerTimeout', run.later(this, function () {
if (!this.get('submitting')) {
this.set('showSpinner', false);
}
this.set('showSpinnerTimeout', null);
}, delay));
} else if (!submitting && timeout === null) {
this.set('showSpinner', false);
}
}),
setSize: observer('showSpinner', function () {
if (this.get('showSpinner') && this.get('autoWidth')) {
this.$().width(this.$().width());
this.$().height(this.$().height());
} else {
this.$().width('');
this.$().height('');
}
}),
willDestroy() {
this._super(...arguments);
run.cancel(this.get('showSpinnerTimeout'));
}
});

View File

@ -317,54 +317,6 @@ svg.gh-btn-icon-right {
}
/*
/* Loading Button Spinner
/* ---------------------------------------------------------- */
/*
Usage: Swap out button>span text with HTML
<a class="gh-btn gh-btn-blue">
<span>
<div class="gh-spinner"></div>
</span>
</div>
*/
.gh-spinner {
position: relative;
display: inline-block;
width: 18px;
height: 18px;
border: rgba(0,0,0,0.2) solid 4px;
border-radius: 100%;
animation: spin 1s linear infinite;
}
.gh-spinner:before {
content: "";
display: block;
margin-top: 9px;
width: 4px;
height: 4px;
background: rgba(0,0,0,0.6);
border-radius: 100%;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}
/*
/* Button Variations
/* ---------------------------------------------------------- */

View File

@ -1,9 +0,0 @@
{{#if showSpinner}}
<span>{{inline-svg "spinner"}}</span>
{{else}}
{{#if buttonText}}
{{buttonText}}
{{else}}
{{{yield}}}
{{/if}}
{{/if}}

View File

@ -1,23 +0,0 @@
/* jshint expr:true */
import {expect} from 'chai';
import {describe, it} from 'mocha';
import {setupComponentTest} from 'ember-mocha';
describe('Unit: Component: gh-spin-button', function () {
setupComponentTest('gh-spin-button', {
unit: true
// specify the other units that are required for this test
// needs: ['component:foo', 'helper:bar']
});
it('renders', function () {
// creates the component instance
let component = this.subject();
expect(component._state).to.equal('preRender');
// renders the component on the page
this.render();
expect(component._state).to.equal('inDOM');
});
});