Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-10 23:36:14 -05:00
Code Issues Activity

Take Trashcan off of url screen for image uploader

Browse source 
closes #5433
- add gh-input class to inputs
- stop the incorrect addition of trash can on url page
- fix trigger of upload success to show loading in editor
- fix duplicate url field for images outside of editor when there is no file storage
This commit is contained in:
cobbspur 2015-06-21 19:23:49 +01:00
parent 0d5e515171
commit 8a8e90e9a2
3 changed files with 11 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
core/client/app/assets/lib/uploader.js
View file

@ -5,7 +5,7 @@ var UploadUi,
Ghost = ghostPaths();
UploadUi = function ($dropzone, settings) {
var $url = '<div class="js-url"><input class="url js-upload-url" type="url" placeholder="http://"/></div>',
var $url = '<div class="js-url"><input class="url js-upload-url gh-input" type="url" placeholder="http://"/></div>',
$cancel = '<a class="image-cancel icon-trash js-cancel" title="Delete"><span class="hidden">Delete</span></a>',
$progress = $('<div />', {
class: 'js-upload-progress progress progress-success active',
@ -48,10 +48,9 @@ UploadUi = function ($dropzone, settings) {
$progress.animate({opacity: 0}, 250, function () {
$dropzone.find('span.media').after('<img class="fileupload-loading" src="' + Ghost.subdir + '/ghost/img/loadingcat.gif" />');
if (!settings.editor) {$progress.find('.fileupload-loading').css({top: '56px'}); }
});
$dropzone.trigger('uploadsuccess', [result]);
$img.one('load', function () {
$dropzone.trigger('uploadsuccess', [result]);
animateDropzone($img);
}).attr('src', result);
}
@ -84,7 +83,6 @@ UploadUi = function ($dropzone, settings) {
progressall: function (e, data) {
/*jshint unused:false*/
var progress = parseInt(data.loaded / data.total * 100, 10);
if (!settings.editor) {$progress.find('div.js-progress').css({position: 'absolute', top: '40px'}); }
if (settings.progressbar) {
$dropzone.trigger('uploadprogress', [progress, data]);
$progress.find('.js-upload-progress-bar').css('width', progress + '%');
@ -165,9 +163,6 @@ UploadUi = function ($dropzone, settings) {
this.removeExtras();
$dropzone.addClass('image-uploader-url').removeClass('pre-image-uploader');
$dropzone.find('.js-fileupload').addClass('right');
if (settings.fileStorage) {
$dropzone.append($cancel);
}
$dropzone.find('.js-cancel').on('click', function () {
$dropzone.find('.js-url').remove();
$dropzone.find('.js-fileupload').removeClass('right');
@ -179,7 +174,8 @@ UploadUi = function ($dropzone, settings) {
$dropzone.find('div.description').before($url);
if (settings.editor) {
$dropzone.find('div.js-url').append('<button class="btn btn-blue js-button-accept">Save</button>');
$dropzone.find('div.js-url').append('<button class="btn btn-blue js-button-accept gh-input">Save</button>');
$dropzone.find('div.description').hide();
}
$dropzone.find('.js-button-accept').on('click', function () {
@ -197,7 +193,7 @@ UploadUi = function ($dropzone, settings) {
// Only show the toggle icon if there is a dropzone mode to go back to
if (settings.fileStorage !== false) {
$dropzone.append('<a class="image-upload" title="Add image"><span class="hidden">Upload</span></a>');
$dropzone.append('<a class="image-upload icon-photos" title="Add image"><span class="hidden">Upload</span></a>');
}
$dropzone.find('a.image-upload').on('click', function () {
@ -219,7 +215,7 @@ UploadUi = function ($dropzone, settings) {
$dropzone.find('img.js-upload-target').attr({src: ''});
$dropzone.find('div.description').show();
$dropzone.trigger('imagecleared');
$dropzone.delay(2500).animate({opacity: 100}, 1000, function () {
$dropzone.delay(250).animate({opacity: 100}, 1000, function () {
self.init();
});

5
core/client/app/styles/components/uploader.css
View file

@ -45,6 +45,7 @@
position: relative;
z-index: 700;
display: inline-block;
margin-top: 10px;
color: #fff;
}
@ -85,9 +86,9 @@
.image-uploader .progress {
position: relative;
top: 50%;
display: block;
overflow: hidden;
margin: -19px 0 44px 0;
background: linear-gradient(to bottom, #f5f5f5, #f9f9f9);
border-radius: 12px;
box-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px inset;
@ -96,7 +97,7 @@
.image-uploader .fileupload-loading {
top: 50%;
display: block;
margin: -28px auto 0;
margin: 0 auto;
width: 35px;
height: 28px;
background-size: contain;

4
core/test/functional/client/editor_test.js
View file

@ -182,7 +182,7 @@ CasperTest.begin('Image Uploads', 23, function suite(test) {
casper.writeContentToEditor(markdownImageString);
});
casper.waitForSelector('.entry-preview .js-drop-zone.pre-image-uploader', function onSuccess() {
casper.waitForSelector('img.js-upload-target', function () {
var imageJQuerySelector = '.entry-preview img.js-upload-target[src="' + testFileLocation + '"]';
test.assertExists(imageJQuerySelector, 'Uploaded image tag properly links to source location');
});
@ -215,7 +215,7 @@ CasperTest.begin('Image Uploads', 23, function suite(test) {
});
});
casper.waitForSelector('.entry-preview .js-drop-zone.pre-image-uploader', function onSuccess() {
casper.waitForSelector('img.js-upload-target', function onSuccess() {
var imageJQuerySelector = '.entry-preview img.js-upload-target[src="' + imageURL + '"]';
test.assertExists(imageJQuerySelector, 'Uploaded image tag properly links to inputted image URL');
});