pengjunjie/web-apps
1
0
Fork 1
mirror of https://github.com/ONLYOFFICE/web-apps.git synced 2026-07-26 01:42:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'release/v9.0.0' into fix/bug-73308

Browse Source
This commit is contained in:
Julia.Radzhabova
2025-05-30 14:39:02 +03:00
parent acec0d089a dd114ee982
commit eaaacb9ff5
53 changed files with 812 additions and 245 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
apps/common/main/lib/component/Button.js
View File

@ -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());
}
}
});

6
apps/common/main/lib/component/Mixtbar.js
View File

@ -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();

5
apps/common/main/lib/controller/ExternalDiagramEditor.js
View File

@ -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');

5
apps/common/main/lib/controller/ExternalMergeEditor.js
View File

@ -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();

5
apps/common/main/lib/controller/ExternalOleEditor.js
View File

@ -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');

36
apps/common/main/lib/controller/Themes.js
View File

@ -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() {

6
apps/common/main/lib/util/htmlutils.js
View File

@ -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);
}

10
apps/common/main/lib/util/themeinit.js
View File

@ -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)');
}
});

5
apps/common/main/lib/view/Header.js
View File

@ -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));

45
apps/common/main/resources/less/buttons.less
View File

@ -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;
}
}
}
}

3
apps/common/main/resources/less/colors-table-classic.less
View File

@ -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);

3
apps/common/main/resources/less/colors-table-dark-contrast.less
View File

@ -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);

3
apps/common/main/resources/less/colors-table-dark.less
View File

@ -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);

3
apps/common/main/resources/less/colors-table-gray.less
View File

@ -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);

12
apps/common/main/resources/less/colors-table-ie-fix.less
View File

@ -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)";

332
apps/common/main/resources/less/colors-table-white-dark.less Normal file
View File

@ -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;
}
}

7
apps/common/main/resources/less/colors-table-white.less
View File

@ -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;

10
apps/common/main/resources/less/colors-table.less
View File

@ -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);

4
apps/common/main/resources/less/combobox.less
View File

@ -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;

3
apps/common/main/resources/less/header.less
View File

@ -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;

3
apps/common/main/resources/less/toolbar.less
View File

@ -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();

3
apps/documenteditor/main/app/controller/Viewport.js
View File

@ -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');

19
apps/documenteditor/main/app/view/RightMenu.js
View File

@ -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',

11
apps/documenteditor/main/index.html
View File

@ -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 @@
<div class="brendpanel" style="display: none;">
<div>
<div class="spacer"></div>
<div class="circle"></div>
</div>
<div>
<span class="rect"></span>

11
apps/documenteditor/main/index.html.deploy
View File

@ -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 @@
<script src="../../../../../apps/common/main/lib/util/htmlutils.js?__inline=true"></script>
<script src="../../../../../apps/common/main/lib/util/docserviceworker.js?__inline=true"></script>
<div id="loading-mask" class="loadmask"><div class="brendpanel" style="display: none;"><div><div class="spacer"></div><div class="circle"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span></div></div>
<div id="loading-mask" class="loadmask"><div class="brendpanel" style="display: none;"><div><div class="spacer"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span></div></div>
<div id="sktoolbar" class="sktoolbar" style="display: none;"><section class="box-controls"><ul><li class="compact" style="width: 30px;display: none;"></li><li class="compact space" style="display: none;"></li><li class="compact" style="width: 90px;display: none;"></li><li class="not-compact" style="width: 63px;"></li><li class="space"></li><li style="width: 234px;"></li><li class="space"></li><li style="width: 189px;"></li><li class="fat"></li></ul><ul><li class="compact" style="width: 30px;display: none;"></li><li class="compact space" style="display: none;"></li><li class="compact" style="width: 90px;display: none;"></li><li class="not-compact" style="width: 63px;"></li><li class="space"></li><li style="width: 234px;"></li><li class="space"></li><li style="width: 189px;"></li></ul></section></div>
<div id="sktoolbar-pdf" class="sktoolbar" style="display: none;"><ul><li class="compact" style="width: 30px;display: none;"></li><li class="compact space" style="display: none;"></li><li class="compact" style="width: 90px;display: none;"></li><li class="not-compact" style="width: 63px;"></li><li class="space" style="width: 98px;"></li><li style="width: 105px;"></li><li class="space"></li><li style="width: 160px;"></li></ul><ul><li class="compact" style="width: 30px;display: none;"></li><li class="compact space" style="display: none;"></li><li class="compact" style="width: 90px;display: none;"></li><li class="not-compact" style="width: 63px;"></li><li class="space"></li><li class="big"/><li class="big"/><li class="space"></li><li style="width: 105px;"></li><li class="space"></li><li style="width: 160px;"></li><li class="big"/><li class="big"/><li class="big"/></ul></div>
<div class="placeholder" style="display: none;"><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div></div></div>

1
apps/documenteditor/main/resources/less/app.less
View File

@ -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

7
apps/pdfeditor/main/app/controller/Viewport.js
View File

@ -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');

2
apps/pdfeditor/main/app/view/FormSettings.js
View File

@ -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();

20
apps/pdfeditor/main/app/view/RightMenu.js
View File

@ -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',

11
apps/pdfeditor/main/index.html
View File

@ -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 @@
<div class="brendpanel" style="display: none;">
<div>
<div class="spacer"></div>
<div class="circle"></div>
</div>
<div>
<span class="rect"></span>

11
apps/pdfeditor/main/index.html.deploy
View File

@ -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 @@
<script src="../../../../../apps/common/main/lib/util/htmlutils.js?__inline=true"></script>
<script src="../../../../../apps/common/main/lib/util/docserviceworker.js?__inline=true"></script>
<div id="loading-mask" class="loadmask"><div class="brendpanel" style="display: none;"><div><div class="spacer"></div><div class="circle"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span></div></div><div class="sktoolbar" style="display: none;"><section class="box-controls"><ul><li class="compact" style="width: 30px;display: none;"></li><li class="compact space" style="display: none;"></li><li class="compact" style="width: 90px;display: none;"></li><li class="not-compact" style="width: 63px;"></li><li class="space" style="width: 144px;"></li><li style="width: 105px;"></li><li class="space"></li><li style="width: 160px;"></li></ul><ul><li class="compact" style="width: 30px;display: none;"></li><li class="compact space" style="display: none;"></li><li class="compact" style="width: 90px;display: none;"></li><li class="not-compact" style="width: 63px;"></li><li class="space"></li><li class="big"/><li class="big"/><li class="big"/><li class="space"></li><li style="width: 105px;"></li><li class="space"></li><li style="width: 160px;"></li></ul></section></div><div class="placeholder" style="display: none;"><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div></div></div>
<div id="loading-mask" class="loadmask"><div class="brendpanel" style="display: none;"><div><div class="spacer"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span></div></div><div class="sktoolbar" style="display: none;"><section class="box-controls"><ul><li class="compact" style="width: 30px;display: none;"></li><li class="compact space" style="display: none;"></li><li class="compact" style="width: 90px;display: none;"></li><li class="not-compact" style="width: 63px;"></li><li class="space" style="width: 144px;"></li><li style="width: 105px;"></li><li class="space"></li><li style="width: 160px;"></li></ul><ul><li class="compact" style="width: 30px;display: none;"></li><li class="compact space" style="display: none;"></li><li class="compact" style="width: 90px;display: none;"></li><li class="not-compact" style="width: 63px;"></li><li class="space"></li><li class="big"/><li class="big"/><li class="big"/><li class="space"></li><li style="width: 105px;"></li><li class="space"></li><li style="width: 160px;"></li></ul></section></div><div class="placeholder" style="display: none;"><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div></div></div>
<div id="viewport" role="main"></div>
<script>

1
apps/pdfeditor/main/resources/less/app.less
View File

@ -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
// --------------------------------------------------

4
apps/presentationeditor/main/app/controller/Toolbar.js
View File

@ -142,6 +142,7 @@ define([
'title:hide' : this.onTitleHide.bind(this),
'footers:hide' : this.onFootersHide.bind(this),
'tab:active' : this.onActiveTab.bind(this),
'tab:active:before' : this.onBeforeActiveTab.bind(this),
'tab:collapse' : this.onTabCollapse.bind(this)
},
'DocumentHolder': {
@ -3173,6 +3174,9 @@ define([
setTimeout(function() {
Common.UI.TooltipManager.showTip('mergeShapes');
}, 10);
},
onBeforeActiveTab: function(tab) {
this._state.activeTab = tab;
this.showStaticElements();
},

4
apps/presentationeditor/main/app/controller/Viewport.js
View File

@ -79,6 +79,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("pe-settings-quick-print-button", true);
Common.Utils.InternalSettings.set("pe-settings-quick-print-button", value);
if (me.header && me.header.btnPrintQuick)
@ -396,7 +397,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');

19
apps/presentationeditor/main/app/view/RightMenu.js
View File

@ -38,6 +38,7 @@
var SCALE_MIN = 40;
var MENU_SCALE_PART = 260;
var MENU_BASE_WIDTH = 220;
define([
'text!presentationeditor/main/app/template/RightMenu.template',
@ -159,15 +160,21 @@ define([
this.defaultHideRightMenu = !(mode.customization && (mode.customization.hideRightMenu===false));
var open = !Common.localStorage.getBool("pe-hide-right-settings", this.defaultHideRightMenu);
Common.Utils.InternalSettings.set("pe-hide-right-settings", !open);
el.css('width', ((open) ? MENU_SCALE_PART : SCALE_MIN) + 'px');
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.show();
this.btnMoreContainer = $('#slot-right-menu-more');
Common.UI.SideMenu.prototype.render.call(this);
this.btnMore.menu.menuAlign = 'tr-tl';
@ -338,6 +345,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("pe-hide-right-settings") ? MENU_SCALE_PART : SCALE_MIN) + 'px');
},
txtParagraphSettings: 'Text Settings',
txtImageSettings: 'Image Settings',
txtTableSettings: 'Table Settings',

11
apps/presentationeditor/main/index.html
View File

@ -105,16 +105,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;*/
@ -344,7 +334,6 @@
<div class="brendpanel" style="display: none;">
<div>
<div class="spacer"></div>
<div class="circle"></div>
</div>
<div>
<span class="rect"></span>

11
apps/presentationeditor/main/index.html.deploy
View File

@ -81,15 +81,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;
@ -311,7 +302,7 @@
<script src="../../../../../apps/common/main/lib/util/docserviceworker.js?__inline=true"></script>
<div id="loading-mask" class="loadmask">
<div class="brendpanel" style="display: none;">
<div><div class="spacer"></div><div class="circle"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div></div>
<div><div class="spacer"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div></div>
</div>
<div class="sktoolbar" style="display: none;">
<section class="box-controls">

1
apps/presentationeditor/main/resources/less/app.less
View File

@ -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
// --------------------------------------------------

9
apps/spreadsheeteditor/main/app/controller/CellEditor.js
View File

@ -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);

6
apps/spreadsheeteditor/main/app/controller/Main.js
View File

@ -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;

23
apps/spreadsheeteditor/main/app/controller/Viewport.js
View File

@ -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');

21
apps/spreadsheeteditor/main/app/view/RightMenu.js
View File

@ -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',

2
apps/spreadsheeteditor/main/app/view/Spellcheck.js
View File

@ -49,7 +49,7 @@ define([], function () {
'</div>',
'<div id="spellcheck-suggestions-list"></div>',
'<div id="spellcheck-change" style=""></div>',
'<div id="spellcheck-ignore" class="padding-large margin-left-9"></div>',
'<div id="spellcheck-ignore" class="padding-large margin-left-6"></div>',
'<button class="btn btn-text-default auto" id="spellcheck-add-to-dictionary" data-hint="1" data-hint-direction="bottom" data-hint-offset="big"><%= scope.txtAddToDictionary %></button>',
'<label class="header" style="display: block;"><%= scope.txtDictionaryLanguage %></label>',
'<div id="spellcheck-dictionary-language"></div>',

66
apps/spreadsheeteditor/main/index.html
View File

@ -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 @@
<div class="brendpanel" style="display: none;">
<div>
<div class="spacer"></div>
<div class="circle"></div>
</div>
<div>
<span class="rect"></span>

66
apps/spreadsheeteditor/main/index.html.deploy
View File

@ -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 @@
<script src="../../../../../apps/common/main/lib/util/docserviceworker.js?__inline=true"></script>
<div id="loading-mask" class="loadmask">
<div class="brendpanel" style="display: none;"><div>
<div class="spacer"></div><div class="circle"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div></div>
<div class="spacer"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div></div>
</div>
<div class="sktoolbar" style="display: none;">
<section class="box-controls">

53
apps/spreadsheeteditor/main/index_internal.html
View File

@ -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 {

55
apps/spreadsheeteditor/main/index_internal.html.deploy
View File

@ -11,6 +11,14 @@
<!-- splash -->
<style type="text/css">
.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;
@ -32,9 +40,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 {
@ -42,30 +54,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 {
.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 {

1
apps/spreadsheeteditor/main/resources/less/app.less
View File

@ -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
// --------------------------------------------------

65
apps/spreadsheeteditor/main/resources/less/celleditor.less
View File

@ -1,13 +1,15 @@
#cell-editing-box {
border-bottom: solid @celleditor-border-width @border-toolbar-ie;
border-bottom: solid @celleditor-border-width-ie @border-toolbar-ie;
border-bottom: solid @celleditor-border-width @border-toolbar;
border-left: solid @celleditor-border-width @border-toolbar-ie;
border-left: solid @celleditor-border-width-ie @border-toolbar-ie;
border-left: solid @celleditor-border-width @border-toolbar;
min-height: @celleditor-height-ie;
min-height: @celleditor-height;
background-color: @background-pane-ie;
background-color: @background-pane;
.ce-group-name {
height: @celleditor-height-ie;
height: @celleditor-height;
//border-bottom: @scaled-one-px-value-ie solid @border-toolbar-ie;
//border-bottom: @scaled-one-px-value solid @border-toolbar;
@ -16,30 +18,28 @@
#ce-cell-name {
width: 100px;
height: calc(@celleditor-height - @celleditor-border-width);
height: calc(@celleditor-height - @celleditor-border-width + (1px - 1px/var(--pixel-ratio-factor,1)));
height: calc(@celleditor-height-ie - @celleditor-border-width-ie);
height: calc(@celleditor-height - var(--celleditor-border-width) + (1px - 1px/var(--pixel-ratio-factor,1)));
padding: 0px 19px 0 4px;
vertical-align: top;
display: inline-block;
transition: none;
-webkit-transition: none;
body:not(.theme-white) & {
border: 0 none;
border-right: @scaled-one-px-value-ie solid @border-toolbar-ie;
border-right: @scaled-one-px-value solid @border-toolbar;
box-shadow: 0 @scaled-one-px-value-ie 0 0 @border-toolbar-ie;
box-shadow: 0 @scaled-one-px-value 0 0 @border-toolbar;
}
border: @celleditor-input-border-ie;
border: @celleditor-input-border;
border-right: @celleditor-cell-name-border-right-ie;
border-right: @celleditor-cell-name-border-right;
box-shadow: 0 @celleditor-border-width-ie 0 0 @border-toolbar-ie;
box-shadow: 0 @celleditor-border-width 0 0 @border-toolbar;
.rtl & {
padding: 0px 4px 0 19px;
direction: rtl;
body:not(.theme-white) & {
border: 0 none;
border-left: @scaled-one-px-value-ie solid @border-toolbar-ie;
border-left: @scaled-one-px-value solid @border-toolbar;
}
border: @celleditor-input-border-ie;
border: @celleditor-input-border;
border-left: @celleditor-cell-name-border-right-ie;
border-left: @celleditor-cell-name-border-right;
}
&[disabled] {
@ -64,6 +64,7 @@
background-color: @background-normal-ie;
background-color: transparent;
width: 16px;
height: @celleditor-height-ie;
height: @celleditor-height;
.inner-box-caret {
@ -92,11 +93,8 @@
#ce-func-label {
height: @x-small-btn-size;
width: @x-small-btn-size;
.margin-left(-3px);
body.theme-white & {
.margin-left(1px);
}
.margin-left(@celleditor-func-label-margin-left-ie);
.margin-left(@celleditor-func-label-margin-left);
.border-radius(0);
@ -108,7 +106,7 @@
&:not(.expanded) {
#ce-func-label {
border-bottom: @celleditor-border-width solid @border-toolbar-ie;
border-bottom: @celleditor-border-width-ie solid @border-toolbar-ie;
border-bottom: @celleditor-border-width solid @border-toolbar;
}
}
@ -128,27 +126,30 @@
}
.ce-group-content {
margin: 0 0px 0 120px;
margin: 0 0px 0 calc(100px + 3px + @celleditor-func-label-margin-left-ie + @x-small-btn-size-ie);
margin: 0 0px 0 calc(100px + 3px + @celleditor-func-label-margin-left + @x-small-btn-size);
height: 100%;
display: flex;
border-left: @celleditor-border-width solid @border-toolbar-ie;
border-left: @celleditor-border-width-ie solid @border-toolbar-ie;
border-left: @celleditor-border-width solid @border-toolbar;
.rtl & {
border-left: none;
border-right: @celleditor-border-width solid @border-toolbar-ie;
border-right: @celleditor-border-width-ie solid @border-toolbar-ie;
border-right: @celleditor-border-width solid @border-toolbar;
margin: 0 120px 0 0px;
margin: 0 calc(100px + 3px + @celleditor-func-label-margin-left-ie + @x-small-btn-size-ie) 0 0px;
margin: 0 calc(100px + 3px + @celleditor-func-label-margin-left + @x-small-btn-size) 0 0px;
}
#ce-cell-content {
height: 100%;
resize: none;
min-height: 19px;
body:not(.theme-white) & {
border: 0 none;
}
border: @celleditor-input-border-ie;
border: @celleditor-input-border;
box-shadow: none;
.padding-x(3px, 19px);
.font-size-medium();
line-height: @celleditor-line-height-ie;
line-height: @celleditor-line-height;
padding-bottom: 0;
&::-webkit-scrollbar-button:single-button{
@ -173,9 +174,8 @@
}
#ce-cell-name, #ce-cell-content {
body:not(.theme-white) & {
border-radius: 0
}
border-radius: @celleditor-input-border-radius-ie;
border-radius: @celleditor-input-border-radius;
}
&+.layout-resizer {
@ -194,6 +194,7 @@
#ce-btn-expand {
width: 16px;
height: @celleditor-height-ie;
height: @celleditor-height;
.border-radius(0);
background: transparent;

4
apps/visioeditor/main/app/controller/Viewport.js
View File

@ -84,6 +84,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;
me.header.btnSearch.hide();
/*var value = Common.localStorage.getBool("ve-settings-quick-print-button", true);
Common.Utils.InternalSettings.set("ve-settings-quick-print-button", value);
@ -337,7 +338,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');

11
apps/visioeditor/main/index.html
View File

@ -121,16 +121,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;*/
@ -369,7 +359,6 @@
<div>
<div class="loading-logo"><img src="../../common/main/resources/img/header/header-logo_s.svg"></div>
<div class="spacer"></div>
<div class="circle"></div>
</div>
<div>
<span class="rect"></span>

12
apps/visioeditor/main/index.html.deploy
View File

@ -97,16 +97,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;
@ -335,7 +325,7 @@
<script src="../../../../../apps/common/main/lib/util/docserviceworker.js?__inline=true"></script>
<div id="loading-mask" class="loadmask">
<div class="brendpanel" style="display: none;">
<div><div class="loading-logo"><img src="../../../apps/common/main/resources/img/header/header-logo_s.svg"></div><div class="spacer"></div><div class="circle"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div></div>
<div><div class="loading-logo"><img src="../../../apps/common/main/resources/img/header/header-logo_s.svg"></div><div class="spacer"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div></div>
</div>
<div class="sktoolbar" style="display: none;">
<section class="box-controls">

1
apps/visioeditor/main/resources/less/app.less
View File

@ -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
// --------------------------------------------------