diff --git a/core/client/assets/lib/uploader.js b/core/client/assets/lib/uploader.js index d62e8da0e9..29b1aac556 100644 --- a/core/client/assets/lib/uploader.js +++ b/core/client/assets/lib/uploader.js @@ -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(''); - } + $dropzone.find('div.description').before($url); + if (settings.editor) { + $dropzone.find('div.js-url').append(''); + } + $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(''); + + $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; diff --git a/core/client/assets/sass/modules/global.scss b/core/client/assets/sass/modules/global.scss index 9e2de0cfd8..5e0ba73b1b 100644 --- a/core/client/assets/sass/modules/global.scss +++ b/core/client/assets/sass/modules/global.scss @@ -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);