diff --git a/core/client/assets/lib/uploader.js b/core/client/assets/lib/uploader.js index 11d194a370..3d5f65509f 100644 --- a/core/client/assets/lib/uploader.js +++ b/core/client/assets/lib/uploader.js @@ -7,19 +7,16 @@ UploadUi = function ($dropzone, settings) { var source, - $link = $('' + - 'add, edit'), - $back = $('' + - 'add, edit'), + $cancel = '', $progress = $('
', { "class" : "js-upload-progress progress progress-success active", "role": "progressbar", "aria-valuemin": "0", "aria-valuemax": "100" }).append($("
", { - "class": "js-upload-progress-bar bar", - "style": "width:0%" - })); + "class": "js-upload-progress-bar bar", + "style": "width:0%" + })); $.extend(this, { bindFileUpload: function () { @@ -30,7 +27,6 @@ add: function (e, data) { $progress.find('.js-upload-progress-bar').removeClass('fail'); $dropzone.trigger('uploadstart'); - $dropzone.find('a.js-return-image').remove(); $dropzone.find('span.media, div.description, a.image-url, a.image-webcam') .animate({opacity: 0}, 250, function () { $dropzone.find('div.description').hide().css({"opacity": 100}); @@ -55,10 +51,6 @@ $dropzone.find('div.js-fail, button.js-fail').fadeIn(1500); $dropzone.find('button.js-fail').on('click', function () { $dropzone.css({minHeight: 0}); - if (source !== undefined && !$dropzone.find('a.js-return-image')[0]) { - $back.css({"opacity": 100}); - $dropzone.find('.js-upload-target').after($back); - } $dropzone.find('div.description').show(); self.removeExtras(); self.init(); @@ -69,10 +61,6 @@ $dropzone.find('img.js-upload-target').attr({"width": width, "height": height}).css({"display": "block"}); $dropzone.find('.fileupload-loading').removeClass('fileupload-loading'); $dropzone.css({"height": "auto"}); - if (!$dropzone.find('a.js-edit-image')[0]) { - $link.css({"opacity": 100}); - $dropzone.find('.js-upload-target').after($link); - } $dropzone.delay(250).animate({opacity: 100}, 1000, function () { self.init(); }); @@ -128,7 +116,7 @@ }, removeExtras: function () { - $dropzone.find('span.media, div.js-upload-progress, a.image-url, a.image-webcam, div.js-fail, button.js-fail').remove(); + $dropzone.find('span.media, div.js-upload-progress, a.image-url, a.image-webcam, div.js-fail, button.js-fail, a.js-cancel').remove(); }, initWithDropzone: function () { @@ -136,18 +124,8 @@ //This is the start point if no image exists $dropzone.find('img.js-upload-target').css({"display": "none"}); $dropzone.removeClass('pre-image-uploader').addClass('image-uploader'); - + this.removeExtras(); this.buildExtras(); - - $dropzone.find('a.js-edit-image').remove(); - - $back.on('click', function () { - $dropzone.find('a.js-return-image').remove(); - $dropzone.find('img.js-upload-target').attr({"src": source}).css({"display": "block"}); - self.removeExtras(); - $dropzone.removeClass('image-uploader').addClass('pre-image-uploader'); - self.init(); - }); this.bindFileUpload(); }, @@ -157,19 +135,11 @@ source = $dropzone.find('img.js-upload-target').attr('src'); $dropzone.removeClass('image-uploader').addClass('pre-image-uploader'); $dropzone.find('div.description').hide(); - - if (!$dropzone.find('a.js-edit-image')[0]) { - $link.css({"opacity": 100}); - $dropzone.find('.js-upload-target').after($link); - } - - $link.on('click', function () { - $dropzone.find('a.js-edit-image').remove(); - $dropzone.find('img.js-upload-target').attr({"src": ""}).css({"display": "none"}); - $back.css({"cursor": "pointer", "z-index": 9999, "opacity": 100}); - $dropzone.find('.js-upload-target').after($back); + $dropzone.append($cancel); + $dropzone.find('.js-cancel').on('click', function () { + $dropzone.find('img.js-upload-target').attr({'src': ''}); $dropzone.find('div.description').show(); - self.init(); + self.initWithDropzone(); }); }, diff --git a/core/client/assets/sass/layouts/settings.scss b/core/client/assets/sass/layouts/settings.scss index 15ff5fbfa6..2bc51f3534 100644 --- a/core/client/assets/sass/layouts/settings.scss +++ b/core/client/assets/sass/layouts/settings.scss @@ -172,6 +172,10 @@ margin-left: 15px; } + img { + max-width: 100%; + } + display: none; &.active {display:block;} diff --git a/core/client/assets/sass/modules/global.scss b/core/client/assets/sass/modules/global.scss index 5bbfcf69ff..1dc8d8534e 100644 --- a/core/client/assets/sass/modules/global.scss +++ b/core/client/assets/sass/modules/global.scss @@ -1015,13 +1015,12 @@ body.blur > *:not(#modal-container) { } .modal-content { - padding: 20px; + padding: 0 20px; } .modal-footer { padding: 20px; padding-top: 0; - text-align: center; } .modal-style-wide { @@ -1176,17 +1175,6 @@ main { padding-left:5px; } - .image-edit { - line-height: 12px; - padding: 10px; - display: block; - position: absolute; - top: 0; - left: 0; - opacity: 0; - text-decoration: none; - } - .image-webcam { @include icon($i-camera, 12px); line-height: 12px; @@ -1251,7 +1239,7 @@ main { @include box-sizing(border-box); @include baseline; position: relative; - overflow:hidden; + overflow: hidden; height: auto; color: $brown; @@ -1260,16 +1248,31 @@ main { left: 9999px; opacity: 0; } - .image-edit { - - line-height: 12px; - padding: 10px; - display: block; - position: absolute; - top: 0; - left: 0; - opacity: 0; + a { + z-index: 10000; + color: $brown; text-decoration: none; + + &:hover { + color: $darkgrey; + } + } + img { + max-width: 100%; + } + .image-cancel { + @include icon($i-x, 16px); + position: absolute; + color: white; + text-shadow: rgba(0,0,0,0.5) 0 0 1px; + top: 10px; + right: 10px; + text-decoration: none; + + &:hover { + cursor: pointer; + color: white; + } } } diff --git a/core/client/tpl/modals/uploadImage.hbs b/core/client/tpl/modals/uploadImage.hbs new file mode 100644 index 0000000000..07f3525688 --- /dev/null +++ b/core/client/tpl/modals/uploadImage.hbs @@ -0,0 +1,4 @@ +
+ + +
diff --git a/core/client/tpl/settings/general.hbs b/core/client/tpl/settings/general.hbs index ffbb06709a..cc344f147f 100644 --- a/core/client/tpl/settings/general.hbs +++ b/core/client/tpl/settings/general.hbs @@ -15,19 +15,22 @@
-
- - -
+ {{#if logo}} + + {{else}} + + {{/if}}

Display a logo on your site in place of blog title

-
- - -
+ {{#if icon}} + icon + {{else}} + Upload Image + {{/if}} +

The icon for your blog, used in your browser tab and elsewhere

diff --git a/core/client/views/settings.js b/core/client/views/settings.js index cb49de7d95..d5fcc7c17e 100644 --- a/core/client/views/settings.js +++ b/core/client/views/settings.js @@ -151,7 +151,9 @@ id: "general", events: { - 'click .button-save': 'saveSettings' + 'click .button-save': 'saveSettings', + 'click .js-modal-logo': 'showLogo', + 'click .js-modal-icon': 'showIcon' }, saveSettings: function () { @@ -169,7 +171,58 @@ }); this.model.set({availableThemes: themes}); }, - + showLogo: function () { + var settings = this.model.toJSON(); + this.showUpload('#logo', 'logo', settings.logo); + }, + showIcon: function () { + var settings = this.model.toJSON(); + this.showUpload('#icon', 'icon', settings.icon); + }, + showUpload: function (id, key, src) { + var self = this; + this.addSubview(new Ghost.Views.Modal({ + model: { + options: { + close: false, + type: "action", + style: "wide", + animation: 'fadeIn', + afterRender: function () { + this.$('.js-drop-zone').upload(); + }, + confirm: { + accept: { + func: function () { // The function called on acceptance + var data = {}; + data[key] = this.$('.js-upload-target').attr('src'); + self.model.save(data, { + success: self.saveSuccess, + error: self.saveError + }); + self.render(); + return true; + }, + buttonClass: "button-save right", + text: "Save" // The accept button text + }, + reject: { + func: function () { // The function called on rejection + return true; + }, + buttonClass: true, + text: "Cancel" // The reject button text + } + }, + id: id, + src: src + }, + content: { + template: 'uploadImage' + } + } + })); + }, templateName: 'settings/general', beforeRender: function () {