From 94c23938b1121d3a21181c8292d827c037f2088e Mon Sep 17 00:00:00 2001 From: Park Hyunwoo Date: Thu, 6 Dec 2018 16:19:32 +0900 Subject: [PATCH] Update image popover with new icons --- lang/summernote-ko-KR.js | 1 + src/icons/float-left.svg | 12 ++++++++++++ src/icons/float-none.svg | 14 ++++++++++++++ src/icons/float-right.svg | 12 ++++++++++++ src/icons/rollback.svg | 20 ++++++++++++++++++++ src/js/base/module/Buttons.js | 27 +++++++++++++++++---------- src/js/base/module/Editor.js | 15 ++++++++++----- src/js/base/settings.js | 5 ++++- src/js/base/summernote-en-US.js | 9 +++++---- 9 files changed, 95 insertions(+), 20 deletions(-) create mode 100644 src/icons/float-left.svg create mode 100644 src/icons/float-none.svg create mode 100644 src/icons/float-right.svg create mode 100644 src/icons/rollback.svg diff --git a/lang/summernote-ko-KR.js b/lang/summernote-ko-KR.js index 6ddac5ba1..4e4fd0668 100644 --- a/lang/summernote-ko-KR.js +++ b/lang/summernote-ko-KR.js @@ -19,6 +19,7 @@ resizeFull: '100% 크기로 변경', resizeHalf: '50% 크기로 변경', resizeQuarter: '25% 크기로 변경', + resizeNone: '원본 크기', floatLeft: '왼쪽 정렬', floatRight: '오른쪽 정렬', floatNone: '정렬하지 않음', diff --git a/src/icons/float-left.svg b/src/icons/float-left.svg new file mode 100644 index 000000000..2667625ae --- /dev/null +++ b/src/icons/float-left.svg @@ -0,0 +1,12 @@ + + + + + + + + diff --git a/src/icons/float-none.svg b/src/icons/float-none.svg new file mode 100644 index 000000000..be2ecb58a --- /dev/null +++ b/src/icons/float-none.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + diff --git a/src/icons/float-right.svg b/src/icons/float-right.svg new file mode 100644 index 000000000..31b152a1a --- /dev/null +++ b/src/icons/float-right.svg @@ -0,0 +1,12 @@ + + + + + + + + diff --git a/src/icons/rollback.svg b/src/icons/rollback.svg new file mode 100644 index 000000000..fb1341b7b --- /dev/null +++ b/src/icons/rollback.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + diff --git a/src/js/base/module/Buttons.js b/src/js/base/module/Buttons.js index e0f25523a..9afe95a57 100644 --- a/src/js/base/module/Buttons.js +++ b/src/js/base/module/Buttons.js @@ -617,40 +617,47 @@ export default class Buttons { } /** - * image : [ - * ['imagesize', ['imageSize100', 'imageSize50', 'imageSize25']], - * ['float', ['floatLeft', 'floatRight', 'floatNone' ]], - * ['remove', ['removeMedia']] + * image: [ + * ['imageResize', ['resizeFull', 'resizeHalf', 'resizeQuarter', 'resizeNone']], + * ['float', ['floatLeft', 'floatRight', 'floatNone']], + * ['remove', ['removeMedia']], * ], */ addImagePopoverButtons() { // Image Size Buttons - this.context.memo('button.imageSize100', () => { + this.context.memo('button.resizeFull', () => { return this.button({ contents: '100%', tooltip: this.lang.image.resizeFull, click: this.context.createInvokeHandler('editor.resize', '1'), }).render(); }); - this.context.memo('button.imageSize50', () => { + this.context.memo('button.resizeHalf', () => { return this.button({ contents: '50%', tooltip: this.lang.image.resizeHalf, click: this.context.createInvokeHandler('editor.resize', '0.5'), }).render(); }); - this.context.memo('button.imageSize25', () => { + this.context.memo('button.resizeQuarter', () => { return this.button({ contents: '25%', tooltip: this.lang.image.resizeQuarter, click: this.context.createInvokeHandler('editor.resize', '0.25'), }).render(); }); + this.context.memo('button.resizeNone', () => { + return this.button({ + contents: this.ui.icon(this.options.icons.rollback), + tooltip: this.lang.image.resizeNone, + click: this.context.createInvokeHandler('editor.resize', '0'), + }).render(); + }); // Float Buttons this.context.memo('button.floatLeft', () => { return this.button({ - contents: this.ui.icon(this.options.icons.alignLeft), + contents: this.ui.icon(this.options.icons.floatLeft), tooltip: this.lang.image.floatLeft, click: this.context.createInvokeHandler('editor.floatMe', 'left'), }).render(); @@ -658,7 +665,7 @@ export default class Buttons { this.context.memo('button.floatRight', () => { return this.button({ - contents: this.ui.icon(this.options.icons.alignRight), + contents: this.ui.icon(this.options.icons.floatRight), tooltip: this.lang.image.floatRight, click: this.context.createInvokeHandler('editor.floatMe', 'right'), }).render(); @@ -666,7 +673,7 @@ export default class Buttons { this.context.memo('button.floatNone', () => { return this.button({ - contents: this.ui.icon(this.options.icons.alignJustify), + contents: this.ui.icon(this.options.icons.rollback), tooltip: this.lang.image.floatNone, click: this.context.createInvokeHandler('editor.floatMe', 'none'), }).render(); diff --git a/src/js/base/module/Editor.js b/src/js/base/module/Editor.js index f28dbd634..5519ca9d6 100644 --- a/src/js/base/module/Editor.js +++ b/src/js/base/module/Editor.js @@ -304,7 +304,7 @@ export default class Editor { const $target = $(this.restoreTarget()); $target.toggleClass('note-float-left', value === 'left'); $target.toggleClass('note-float-right', value === 'right'); - $target.css('float', value); + $target.css('float', (value === 'none' ? '' : value)); }); /** @@ -313,10 +313,15 @@ export default class Editor { */ this.resize = this.wrapCommand((value) => { const $target = $(this.restoreTarget()); - $target.css({ - width: value * 100 + '%', - height: '', - }); + value = parseFloat(value); + if (value === 0) { + $target.css('width', ''); + } else { + $target.css({ + width: value * 100 + '%', + height: '', + }); + } }); } diff --git a/src/js/base/settings.js b/src/js/base/settings.js index 206066220..ecb8cf1c5 100644 --- a/src/js/base/settings.js +++ b/src/js/base/settings.js @@ -80,7 +80,7 @@ $.summernote = $.extend($.summernote, { popatmouse: true, popover: { image: [ - ['imagesize', ['imageSize100', 'imageSize50', 'imageSize25']], + ['resize', ['resizeFull', 'resizeHalf', 'resizeQuarter', 'resizeNone']], ['float', ['floatLeft', 'floatRight', 'floatNone']], ['remove', ['removeMedia']], ], @@ -288,6 +288,8 @@ $.summernote = $.extend($.summernote, { 'close': 'note-icon-close', 'code': 'note-icon-code', 'eraser': 'note-icon-eraser', + 'floatLeft': 'note-icon-float-left', + 'floatRight': 'note-icon-float-right', 'font': 'note-icon-font', 'frame': 'note-icon-frame', 'italic': 'note-icon-italic', @@ -301,6 +303,7 @@ $.summernote = $.extend($.summernote, { 'picture': 'note-icon-picture', 'question': 'note-icon-question', 'redo': 'note-icon-redo', + 'rollback': 'note-icon-rollback', 'square': 'note-icon-square', 'strikethrough': 'note-icon-strikethrough', 'subscript': 'note-icon-subscript', diff --git a/src/js/base/summernote-en-US.js b/src/js/base/summernote-en-US.js index 33969da82..4f83cc8ef 100644 --- a/src/js/base/summernote-en-US.js +++ b/src/js/base/summernote-en-US.js @@ -21,12 +21,13 @@ $.extend($.summernote.lang, { image: { image: 'Picture', insert: 'Insert Image', - resizeFull: 'Resize Full', - resizeHalf: 'Resize Half', - resizeQuarter: 'Resize Quarter', + resizeFull: 'Resize full', + resizeHalf: 'Resize half', + resizeQuarter: 'Resize quarter', + resizeNone: 'Original size', floatLeft: 'Float Left', floatRight: 'Float Right', - floatNone: 'Float None', + floatNone: 'Remove float', shapeRounded: 'Shape: Rounded', shapeCircle: 'Shape: Circle', shapeThumbnail: 'Shape: Thumbnail',