From 56c91e350b616dc201ab9db06d19c248fbcae475 Mon Sep 17 00:00:00 2001 From: Konstantin Kireyev Date: Thu, 30 Jan 2025 17:59:44 +0500 Subject: [PATCH] fix: bugs --- .../main/app/view/DocumentPreview.js | 205 ++++++++++-------- .../main/resources/less/document-preview.less | 15 +- 2 files changed, 114 insertions(+), 106 deletions(-) diff --git a/apps/presentationeditor/main/app/view/DocumentPreview.js b/apps/presentationeditor/main/app/view/DocumentPreview.js index 031d308974..5ad3539836 100644 --- a/apps/presentationeditor/main/app/view/DocumentPreview.js +++ b/apps/presentationeditor/main/app/view/DocumentPreview.js @@ -42,7 +42,8 @@ define([ 'backbone', 'common/main/lib/component/BaseView', 'presentationeditor/main/app/model/Pages', - 'common/main/lib/component/InputField' + 'common/main/lib/component/InputField', + 'common/main/lib/component/ColorPaletteExt', ], function () { 'use strict'; @@ -85,7 +86,7 @@ define([ '
', '', '', - '
', + '
', '
', '
', '
', @@ -117,106 +118,115 @@ define([ scope: this })); - this.btnDraw = new Common.UI.Button({ - parentEl: $('#btn-preview-draw', this.el), - cls: 'btn-toolbar small', - iconCls: 'toolbar__icon btn-pen-tool', - onlyIcon: true, - stopPropagation: true, - takeFocusOnClose: true, - hint: this.txtDraw, - hintAnchor: 'top', - hintContainer: '#pe-preview', - menu: new Common.UI.Menu({ - menuAlign: 'tl-tr', - style: 'min-width: 120px; height: auto; min-height: fit-content;', - additionalAlign: function(root) { - var parent = root.parent(); - var parentOffset = Common.Utils.getOffset(parent); - root.css({ - left: parentOffset.left + (parent.outerWidth() - root.outerWidth()) / 2, - top: parentOffset.top - root.outerHeight() - 8 - }); - }, - items: [ - new Common.UI.MenuItem({ - caption: this.txtPen, - value: 'pen', - iconCls: 'menu__icon btn-pen-tool', - checkable: true, - toggleGroup: 'preview-draw-tool' - }), - new Common.UI.MenuItem({ - caption: this.txtHighlighter, - value: 'highlighter', - iconCls: 'menu__icon btn-highlighter-tool', - checkable: true, - toggleGroup: 'preview-draw-tool' - }), - { caption: '--' }, - { - caption: this.txtInkColor, - style: `padding-${Common.UI.isRTL() ? 'right' : 'left'}: 28px;`, - menu: new Common.UI.Menu({ - items: [{value:"FFFFFF"},{value:"000000"},{value:"E81416"},{value:"FFA500"},{value:"FAEB36"},{value:"79C314"},{value:"487DE7"},{value:"4B369D"},{value:"70369D"}], - menuAlign: 'tl-tr', - style: 'min-width: 176px; padding: 5px; height: auto; min-height: fit-content;', - itemTemplate: _.template('
') - }) + if (Common.Utils.isIE) { + document.getElementById('preview-group-draw').style.display = 'none'; + } else { + this.btnDraw = new Common.UI.Button({ + parentEl: $('#btn-preview-draw', this.el), + cls: 'btn-toolbar small', + iconCls: 'toolbar__icon btn-pen-tool', + onlyIcon: true, + stopPropagation: true, + takeFocusOnClose: true, + hint: this.txtDraw, + hintAnchor: 'top', + hintContainer: '#pe-preview', + menu: new Common.UI.Menu({ + menuAlign: 'tl-tr', + cls: "shifted-right", + style: 'min-width: 120px; height: auto; min-height: fit-content;', + additionalAlign: function (root) { + var parent = root.parent(); + var parentOffset = Common.Utils.getOffset(parent); + root.css({ + left: parentOffset.left + (parent.outerWidth() - root.outerWidth()) / 2, + top: parentOffset.top - root.outerHeight() - 8 + }); }, - { caption: '--' }, - new Common.UI.MenuItem({ - caption: this.txtEraser, - value: 'eraser', - iconCls: 'menu__icon btn-clearstyle', - checkable: true, - toggleGroup: 'preview-draw-tool' - }), - { caption: this.txtEraseScreen, value: 'eraseAll', iconCls: 'menu__icon btn-clear-all' }, - ] - }), - }); + items: [ + new Common.UI.MenuItem({ + caption: this.txtPen, + value: 'pen', + iconCls: 'menu__icon btn-pen-tool', + checkable: true, + toggleGroup: 'preview-draw-tool' + }), + new Common.UI.MenuItem({ + caption: this.txtHighlighter, + value: 'highlighter', + iconCls: 'menu__icon btn-highlighter-tool', + checkable: true, + toggleGroup: 'preview-draw-tool' + }), + { caption: '--' }, + { + caption: this.txtInkColor, + menu: new Common.UI.Menu({ + // items: [{ value: "FFFFFF" }, { value: "000000" }, { value: "E81416" }, { value: "FFA500" }, { value: "FAEB36" }, { value: "79C314" }, { value: "487DE7" }, { value: "4B369D" }, { value: "70369D" }], + menuAlign: 'tl-tr', + cls: "preview-draw-color-picker-menu", + style: 'min-width: 140px; padding: 0px; height: auto; min-height: fit-content;', + // itemTemplate: _.template('
') + }) + }, + { caption: '--' }, + new Common.UI.MenuItem({ + caption: this.txtEraser, + value: 'eraser', + iconCls: 'menu__icon btn-clearstyle', + checkable: true, + toggleGroup: 'preview-draw-tool' + }), + { caption: this.txtEraseScreen, value: 'eraseAll', iconCls: 'menu__icon btn-clear-all' }, + ] + }), + }); - this.btnDraw.menu.on('item:click', (_, item) => { - if (this.currentDrawTool === item.value) { - item.setChecked(false); - this.drawTool['select'](); - this.btnDraw.toggle(false); - this.currentDrawTool = undefined; - return; - } - - if (item.value === 'eraseAll') { - this.btnDraw.toggle(false); + this.drawColorPicker = new Common.UI.ColorPaletteExt({ + el: $('.preview-draw-color-picker-menu'), + colors: ["FFFFFF","000000","E81416","FFA500","FAEB36","79C314","487DE7","4B369D","70369D"] + }); + this.drawColorPicker.on('select', (_picker, color) => { + this.currentDrawColor = color; const currentTool = this.btnDraw.menu.getChecked(); - currentTool && currentTool.setChecked(false); - } else { - this.btnDraw.toggle(true); - this.currentDrawTool = item.value; - } - this.drawTool[item.value](); - }); + if (!currentTool) { + this.btnDraw.toggle(true); + this.btnDraw.menu.items[0].setChecked(true); + this.drawTool['pen'](); + return; + } - this.btnDraw.menu.items[3].menu.on('item:click', (menu, item) => { - this.currentDrawColor = item.value; - const currentTool = this.btnDraw.menu.getChecked(); - this.btnDraw.toggle(true); + if (currentTool.value === 'pen' || currentTool.value === 'highlighter') { + this.drawTool[currentTool.value](); + } else { + this.btnDraw.menu.items[this.btnDraw.menu.items.indexOf(currentTool)].setChecked(false); + this.btnDraw.menu.items[0].setChecked(true); + this.drawTool['pen'](); + } + }); - if (!currentTool) { - this.btnDraw.menu.items[0].setChecked(true); - this.drawTool['pen'](); - return; - } + this.btnDraw.menu.on('item:click', (_, item) => { + if (this.currentDrawTool === item.value) { + item.setChecked(false); + this.drawTool['select'](); + this.btnDraw.toggle(false); + this.currentDrawTool = undefined; + return; + } - if (currentTool.value === 'pen' || currentTool.value === 'highlighter') { - this.drawTool[currentTool.value](); - } else { - this.btnDraw.menu.items[this.btnDraw.menu.items.indexOf(currentTool)].setChecked(false); - this.btnDraw.menu.items[0].setChecked(true); - this.drawTool['pen'](); - } - }); + if (item.value === 'eraseAll') { + this.btnDraw.toggle(false); + const currentTool = this.btnDraw.menu.getChecked(); + currentTool && currentTool.setChecked(false); + } else { + this.btnDraw.toggle(true); + this.currentDrawTool = item.value; + } + + this.drawTool[item.value](); + }); + } this.btnPrev = new Common.UI.Button({ el: $('#btn-preview-prev',this.el), @@ -267,6 +277,9 @@ define([ }); this.btnClose.on('click', _.bind(function() { if (this.api) this.api.EndDemonstration(); + this.btnDraw.menu.clearAll(); + this.btnDraw.toggle(false); + this.currentDrawTool = undefined; }, this)); this.btnFullScreen = new Common.UI.Button({ @@ -356,7 +369,7 @@ define([ me.btnFullScreen.changeIcon({curr: 'btn-fullscreen', next: 'btn-preview-exit-fullscreen'}); } else { me.btnFullScreen.changeIcon({curr: 'btn-preview-exit-fullscreen', next: 'btn-fullscreen'}); - me.btnDraw.toggle(false); + me.btnDraw.menu.hide(); } setTimeout( function() { diff --git a/apps/presentationeditor/main/resources/less/document-preview.less b/apps/presentationeditor/main/resources/less/document-preview.less index bf890252ac..accab784a1 100644 --- a/apps/presentationeditor/main/resources/less/document-preview.less +++ b/apps/presentationeditor/main/resources/less/document-preview.less @@ -69,16 +69,6 @@ } } - .preview-color-cell { - cursor: pointer; - width: 16px; - height: 16px; - border: @scaled-one-px-value-ie solid #808080; - border: @scaled-one-px-value solid #808080; - float: left; - .margin-right-2(); - } - #btn-preview-draw { button { min-width: 20px; @@ -92,6 +82,11 @@ &:before { display: none; } + + .menu-item-icon { + background-position-x: -20px; + background-position-x: @button-small-active-icon-offset-x; + } } } }