diff --git a/apps/common/main/lib/component/Button.js b/apps/common/main/lib/component/Button.js index 627b95af7a..7904d58d2d 100644 --- a/apps/common/main/lib/component/Button.js +++ b/apps/common/main/lib/component/Button.js @@ -643,6 +643,8 @@ define([ var ariaLabel = me.options.ariaLabel ? me.options.ariaLabel : ((typeof me.options.hint == 'string') ? me.options.hint : me.options.hint[0]); $btn.attr('aria-label', ariaLabel); } + + Common.NotificationCenter.on('uitheme:changed', this.onThemeChanged.bind(this)); } me.rendered = true; @@ -1035,6 +1037,13 @@ define([ if (!this.disabled) { this.split ? this.cmpEl.attr('tabindex', this.tabindex) : this.$el && this.$el.find('button').addBack().filter('button').attr('tabindex', this.tabindex); } + }, + + onThemeChanged: function() { + if (this.options.width>0 && this.rendered) { + var el = this.cmpEl; + el && el.hasClass('btn-group') && el.hasClass('split') && $('button:first', el).css('width', this.options.width - $('[data-toggle^=dropdown]', el).outerWidth()); + } } }); diff --git a/apps/common/main/lib/component/Mixtbar.js b/apps/common/main/lib/component/Mixtbar.js index 4504b6445d..2547d2a61e 100644 --- a/apps/common/main/lib/component/Mixtbar.js +++ b/apps/common/main/lib/component/Mixtbar.js @@ -157,6 +157,10 @@ define([ Common.NotificationCenter.on('app:repaint', _.bind(function() { this.repaintMoreBtns(); }, this)); + Common.NotificationCenter.on('uitheme:changed', _.bind(function() { + this.clearActiveData(); + this.processPanelVisible(); + }, this)); }, afterRender: function() { @@ -333,6 +337,8 @@ define([ } if ( tab ) { + this.fireEvent('tab:active:before', [tab]); + me.$tabs.removeClass('active'); me.$panels.removeClass('active'); me.hideMoreBtns(); diff --git a/apps/common/main/lib/controller/ExternalDiagramEditor.js b/apps/common/main/lib/controller/ExternalDiagramEditor.js index a7d4924dfd..19e3cb5cd2 100644 --- a/apps/common/main/lib/controller/ExternalDiagramEditor.js +++ b/apps/common/main/lib/controller/ExternalDiagramEditor.js @@ -99,6 +99,11 @@ define([ 'resize': _.bind(function(o, state){ externalEditor && externalEditor.serviceCommand('window:resize', state == 'start'); },this), + 'animate:before': _.bind(function(){ + if(!this.isAppFirstOpened) { + externalEditor && externalEditor.serviceCommand('reshow'); + } + },this), 'show': _.bind(function(cmp){ var h = this.diagramEditorView.getHeight(), innerHeight = Common.Utils.innerHeight() - Common.Utils.InternalSettings.get('window-inactive-area-top'); diff --git a/apps/common/main/lib/controller/ExternalMergeEditor.js b/apps/common/main/lib/controller/ExternalMergeEditor.js index ed06c2abd9..f086e7a120 100644 --- a/apps/common/main/lib/controller/ExternalMergeEditor.js +++ b/apps/common/main/lib/controller/ExternalMergeEditor.js @@ -98,6 +98,11 @@ define([ 'resize': _.bind(function(o, state){ externalEditor && externalEditor.serviceCommand('window:resize', state == 'start'); },this), + 'animate:before': _.bind(function(){ + if(!this.isAppFirstOpened) { + externalEditor && externalEditor.serviceCommand('reshow'); + } + },this), 'show': _.bind(function(cmp){ var h = this.mergeEditorView.getHeight(), innerHeight = Common.Utils.innerHeight(); diff --git a/apps/common/main/lib/controller/ExternalOleEditor.js b/apps/common/main/lib/controller/ExternalOleEditor.js index 69a101e595..7fc96badf0 100644 --- a/apps/common/main/lib/controller/ExternalOleEditor.js +++ b/apps/common/main/lib/controller/ExternalOleEditor.js @@ -99,6 +99,11 @@ define([ 'resize': _.bind(function(o, state){ externalEditor && externalEditor.serviceCommand('window:resize', state == 'start'); },this), + 'animate:before': _.bind(function(){ + if(!this.isAppFirstOpened) { + externalEditor && externalEditor.serviceCommand('reshow'); + } + },this), 'show': _.bind(function(cmp){ var h = this.oleEditorView.getHeight(), innerHeight = Common.Utils.innerHeight() - Common.Utils.InternalSettings.get('window-inactive-area-top'); diff --git a/apps/common/main/lib/controller/Themes.js b/apps/common/main/lib/controller/Themes.js index 770c7bd3aa..7d6e143836 100644 --- a/apps/common/main/lib/controller/Themes.js +++ b/apps/common/main/lib/controller/Themes.js @@ -68,6 +68,9 @@ define([ --sk-layout-padding-toolbar-controls: 0 7px; --sk-layout-padding-header: 0 8px; --sk-canvas-background: #eee; --sk-canvas-content-background: #fff; --sk-canvas-page-border: #dde0e5; --sk-canvas-line: rgba(0,0,0,.05); + --sk-height-formula: 24px; --sk-padding-formula: 0 0 4px 0; + --sk-border-style-formula: solid; --sk-gap-formula-field: 20px; + --sk-border-radius-formula-field: 0px; }` }, }, @@ -82,10 +85,13 @@ define([ --sk-background-toolbar-header-slide: #BE664F;; --sk-background-toolbar-header-cell: #40865c; --sk-background-toolbar-header-visio: #444796; --sk-background-toolbar: #f7f7f7; --sk-background-toolbar-controls: #f1f1f1; - --sk-background-toolbar-tab: rgba(255,255,255,.15); --sk-background-toolbar-button: #555; + --sk-background-toolbar-tab: rgba(255,255,255,.15); --sk-background-toolbar-button: #d8dadc; --sk-layout-padding-toolbar-controls: 0 7px; --sk-layout-padding-header: 0 8px; --sk-canvas-background: #eee; --sk-canvas-content-background: #fff; --sk-canvas-page-border: #dde0e5; --sk-canvas-line: rgba(0,0,0,.05); + --sk-height-formula: 24px; --sk-padding-formula: 0 0 4px 0; + --sk-border-style-formula: solid; --sk-gap-formula-field: 20px; + --sk-border-radius-formula-field: 0px; }` }, }, @@ -105,6 +111,9 @@ define([ --sk-layout-padding-toolbar-controls: 0 7px; --sk-layout-padding-header: 0 8px; --sk-canvas-background: #555; --sk-canvas-content-background: #fff; --sk-canvas-page-border: #555; --sk-canvas-line: rgba(0,0,0,.05); + --sk-height-formula: 24px; --sk-padding-formula: 0 0 4px 0; + --sk-border-style-formula: solid; --sk-gap-formula-field: 20px; + --sk-border-radius-formula-field: 0px; } .content-theme-dark { --sk-canvas-content-background: #3a3a3a; --sk-canvas-page-border: #616161; @@ -128,6 +137,9 @@ define([ --sk-layout-padding-toolbar-controls: 0 7px; --sk-layout-padding-header: 0 8px; --sk-canvas-background: #555; --sk-canvas-content-background: #fff; --sk-canvas-page-border: #555; --sk-canvas-line: rgba(0,0,0,.05); + --sk-height-formula: 24px; --sk-padding-formula: 0 0 4px 0; + --sk-border-style-formula: solid; --sk-gap-formula-field: 20px; + --sk-border-radius-formula-field: 0px; } .content-theme-dark { --sk-canvas-content-background: #3a3a3a; @@ -150,6 +162,9 @@ define([ --sk-layout-padding-toolbar-controls: 0 7px; --sk-layout-padding-header: 0 8px; --sk-canvas-background: #eee; --sk-canvas-content-background: #fff; --sk-canvas-page-border: #ccc; --sk-canvas-line: rgba(0,0,0,.05); + --sk-height-formula: 24px; --sk-padding-formula: 0 0 4px 0; + --sk-border-style-formula: solid; --sk-gap-formula-field: 20px; + --sk-border-radius-formula-field: 0px; }` }, }, @@ -161,11 +176,16 @@ define([ cls: 'mod2', } }, + 'theme-night': { + text: locale.txtThemeWhiteDark || 'Night', + type: 'dark', + source: 'static', + icons: { + cls: 'mod2', + } + }, } - var id_default_light_theme = 'theme-white', - id_default_dark_theme = 'theme-dark'; - var name_colors = [ "toolbar-header-document", "toolbar-header-spreadsheet", @@ -491,7 +511,7 @@ define([ } const get_system_default_theme = function () { const id = get_system_theme_type() == THEME_TYPE_DARK ? - id_default_dark_theme : id_default_light_theme; + window.uitheme.DEFAULT_DARK_THEME_ID : window.uitheme.DEFAULT_LIGHT_THEME_ID; return {id: id, info: themes_map[id]}; }; @@ -654,7 +674,7 @@ define([ }, currentThemeId: function () { - return !!themes_map[window.uitheme.id] ? window.uitheme.id : id_default_light_theme; + return !!themes_map[window.uitheme.id] ? window.uitheme.id : window.uitheme.DEFAULT_LIGHT_THEME_ID; }, currentThemeColor: function (token) { @@ -662,7 +682,7 @@ define([ }, defaultThemeId: function (type) { - return type == 'dark' ? id_default_dark_theme : id_default_light_theme; + return type == 'dark' ? window.uitheme.DEFAULT_LIGHT_THEME_ID : window.uitheme.DEFAULT_LIGHT_THEME_ID; }, defaultTheme: function (type) { @@ -724,7 +744,7 @@ define([ }, toggleTheme: function () { - this.setTheme( this.isDarkTheme() ? id_default_light_theme : id_default_dark_theme ); + // this.setTheme( this.isDarkTheme() ? id_default_light_theme : id_default_dark_theme ); }, getThemeColors: function() { diff --git a/apps/common/main/lib/util/htmlutils.js b/apps/common/main/lib/util/htmlutils.js index 4b6c5184f3..bd816bc6dc 100644 --- a/apps/common/main/lib/util/htmlutils.js +++ b/apps/common/main/lib/util/htmlutils.js @@ -167,11 +167,7 @@ if ( !window.uitheme.id && !!params.uitheme ) { } if ( !window.uitheme.id ) { - // TODO: because there are no new dark theme, default theme is "theme-white" - // for all system color scheme - // window.uitheme.adapt_to_system_theme(); - window.uitheme.id = "theme-white"; - window.uitheme.type = "light"; + window.uitheme.adapt_to_system_theme(); } else { !window.uitheme.type && params.uitheme && (window.uitheme.type = params.uithemetype); } diff --git a/apps/common/main/lib/util/themeinit.js b/apps/common/main/lib/util/themeinit.js index 33d17ba064..5509ad720e 100644 --- a/apps/common/main/lib/util/themeinit.js +++ b/apps/common/main/lib/util/themeinit.js @@ -46,6 +46,9 @@ !window.uitheme && (window.uitheme = {}); + window.uitheme.DEFAULT_LIGHT_THEME_ID = 'theme-white'; + window.uitheme.DEFAULT_DARK_THEME_ID = 'theme-night'; + window.uitheme.set_id = function (id) { if ( id == 'theme-system' ) this.adapt_to_system_theme(); @@ -63,7 +66,7 @@ window.uitheme.relevant_theme_id = function () { if ( this.is_theme_system() ) - return this.is_system_theme_dark() ? 'theme-dark' : 'theme-classic-light'; + return this.is_system_theme_dark() ? window.uitheme.DEFAULT_DARK_THEME_ID : window.uitheme.DEFAULT_LIGHT_THEME_ID; return this.id; } @@ -88,14 +91,15 @@ } window.uitheme.apply_icons_from_url = function (themeid, url) { - // if ( !url ) return; + if ( !url ) return; let base_url = !url.endsWith('/') ? url + '/' : url; const sp_names = ['small', 'big', 'huge']; const sp_scale = {'100':'', '125':'@1.25x','150':'@1.5x','175':'@1.75x','200':'@2x'}; let icons = []; sp_names.forEach(function (n) { - for (const [key, value] of Object.entries(sp_scale)) { + for (let key in sp_scale) { + const value = sp_scale[key]; icons.push('--sprite-button-'+n+'-'+key+':url('+ base_url +'icons' + n + value + '.png)'); } }); diff --git a/apps/common/main/lib/view/Header.js b/apps/common/main/lib/view/Header.js index 90df5d8e55..d6ff09fd6e 100644 --- a/apps/common/main/lib/view/Header.js +++ b/apps/common/main/lib/view/Header.js @@ -1315,7 +1315,10 @@ define([ updateAvatarEl: function(){ if(this.options.userAvatar){ - $btnUserName.css({'background-image': 'url('+ this.options.userAvatar +')'}); + $btnUserName.css({ + 'background-image': 'url('+ this.options.userAvatar +')', + 'background-color': 'transparent' + }); $btnUserName.text(''); } else { $btnUserName.text(Common.Utils.getUserInitials(this.options.userName)); diff --git a/apps/common/main/resources/less/buttons.less b/apps/common/main/resources/less/buttons.less index 6a785ed3f2..61705fffd3 100644 --- a/apps/common/main/resources/less/buttons.less +++ b/apps/common/main/resources/less/buttons.less @@ -301,6 +301,7 @@ //align-items: center; align-items: start; height: 24px; + height: calc((@font-size-base-app + 2px) * 2); .caption { max-width: 160px;//85px; @@ -308,7 +309,7 @@ text-overflow: ellipsis; white-space: pre; - line-height: 11px; + line-height: 1; padding: 0 2px; .caret { @@ -679,14 +680,6 @@ float: right; } - &:first-child:not(:last-child):not(.dropdown-toggle) { - .rtl & { - .border-radius(@border-radius-button-normal); - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } - } - &.btn-toolbar { float: none; } @@ -702,11 +695,35 @@ } } - > .dropdown-toggle:not(first-child) { - .rtl & { - .border-radius(@border-radius-button-normal); - border-top-right-radius: 0; - border-bottom-right-radius: 0; + &:not(.x-huge) { + > .btn:first-child:not(:last-child):not(.dropdown-toggle) { + .rtl & { + &.btn-toolbar { + .border-radius(@border-radius-button-toolbar); + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + &:not(.btn-toolbar) { + .border-radius(@border-radius-button-normal); + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + } + } + + > .dropdown-toggle:not(:first-child) { + .rtl & { + &.btn-toolbar { + .border-radius(@border-radius-button-toolbar); + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + &:not(.btn-toolbar) { + .border-radius(@border-radius-button-normal); + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + } } } diff --git a/apps/common/main/resources/less/colors-table-classic.less b/apps/common/main/resources/less/colors-table-classic.less index 0b559ad196..e703a77257 100644 --- a/apps/common/main/resources/less/colors-table-classic.less +++ b/apps/common/main/resources/less/colors-table-classic.less @@ -204,6 +204,8 @@ --border-toolbar-z-clear: var(--border-toolbar); --shadow-toolbar: 0px 1px 0 0 var(--border-toolbar); + --celleditor-cell-name-border-right: var(--scaled-one-pixel, 1px) solid var(--border-toolbar); + --background-fill-input: var(--background-normal); --background-fill-input-disabled: var(--background-normal); --background-fill-input-readonly: var(--background-normal); @@ -227,6 +229,7 @@ --shadow-control-pressed-focus: inset 0 0 0 1px var(--background-normal), 0 0 0 1px var(--border-button-pressed-focus); --shadow-control-primary-pressed-focus: inset 0 0 0 1px var(--background-normal); + --toolbar-simple-border-bottom: var(--scaled-one-pixel, 1px) solid var(--border-toolbar); --toolbar-preferred-tab-style: fill; //--rb-background-normal: var(--background-normal); diff --git a/apps/common/main/resources/less/colors-table-dark-contrast.less b/apps/common/main/resources/less/colors-table-dark-contrast.less index 247e2177fd..feb88f8e08 100644 --- a/apps/common/main/resources/less/colors-table-dark-contrast.less +++ b/apps/common/main/resources/less/colors-table-dark-contrast.less @@ -205,6 +205,8 @@ --border-toolbar-z-clear: var(--border-toolbar); --shadow-toolbar: 0px 1px 0 0 var(--border-toolbar); + --celleditor-cell-name-border-right: var(--scaled-one-pixel, 1px) solid var(--border-toolbar); + --background-fill-input: var(--background-normal); --background-fill-input-disabled: var(--background-normal); --background-fill-input-readonly: var(--background-normal); @@ -228,6 +230,7 @@ --shadow-control-pressed-focus: inset 0 0 0 1px var(--background-normal), 0 0 0 1px var(--border-button-pressed-focus); --shadow-control-primary-pressed-focus: inset 0 0 0 1px var(--background-normal); + --toolbar-simple-border-bottom: var(--scaled-one-pixel, 1px) solid var(--border-toolbar); --toolbar-preferred-tab-style: fill; //--rb-background-normal: var(--background-normal); diff --git a/apps/common/main/resources/less/colors-table-dark.less b/apps/common/main/resources/less/colors-table-dark.less index f7760ca54d..60205daead 100644 --- a/apps/common/main/resources/less/colors-table-dark.less +++ b/apps/common/main/resources/less/colors-table-dark.less @@ -206,6 +206,8 @@ --border-toolbar-z-clear: var(--border-toolbar); --shadow-toolbar: 0px 1px 0 0 var(--border-toolbar); + --celleditor-cell-name-border-right: var(--scaled-one-pixel, 1px) solid var(--border-toolbar); + --background-fill-input: var(--background-normal); --background-fill-input-disabled: var(--background-normal); --background-fill-input-readonly: var(--background-normal); @@ -229,6 +231,7 @@ --shadow-control-pressed-focus: inset 0 0 0 1px var(--background-normal), 0 0 0 1px var(--border-button-pressed-focus); --shadow-control-primary-pressed-focus: inset 0 0 0 1px var(--background-normal); + --toolbar-simple-border-bottom: var(--scaled-one-pixel, 1px) solid var(--border-toolbar); --toolbar-preferred-tab-style: fill; //--rb-background-normal: var(--background-normal); diff --git a/apps/common/main/resources/less/colors-table-gray.less b/apps/common/main/resources/less/colors-table-gray.less index c2400812b1..b0b799a4fd 100644 --- a/apps/common/main/resources/less/colors-table-gray.less +++ b/apps/common/main/resources/less/colors-table-gray.less @@ -184,6 +184,8 @@ --border-toolbar-z-clear: var(--border-toolbar); --shadow-toolbar: 0px 1px 0 0 var(--border-toolbar); + --celleditor-cell-name-border-right: var(--scaled-one-pixel, 1px) solid var(--border-toolbar); + --background-fill-input: var(--background-normal); --background-fill-input-disabled: var(--background-normal); --background-fill-input-readonly: var(--background-normal); @@ -207,6 +209,7 @@ --shadow-control-pressed-focus: inset 0 0 0 1px var(--background-normal), 0 0 0 1px var(--border-button-pressed-focus); --shadow-control-primary-pressed-focus: inset 0 0 0 1px var(--background-normal); + --toolbar-simple-border-bottom: var(--scaled-one-pixel, 1px) solid var(--border-toolbar); --toolbar-preferred-tab-style: fill; //--rb-background-normal: var(--background-normal); diff --git a/apps/common/main/resources/less/colors-table-ie-fix.less b/apps/common/main/resources/less/colors-table-ie-fix.less index 7a32d23522..5c28a14ff4 100644 --- a/apps/common/main/resources/less/colors-table-ie-fix.less +++ b/apps/common/main/resources/less/colors-table-ie-fix.less @@ -93,6 +93,18 @@ @component-disabled-opacity-ie: .4; +// cell editor SSE +@celleditor-height-ie: 24px; +@celleditor-line-height-ie: 20px; +@celleditor-border-width-ie: 0px; +@celleditor-input-border-ie: 1px solid #E1E1E1; +@celleditor-input-border-radius-ie: 4px; +@celleditor-cell-name-border-right-ie: 1px solid #E1E1E1; +@celleditor-func-label-margin-left-ie: 1px; + + +@x-small-btn-size-ie: 24px; + .ie { .toolbar__icon.toolbar__icon-big { @big-icon-background-image-ie: ~"url(@{app-image-const-path}/iconsbig.png)"; diff --git a/apps/common/main/resources/less/colors-table-white-dark.less b/apps/common/main/resources/less/colors-table-white-dark.less new file mode 100644 index 0000000000..b8b6431913 --- /dev/null +++ b/apps/common/main/resources/less/colors-table-white-dark.less @@ -0,0 +1,332 @@ + +:root { + .theme-night { + //--toolbar-header-document: #d3d3d3; + --toolbar-header-document: #222222; + --toolbar-header-spreadsheet: #222222; + --toolbar-header-presentation: #222222; + --toolbar-header-pdf: #222222; + --toolbar-header-visio: #222222; + + --text-toolbar-header-on-background-document: #FFFFFF; + --text-toolbar-header-on-background-spreadsheet: #FFFFFF; + --text-toolbar-header-on-background-presentation: #FFFFFF; + --text-toolbar-header-on-background-pdf: #FFFFFF; + --text-toolbar-header-on-background-visio: #FFFFFF; + + --background-normal: #404040; + --background-toolbar: #404040; + --background-toolbar-tab: #404040; + --background-toolbar-additional: #404040; + --background-primary-dialog-button: #6e9fec; + --background-accent-button: #446995; + --background-notification-popover: #fcfed7; + --background-notification-badge: #ffd112; + --background-scrim: fade(#000, 20%); + --background-loader: fade(#181818, 90%); + --background-alt-key-hint: #FFD938; + --background-contrast-popover: #404040; + --shadow-contrast-popover: rgba(0, 0, 0, 0.3); + --background-fill-button: #ffd112; + --background-pane: #222222; + --background-pane-additional: var(--background-pane); + + --highlight-button-hover: #585858; + --highlight-button-pressed: #686868; + --highlight-button-pressed-hover: #7f7f7f; + --highlight-primary-dialog-button-hover: #4a87e7; + --highlight-primary-dialog-button-pressed: #446eca; + --highlight-accent-button-hover: #375478; + --highlight-accent-button-pressed: #293f59; + --highlight-header-button-hover: #585858; + --highlight-header-button-pressed: #686868; + --highlight-text-select: #3494fb; + --highlight-fill-button-hover: #ffe165; + --highlight-fill-button-pressed: #dfb500; + + --border-toolbar: #585858; + --border-toolbar-active-panel-top: var(--background-toolbar); + --border-toolbar-active-tab: var(--background-toolbar-tab); + --border-divider: #585858; + --border-regular-control: #686868; + --border-toolbar-button-hover: #eaeaea; + --border-preview-hover: #92B7F0; + --border-preview-select: #4A87E7; + --border-control-focus: #4A87E7; + --border-color-shading: #686868; + --border-error: #f62211; + --border-contrast-popover: #fff; + --border-button-pressed-focus: #4A87E7; + + --text-normal: #f3f3f3; + --text-normal-pressed: #f9f9f9; + --text-secondary: #969696; + --text-tertiary: #cecece; + --text-link: #445799; + --text-link-hover: #445799; + --text-link-active: #445799; + --text-link-visited: #445799; + --text-inverse: #fff; + --text-toolbar-header: #f3f3f3; + --text-contrast-background: #fff; + --text-alt-key-hint: fade(#000, 80%); + + --icon-normal: #eaeaea; + --icon-normal-pressed: #eaeaea; + --icon-inverse: #171717; + --icon-toolbar-header: #eaeaea; + --icon-notification-badge: #eaeaea; + --icon-contrast-popover: #fff; + --icon-success: #78b588; + + --highlight-header-tab-underline-document: #4a87e7; + --highlight-header-tab-underline-spreadsheet: #3A8056; + --highlight-header-tab-underline-presentation: #B75B44; + --highlight-header-tab-underline-pdf: #AA5252; + --highlight-header-tab-underline-visio: #444796; + + --highlight-toolbar-tab-underline-document: #446995; + --highlight-toolbar-tab-underline-spreadsheet: #3A8056; + --highlight-toolbar-tab-underline-presentation: #B75B44; + --highlight-toolbar-tab-underline-pdf: #AA5252; + --highlight-toolbar-tab-underline-visio: #444796; + + // Canvas + + --canvas-background: #222222; + --canvas-content-background: #fff; + --canvas-page-border: #ccc; + + --canvas-ruler-background: #222; + --canvas-ruler-border: #484848; + --canvas-ruler-margins-background: #585858; + --canvas-ruler-mark: #969696; + --canvas-ruler-handle-border: #969696; + --canvas-ruler-handle-border-disabled: #484848; + + --canvas-high-contrast: #000; + --canvas-high-contrast-disabled: #666; + + --canvas-cell-border: fade(#000, 10%); + --canvas-cell-title-text: #444; + --canvas-cell-title-background: #f7f7f7; + --canvas-cell-title-background-hover: #dfdfdf; + --canvas-cell-title-background-selected: #cfcfcf; + --canvas-cell-title-border: #d8d8d8; + --canvas-cell-title-border-hover: #c9c9c9; + --canvas-cell-title-border-selected: #bbb; + + --canvas-dark-cell-title: #666666; + --canvas-dark-cell-title-hover: #999; + --canvas-dark-cell-title-selected: #333; + --canvas-dark-cell-title-border: #3d3d3d; + --canvas-dark-cell-title-border-hover: #5c5c5c; + --canvas-dark-cell-title-border-selected: #0f0f0f; + + --canvas-scroll-thumb: #383838; + --canvas-scroll-thumb-hover: #484848; + --canvas-scroll-thumb-pressed: #585858; + --canvas-scroll-thumb-border: #484848; + --canvas-scroll-thumb-border-hover: #686868; + --canvas-scroll-thumb-border-pressed: #969696; + --canvas-scroll-arrow: #686868; + --canvas-scroll-arrow-hover: #b2b2b2; + --canvas-scroll-arrow-pressed: #e1e1e1; + --canvas-scroll-thumb-target: #686868; + --canvas-scroll-thumb-target-hover: #b2b2b2; + --canvas-scroll-thumb-target-pressed: #e1e1e1; + + --canvas-sheet-view-cell-background: #73bf91; + --canvas-sheet-view-cell-background-hover: #97e3b6; + --canvas-sheet-view-cell-background-pressed: #aaffcc; + --canvas-sheet-view-cell-title-label: #121212; + --canvas-sheet-view-select-all-icon: #3d664e; + + --canvas-freeze-line-1px: #818182; + --canvas-freeze-line-2px: #aaaaaa; + --canvas-select-all-icon: #999; + + // Others + + --button-small-normal-icon-offset-x: -24px; + --button-small-active-icon-offset-x: -24px; + //--button-large-normal-icon-offset-x: 0; + //--button-large-active-icon-offset-x: -31px; + //--button-huge-normal-icon-offset-x: 0; + //--button-huge-active-icon-offset-x: -40px; + //--button-xhuge-normal-icon-offset-x: 0; + //--button-xhuge-active-icon-offset-x: -28px; + --button-header-normal-icon-offset-x: -24px; + --button-header-active-icon-offset-x: -24px; + + --modal-window-mask-opacity: 0.2; + --image-border-types-filter: none; + --image-border-types-filter-selected: none; + --component-normal-icon-filter: invert(100%); + + --component-normal-icon-opacity: 1; + --component-hover-icon-opacity: 1; + --component-active-icon-opacity: 1; + --component-active-hover-icon-opacity: 1; + --component-disabled-opacity: .4; + + --header-component-normal-icon-opacity: 1; + --header-component-hover-icon-opacity: 1; + --header-component-active-icon-opacity: 1; + --header-component-active-hover-icon-opacity: 1; + + //--menu-icon-item-checked-offset-x: -20px; + --border-sidemenu: 0 none; + --border-radius-toolbar: 8px; + --toolbar-tab-radius: 5px; + --toolbar-tab-line-radius: 2px; + --toolbar-tab-line-height: 3px; + --toolbar-tab-line-bottom: 4px; + --toolbar-tab-text-margin: 7px; + --background-statusbar: var(--background-toolbar); + --border-toolbar-z-clear: transparent; + --shadow-toolbar: 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px 0px rgba(0, 0, 0, 0.06); + --shadow-side-panel: 0px 4px 6px -1px rgba(0, 0, 0, 0.10), 0px 2px 4px -1px rgba(0, 0, 0, 0.06); + --layout-padding-toolbar: 0 10px; + --layout-padding-left-panel: 0px 3px 8px 40px; + --layout-padding-left-panel-rtl: 0px 40px 8px 3px; + --layout-padding-right-panel: 0px 4px 8px 3px; + --layout-padding-right-panel-rtl: 0px 3px 8px 4px; + --layout-padding-right-panel-content: 5px 12px 0 12px; + --layout-padding-right-panel-content-rtl: 5px 12px 0 12px; + --layout-padding-x-side-panel: 6px; + --layout-padding-y-side-panel: 4px; + + --celleditor-height: 24px; + --celleditor-line-height: 20px; + --celleditor-border-width: 0px; + + --x-small-btn-size: 24px; + --x-small-btn-icon-size: 24px; + --toolbar-small-btn-margin-top: 12px; + --x-huge-btn-height: calc(var(--x-small-btn-size) * 2 + var(--toolbar-small-btn-margin-top)); + --x-huge-btn-icon-size: 28px; + --toolbar-height-controls: 84px; + --statusbar-height: 32px; + --toolbar-group-height: var(--x-huge-btn-height); + --form-control-size: var(--x-small-btn-size); + --x-category-btn-size: var(--x-small-btn-size); + --category-btn-y-margin-small: 2px; + --category-btn-y-margin-large: 10px; + --large-btn-dataview-y-margin: 0; + + --border-radius-form-control: 4px; + --border-radius-checkbox: 4px; + --border-radius-button-base: 4px; + --border-radius-button-toolbar: var(--border-radius-button-base); + --border-radius-button-normal: var(--border-radius-button-base); + --border-radius-button-category: var(--border-radius-button-base); + --border-radius-window: 8px; + --border-radius-dropdown-menu: 8px; + --border-radius-dataview-item: 2px; + + --line-height-base: 1.5; + --input-height-base: 24px; + + --font-family-base: "Segoe UI"; + --font-size-base: 12px; + + --background-fill-input: var(--background-normal); + --background-fill-input-disabled: var(--background-normal); + --background-fill-input-readonly: var(--background-normal); + + --highlight-category-button-hover: rgba(18, 132, 238, 0.05); + --highlight-category-button-pressed: rgba(18, 132, 238, 0.12); + --highlight-header-input-hover: var(--highlight-header-button-hover); + --highlight-header-input-pressed: var(--background-fill-input); + + --border-fill-input: var(--border-regular-control); + //--border-fill-input-focused: var(--border-control-focus); + --border-fill-input-focused: #4A87E7; + --border-fill-input-disabled: var(--border-regular-control); + --border-fill-input-readonly: var(--border-regular-control); + + --text-fill-input: var(--text-normal); + --text-fill-input-disabled: var(--text-normal); + --text-fill-input-readonly: var(--text-normal); + + --shadow-fill-input: 0 0 0 1px var(--border-fill-input-focused); + --shadow-control-focus: inset 0 0 0 1px var(--border-control-focus), 0 0 0 1px var(--border-control-focus); + --shadow-control-pressed-focus: var(--shadow-control-focus); + --shadow-control-primary-pressed-focus: inset 0 0 0 1px var(--background-normal), 0 0 0 1px var(--border-button-pressed-focus); + + // dropdown button + --dd-button-size: 16px; + --dd-button-x-padding: 6px; + + // checkbox + --chb-size: 14px; + --chb-v-margin: 2px; + --chb-border-radius: 4px; + --chb-check-mark-background: var(--background-normal); + --chb-background-normal: var(--background-normal); + --chb-background-normal-hover: #585858; + --chb-background-checked-hover: #4A87E7; + --chb-background-checked: #4A87E7; + --chb-border-normal: #969696; + --chb-border-normal-hover: #969696; + --chb-border-normal-focus: #969696; + --chb-border-checked: #4A87E7; + --chb-border-checked-hover: #4A87E7; + --chb-border-checked-focus: #4A87E7; + + // radio + --rb-size: 14px; + --rb-check-mark-size: 2px; + --rb-check-mark-background: var(--background-normal); + --rb-background-normal: var(--background-normal); + --rb-background-normal-hover: #585858; + --rb-background-checked-hover: #4A87E7; + --rb-background-checked: #4A87E7; + --rb-border-normal: #969696; + --rb-border-normal-hover: #969696; + --rb-border-normal-focus: #969696; + --rb-border-checked: #4A87E7; + --rb-border-checked-hover: #4A87E7; + --rb-border-checked-focus: #4A87E7; + + // slider + --slider-track-height: 4px; + --slider-border-radius: 2px; + --slider-track-background-normal: #686868; + --slider-track-background-filled: #6e9fec; + --slider-thumb-size: 18px; + --slider-thumb-border-size: 3px; + --slider-thumb-border-radius: 50%; + --slider-thumb-background-normal: #6e9fec; + --slider-thumb-border-normal: #fff; + --slider-thumb-background-hover: #4a87e7; + --slider-thumb-background-active: #446eca; + --slider-thumb-shadow: 0 1px 2px 0 #0000000F, 0 1px 3px 0 #0000001A; + + --sprite-button-small-width: 48px; + --sprite-button-big-width: 56px; + --sprite-button-huge-width: 80px; + --sprite-button-icons-base-url: ~"@{app-image-const-path}/v2"; + + --header-input-height: var(--input-height-base); + --header-input-line-height: var(--line-height-base); + --border-header-input-focused: var(--border-fill-input-focused); + + --header-component-height: var(--x-small-btn-size); + --header-component-width: var(--x-small-btn-size); + --header-component-line-height: var(--x-small-btn-size); + --header-component-padding: 0; + --header-component-margin: 0 6px; + --header-component-align: center; + + --toolbar-simple-border-bottom: 0 none; + --toolbar-simple-shadow: var(--shadow-toolbar, none); + --toolbar-simple-content-padding-top: 3px; + --layout-padding-hor-toolbar-simple: 5px; + --simple-editor-layout-collapse-button-rigth: 8px; + --toolbar-preferred-tab-style: line; + + --content-padding-top: 8px; + } +} \ No newline at end of file diff --git a/apps/common/main/resources/less/colors-table-white.less b/apps/common/main/resources/less/colors-table-white.less index 2524ab4e29..117fac7a02 100644 --- a/apps/common/main/resources/less/colors-table-white.less +++ b/apps/common/main/resources/less/colors-table-white.less @@ -183,7 +183,8 @@ --toolbar-tab-radius: 5px; --toolbar-tab-line-radius: 2px; --toolbar-tab-line-height: 3px; - --toolbar-tab-line-bottom: 2px; + --toolbar-tab-line-bottom: 4px; + --toolbar-tab-text-margin: 7px; --background-statusbar: var(--background-toolbar); --border-toolbar-z-clear: transparent; --shadow-toolbar: 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px 0px rgba(0, 0, 0, 0.06); @@ -201,6 +202,10 @@ --celleditor-height: 24px; --celleditor-line-height: 20px; --celleditor-border-width: 0px; + --celleditor-input-border: var(--scaled-one-pixel, 1px) solid var(--border-fill-input); + --celleditor-input-border-radius: var(--border-radius-form-control); + --celleditor-cell-name-border-right: var(--scaled-one-pixel, 1px) solid var(--border-fill-input); + --celleditor-func-label-margin-left: 1px; --x-small-btn-size: 24px; --x-small-btn-icon-size: 24px; diff --git a/apps/common/main/resources/less/colors-table.less b/apps/common/main/resources/less/colors-table.less index 37002a615c..d194373975 100644 --- a/apps/common/main/resources/less/colors-table.less +++ b/apps/common/main/resources/less/colors-table.less @@ -239,6 +239,7 @@ --toolbar-tab-line-radius: 2px; --toolbar-tab-line-height: 2px; --toolbar-tab-line-bottom: 4px; + --toolbar-tab-text-margin: 5px; --border-sidemenu: var(--scaled-one-pixel, 1px) solid var(--border-toolbar); --background-statusbar: var(--background-pane); --border-toolbar-z-clear: var(--border-toolbar); @@ -257,6 +258,10 @@ --celleditor-height: 20px; --celleditor-line-height: 18px; --celleditor-border-width: var(--scaled-one-pixel, 1px); + --celleditor-input-border: 0 none; + --celleditor-input-border-radius: 0; + --celleditor-cell-name-border-right: var(--scaled-one-pixel, 1px) solid var(--border-toolbar); + --celleditor-func-label-margin-left: -3px; --x-small-btn-size: 20px; --x-small-btn-icon-size: 20px; @@ -498,6 +503,7 @@ @toolbar-tab-line-radius: var(--toolbar-tab-line-radius, 2px); @toolbar-tab-line-height: var(--toolbar-tab-line-height, 2px); @toolbar-tab-line-bottom: var(--toolbar-tab-line-bottom, 4px); +@toolbar-tab-text-margin: var(--toolbar-tab-text-margin, 5px); @layout-padding-toolbar: var(--layout-padding-toolbar, 0); @layout-padding-x-side-panel: var(--layout-padding-x-side-panel, 0); @layout-padding-y-side-panel: var(--layout-padding-y-side-panel, 2px); @@ -512,6 +518,10 @@ @celleditor-height: var(--celleditor-height); @celleditor-line-height: var(--celleditor-line-height); @celleditor-border-width: var(--celleditor-border-width); +@celleditor-input-border: var(--celleditor-input-border); +@celleditor-input-border-radius: var(--celleditor-input-border-radius); +@celleditor-cell-name-border-right: var(--celleditor-cell-name-border-right); +@celleditor-func-label-margin-left: var(--celleditor-func-label-margin-left); @x-small-btn-size: var(--x-small-btn-size, 20px); @x-small-btn-icon-size: var(--x-small-btn-icon-size, 20px); diff --git a/apps/common/main/resources/less/combobox.less b/apps/common/main/resources/less/combobox.less index 679c8c6fce..4e60c9aee9 100644 --- a/apps/common/main/resources/less/combobox.less +++ b/apps/common/main/resources/less/combobox.less @@ -74,8 +74,8 @@ //border-color: @border-regular-control-ie; //border-color: @border-regular-control; border-color: @border-fill-input; - //background-color: transparent; - background-color: @background-fill-input; + background-color: transparent; + //background-color: @background-fill-input; margin-left: -1px; position: absolute; top: 0; diff --git a/apps/common/main/resources/less/header.less b/apps/common/main/resources/less/header.less index 9ee3368fb7..0edb12f2a0 100644 --- a/apps/common/main/resources/less/header.less +++ b/apps/common/main/resources/less/header.less @@ -337,6 +337,7 @@ height: @x-small-btn-icon-size; top: 50%; margin-top: -10px; + margin-top: calc(-1 * @font-size-base-app + 1px); fill: @icon-toolbar-header-ie; fill: @icon-toolbar-header; } @@ -346,6 +347,8 @@ cursor: pointer; .font-size-tiny(); margin-left: -18px; + margin-top: @scaled-one-px-value-ie; + margin-top: @scaled-one-px-value; width: 16px; text-align: center; overflow: hidden; diff --git a/apps/common/main/resources/less/toolbar.less b/apps/common/main/resources/less/toolbar.less index bfd3083364..a7b6258da9 100644 --- a/apps/common/main/resources/less/toolbar.less +++ b/apps/common/main/resources/less/toolbar.less @@ -123,7 +123,7 @@ li { display: inline-flex; - align-items: center; + align-items: end; height: 100%; position: relative; &:hover { @@ -147,6 +147,7 @@ > a { display: inline-block; padding: 0 12px; + margin-bottom: @toolbar-tab-text-margin; text-decoration: none; cursor: default; .font-size-medium(); diff --git a/apps/documenteditor/main/app/controller/Viewport.js b/apps/documenteditor/main/app/controller/Viewport.js index cb7b4c35f1..b6b03f4096 100644 --- a/apps/documenteditor/main/app/controller/Viewport.js +++ b/apps/documenteditor/main/app/controller/Viewport.js @@ -343,7 +343,8 @@ define([ const computed_style = window.getComputedStyle(document.body); _intvars.set('toolbar-height-controls', parseInt(computed_style.getPropertyValue("--toolbar-height-controls") || 84)); _intvars.set('toolbar-height-normal', _intvars.get('toolbar-height-tabs') + _intvars.get('toolbar-height-controls')); - $filemenu.css('top', (Common.UI.LayoutManager.isElementVisible('toolbar') ? _intvars.get('toolbar-height-tabs-top-title') : 0) + _intvars.get('document-title-height')); + $filemenu.css('top', (Common.UI.LayoutManager.isElementVisible('toolbar') ? _intvars.get('toolbar-height-tabs') : 0) + + (this.appConfig.twoLevelHeader && !this.appConfig.compactHeader ? _intvars.get('document-title-height') : 0)); this.viewport.vlayout.getItem('toolbar').height = this.toolbar && this.toolbar.isCompact() ? _intvars.get('toolbar-height-compact') : _intvars.get('toolbar-height-normal'); diff --git a/apps/documenteditor/main/app/view/RightMenu.js b/apps/documenteditor/main/app/view/RightMenu.js index 95ecade771..80581cd346 100644 --- a/apps/documenteditor/main/app/view/RightMenu.js +++ b/apps/documenteditor/main/app/view/RightMenu.js @@ -38,6 +38,7 @@ var SCALE_MIN = 40; var MENU_SCALE_PART = 260; +var MENU_BASE_WIDTH = 220; define([ 'text!documenteditor/main/app/template/RightMenu.template', @@ -160,16 +161,22 @@ define([ this.defaultHideRightMenu = !(mode.customization && (mode.customization.hideRightMenu===false)); var open = !Common.localStorage.getBool("de-hide-right-settings", this.defaultHideRightMenu); Common.Utils.InternalSettings.set("de-hide-right-settings", !open); - this.$el.css('width', ((open) ? MENU_SCALE_PART : SCALE_MIN) + 'px'); - this.$el.show(); Common.NotificationCenter.on('app:repaint', _.bind(function() { this.$el.css('width', ((open) ? MENU_SCALE_PART : SCALE_MIN) + 'px'); }, this)); + Common.NotificationCenter.on('uitheme:changed', _.bind(function() { + this.updateWidth(); + Common.NotificationCenter.trigger('layout:changed', 'rightmenu'); + }, this)); + var $markup = $(this.template({scope: this})); this.$el.html($markup); + this.updateWidth(); + this.$el.show(); + this.btnMoreContainer = $markup.find('#slot-right-menu-more'); Common.UI.SideMenu.prototype.render.call(this); this.btnMore.menu.menuAlign = 'tr-tl'; @@ -381,6 +388,14 @@ define([ Common.UI.SideMenu.prototype.setButtons.apply(this, [allButtons]); }, + updateWidth: function() { + var pane = $(this.el).find('.right-panel'), + paddings = parseInt(pane.css('padding-left')) + parseInt(pane.css('padding-right')); + pane.css('width', MENU_BASE_WIDTH + paddings + 'px'); + MENU_SCALE_PART = SCALE_MIN + MENU_BASE_WIDTH + paddings; + this.$el.css('width', (!Common.Utils.InternalSettings.get("de-hide-right-settings") ? MENU_SCALE_PART : SCALE_MIN) + 'px'); + }, + txtParagraphSettings: 'Paragraph Settings', txtImageSettings: 'Image Settings', txtTableSettings: 'Table Settings', diff --git a/apps/documenteditor/main/index.html b/apps/documenteditor/main/index.html index 0a23b4f7f9..9ecfd295a5 100644 --- a/apps/documenteditor/main/index.html +++ b/apps/documenteditor/main/index.html @@ -135,16 +135,6 @@ opacity: 0.4; } - .loadmask > .brendpanel .circle { - vertical-align: middle; - width: 20px; - height: 20px; - border-radius: 20px; - /*margin: 0 10px;*/ - background: rgba(0,0,0,.15); - background: var(--sk-background-toolbar-tab); - } - .loadmask > .sktoolbar { background: #f1f1f1; /*height: 66px;*/ @@ -355,7 +345,6 @@
-
diff --git a/apps/documenteditor/main/index.html.deploy b/apps/documenteditor/main/index.html.deploy index 92f7a65dfb..d9cb6e2df7 100644 --- a/apps/documenteditor/main/index.html.deploy +++ b/apps/documenteditor/main/index.html.deploy @@ -86,15 +86,6 @@ opacity: 0.4; } - .loadmask > .brendpanel .circle { - vertical-align: middle; - width: 20px; - height: 20px; - border-radius: 20px; - background: rgba(0,0,0,.15); - background: var(--sk-background-toolbar-tab); - } - .loadmask > .sktoolbar { background: #f1f1f1; padding: 0; @@ -284,7 +275,7 @@ -
+
diff --git a/apps/documenteditor/main/resources/less/app.less b/apps/documenteditor/main/resources/less/app.less index d707aa4947..4f9e10d6fd 100644 --- a/apps/documenteditor/main/resources/less/app.less +++ b/apps/documenteditor/main/resources/less/app.less @@ -15,6 +15,7 @@ @import "../../../../common/main/resources/less/colors-table-dark-contrast.less"; @import "../../../../common/main/resources/less/colors-table-gray.less"; @import "../../../../common/main/resources/less/colors-table-white.less"; +@import "../../../../common/main/resources/less/colors-table-white-dark.less"; // // Bootstrap diff --git a/apps/pdfeditor/main/app/controller/Viewport.js b/apps/pdfeditor/main/app/controller/Viewport.js index a764796ea0..dbd5377732 100644 --- a/apps/pdfeditor/main/app/controller/Viewport.js +++ b/apps/pdfeditor/main/app/controller/Viewport.js @@ -78,7 +78,7 @@ define([ toolbar.setExtra('right', me.header.getPanel('right', config)); if (!config.twoLevelHeader || config.compactHeader) toolbar.setExtra('left', me.header.getPanel('left', config)); - + me.toolbar = toolbar; /*var value = Common.localStorage.getBool("pdfe-settings-quick-print-button", true); Common.Utils.InternalSettings.set("pdfe-settings-quick-print-button", value); if (me.header && me.header.btnPrintQuick) @@ -170,6 +170,8 @@ define([ onAppShowed: function (config) { var me = this; + me.appConfig = config; + var _intvars = Common.Utils.InternalSettings; var $filemenu = $('.toolbar-fullview-panel'); $filemenu.css('top', Common.UI.LayoutManager.isElementVisible('toolbar') ? _intvars.get('toolbar-height-tabs') : 0); @@ -371,7 +373,8 @@ define([ const computed_style = window.getComputedStyle(document.body); _intvars.set('toolbar-height-controls', parseInt(computed_style.getPropertyValue("--toolbar-height-controls") || 84)); _intvars.set('toolbar-height-normal', _intvars.get('toolbar-height-tabs') + _intvars.get('toolbar-height-controls')); - $filemenu.css('top', (Common.UI.LayoutManager.isElementVisible('toolbar') ? _intvars.get('toolbar-height-tabs-top-title') : 0) + _intvars.get('document-title-height')); + $filemenu.css('top', (Common.UI.LayoutManager.isElementVisible('toolbar') ? _intvars.get('toolbar-height-tabs') : 0) + + (this.appConfig.twoLevelHeader && !this.appConfig.compactHeader ? _intvars.get('document-title-height') : 0)); this.viewport.vlayout.getItem('toolbar').height = this.toolbar && this.toolbar.isCompact() ? _intvars.get('toolbar-height-compact') : _intvars.get('toolbar-height-normal'); diff --git a/apps/pdfeditor/main/app/view/FormSettings.js b/apps/pdfeditor/main/app/view/FormSettings.js index ea83859726..0f5904388c 100644 --- a/apps/pdfeditor/main/app/view/FormSettings.js +++ b/apps/pdfeditor/main/app/view/FormSettings.js @@ -777,6 +777,7 @@ define([ }); this.sldrPreviewPositionX.on('change', _.bind(this.onImagePositionChange, this, 'x')); this.sldrPreviewPositionX.on('changecomplete', _.bind(this.onImagePositionChangeComplete, this, 'x')); + this.lockedControls.push(this.sldrPreviewPositionX); this.sldrPreviewPositionY = new Common.UI.SingleSlider({ el: $markup.findById('#form-img-slider-position-y'), @@ -788,6 +789,7 @@ define([ }); this.sldrPreviewPositionY.on('change', _.bind(this.onImagePositionChange, this, 'y')); this.sldrPreviewPositionY.on('changecomplete', _.bind(this.onImagePositionChangeComplete, this, 'y')); + this.lockedControls.push(this.sldrPreviewPositionY); var xValue = this.sldrPreviewPositionX.getValue(), yValue = this.sldrPreviewPositionY.getValue(); diff --git a/apps/pdfeditor/main/app/view/RightMenu.js b/apps/pdfeditor/main/app/view/RightMenu.js index 98474687e4..6e46271e56 100644 --- a/apps/pdfeditor/main/app/view/RightMenu.js +++ b/apps/pdfeditor/main/app/view/RightMenu.js @@ -38,6 +38,7 @@ var SCALE_MIN = 40; var MENU_SCALE_PART = 260; +var MENU_BASE_WIDTH = 220; define([ 'text!pdfeditor/main/app/template/RightMenu.template', @@ -148,16 +149,21 @@ define([ this.defaultHideRightMenu = !(mode.customization && (mode.customization.hideRightMenu===false)); var open = !Common.localStorage.getBool("pdfe-hide-right-settings", this.defaultHideRightMenu); Common.Utils.InternalSettings.set("pdfe-hide-right-settings", !open); - el.css('width', SCALE_MIN + 'px'); - // el.css('width', ((open) ? MENU_SCALE_PART : SCALE_MIN) + 'px'); - el.show(); Common.NotificationCenter.on('app:repaint', function() { el.css('width', SCALE_MIN + 'px'); }); + Common.NotificationCenter.on('uitheme:changed', _.bind(function() { + this.updateWidth(); + Common.NotificationCenter.trigger('layout:changed', 'rightmenu'); + }, this)); + el.html(this.template({scope: this})); + this.updateWidth(); + el.show(); + this.btnMoreContainer = $('#slot-right-menu-more'); Common.UI.SideMenu.prototype.render.call(this); this.btnMore.menu.menuAlign = 'tr-tl'; @@ -340,6 +346,14 @@ define([ Common.UI.SideMenu.prototype.setButtons.apply(this, [allButtons]); }, + updateWidth: function() { + var pane = $(this.el).find('.right-panel'), + paddings = parseInt(pane.css('padding-left')) + parseInt(pane.css('padding-right')); + pane.css('width', MENU_BASE_WIDTH + paddings + 'px'); + MENU_SCALE_PART = SCALE_MIN + MENU_BASE_WIDTH + paddings; + this.$el.css('width', (this.GetActivePane() ? MENU_SCALE_PART : SCALE_MIN) + 'px'); + }, + txtParagraphSettings: 'Text Settings', txtImageSettings: 'Image Settings', txtTableSettings: 'Table Settings', diff --git a/apps/pdfeditor/main/index.html b/apps/pdfeditor/main/index.html index 8b2ebcc005..4df5734c44 100644 --- a/apps/pdfeditor/main/index.html +++ b/apps/pdfeditor/main/index.html @@ -109,16 +109,6 @@ opacity: 0.4; } - .loadmask > .brendpanel .circle { - vertical-align: middle; - width: 20px; - height: 20px; - border-radius: 20px; - /* margin: 0 10px; */ - background: rgba(0,0,0,.15); - background: var(--sk-background-toolbar-tab); - } - .loadmask > .sktoolbar { background: #f1f1f1; /*height: 66px;*/ @@ -323,7 +313,6 @@
-
diff --git a/apps/pdfeditor/main/index.html.deploy b/apps/pdfeditor/main/index.html.deploy index 7aad664303..4a39349320 100644 --- a/apps/pdfeditor/main/index.html.deploy +++ b/apps/pdfeditor/main/index.html.deploy @@ -80,15 +80,6 @@ opacity: 0.4; } - .loadmask > .brendpanel .circle { - vertical-align: middle; - width: 20px; - height: 20px; - border-radius: 20px; - background: rgba(0,0,0,.15); - background: var(--sk-background-toolbar-tab); - } - .loadmask > .sktoolbar { background: #f1f1f1; padding: 0; @@ -272,7 +263,7 @@ -
+
-
+
diff --git a/apps/presentationeditor/main/resources/less/app.less b/apps/presentationeditor/main/resources/less/app.less index 90e9d5ab7a..aebc0e279b 100644 --- a/apps/presentationeditor/main/resources/less/app.less +++ b/apps/presentationeditor/main/resources/less/app.less @@ -15,6 +15,7 @@ @import "../../../../common/main/resources/less/colors-table-dark-contrast.less"; @import "../../../../common/main/resources/less/colors-table-gray.less"; @import "../../../../common/main/resources/less/colors-table-white.less"; +@import "../../../../common/main/resources/less/colors-table-white-dark.less"; // // Bootstrap // -------------------------------------------------- diff --git a/apps/spreadsheeteditor/main/app/controller/CellEditor.js b/apps/spreadsheeteditor/main/app/controller/CellEditor.js index eb70d58951..0a27c8e17a 100644 --- a/apps/spreadsheeteditor/main/app/controller/CellEditor.js +++ b/apps/spreadsheeteditor/main/app/controller/CellEditor.js @@ -73,6 +73,7 @@ define([ }.bind(this) } }); + Common.NotificationCenter.on('external:reshow', this.onExternalReshow.bind(this)); Common.NotificationCenter.on('uitheme:changed', this.onThemeChanged.bind(this)); }, @@ -261,7 +262,15 @@ define([ Common.NotificationCenter.trigger('edit:complete', this.editor, {restorefocus:true}); }, + onExternalReshow: function () { + this.changeCellEditorHeight(); + }, + onThemeChanged: function () { + this.changeCellEditorHeight(); + }, + + changeCellEditorHeight: function() { if (!Common.localStorage.getBool('sse-celleditor-expand')) { var editorMinHeight = parseFloat(this.editor.$el.css('min-height')) || 20; editorMinHeight -= (parseFloat(this.editor.$el.css('border-bottom-width')) || 0); diff --git a/apps/spreadsheeteditor/main/app/controller/Main.js b/apps/spreadsheeteditor/main/app/controller/Main.js index 3d520e2413..0ae6312951 100644 --- a/apps/spreadsheeteditor/main/app/controller/Main.js +++ b/apps/spreadsheeteditor/main/app/controller/Main.js @@ -2939,7 +2939,8 @@ define([ arr = []; // system languages can be 'en'... (MacOs) sLangs.forEach(function(lang) { - let rec = me.languages.indexOf(Common.util.LanguageInfo.getLocalLanguageCode(lang).toString())<0 ? null : lang; + let rec = Common.util.LanguageInfo.getLocalLanguageCode(lang); + rec && (rec = me.languages.indexOf(rec.toString())<0 ? null : lang); if (!rec) { rec = Common.util.LanguageInfo.getDefaultLanguageCode(lang); rec = rec && me.languages.indexOf(rec.toString())>-1 ? rec : null; @@ -2985,6 +2986,9 @@ define([ } this.isAppDisabled = data.data; break; + case 'reshow': + Common.NotificationCenter.trigger('external:reshow'); + break; case 'queryClose': if (!Common.Utils.ModalWindow.isVisible()) { this.isFrameClosed = true; diff --git a/apps/spreadsheeteditor/main/app/controller/Viewport.js b/apps/spreadsheeteditor/main/app/controller/Viewport.js index 33921b3bdb..c3e79a3d7e 100644 --- a/apps/spreadsheeteditor/main/app/controller/Viewport.js +++ b/apps/spreadsheeteditor/main/app/controller/Viewport.js @@ -88,7 +88,7 @@ define([ if ( me.appConfig && me.appConfig.isEdit && !config.compactHeader && toolbar.btnCollabChanges ) toolbar.btnCollabChanges = me.header.btnSave; - + me.toolbar = toolbar; /*var value = Common.localStorage.getBool("sse-settings-quick-print-button", true); Common.Utils.InternalSettings.set("sse-settings-quick-print-button", value); if (me.header && me.header.btnPrintQuick) @@ -147,8 +147,7 @@ define([ config.customization && config.customization.compactToolbar )) { me.viewport.vlayout.getItem('toolbar').height = _intvars.get('toolbar-height-compact'); - } else - if ( config.isEditDiagram || config.isEditMailMerge || config.isEditOle ) { + } else if ( config.isEditDiagram || config.isEditMailMerge || config.isEditOle ) { me.viewport.vlayout.getItem('toolbar').height = 41; document.body.classList.add('inner-simple-editor'); } @@ -360,16 +359,20 @@ define([ onThemeChanged: function () { if (Common.UI.Themes.available()) { - var _intvars = Common.Utils.InternalSettings; - var $filemenu = $('.toolbar-fullview-panel'); + var _intvars = Common.Utils.InternalSettings, + config = this.appConfig; const computed_style = window.getComputedStyle(document.body); - _intvars.set('toolbar-height-controls', parseInt(computed_style.getPropertyValue("--toolbar-height-controls") || 84)); - _intvars.set('toolbar-height-normal', _intvars.get('toolbar-height-tabs') + _intvars.get('toolbar-height-controls')); - $filemenu.css('top', (Common.UI.LayoutManager.isElementVisible('toolbar') ? _intvars.get('toolbar-height-tabs-top-title') : 0) + _intvars.get('document-title-height')); - this.viewport.vlayout.getItem('toolbar').height = this.toolbar && this.toolbar.isCompact() ? - _intvars.get('toolbar-height-compact') : _intvars.get('toolbar-height-normal'); + if ( config.twoLevelHeader && !config.isEditDiagram && !config.isEditMailMerge && !config.isEditOle && !config.compactHeader) { + var $filemenu = $('.toolbar-fullview-panel'); + _intvars.set('toolbar-height-controls', parseInt(computed_style.getPropertyValue("--toolbar-height-controls") || 84)); + _intvars.set('toolbar-height-normal', _intvars.get('toolbar-height-tabs') + _intvars.get('toolbar-height-controls')); + $filemenu.css('top', (Common.UI.LayoutManager.isElementVisible('toolbar') ? _intvars.get('toolbar-height-tabs') : 0) + _intvars.get('document-title-height')); + + this.viewport.vlayout.getItem('toolbar').height = this.toolbar && this.toolbar.isCompact() ? + _intvars.get('toolbar-height-compact') : _intvars.get('toolbar-height-normal'); + } var height = parseInt(computed_style.getPropertyValue('--statusbar-height')); var NoCompact = $('.statusbar').hasClass('no-compact'); diff --git a/apps/spreadsheeteditor/main/app/view/RightMenu.js b/apps/spreadsheeteditor/main/app/view/RightMenu.js index 03b8b3aa13..e590125378 100644 --- a/apps/spreadsheeteditor/main/app/view/RightMenu.js +++ b/apps/spreadsheeteditor/main/app/view/RightMenu.js @@ -38,6 +38,7 @@ var SCALE_MIN = 40; var MENU_SCALE_PART = 260; +var MENU_BASE_WIDTH = 220; define([ 'text!spreadsheeteditor/main/app/template/RightMenu.template', @@ -184,16 +185,22 @@ define([ this.defaultHideRightMenu = !(mode.customization && (mode.customization.hideRightMenu===false)); var open = !Common.localStorage.getBool("sse-hide-right-settings", this.defaultHideRightMenu); Common.Utils.InternalSettings.set("sse-hide-right-settings", !open); - el.css('width', ((open) ? MENU_SCALE_PART : SCALE_MIN) + 'px'); - el.css('z-index', 101); - el.show(); Common.NotificationCenter.on('app:repaint', function() { el.css('width', ((open) ? MENU_SCALE_PART : SCALE_MIN) + 'px'); }); + Common.NotificationCenter.on('uitheme:changed', _.bind(function() { + this.updateWidth(); + Common.NotificationCenter.trigger('layout:changed', 'rightmenu'); + }, this)); + el.html(this.template({scope: this})); + this.updateWidth(); + el.css('z-index', 101); + el.show(); + this.btnMoreContainer = $('#slot-right-menu-more'); Common.UI.SideMenu.prototype.render.call(this); this.btnMore.menu.menuAlign = 'tr-tl'; @@ -373,6 +380,14 @@ define([ Common.UI.SideMenu.prototype.setButtons.apply(this, [allButtons]); }, + updateWidth: function() { + var pane = $(this.el).find('.right-panel'), + paddings = parseInt(pane.css('padding-left')) + parseInt(pane.css('padding-right')); + pane.css('width', MENU_BASE_WIDTH + paddings + 'px'); + MENU_SCALE_PART = SCALE_MIN + MENU_BASE_WIDTH + paddings; + this.$el.css('width', (!Common.Utils.InternalSettings.get("sse-hide-right-settings") ? MENU_SCALE_PART : SCALE_MIN) + 'px'); + }, + txtParagraphSettings: 'Paragraph Settings', txtImageSettings: 'Image Settings', txtShapeSettings: 'Shape Settings', diff --git a/apps/spreadsheeteditor/main/app/view/Spellcheck.js b/apps/spreadsheeteditor/main/app/view/Spellcheck.js index 2ab66fdca4..7a23efb7da 100644 --- a/apps/spreadsheeteditor/main/app/view/Spellcheck.js +++ b/apps/spreadsheeteditor/main/app/view/Spellcheck.js @@ -49,7 +49,7 @@ define([], function () { '
', '
', '
', - '
', + '
', '', '', '
', diff --git a/apps/spreadsheeteditor/main/index.html b/apps/spreadsheeteditor/main/index.html index 8ddf2825c5..9d0cb43ee3 100644 --- a/apps/spreadsheeteditor/main/index.html +++ b/apps/spreadsheeteditor/main/index.html @@ -24,6 +24,11 @@ --sk-canvas-content-background: #fff; --sk-canvas-page-border: #dde0e5; --sk-canvas-line: rgba(0,0,0,.05); + --sk-height-formula: 38px; + --sk-padding-formula: 10px 10px 4px 10px; + --sk-border-style-formula: none; + --sk-gap-formula-field: 28px; + --sk-border-radius-formula-field: 3px; } /* .theme-dark, .theme-type-dark { @@ -104,16 +109,6 @@ opacity: 0.4; } - .loadmask > .brendpanel .circle { - vertical-align: middle; - width: 20px; - height: 20px; - border-radius: 20px; - /* margin: 0 10px; */ - background: rgba(0,0,0,.15); - background: var(--sk-background-toolbar-tab); - } - .loadmask > .sktoolbar { background: #f1f1f1; padding: 0; @@ -170,7 +165,8 @@ top: 0; bottom: 0; left: 875px; - width: 690px; + width: inherit; + max-width: 690px; height: 45px; } .rtl .loadmask > .sktoolbar li.fat { @@ -179,9 +175,13 @@ } .loadmask > .skformula { + padding: 0 0 4px 0; + padding: var(--sk-padding-formula); height: 24px; - background: #f1f1f1; - background: var(--background-toolbar, #f1f1f1); + height: var(--sk-height-formula); + background: #f7f7f7; + background-color: var(--sk-background-toolbar, #f7f7f7); + box-sizing: border-box; } .loadmask > .skformula ul { @@ -189,30 +189,51 @@ font-size: 0; box-sizing: border-box; border-style: solid; + border-style: var(--sk-border-style-formula); border-width: 1px; border-width: var(--scaled-one-px-value, 1px); border-color: #cbcbcb transparent; border-color: var(--border-toolbar, #cbcbcb) transparent; + border-top: 0 none; + display: flex; + height: 100%; } .loadmask > .skformula li { display: inline-block; box-sizing: border-box; - height: 19px; - width: 100%; - margin-left: 20px; background: #fff; background: var(--background-normal, #fff); - border-style: solid; - border-width: 1px; - border-width: var(--scaled-one-px-value, 1px); - border-color: transparent #cbcbcb; - border-color: transparent var(--border-toolbar, #cbcbcb); + border-left: 1px solid #cbcbcb; + border-left: var(--scaled-one-px-value, 1px) var(--sk-border-style-formula) var(--border-toolbar, #cbcbcb); + border-radius: 0px; + border-radius: var(--sk-border-radius-formula-field, 0px); + flex-grow: 1; } .loadmask > .skformula li:first-child { width: 100px; - margin-left: 0; + flex-grow: 0; + margin-right: 20px; + margin-right: var(--sk-gap-formula-field); + border-left: 0 none; + border-right: 1px solid #cbcbcb; + border-right: var(--scaled-one-px-value, 1px) var(--sk-border-style-formula) var(--border-toolbar, #cbcbcb); + } + + .rtl .loadmask > .skformula li { + border-left: 0 none; + border-right: 1px solid #cbcbcb; + border-right: var(--scaled-one-px-value, 1px) var(--sk-border-style-formula) var(--border-toolbar, #cbcbcb); + } + + .rtl .loadmask > .skformula li:first-child { + margin-right: 0; + margin-left: 20px; + margin-left: var(--sk-gap-formula-field); + border-right: 0 none; + border-left: 1px solid #cbcbcb; + border-left: var(--scaled-one-px-value, 1px) var(--sk-border-style-formula) var(--border-toolbar, #cbcbcb); } .loadmask > .placeholder { @@ -350,7 +371,6 @@
-
diff --git a/apps/spreadsheeteditor/main/index.html.deploy b/apps/spreadsheeteditor/main/index.html.deploy index b97494c37d..2d5a5e60d8 100644 --- a/apps/spreadsheeteditor/main/index.html.deploy +++ b/apps/spreadsheeteditor/main/index.html.deploy @@ -27,6 +27,11 @@ --sk-canvas-content-background: #fff; --sk-canvas-page-border: #dde0e5; --sk-canvas-line: rgba(0,0,0,.05); + --sk-height-formula: 38px; + --sk-padding-formula: 10px 10px 4px 10px; + --sk-border-style-formula: none; + --sk-gap-formula-field: 28px; + --sk-border-radius-formula-field: 3px; } .loadmask { @@ -81,15 +86,6 @@ opacity: 0.4; } - .loadmask > .brendpanel .circle { - vertical-align: middle; - width: 20px; - height: 20px; - border-radius: 20px; - background: rgba(0,0,0,.15); - background: var(--sk-background-toolbar-tab); - } - .loadmask > .sktoolbar { background: #f1f1f1; padding: 0; @@ -144,7 +140,8 @@ top: 0; bottom: 0; left: 875px; - width: 690px; + width: inherit; + max-width: 690px; height: 45px; } .rtl .loadmask > .sktoolbar li.fat { @@ -153,9 +150,13 @@ } .loadmask>.skformula { + padding: 0 0 4px 0; + padding: var(--sk-padding-formula); height: 24px; - background: #f1f1f1; - background: var(--background-toolbar, #f1f1f1); + height: var(--sk-height-formula); + background: #f7f7f7; + background-color: var(--sk-background-toolbar, #f7f7f7); + box-sizing: border-box; } .loadmask>.skformula ul { @@ -163,30 +164,51 @@ font-size: 0; box-sizing: border-box; border-style: solid; + border-style: var(--sk-border-style-formula); border-width: 1px; border-width: var(--scaled-one-px-value, 1px); border-color: #cbcbcb transparent; border-color: var(--border-toolbar, #cbcbcb) transparent; + border-top: 0 none; + display: flex; + height: 100%; } .loadmask>.skformula li { display: inline-block; box-sizing: border-box; - height: 19px; - width: 100%; - margin-left: 20px; background: #fff; background: var(--background-normal, #fff); - border-style: solid; - border-width: 1px; - border-width: var(--scaled-one-px-value, 1px); - border-color: #cbcbcb; - border-color: transparent var(--border-toolbar, #cbcbcb); + border-left: 1px solid #cbcbcb; + border-left: var(--scaled-one-px-value, 1px) var(--sk-border-style-formula) var(--border-toolbar, #cbcbcb); + border-radius: 0px; + border-radius: var(--sk-border-radius-formula-field, 0px); + flex-grow: 1; } .loadmask>.skformula li:first-child { width: 100px; - margin-left: 0; + flex-grow: 0; + margin-right: 20px; + margin-right: var(--sk-gap-formula-field); + border-left: 0 none; + border-right: 1px solid #cbcbcb; + border-right: var(--scaled-one-px-value, 1px) var(--sk-border-style-formula) var(--border-toolbar, #cbcbcb); + } + + .rtl .loadmask > .skformula li { + border-left: 0 none; + border-right: 1px solid #cbcbcb; + border-right: var(--scaled-one-px-value, 1px) var(--sk-border-style-formula) var(--border-toolbar, #cbcbcb); + } + + .rtl .loadmask > .skformula li:first-child { + margin-right: 0; + margin-left: 20px; + margin-left: var(--sk-gap-formula-field); + border-right: 0 none; + border-left: 1px solid #cbcbcb; + border-left: var(--scaled-one-px-value, 1px) var(--sk-border-style-formula) var(--border-toolbar, #cbcbcb); } .loadmask > .placeholder { @@ -321,7 +343,7 @@
-
+
diff --git a/apps/spreadsheeteditor/main/index_internal.html b/apps/spreadsheeteditor/main/index_internal.html index 251fa33a83..f28959a3b5 100644 --- a/apps/spreadsheeteditor/main/index_internal.html +++ b/apps/spreadsheeteditor/main/index_internal.html @@ -17,6 +17,14 @@ --canvas-page-border: #555; } + .loadmask { + --sk-height-formula: 32px; + --sk-padding-formula: 4px 10px; + --sk-border-style-formula: none; + --sk-gap-formula-field: 28px; + --sk-border-radius-formula-field: 3px; + } + .loadmask { left: 0; top: 0; @@ -38,9 +46,13 @@ } .loadmask > .skformula { + padding: 0 0 4px 0; + padding: var(--sk-padding-formula); height: 24px; + height: var(--sk-height-formula); background: #f7f7f7; - background: var(--background-toolbar, #f7f7f7); + background-color: var(--sk-background-toolbar, #f7f7f7); + box-sizing: border-box; } .loadmask > .skformula ul { @@ -48,30 +60,51 @@ font-size: 0; box-sizing: border-box; border-style: solid; + border-style: var(--sk-border-style-formula); border-width: 1px; border-width: var(--scaled-one-px-value, 1px); border-color: #cbcbcb transparent; border-color: var(--border-toolbar, #cbcbcb) transparent; + border-top: 0 none; + display: flex; + height: 100%; } .loadmask > .skformula li { display: inline-block; box-sizing: border-box; - height: 19px; - width: 100%; - margin-left: 20px; background: #fff; background: var(--background-normal, #fff); - border-style: solid; - border-width: 1px; - border-width: var(--scaled-one-px-value, 1px); - border-color: transparent #cbcbcb; - border-color: transparent var(--border-toolbar, #cbcbcb); + border-left: 1px solid #cbcbcb; + border-left: var(--scaled-one-px-value, 1px) var(--sk-border-style-formula) var(--border-toolbar, #cbcbcb); + border-radius: 0px; + border-radius: var(--sk-border-radius-formula-field, 0px); + flex-grow: 1; } .loadmask > .skformula li:first-child { width: 100px; - margin-left: 0; + flex-grow: 0; + margin-right: 20px; + margin-right: var(--sk-gap-formula-field); + border-left: 0 none; + border-right: 1px solid #cbcbcb; + border-right: var(--scaled-one-px-value, 1px) var(--sk-border-style-formula) var(--border-toolbar, #cbcbcb); + } + + .rtl .loadmask > .skformula li { + border-left: 0 none; + border-right: 1px solid #cbcbcb; + border-right: var(--scaled-one-px-value, 1px) var(--sk-border-style-formula) var(--border-toolbar, #cbcbcb); + } + + .rtl .loadmask > .skformula li:first-child { + margin-right: 0; + margin-left: 20px; + margin-left: var(--sk-gap-formula-field); + border-right: 0 none; + border-left: 1px solid #cbcbcb; + border-left: var(--scaled-one-px-value, 1px) var(--sk-border-style-formula) var(--border-toolbar, #cbcbcb); } .loadmask > .placeholder { diff --git a/apps/spreadsheeteditor/main/index_internal.html.deploy b/apps/spreadsheeteditor/main/index_internal.html.deploy index 5b816a8824..aef1d85a7c 100644 --- a/apps/spreadsheeteditor/main/index_internal.html.deploy +++ b/apps/spreadsheeteditor/main/index_internal.html.deploy @@ -11,6 +11,14 @@