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

Improve image uploader UI

Browse Source 
closes #1356
- add button to toggle back to uploader from image-url interface
- put save button next to url-input
- make box-height consistent
- position ui-elements to have equal padding all around to border
This commit is contained in:
Sebastian Gräßl 2013-11-22 15:49:54 +01:00
parent 2c43d3c520
commit bf9b5570a1
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) {
/*jslint unparam:true*/
$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');
$dropzone.trigger('uploadstart', [$dropzone.attr('id')]);
$dropzone.find('span.media, div.description, a.image-url, a.image-webcam')
@ -140,7 +140,7 @@
},
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 () {
@ -170,21 +170,21 @@
$dropzone.find('.js-cancel').on('click', function () {
$dropzone.find('.js-url').remove();
$dropzone.find('.js-fileupload').removeClass('right');
$dropzone.find('button.centre').remove();
self.removeExtras();
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);
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 () {
val = $dropzone.find('.js-upload-url').val();
$dropzone.find('div.description').hide();
$dropzone.find('.js-fileupload').removeClass('right');
$dropzone.find('.js-url').remove();
$dropzone.find('button.centre').remove();
if (val === "") {
$dropzone.trigger("uploadsuccess", 'http://');
self.initWithDropzone();
@ -192,6 +192,15 @@
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 () {
var self = this;

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

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