diff --git a/apps/common/main/lib/component/TabBar.js b/apps/common/main/lib/component/TabBar.js index c9c92dbdba..785530d4e7 100644 --- a/apps/common/main/lib/component/TabBar.js +++ b/apps/common/main/lib/component/TabBar.js @@ -286,6 +286,7 @@ define([ Common.UI.BaseView.prototype.initialize.call(this, options); this.saved = []; + this.isRTL = options.isRTL || false; }, render: function () { @@ -567,8 +568,8 @@ define([ checkInvisible: function(suppress) { var result = { - first: !this.isTabVisible(Common.UI.isRTL() ? this.tabs.length-1 : 0), - last: !this.isTabVisible(Common.UI.isRTL() ? 0 : this.tabs.length-1) + first: !this.isTabVisible(this.isRTL ? this.tabs.length-1 : 0), + last: !this.isTabVisible(this.isRTL ? 0 : this.tabs.length-1) }; !suppress && this.fireEvent('tab:invisible', this, result); @@ -630,5 +631,9 @@ define([ }); return width; }, + + setDirection: function(isRTL) { + this.isRTL = isRTL; + } }); }); diff --git a/apps/spreadsheeteditor/main/app/controller/Statusbar.js b/apps/spreadsheeteditor/main/app/controller/Statusbar.js index 8f1459d379..cde1546ae8 100644 --- a/apps/spreadsheeteditor/main/app/controller/Statusbar.js +++ b/apps/spreadsheeteditor/main/app/controller/Statusbar.js @@ -315,7 +315,6 @@ define([ onApiEditCell: function(state) { var disableAdd = (state == Asc.c_oAscCellEditorState.editFormula), disable = (state != Asc.c_oAscCellEditorState.editEnd), - mask = $('.statusbar-mask'), statusbar = this.statusbar; statusbar.isEditFormula = disableAdd; @@ -326,14 +325,6 @@ define([ statusbar.btnAddWorksheet.setDisabled(disable || this.api.asc_isWorkbookLocked() || this.api.asc_isProtectedWorkbook() || statusbar.rangeSelectionMode!=Asc.c_oAscSelectionDialogType.None); statusbar.$el.find('#statusbar_bottom li span').attr('oo_editor_input', !disableAdd); - - if (disableAdd && mask.length>0 || !disableAdd && mask.length==0) return; - statusbar.$el.find('.statusbar').toggleClass('masked', disableAdd); - if(disableAdd) { - mask = $("
").appendTo(statusbar.$el); - } else { - mask.remove(); - } }, createDelayedElements: function() { diff --git a/apps/spreadsheeteditor/main/app/template/StatusBar.template b/apps/spreadsheeteditor/main/app/template/StatusBar.template index ff65920a2c..2c0096414d 100644 --- a/apps/spreadsheeteditor/main/app/template/StatusBar.template +++ b/apps/spreadsheeteditor/main/app/template/StatusBar.template @@ -1,10 +1,10 @@
-
+
-
+
@@ -20,7 +20,7 @@
-
+
diff --git a/apps/spreadsheeteditor/main/app/view/Statusbar.js b/apps/spreadsheeteditor/main/app/view/Statusbar.js index 57032400d2..49882fb3f2 100644 --- a/apps/spreadsheeteditor/main/app/view/Statusbar.js +++ b/apps/spreadsheeteditor/main/app/view/Statusbar.js @@ -83,6 +83,8 @@ define([ this.editMode = false; this.rangeSelectionMode = Asc.c_oAscSelectionDialogType.None; + this.isRtlSheet = false; + this.tabBarDefPosition = 129; this.btnZoomDown = new Common.UI.Button({ el: $('#status-btn-zoomdown',this.el), @@ -224,7 +226,7 @@ define([ {caption: '--'}, { id: "id-tab-menu-new-color", - template: _.template('' + me.textNewColor + '') + template: _.template('' + me.textNewColor + '') } ] }); @@ -401,6 +403,7 @@ define([ setApi: function(api) { this.api = api; this.api.asc_registerCallback('asc_onSheetsChanged', _.bind(this.update, this)); + this.api.asc_registerCallback('asc_onUpdateSheetViewSettings', _.bind(this.onUpdateSheetViewSettings, this)); return this; }, @@ -513,6 +516,7 @@ define([ $('#status-label-zoom').text(Common.Utils.String.format(this.zoomText, Math.floor((this.api.asc_getZoom() +.005)*100))); + this.updateRtlSheet(); this.updateNumberOfSheet(sindex, wc); this.updateTabbarBorders(); @@ -522,6 +526,24 @@ define([ } }, + onUpdateSheetViewSettings: function() { + var oldRtl = this.isRtlSheet; + this.updateRtlSheet(); + (oldRtl !== this.isRtlSheet) && this.updateTabbarBorders(); + }, + + updateRtlSheet: function() { + this.isRtlSheet = !!this.api.asc_getSheetViewSettings().asc_getRightToLeft(); + this.cntStatusbar.toggleClass('rtl-sheet', this.isRtlSheet); + this.cntStatusbar.attr({dir: this.isRtlSheet ? 'rtl' : 'ltr'}); + this.tabbar.setDirection(this.isRtlSheet); + var dir = (this.isCompact ? this.isRtlSheet : Common.UI.isRTL()) ? 'rtl' : 'ltr'; + this.boxZoom.attr({dir: dir}); + this.boxMath.attr({dir: dir}); + this.boxFiltered.attr({dir: dir}); + this.sheetListMenu.menuAlign = this.isRtlSheet ? 'br-tr' : 'bl-tl'; + }, + setMathInfo: function(info) { if (info.count>1) { if (!this.boxMath.is(':visible')) this.boxMath.show(); @@ -600,6 +622,8 @@ define([ this.tabbar.addDataHint(index, this.mode.isEditOle ? '1' : '0'); } + this.updateRtlSheet(); + this.updateTabbarBorders(); this.fireEvent('sheet:changed', [this, tab.sheetindex]); this.fireEvent('sheet:updateColors', [true]); @@ -676,7 +700,7 @@ define([ onTabMenuAfterShow: function (obj) { if (obj.atposition) { - obj.setOffset(Common.UI.isRTL() ? (obj.atposition.right - $(obj.el).width()) : obj.atposition.left); + obj.setOffset(this.isRtlSheet ? (obj.atposition.right - $(obj.el).width()) : obj.atposition.left); } this.enableKeyEvents = true; @@ -719,33 +743,33 @@ define([ updateTabbarBorders: function() { var visible = false; - var right = parseInt(this.boxZoom.css('width')); + var right = parseFloat(this.boxZoom.css('width')); if (this.boxMath.is(':visible')) { - if (Common.UI.isRTL()) { - this.boxMath.css({'left': right + 'px'}); + if (this.isCompact && this.isRtlSheet || !this.isCompact && Common.UI.isRTL()) { + this.boxMath.css({'left': right + 'px', 'right': 'auto'}); } else { - this.boxMath.css({'right': right + 'px'}); + this.boxMath.css({'right': right + 'px', 'left': 'auto'}); } - right += parseInt(this.boxMath.css('width')); + right += parseFloat(this.boxMath.css('width')); visible = true; } if (this.boxFiltered.is(':visible')) { - if (Common.UI.isRTL()) { - this.boxFiltered.css({'left': right + 'px'}); + if (this.isCompact && this.isRtlSheet || !this.isCompact && Common.UI.isRTL()) { + this.boxFiltered.css({'left': right + 'px', 'right': 'auto'}); } else { - this.boxFiltered.css({'right': right + 'px'}); + this.boxFiltered.css({'right': right + 'px', 'left': 'auto'}); } - right += parseInt(this.boxFiltered.css('width')); + right += parseFloat(this.boxFiltered.css('width')); visible = true; } if (this.isCompact) { + var tabsWidth = this.tabbar.getWidth(); if (this.boxAction.is(':visible')) { - var tabsWidth = this.tabbar.getWidth(); var actionWidth = this.actionWidth || 140; - if (Common.Utils.innerWidth() - right - 129 - actionWidth - tabsWidth > 0) { // docWidth - right - left - this.boxAction.width - var left = tabsWidth + 129; - if (Common.UI.isRTL()) { + if (Common.Utils.innerWidth() - right - this.tabBarDefPosition - actionWidth - tabsWidth > 0) { // docWidth - right - left - this.boxAction.width + var left = tabsWidth + this.tabBarDefPosition; + if (this.isRtlSheet) { this.boxAction.css({'left': right + 'px', 'right': left + 'px', 'width': 'auto'}); this.boxAction.find('.separator').css('border-right-color', 'transparent'); } else { @@ -753,7 +777,7 @@ define([ this.boxAction.find('.separator').css('border-left-color', 'transparent'); } } else { - if (Common.UI.isRTL()) { + if (this.isRtlSheet) { this.boxAction.css({'left': right + 'px', 'right': 'auto', 'width': actionWidth + 'px'}); this.boxAction.find('.separator').css('border-right-color', ''); } else { @@ -763,15 +787,20 @@ define([ visible = true; } right += parseInt(this.boxAction.css('width')); - } + } else if (Common.Utils.innerWidth() - right - this.tabBarDefPosition - tabsWidth <=0) + visible = true; this.boxMath.is(':visible') && this.boxMath.css({'top': '0px', 'bottom': 'auto'}); this.boxFiltered.is(':visible') && this.boxFiltered.css({'top': '0px', 'bottom': 'auto'}); this.boxZoom.css({'top': '0px', 'bottom': 'auto'}); - if (Common.UI.isRTL()) { + if (this.isRtlSheet) { this.tabBarBox.css('left', right + 'px'); + this.tabBarBox.css('right', this.tabBarDefPosition + 'px'); + this.boxZoom.find('.separator').css('border-right-color', visible ? '' : 'transparent'); } else { + this.tabBarBox.css('left', this.tabBarDefPosition + 'px'); this.tabBarBox.css('right', right + 'px'); + this.boxZoom.find('.separator').css('border-left-color', visible ? '' : 'transparent'); } } else { if (this.boxAction.is(':visible')) { @@ -786,12 +815,13 @@ define([ this.boxMath.is(':visible') && this.boxMath.css({'top': 'auto', 'bottom': '0px'}); this.boxFiltered.is(':visible') && this.boxFiltered.css({'top': 'auto', 'bottom': '0px'}); this.boxZoom.css({'top': 'auto', 'bottom': '0px'}); - if (Common.UI.isRTL()) { + this.boxZoom.find('.separator').css(Common.UI.isRTL() ? 'border-right-color' : 'border-left-color', visible ? '' : 'transparent'); + if (this.isRtlSheet) { this.tabBarBox.css('left', '0px'); - this.boxZoom.find('.separator').css('border-right-color', visible ? '' : 'transparent'); + this.tabBarBox.css('right', this.tabBarDefPosition + 'px'); } else { + this.tabBarBox.css('left', this.tabBarDefPosition + 'px'); this.tabBarBox.css('right', '0px'); - this.boxZoom.find('.separator').css('border-left-color', visible ? '' : 'transparent'); } } @@ -820,9 +850,9 @@ define([ changeViewMode: function (mode) { var edit = mode.isEdit, - styleLeft = Common.UI.isRTL() ? 'right' : 'left'; + styleLeft = this.isRtlSheet ? 'right' : 'left'; if (edit) { - this.tabBarBox.css(styleLeft, '129px'); + this.tabBarBox.css(styleLeft, this.tabBarDefPosition + 'px'); } else { this.tabBarBox.css(styleLeft, ''); } @@ -897,6 +927,7 @@ define([ this.boxNumberSheets.show(); //this.boxAction.show(); } + this.updateRtlSheet(); this.updateTabbarBorders(); (this.tabbar.getCount()>0) && this.onTabInvisible(undefined, this.tabbar.checkInvisible(true)); }, diff --git a/apps/spreadsheeteditor/main/resources/less/statusbar.less b/apps/spreadsheeteditor/main/resources/less/statusbar.less index 5a4b9428a6..acc18ce3ae 100644 --- a/apps/spreadsheeteditor/main/resources/less/statusbar.less +++ b/apps/spreadsheeteditor/main/resources/less/statusbar.less @@ -2,13 +2,55 @@ padding: 0 2px 0; z-index: 500; + .margin-left-sheet(@value) { + margin-left: @value; + margin-right: 0; + + .rtl-sheet& { + margin-left: 0; + margin-right: @value; + } + } + + .margin-right-sheet(@value) { + margin-right: @value; + margin-left: 0; + + .rtl-sheet& { + margin-right: 0; + margin-left: @value; + } + } + + .padding-x-sheet(@left, @right) { + padding-left: @left; + padding-right: @right; + + .rtl-sheet& { + padding-left: @right; + padding-right: @left; + } + } + + .padding-right-sheet(@value) { + padding-right: @value; + padding-left: 0; + .rtl-sheet& { + padding-right: 0; + padding-left: @value; + } + } + + #status-tabs-scroll { width: 66px; padding: 3px 12px 0 10px; height: 25px; + float: left; - .rtl & { + .rtl-sheet& { padding: 3px 10px 0 12px; + float: right; } } @@ -16,26 +58,12 @@ padding-top: 3px; position: absolute; - right: 0; height: 25px; - .rtl & { - right: auto; - left: 0; - } - .separator { margin-top: -3px; } - #status-btn-zoomup { - .margin-right(40px); - } - - #status-btn-zoomdown { - .margin-left-10(); - } - #status-label-zoom { cursor: pointer; text-align: center; @@ -45,55 +73,121 @@ } } } + &.no-compact { + #status-zoom-box { + right: 0; + .rtl & { + right: auto; + left: 0; + } + } + #status-btn-zoomup { + .margin-right(40px); + } + + #status-btn-zoomdown { + .margin-left-10(); + } + #status-math-box { + .padding-right-4(); + label { + .padding-right-10(); + } + } + #status-filtered-box { + .padding-right(14px); + label:not(:last-child) { + .padding-right-10(); + } + } + #status-math-box, + #status-filtered-box { + .separator { + .padding-right(11px); + } + } + } + &:not(.no-compact) { + #status-zoom-box { + right: 0; + .rtl-sheet& { + right: auto; + left: 0; + } + } + #status-btn-zoomup { + .margin-right-sheet(40px); + } + #status-btn-zoomdown { + .margin-left-sheet(10px); + } + #status-math-box { + .padding-right-sheet(4px); + label { + .padding-right-sheet(10px); + } + } + #status-filtered-box { + .padding-right-sheet(14px); + label:not(:last-child) { + .padding-right-sheet(10px); + } + } + #status-math-box, + #status-filtered-box { + .separator { + .padding-right-sheet(11px); + } + } + #status-math-box, + #status-filtered-box, + #status-zoom-box, + #status-action { + .separator { + border-right: none; + border-left: @scaled-one-px-value-ie solid @border-divider-ie; + border-left: @scaled-one-px-value solid @border-divider; + .rtl-sheet& { + border-left: none; + border-right: @scaled-one-px-value-ie solid @border-divider-ie; + border-right: @scaled-one-px-value solid @border-divider; + } + } + } + } #status-addtabs-box { - padding: 3px 8px 0 8px; + padding: 3px 8px 0; border-left: @scaled-one-px-value-ie solid @border-toolbar-ie; border-left: @scaled-one-px-value solid @border-toolbar; border-right: @scaled-one-px-value-ie solid @border-toolbar-ie; border-right: @scaled-one-px-value solid @border-toolbar; height: 25px; + float: left; + .rtl-sheet& { + float: right; + } } #status-math-box, #status-filtered-box { - //float: right; padding-top: 6px; - position: absolute; height: 25px; - .separator { position: relative; - .padding-right(11px); margin-top: -6px; } } - #status-math-box { - label { - .padding-right-10(); - } - } - - #status-filtered-box { - .padding-right(14px); - label { - &:not(:last-child) { - .padding-right-10(); - } - } - } - #status-sheets-bar-box { position: absolute; overflow: hidden; height: 25px; left: 66px; right: 160px; - //margin-right: 3px; - .rtl & { + .rtl-sheet& { left: 160px; right: 66px; } @@ -118,7 +212,7 @@ &:first-of-type { span { border-left: none; - .rtl & { + .rtl-sheet& { border-left: @scaled-one-px-value-ie solid @border-toolbar-ie; border-left: @scaled-one-px-value solid @border-toolbar; border-right: none; @@ -127,12 +221,9 @@ } &:last-of-type { - span { + > span { margin-right: 0; - - .rtl & { - margin-left: 0; - } + margin-left: 0; } } @@ -148,7 +239,6 @@ .border-radius(0); padding: 0 10px 0; line-height: 24px; - .margin-right(-1px); background-color: @background-toolbar-additional-ie; background-color: @background-toolbar-additional; outline: none; @@ -158,7 +248,7 @@ border-right: @scaled-one-px-value solid @border-toolbar; border-top: @scaled-one-px-value-ie solid @border-toolbar-ie; border-top: @scaled-one-px-value solid @border-toolbar; - + .margin-right-sheet(-1px); &:hover { border-top-color: @border-toolbar-ie; border-top-color: @border-toolbar; @@ -215,10 +305,9 @@ border-bottom: 7px solid red; border-left: 7px solid transparent; bottom: 0; - .margin-left(-7px); left: 100%; - - .rtl & { + .margin-left-sheet(-7px); + .rtl-sheet& { border-left: none; border-right: 7px solid transparent; left: auto; @@ -229,7 +318,7 @@ &.icon-visible { > span { - .padding-x(25px, 10px); + .padding-x-sheet(25px, 10px); > .toolbar__icon { width: 20px; height: 20px; @@ -237,7 +326,7 @@ top: 0; left: 0; margin: 3px; - .rtl & { + .rtl-sheet& { left: auto; right: 0; } @@ -260,15 +349,15 @@ &:first-child { > span { - .padding-x(8px, 10px); + .padding-x-sheet(8px, 10px); } } > span { border-left: 2px solid @text-normal-ie; border-left: 2px solid @text-normal; - .padding-x(9px, 10px); - .rtl & { + .padding-x-sheet(9px, 10px); + .rtl-sheet& { border-left: @scaled-one-px-value-ie solid @border-toolbar-ie; border-left: @scaled-one-px-value solid @border-toolbar; border-right: 2px solid @text-normal-ie; @@ -282,8 +371,8 @@ border-left: @scaled-one-px-value solid @border-toolbar; border-right: 2px solid @text-normal-ie; border-right: 2px solid @text-normal; - .padding-x(10px, 9px); - .rtl & { + .padding-x-sheet(10px, 9px); + .rtl-sheet& { border-left: none; border-right: none; border-right: @scaled-one-px-value-ie solid @border-toolbar-ie; @@ -295,18 +384,18 @@ } &.icon-visible { > span { - .padding-x(24px, 10px); + .padding-x-sheet(24px, 10px); } &.right { > span { - .padding-x(25px, 10px); + .padding-x-sheet(25px, 10px); } } } } &.separator-item { margin-top: 1px; - .margin-left-20(); + .margin-left-sheet(20px); width: @scaled-one-px-value-ie; width: @scaled-one-px-value; > span { @@ -346,6 +435,11 @@ #status-number-of-sheet { width: 135px; + left: 0; + .rtl & { + left: auto; + right: 0; + } } &.no-compact { @@ -388,8 +482,6 @@ position: relative; .dropdown-menu { min-width: 112px; - .margin-left(-4px); - li { .text-align-left(); a { @@ -426,8 +518,6 @@ .dropdown-menu { min-width: 80px; - .margin-left(-4px); - li { > a { text-align: center; @@ -456,7 +546,6 @@ #statusbar-menu { .dropdown-menu { margin-top: 0; - .margin-left(-7px); li { > a { padding: 5px 12px 5px 26px; @@ -484,26 +573,10 @@ } } -.statusbar-mask { - position: absolute; - bottom: 0; - left: 115px; - width: 36px; - height: 100%; - opacity: 0; - background-color: @background-toolbar-ie; - background-color: @background-toolbar; - z-index: @zindex-modal - 1; - .rtl & { - left: auto; - right: 115px; - } -} - .over-box { display: none; } -.rtl .nav { +.rtl-sheet .nav { padding-right: 0; } \ No newline at end of file