TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-28 14:03:48 +03:00
Code Issues Projects Releases Wiki Activity

🔥 remove URL input option from image upload components

Browse Source 
refs https://github.com/TryGhost/Ghost/issues/8032
- `fileStorage: false` config is going away, it predates storage engines and will simplify future image optimisation work
- simplifies UI, it can be brought back in the future in a more robust fashion if required
This commit is contained in:
Kevin Ansfield 2017-03-03 08:59:01 +00:00 committed by Austin Burdine
parent 0366bde545
commit ea58dc6f85
18 changed files with 318 additions and 640 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
ghost/admin/app/components/gh-image-uploader-with-preview.js
View File

@ -9,12 +9,6 @@ export default Component.extend({
}
},
onInput() {
if (typeof this.attrs.onInput === 'function') {
this.attrs.onInput(...arguments);
}
},
uploadStarted() {
if (typeof this.attrs.uploadStarted === 'function') {
this.attrs.uploadStarted(...arguments);
@ -27,12 +21,6 @@ export default Component.extend({
}
},
formChanged() {
if (typeof this.attrs.formChanged === 'function') {
this.attrs.formChanged(...arguments);
}
},
remove() {
invokeAction(this, 'remove');
}

41
ghost/admin/app/components/gh-image-uploader.js
View File

@ -5,7 +5,6 @@ import {htmlSafe} from 'ember-string';
import {isBlank} from 'ember-utils';
import {isEmberArray} from 'ember-array/utils';
import run from 'ember-runloop';
import {invokeAction} from 'ember-invoke-action';
import ghostPaths from 'ghost-admin/utils/ghost-paths';
import {
@ -27,18 +26,15 @@ export default Component.extend({
accept: null,
extensions: null,
uploadUrl: null,
allowUrlInput: true,
validate: null,
dragClass: null,
failureMessage: null,
file: null,
formType: 'upload',
url: null,
uploadPercentage: 0,
ajax: injectService(),
config: injectService(),
notifications: injectService(),
_defaultAccept: 'image/gif,image/jpg,image/jpeg,image/png,image/svg+xml',
@ -75,17 +71,6 @@ export default Component.extend({
return htmlSafe(`width: ${width}`);
}),
canShowUploadForm: computed('config.fileStorage', function () {
return this.get('config.fileStorage') !== false;
}),
showUploadForm: computed('formType', function () {
let canShowUploadForm = this.get('canShowUploadForm');
let formType = this.get('formType');
return formType === 'upload' && canShowUploadForm;
}),
didReceiveAttrs() {
let image = this.get('image');
this.set('url', image);
@ -102,8 +87,6 @@ export default Component.extend({
},
dragOver(event) {
let showUploadForm = this.get('showUploadForm');
if (!event.dataTransfer) {
return;
}
@ -116,33 +99,22 @@ export default Component.extend({
event.stopPropagation();
event.preventDefault();
if (showUploadForm) {
this.set('dragClass', '-drag-over');
}
},
dragLeave(event) {
let showUploadForm = this.get('showUploadForm');
event.preventDefault();
if (showUploadForm) {
this.set('dragClass', null);
}
},
drop(event) {
let showUploadForm = this.get('showUploadForm');
event.preventDefault();
this.set('dragClass', null);
if (showUploadForm) {
if (event.dataTransfer.files) {
this.send('fileSelected', event.dataTransfer.files);
}
}
},
_uploadStarted() {
@ -269,24 +241,11 @@ export default Component.extend({
}
},
onInput(url) {
this.set('url', url);
invokeAction(this, 'onInput', url);
},
reset() {
this.set('file', null);
this.set('uploadPercentage', 0);
},
switchForm(formType) {
this.set('formType', formType);
run.scheduleOnce('afterRender', this, function () {
invokeAction(this, 'formChanged', formType);
});
},
saveUrl() {
let url = this.get('url');
invokeAction(this, 'update', url);

1
ghost/admin/app/components/gh-profile-image.js
View File

@ -29,7 +29,6 @@ export default Component.extend({
validEmail: '',
hasUploadedImage: false,
fileStorage: true,
ajax: AjaxService.create(),
config: injectService(),

45
ghost/admin/app/styles/components/uploader.css
View File

@ -73,51 +73,6 @@
font-size: 1.6rem;
}
.gh-image-uploader .image-upload,
.gh-image-uploader .image-url {
position: absolute;
bottom: 0;
left: 0;
display: block;
padding: 10px;
color: var(--midgrey);
text-decoration: none;
font-size: 14px;
line-height: 12px;
}
.gh-image-uploader a {
color: var(--midgrey);
text-decoration: none;
}
.gh-image-uploader a:hover {
color: var(--darkgrey);
}
.gh-image-uploader .image-upload:hover,
.gh-image-uploader .image-url:hover {
cursor: pointer;
}
.gh-image-uploader form {
padding: 55px 60px;
width: 100%;
}
.gh-image-uploader input.url {
margin: 0 0 10px 0;
padding: 9px 7px;
outline: 0;
background: #fff;
vertical-align: middle;
font: -webkit-small-control;
font-size: 1.4rem;
}
.gh-image-uploader input.url + .gh-btn.gh-btn-blue {
color: #fff;
}
.gh-image-uploader .image-cancel:hover {
background: var(--red);
color: #fff;

3
ghost/admin/app/templates/components/gh-ed-preview.hbs
View File

@ -8,7 +8,6 @@
update=(action "updateImageSrc" uploader.index)
remove=(action "updateImageSrc" uploader.index "")
uploadStarted=uploadStarted
uploadFinished=uploadFinished
formChanged=(action "updateHeight")}}
uploadFinished=uploadFinished}}
{{/ember-wormhole}}
{{/each}}

2
ghost/admin/app/templates/components/gh-image-uploader-with-preview.hbs
View File

@ -10,9 +10,7 @@
text=text
altText=altText
update=(action 'update')
onInput=(action 'onInput')
uploadStarted=(action 'uploadStarted')
uploadFinished=(action 'uploadFinished')
formChanged=(action 'formChanged')
}}
{{/if}}

23
ghost/admin/app/templates/components/gh-image-uploader.hbs
View File

@ -12,33 +12,10 @@
<button class="gh-btn gh-btn-green" {{action "reset"}}><span>Try Again</span></button>
{{/if}}
{{else}}
{{#if showUploadForm}}
{{!-- file selection/drag-n-drop --}}
<div class="upload-form">
{{#gh-file-input multiple=false alt=description action=(action "fileSelected") accept=accept}}
<div class="description">{{description}}</div>
{{/gh-file-input}}
</div>
{{#if allowUrlInput}}
<a class="image-url" {{action "switchForm" "url-input"}}>
<i class="icon-link"><span class="hidden">URL</span></i>
</a>
{{/if}}
{{else}}
{{!-- URL input --}}
<form class="url-form">
{{gh-input url class="url" placeholder="http://" update=(action "onInput") onenter=(action "saveUrl")}}
{{#if saveButton}}
<button class="gh-btn gh-btn-blue gh-input" {{action "saveUrl"}}><span>Save</span></button>
{{else}}
<div class="description">{{description}}</div>
{{/if}}
</form>
{{#if canShowUploadForm}}
<a class="image-upload icon-photos" title="Add image" {{action "switchForm" "upload"}}>
<span class="hidden">Upload</span>
</a>
{{/if}}
{{/if}}
{{/if}}

2
ghost/admin/app/templates/components/gh-profile-image.hbs
View File

@ -13,5 +13,5 @@
<span class="sr-only">Upload an image</span>
</i>
</span>
{{#if fileStorage}}<input type="file" class="file-uploader js-file-input" name="uploadimage">{{/if}}
<input type="file" class="file-uploader js-file-input" name="uploadimage">
</figure>

2
ghost/admin/app/templates/components/modals/upload-image.hbs
View File

@ -11,10 +11,8 @@
image=newUrl
saveButton=false
update=(action 'fileUploaded')
onInput=(action (mut newUrl))
accept=model.accept
extensions=model.extensions
allowUrlInput=model.allowUrlInput
uploadUrl=model.uploadUrl
}}
{{/if}}

6
ghost/admin/app/templates/settings/general.hbs
View File

@ -66,7 +66,7 @@
{{#if showUploadIconModal}}
{{gh-fullscreen-modal "upload-image"
model=(hash model=model imageProperty="icon" accept=iconMimeTypes extensions=iconExtensions allowUrlInput=false uploadUrl="/uploads/icon/")
model=(hash model=model imageProperty="icon" accept=iconMimeTypes extensions=iconExtensions uploadUrl="/uploads/icon/")
close=(action "toggleUploadIconModal")
modifier="action wide"}}
{{/if}}
@ -86,7 +86,7 @@
{{#if showUploadLogoModal}}
{{gh-fullscreen-modal "upload-image"
model=(hash model=model imageProperty="logo" allowUrlInput=true)
model=(hash model=model imageProperty="logo")
close=(action "toggleUploadLogoModal")
modifier="action wide"}}
{{/if}}
@ -106,7 +106,7 @@
{{#if showUploadCoverModal}}
{{gh-fullscreen-modal "upload-image"
model=(hash model=model imageProperty="cover" allowUrlInput=true)
model=(hash model=model imageProperty="cover")
close=(action "toggleUploadCoverModal")
modifier="action wide"}}
{{/if}}

2
ghost/admin/app/templates/setup/two.hbs
View File

@ -38,7 +38,7 @@
<input style="display:none;" type="text" name="fakeusernameremembered"/>
<input style="display:none;" type="password" name="fakepasswordremembered"/>
{{gh-profile-image fileStorage=config.fileStorage email=email setImage="setImage"}}
{{gh-profile-image email=email setImage="setImage"}}
{{#gh-form-group errors=errors hasValidated=hasValidated property="email"}}
<label for="email-address">Email address</label>
<span class="input-icon icon-mail">

2
ghost/admin/app/templates/signup.hbs
View File

@ -26,7 +26,7 @@
<input style="display:none;" type="text" name="fakeusernameremembered"/>
<input style="display:none;" type="password" name="fakepasswordremembered"/>
{{gh-profile-image fileStorage=config.fileStorage email=model.email setImage="setImage"}}
{{gh-profile-image email=model.email setImage="setImage"}}
{{#gh-form-group}}
<label for="email-address">Email address</label>

4
ghost/admin/app/templates/team/user.hbs
View File

@ -55,7 +55,7 @@
<button class="gh-btn gh-btn-default user-cover-edit" {{action "toggleUploadCoverModal"}}><span>Change Cover</span></button>
{{#if showUploadCoverModal}}
{{gh-fullscreen-modal "upload-image"
model=(hash model=user imageProperty="cover" allowUrlInput=true)
model=(hash model=user imageProperty="cover")
close=(action "toggleUploadCoverModal")
modifier="action wide"}}
{{/if}}
@ -74,7 +74,7 @@
<button type="button" {{action "toggleUploadImageModal"}} class="edit-user-image">Edit Picture</button>
{{#if showUploadImageModal}}
{{gh-fullscreen-modal "upload-image"
model=(hash model=user imageProperty="image" allowUrlInput=true)
model=(hash model=user imageProperty="image")
close=(action "toggleUploadImageModal")
modifier="action wide"}}
{{/if}}

39
ghost/admin/lib/gh-koenig/addon/components/cards/image-card.js
View File

@ -33,12 +33,10 @@ export default Component.extend({
dragClass: null,
failureMessage: null,
file: null,
formType: 'upload',
url: null,
uploadPercentage: 0,
ajax: injectService(),
config: injectService(),
notifications: injectService(),
// TODO: this wouldn't be necessary if the server could accept direct
@ -70,17 +68,6 @@ export default Component.extend({
return htmlSafe(`width: ${width}`);
}),
canShowUploadForm: computed('config.fileStorage', function () {
return this.get('config.fileStorage') !== false;
}),
showUploadForm: computed('formType', function () {
let canShowUploadForm = this.get('canShowUploadForm');
let formType = this.get('formType');
return formType === 'upload' && canShowUploadForm;
}),
didReceiveAttrs() {
let image = this.get('payload');
if (image.img) {
@ -93,8 +80,6 @@ export default Component.extend({
},
dragOver(event) {
let showUploadForm = this.get('showUploadForm');
if (!event.dataTransfer) {
return;
}
@ -107,33 +92,22 @@ export default Component.extend({
event.stopPropagation();
event.preventDefault();
if (showUploadForm) {
this.set('dragClass', '-drag-over');
}
},
dragLeave(event) {
let showUploadForm = this.get('showUploadForm');
event.preventDefault();
if (showUploadForm) {
this.set('dragClass', null);
}
},
drop(event) {
let showUploadForm = this.get('showUploadForm');
event.preventDefault();
this.set('dragClass', null);
if (showUploadForm) {
if (event.dataTransfer.files) {
this.send('fileSelected', event.dataTransfer.files);
}
}
},
_uploadStarted() {
@ -272,24 +246,11 @@ export default Component.extend({
}
},
onInput(url) {
this.set('url', url);
invokeAction(this, 'onInput', url);
},
reset() {
this.set('file', null);
this.set('uploadPercentage', 0);
},
switchForm(formType) {
this.set('formType', formType);
run.scheduleOnce('afterRender', this, function () {
invokeAction(this, 'formChanged', formType);
});
},
saveUrl() {
let url = this.get('url');
invokeAction(this, 'update', url);

22
ghost/admin/lib/gh-koenig/addon/templates/components/image-card.hbs
View File

@ -15,32 +15,10 @@
<button class="btn btn-green" {{action "reset"}}>Try Again</button>
{{/if}}
{{else}}
{{#if showUploadForm}}
{{!-- file selection/drag-n-drop --}}
<div class="upload-form">
{{#gh-file-input multiple=false alt=description action=(action 'fileSelected') accept=accept}}
<div class="description">{{description}}</div>
{{/gh-file-input}}
</div>
<a class="image-url" {{action 'switchForm' 'url-input'}}>
<i class="icon-link"><span class="hidden">URL</span></i>
</a>
{{else}}
{{!-- URL input --}}
<form class="url-form">
{{gh-input url class="url" placeholder="http://" update=(action "onInput") onenter=(action "saveUrl")}}
{{#if saveButton}}
<button class="btn btn-blue gh-input" {{action 'saveUrl'}}>Save</button>
{{else}}
<div class="description">{{description}}</div>
{{/if}}
</form>
{{#if canShowUploadForm}}
<a class="image-upload icon-photos" title="Add image" {{action 'switchForm' 'upload'}}>
<span class="hidden">Upload</span>
</a>
{{/if}}
{{/if}}
{{/if}}

2
ghost/admin/tests/acceptance/settings/general-test.js
View File

@ -101,7 +101,6 @@ describe('Acceptance: Settings - General', function () {
andThen(() => {
expect(find('.fullscreen-modal .modal-content .gh-image-uploader .description').text()).to.equal('Upload an image');
expect(find('.fullscreen-modal .modal-content .gh-image-uploader .image-url').length, 'url upload').to.equal(1);
});
// click cancel button
@ -121,7 +120,6 @@ describe('Acceptance: Settings - General', function () {
andThen(() => {
expect(find('.fullscreen-modal .modal-content .gh-image-uploader .description').text()).to.equal('Upload an image');
expect(find('.fullscreen-modal .modal-content .gh-image-uploader .image-url').length, 'url upload').to.equal(0);
});
// click cancel button

121
ghost/admin/tests/integration/components/gh-image-uploader-test.js
View File

@ -12,14 +12,6 @@ import run from 'ember-runloop';
import Service from 'ember-service';
import {UnsupportedMediaTypeError} from 'ghost-admin/services/ajax';
const keyCodes = {
enter: 13
};
const configStub = Service.extend({
fileStorage: true
});
const notificationsStub = Service.extend({
showAPIError(/* error, options */) {
// noop - to be stubbed
@ -60,10 +52,8 @@ describe('Integration: Component: gh-image-uploader', function() {
let server;
beforeEach(function () {
this.register('service:config', configStub);
this.register('service:session', sessionStub);
this.register('service:notifications', notificationsStub);
this.inject.service('config', {as: 'configService'});
this.inject.service('session', {as: 'sessionService'});
this.inject.service('notifications', {as: 'notifications'});
this.set('update', function () {});
@ -80,53 +70,6 @@ describe('Integration: Component: gh-image-uploader', function() {
expect(this.$()).to.have.length(1);
});
it('defaults to upload form', function () {
this.render(hbs`{{gh-image-uploader image=image}}`);
expect(this.$('input[type="file"]').length).to.equal(1);
});
it('defaults to url form with no filestorage config', function () {
this.set('configService.fileStorage', false);
this.render(hbs`{{gh-image-uploader image=image}}`);
expect(this.$('input[type="file"]').length).to.equal(0);
expect(this.$('input[type="text"].url').length).to.equal(1);
});
it('can switch between form types', function () {
this.render(hbs`{{gh-image-uploader image=image}}`);
expect(this.$('input[type="file"]').length).to.equal(1);
expect(this.$('input[type="text"].url').length).to.equal(0);
this.$('a.image-url').click();
expect(this.$('input[type="file"]').length, 'upload form is visible after switch to url form')
.to.equal(0);
expect(this.$('input[type="text"].url').length, 'url form is visible after switch to url form')
.to.equal(1);
this.$('a.image-upload').click();
expect(this.$('input[type="file"]').length, 'upload form is visible after switch to upload form')
.to.equal(1);
expect(this.$('input[type="text"].url').length, 'url form is visible after switch to upload form')
.to.equal(0);
});
it('triggers formChanged action when switching between forms', function () {
let formChanged = sinon.spy();
this.set('formChanged', formChanged);
this.render(hbs`{{gh-image-uploader image=image formChanged=(action formChanged)}}`);
this.$('a.image-url').click();
this.$('a.image-upload').click();
expect(formChanged.calledTwice).to.be.true;
expect(formChanged.firstCall.args[0]).to.equal('url-input');
expect(formChanged.secondCall.args[0]).to.equal('upload');
});
describe('file upload form', function () {
it('renders form with supplied alt text', function () {
this.render(hbs`{{gh-image-uploader image=image altText="text test"}}`);
expect(this.$('.description').text().trim()).to.equal('Upload image of "text test"');
@ -511,67 +454,3 @@ describe('Integration: Component: gh-image-uploader', function() {
});
});
});
describe('URL input form', function () {
beforeEach(function () {
this.set('configService.fileStorage', false);
});
it('displays save button by default', function () {
this.set('image', 'http://example.com/test.png');
this.render(hbs`{{gh-image-uploader image=image text="text test"}}`);
expect(this.$('button').length).to.equal(1);
expect(this.$('input[type="text"]').val()).to.equal('http://example.com/test.png');
});
it('can render without a save button', function () {
this.render(hbs`{{gh-image-uploader image=image saveButton=false text="text test"}}`);
expect(this.$('button').length).to.equal(0);
expect(this.$('.description').text().trim()).to.equal('text test');
});
it('fires update action when save button clicked', function () {
let update = sinon.spy();
this.set('update', update);
this.render(hbs`{{gh-image-uploader image=image update=(action update)}}`);
this.$('input[type="text"]').val('saved url');
this.$('input[type="text"]').change();
this.$('button.gh-btn-blue').click();
expect(update.calledOnce).to.be.true;
expect(update.firstCall.args[0]).to.equal('saved url');
});
it('fires onInput action when typing URL', function () {
let onInput = sinon.spy();
this.set('onInput', onInput);
this.render(hbs`{{gh-image-uploader image=image onInput=(action onInput)}}`);
this.$('input[type="text"]').val('input url');
this.$('input[type="text"]').change();
expect(onInput.calledOnce).to.be.true;
expect(onInput.firstCall.args[0]).to.equal('input url');
});
it('saves on enter key', function () {
let update = sinon.spy();
this.set('update', update);
this.render(hbs`{{gh-image-uploader image=image update=(action update)}}`);
this.$('input[type="text"]').val('saved url');
this.$('input[type="text"]').change();
this.$('input[type="text"]').trigger(
// eslint-disable-next-line new-cap
$.Event('keyup', {keyCode: keyCodes.enter, which: keyCodes.enter})
);
expect(update.calledOnce).to.be.true;
expect(update.firstCall.args[0]).to.equal('saved url');
});
});
});

11
ghost/admin/tests/integration/components/gh-profile-image-test.js
View File

@ -61,17 +61,6 @@ describe('Integration: Component: gh-profile-image', function () {
expect(this.$()).to.have.length(1);
});
it('renders and tears down ok with fileStorage:false', function () {
this.set('fileStorage', false);
this.render(hbs`
{{gh-profile-image fileStorage=fileStorage}}
`);
expect(this.$()).to.have.length(1);
expect(this.$('input')).to.have.length(0);
}),
it('renders default image if no email supplied', function () {
this.set('email', null);