diff --git a/apps/common/main/lib/component/Mixtbar.js b/apps/common/main/lib/component/Mixtbar.js index 3997a41c3..36383a766 100644 --- a/apps/common/main/lib/component/Mixtbar.js +++ b/apps/common/main/lib/component/Mixtbar.js @@ -52,6 +52,7 @@ define([ var $scrollL; var optsFold = {timeout: 2000}; var config = {}; + var btnsMore = []; var onScrollTabs = function(opts, e) { var sv = $boxTabs.scrollLeft(); @@ -126,7 +127,9 @@ define([ $boxTabs = me.$('.tabs > ul'); me.$tabs = $boxTabs.find('> li'); - me.$panels = me.$('.box-panels > .panel'); + me.$boxpanels = me.$('.box-panels'); + me.$panels = me.$boxpanels.find('> .panel'); + optsFold.$bar = me.$('.toolbar'); var $scrollR = me.$('.tabs .scroll.right'); $scrollL = me.$('.tabs .scroll.left'); @@ -236,6 +239,7 @@ define([ } this.processPanelVisible(); + // this.resizeToolbar(); }, onTabClick: function (e) { @@ -286,11 +290,13 @@ define([ if ( tab ) { me.$tabs.removeClass('active'); me.$panels.removeClass('active'); + me.hideMoreBtns(); var panel = this.$panels.filter('[data-tab=' + tab + ']'); if ( panel.length ) { this.lastPanel = tab; panel.addClass('active'); + me.setMoreButton(tab, panel); } if ( panel.length ) { @@ -449,6 +455,7 @@ define([ } } } + me.resizeToolbar(); }; if ( now === true ) _fc(); else @@ -477,6 +484,239 @@ define([ this.$tabs.find('> a[data-tab=' + tab + ']').parent().css('display', visible ? '' : 'none'); this.onResize(); } + }, + + setMoreButton: function(tab, panel) { + if (!btnsMore[tab]) { + var box = $(''); + panel.append(box); + btnsMore[tab] = new Common.UI.Button({ + cls: 'btn-toolbar x-huge icon-top dropdown-manual', + caption: 'More', + iconCls: 'btn-insertchart', + enableToggle: true + }); + btnsMore[tab].render(box.find('.slot-btn-more')); + btnsMore[tab].on('toggle', function(btn, state, e) { + Common.NotificationCenter.trigger('more:toggle', btn, state); + }); + var moreContainer = $(''); + optsFold.$bar.append(moreContainer); + btnsMore[tab].panel = moreContainer.find('div'); + } + this.$moreBar = btnsMore[tab].panel; + this.resizeToolbar(true); + }, + + resizeToolbar: function(reset) { + var activePanel = this.$panels.filter('.active'), + more_section = activePanel.find('.more-box'), + more_section_width = parseInt(more_section.css('width')) || 0, + boxpanels_offset = this.$boxpanels.offset(), + boxpanels_width = this.$boxpanels.width(), + delta = (this._prevBoxWidth) ? (boxpanels_width - this._prevBoxWidth) : -1; + this._prevBoxWidth = boxpanels_width; + more_section.is(':visible') && (boxpanels_width -= more_section_width); + + var boxpanels_right = boxpanels_offset.left + boxpanels_width; + + if (this.$moreBar && this.$moreBar.parent().is(':visible')) { + this.$moreBar.parent().css('max-width', Common.Utils.innerWidth()); + } + + if ((reset || delta<0) && activePanel.width() > boxpanels_width) { + if (!more_section.is(':visible')) { + more_section.css('display', ""); + boxpanels_width = this.$boxpanels.width() - parseInt(more_section.css('width')); + boxpanels_right = boxpanels_offset.left + boxpanels_width; + } + + var last_separator = null, + last_group = null, + prevchild = this.$moreBar.children(); + if (prevchild.length>0) { + prevchild = $(prevchild[0]); + if (prevchild.hasClass('separator')) + last_separator = prevchild; + if (prevchild.hasClass('group') && prevchild.attr('group-state') == 'open') + last_group = prevchild; + } + + var items = activePanel.find('> div:not(.more-box)'); + var need_break = false; + for (var i=items.length-1; i>=0; i--) { + var item = $(items[i]); + if (item.hasClass('group')) { + var offset = item.offset(), + item_width = item.width(), + children = item.children(); + if (!item.attr('inner-width') && item.attr('group-state') !== 'open') { + item.attr('inner-width', item_width); + for (var j=children.length-1; j>=0; j--) { + var child = $(children[j]); + child.attr('inner-width', child.width()); + } + } + if ((offset.left > boxpanels_right || children.length==1) && item.attr('group-state') != 'open') { + // move group + this.$moreBar.prepend(item); + if (last_separator) { + last_separator.css('display', ''); + } + } else if ( offset.left+item_width > boxpanels_right ) { + // move buttons from group + for (var j=children.length-1; j>=0; j--) { + var child = $(children[j]); + if (child.hasClass('.elset')) { + this.$moreBar.prepend(item); + if (last_separator) { + last_separator.css('display', ''); + } + break; + } else { + var child_offset = child.offset(), + child_width = child.width(); + if (child_offset.left+child_width>boxpanels_right) { + if (!last_group) { + last_group = $('
'); + this.$moreBar.prepend(last_group); + if (last_separator) { + last_separator.css('display', ''); + } + } + last_group.prepend(child); + } else { + need_break = true; + break; + } + } + } + if (item.children().length<1) { // all buttons are moved + item.remove(); + last_group && last_group.removeAttr('group-state').attr('inner-width', item.attr('inner-width')); + last_group = null; + } else { + last_group && last_group.attr('group-state', 'open') && item.attr('group-state', 'open'); + } + if (need_break) + break; + } else { + break; + } + last_separator = null; + } else if (item.hasClass('separator')) { + this.$moreBar.prepend(item); + item.css('display', 'none'); + last_separator = item; + } + } + } else if ((reset || delta>0) && more_section.is(':visible')) { + var last_separator = null, + last_group = null, + prevchild = activePanel.find('> div:not(.more-box)'); + var last_width = 0; + if (prevchild.length>0) { + prevchild = $(prevchild[prevchild.length-1]); + if (prevchild.hasClass('separator')) { + last_separator = prevchild; + last_width = 13; + } + if (prevchild.hasClass('group') && prevchild.attr('group-state') == 'open') + last_group = prevchild; + } + + var items = this.$moreBar.children(); + var active_width = activePanel.width(); + + if (items.length>0) { + // from more panel to toolbar + for (var i=0; i'); + more_section.before(last_group); + if (last_separator) { + last_separator.css('display', ''); + } + } + last_group.append(child); + } else { + need_break = true; + break; + } + } + } + if (item.children().length<1) { // all buttons are moved + item.remove(); + last_group && last_group.removeAttr('group-state').attr('inner-width', item.attr('inner-width')); + last_group = null; + if (this.$moreBar.children().filter('.group').length == 0) { + this.hideMoreBtns(); + more_section.css('display', "none"); + } + } else { + last_group && last_group.attr('group-state', 'open') && item.attr('group-state', 'open'); + } + if (need_break) + break; + } else { + break; + } + last_separator = null; last_width = 0; + } else if (item.hasClass('separator')) { + more_section.before(item); + item.css('display', 'none'); + last_separator = item; + last_width = 13; + } + } + } else { + this.hideMoreBtns(); + more_section.css('display', "none"); + } + } + }, + + hideMoreBtns: function() { + for (var btn in btnsMore) { + btnsMore[btn] && btnsMore[btn].toggle(false); + } } }; }())); diff --git a/apps/documenteditor/main/app/controller/Toolbar.js b/apps/documenteditor/main/app/controller/Toolbar.js index 72cba6913..bfd928c35 100644 --- a/apps/documenteditor/main/app/controller/Toolbar.js +++ b/apps/documenteditor/main/app/controller/Toolbar.js @@ -364,6 +364,7 @@ define([ Common.Gateway.on('setmailmergerecipients', _.bind(this.setMailMergeRecipients, this)); $('#id-toolbar-menu-new-control-color').on('click', _.bind(this.onNewControlsColor, this)); toolbar.listStylesAdditionalMenuItem.on('click', this.onMenuSaveStyle.bind(this)); + Common.NotificationCenter.on('more:toggle', _.bind(this.onMoreToggle, this)); this.onSetupCopyStyleButton(); this.onBtnChangeState('undo:disabled', toolbar.btnUndo, toolbar.btnUndo.isDisabled()); @@ -3325,6 +3326,32 @@ define([ })).show(); }, + onMoreToggle: function(btn, state, e) { + (state) ? this.onMoreShow(btn, e) : this.onMoreHide(btn, e); + }, + + onMoreHide: function(btn, e) { + var moreContainer = btn.panel.parent(); + if (btn.pressed) { + btn.toggle(false, true); + } + if (moreContainer.is(':visible')) { + moreContainer.hide(); + Common.NotificationCenter.trigger('edit:complete', this.toolbar, btn); + } + }, + + onMoreShow: function(btn, e) { + var moreContainer = btn.panel.parent(); + var target = btn.$el, + showxy = target.offset(), + right = Common.Utils.innerWidth() - showxy.left - target.width(), + top = showxy.top + target.height(); + + moreContainer.css({right: right, left: 'auto', top : top}); + moreContainer.show(); + }, + textEmptyImgUrl : 'You need to specify image URL.', textWarning : 'Warning', textFontSizeErr : 'The entered value is incorrect.
Please enter a numeric value between 1 and 300', diff --git a/apps/documenteditor/main/app/template/Toolbar.template b/apps/documenteditor/main/app/template/Toolbar.template index a20d3042e..4abb17a61 100644 --- a/apps/documenteditor/main/app/template/Toolbar.template +++ b/apps/documenteditor/main/app/template/Toolbar.template @@ -27,7 +27,7 @@
-
+
@@ -218,5 +218,11 @@
+
\ No newline at end of file diff --git a/apps/documenteditor/main/app/view/Toolbar.js b/apps/documenteditor/main/app/view/Toolbar.js index 5e6b1d1df..b2924ae18 100644 --- a/apps/documenteditor/main/app/view/Toolbar.js +++ b/apps/documenteditor/main/app/view/Toolbar.js @@ -1311,6 +1311,7 @@ define([ cls: 'combo-styles', itemWidth: itemWidth, itemHeight: itemHeight, + style: 'min-width:145px;', // hint : this.tipParagraphStyle, dataHint: '1', dataHintDirection: 'bottom', @@ -1404,6 +1405,14 @@ define([ }); } + this.btnMore = new Common.UI.Button({ + id: 'tlbtn-more', + cls: 'btn-toolbar x-huge icon-top dropdown-manual', + caption: this.capBtnMore, + iconCls: 'btn-insertchart', + enableToggle: true + }); + this.on('render:after', _.bind(this.onToolbarAfterRender, this)); } else { Common.UI.Mixtbar.prototype.initialize.call(this, { @@ -1556,6 +1565,7 @@ define([ _injectComponent('#slot-img-movebkwd', this.btnImgBackward); _injectComponent('#slot-img-wrapping', this.btnImgWrapping); _injectComponent('#slot-btn-watermark', this.btnWatermark); + _injectComponent('#slot-btn-more', this.btnMore); this.btnsPageBreak = Common.Utils.injectButtons($host.find('.btn-slot.btn-pagebreak'), '', 'toolbar__icon btn-pagebreak', this.capBtnInsPagebreak, undefined, true, true, undefined, '1', 'bottom', 'small'); Array.prototype.push.apply(this.paragraphControls, this.btnsPageBreak); @@ -2653,7 +2663,8 @@ define([ tipMarkersCheckmark: 'Checkmark bullets', tipMarkersFRhombus: 'Filled rhombus bullets', tipMarkersDash: 'Dash bullets', - textTabView: 'View' + textTabView: 'View', + capBtnMore: 'More' } })(), DE.Views.Toolbar || {})); }); diff --git a/apps/documenteditor/main/resources/less/toolbar.less b/apps/documenteditor/main/resources/less/toolbar.less index ffd289f93..fd243c49a 100644 --- a/apps/documenteditor/main/resources/less/toolbar.less +++ b/apps/documenteditor/main/resources/less/toolbar.less @@ -165,9 +165,10 @@ margin-left: 2px; } -#slot-field-styles { +section #slot-field-styles { width: 100%; min-width: 160px; + padding-right: 12px; } #special-paste-container {