TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-24 19:33:02 +03:00
Code Issues Projects Releases Wiki Activity

Merge pull request #1548 from bastilian/improve_image_uploader_ui

Browse Source 
Improve image uploader UI
This commit is contained in:
Hannah Wolfe 2013-11-24 10:07:38 -08:00
commit d6aa1df49d
2 changed files with 34 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
core/client/assets/lib/uploader.js
View File

@ -69,7 +69,7 @@
add: function (e, data) { add: function (e, data) {
/*jslint unparam:true*/ /*jslint unparam:true*/
$dropzone.find('.js-fileupload').removeClass('right'); $dropzone.find('.js-fileupload').removeClass('right');
$dropzone.find('.js-url, button.centre').remove(); $dropzone.find('.js-url').remove();
$progress.find('.js-upload-progress-bar').removeClass('fail'); $progress.find('.js-upload-progress-bar').removeClass('fail');
$dropzone.trigger('uploadstart', [$dropzone.attr('id')]); $dropzone.trigger('uploadstart', [$dropzone.attr('id')]);
$dropzone.find('span.media, div.description, a.image-url, a.image-webcam') $dropzone.find('span.media, div.description, a.image-url, a.image-webcam')
@ -140,7 +140,7 @@
}, },
removeExtras: function () { removeExtras: function () {
$dropzone.find('span.media, div.js-upload-progress, a.image-url, a.image-webcam, div.js-fail, button.js-fail, a.js-cancel').remove(); $dropzone.find('span.media, div.js-upload-progress, a.image-url, a.image-upload, a.image-webcam, div.js-fail, button.js-fail, a.js-cancel').remove();
}, },
initWithDropzone: function () { initWithDropzone: function () {
@ -170,21 +170,21 @@
$dropzone.find('.js-cancel').on('click', function () { $dropzone.find('.js-cancel').on('click', function () {
$dropzone.find('.js-url').remove(); $dropzone.find('.js-url').remove();
$dropzone.find('.js-fileupload').removeClass('right'); $dropzone.find('.js-fileupload').removeClass('right');
$dropzone.find('button.centre').remove();
self.removeExtras(); self.removeExtras();
self.initWithDropzone(); self.initWithDropzone();
}); });
if (settings.editor) {
$dropzone.find('div.description').after('<button class="js-button-accept button-save centre">Save</button>');
}
$dropzone.find('div.description').before($url); $dropzone.find('div.description').before($url);
if (settings.editor) {
$dropzone.find('div.js-url').append('<button class="js-button-accept button-save">Save</button>');
}
$dropzone.find('.js-button-accept').on('click', function () { $dropzone.find('.js-button-accept').on('click', function () {
val = $dropzone.find('.js-upload-url').val(); val = $dropzone.find('.js-upload-url').val();
$dropzone.find('div.description').hide(); $dropzone.find('div.description').hide();
$dropzone.find('.js-fileupload').removeClass('right'); $dropzone.find('.js-fileupload').removeClass('right');
$dropzone.find('.js-url').remove(); $dropzone.find('.js-url').remove();
$dropzone.find('button.centre').remove();
if (val === "") { if (val === "") {
$dropzone.trigger("uploadsuccess", 'http://'); $dropzone.trigger("uploadsuccess", 'http://');
self.initWithDropzone(); self.initWithDropzone();
@ -192,6 +192,15 @@
self.complete(val); self.complete(val);
} }
}); });
$dropzone.append('<a class="image-upload" title="Add image"><span class="hidden">Upload</span></a>');
$dropzone.find('a.image-upload').on('click', function () {
$dropzone.find('.js-url').remove();
$dropzone.find('.js-fileupload').removeClass('right');
self.initWithDropzone();
});
}, },
initWithImage: function () { initWithImage: function () {
var self = this; var self = this;

37
core/client/assets/sass/modules/global.scss
View File

@ -1304,7 +1304,7 @@ main {
@include baseline; @include baseline;
position: relative; position: relative;
overflow:hidden; overflow:hidden;
padding: 55px 60px 65px 60px; padding: 55px 60px;
border: $lightbrown 3px dashed; border: $lightbrown 3px dashed;
width: 100%; width: 100%;
height: auto; height: auto;
@ -1322,22 +1322,17 @@ main {
} }
.description { .description {
margin-top: 10px; margin-top: 10px;
margin-bottom: -40px;
}
.centre{
position: relative;
top: 50px;
display: block;
margin: 0 auto -6px auto;
} }
.media { .media {
@include icon($i-image, 60px, darken($lightbrown, 3%)) { @include icon($i-image, 60px, darken($lightbrown, 3%)) {
display:inline-block; display: inline-block;
vertical-align: initial;
@include transition(transform 1s ease); @include transition(transform 1s ease);
} }
} }
.image-url { .image-url,
.image-upload {
@include icon($i-link, 12px); @include icon($i-link, 12px);
line-height: 12px; line-height: 12px;
padding: 10px; padding: 10px;
@ -1348,6 +1343,10 @@ main {
color: $brown; color: $brown;
text-decoration: none; text-decoration: none;
} }
.image-upload {
@include icon($i-image, 12px);
}
.button-add { .button-add {
display: inline-block; display: inline-block;
position:relative; position:relative;
@ -1355,6 +1354,9 @@ main {
color: #fff; color: #fff;
padding-left:5px; padding-left:5px;
} }
.button-save {
margin: 0 0 0 10px;
}
.image-webcam { .image-webcam {
@include icon($i-camera, 12px); @include icon($i-camera, 12px);
@ -1380,8 +1382,8 @@ main {
direction: ltr; direction: ltr;
cursor: pointer; cursor: pointer;
&.right { &.right {
position: relative;
right: 9999px; right: 9999px;
height: 0;
} }
} }
@ -1389,12 +1391,11 @@ main {
font: -webkit-small-control; font: -webkit-small-control;
box-sizing: border-box; box-sizing: border-box;
width: 276px; width: 276px;
padding: 5px 7px; vertical-align: middle;
margin: 0; padding: 9px 7px;
margin-top: -10px; margin: 10px 0;
margin-bottom: -1px; outline: 0; outline: 0;
font-size: 1.1em; font-size: 1.1em;
line-height: 1.4em;
background: #fff; background: #fff;
border: #e3e1d5 1px solid; border: #e3e1d5 1px solid;
border-radius: 4px; border-radius: 4px;
@ -1405,9 +1406,7 @@ main {
.progress { .progress {
position: relative; position: relative;
top: -22px; margin: -19px 0 44px 0;
margin: auto;
margin-bottom: -12px;
display: block; display: block;
overflow: hidden; overflow: hidden;
@include linear-gradient(to bottom, #f5f5f5, #f9f9f9); @include linear-gradient(to bottom, #f5f5f5, #f9f9f9);