From e61f3684d55097fcaf772b3f211aea2fe5a94d9d Mon Sep 17 00:00:00 2001 From: cobbspur Date: Wed, 4 Sep 2013 18:42:01 +0100 Subject: [PATCH] Adds modal Image uploader on settings page issue #432 adds a modal template for image uploads adds buttons to settings page to upload images for blog logo and icon once image is uploaded displays an 'X' to reset back to dropzone saves image and renders settings page. ToDo add url field when clicking on url icon fix position of 'X' for both settings and editor --- core/client/assets/lib/uploader.js | 50 ++++------------ core/client/assets/sass/layouts/settings.scss | 4 ++ core/client/assets/sass/modules/global.scss | 49 ++++++++-------- core/client/tpl/modals/uploadImage.hbs | 4 ++ core/client/tpl/settings/general.hbs | 19 ++++--- core/client/views/settings.js | 57 ++++++++++++++++++- 6 files changed, 110 insertions(+), 73 deletions(-) create mode 100644 core/client/tpl/modals/uploadImage.hbs 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 () {