Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Merge pull request #1207 from ONLYOFFICE/fix/form-colors

Browse source 
Fix/form colors
This commit is contained in:
Julia Radzhabova 2021-09-27 21:35:22 +03:00 committed by GitHub
parent 873ac90013 ebdde9cd72
commit 3356e7c6ac
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 170 additions and 95 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

103
apps/common/forms/resources/less/common.less
View file

@ -78,13 +78,11 @@
@import "../../../../common/main/resources/less/calendar.less";
@import "../../../../common/main/resources/less/spinner.less";
@toolbarBorderColor: #dbdbdb;
@toolbarBorderShadowColor: #FAFAFA;
@toolbarTopColor: #F7F7F7;
@toolbarBorderColor: @border-toolbar-ie;
@toolbarBorderColor: @border-toolbar;
@toolbarTopColor: @background-toolbar-ie;
@toolbarTopColor: @background-toolbar;
@toolbarFontSize: 12px;
@btnColored: #446995;
@btnActiveColored: #293F59;
@btnHoverColored: #375478;
@iconSpriteCommonPath: "../../../../common/forms/resources/img/glyphicons.png";
@icon-socnet-size: 40px;
@ -144,20 +142,7 @@
width: 100%;
height: 48px;
-webkit-box-shadow: inset 0 -1px 0 @toolbarBorderColor, inset 0 1px 0 @toolbarBorderShadowColor;
//-moz-box-shadow: inset 0 -1px 0 @toolbarBorderColor, inset 0 1px 0 @toolbarBorderShadowColor;
box-shadow: inset 0 -1px 0 @toolbarBorderColor, inset 0 1px 0 @toolbarBorderShadowColor;
}
&.bottom {
bottom: 0;
left: 0;
width: 100%;
height: 46px;
-webkit-box-shadow: inset 0 1px 0 @toolbarBorderColor, inset 0 2px 0 @toolbarBorderShadowColor;
//-moz-box-shadow: inset 0 1px 0 @toolbarBorderColor, inset 0 2px 0 @toolbarBorderShadowColor;
box-shadow: inset 0 1px 0 @toolbarBorderColor, inset 0 2px 0 @toolbarBorderShadowColor;
.box-inner-shadow(0 -1px 0 @toolbarBorderColor);
}
.group {
@ -211,27 +196,6 @@
text-overflow: ellipsis;
}
}
.separator {
height: 22px;
margin: 0 9px;
border-right: 1px solid @toolbarBorderShadowColor;
border-left: 1px solid @toolbarBorderColor;
}
}
.close {
font-size: 28px;
font-family: Arial, sans-serif;
color: #666666;
opacity: 0.8;
display: block;
line-height: 22px;
&:hover {
opacity: 1;
color: #666666;
}
}
.margin-right-small {
@ -253,28 +217,34 @@
.brand-logo {
display: block;
width: 100px;
height: 24px;
background: data-uri('../../../../common/forms/resources/img/logo.svg') no-repeat;
height: 20px;
background: data-uri('../../../../common/main/resources/img/header/dark-logo_s.svg') no-repeat;
}
.theme-dark {
.brand-logo {
background: data-uri('../../../../common/main/resources/img/header/header-logo_s.svg') no-repeat;
}
}
.btn-text-default {
&.colored {
padding: 0 16px;
height: 28px;
background-color: @btnColored;
background-color: @background-accent-button;
border: 1px solid transparent;
border-radius: 3px;
color: #ffffff;
color: @text-contrast-background !important;
font-weight: 700;
&:hover:not(.disabled),
.over:not(.disabled) {
background-color: @btnHoverColored !important;
background-color: @highlight-accent-button-hover !important;
}
&:active:not(.disabled),
&.active:not(.disabled) {
background-color: @btnActiveColored !important;;
background-color: @highlight-accent-button-pressed !important;
}
}
}
@ -320,9 +290,7 @@
background-origin: content-box;
padding: 1px 0 0 1px;
-webkit-box-shadow: 0 0 0 2px rgba(255,255,255,0.3);
-moz-box-shadow: 0 0 0 2px rgba(255,255,255,0.3);
box-shadow: 0 0 0 2px rgba(255,255,255,0.3);
.box-shadow(0 0 0 2px rgba(255,255,255,0.3));
&:hover {
opacity: .6;
@ -453,21 +421,32 @@
@icon-width: 20px;
@icon-height: 20px;
.theme-dark {
@neg-value: -@icon-height;
--icon-normal-top: @neg-value;
}
@icon-normal-top: var(--icon-normal-top, 0);
.svg-icon {
background: data-uri('../../../../common/forms/resources/img/icon-menu-sprite.svg') no-repeat;
background-size: @icon-width*19 @icon-height*2;
&.download {
background-position: -@icon-width 0;
background-position: -@icon-width @icon-normal-top;
}
&.share {
background-position: -@icon-width*2 0;
background-position: -@icon-width*2 @icon-normal-top;
}
&.embed {
background-position: -@icon-width*3 0;
background-position: -@icon-width*3 @icon-normal-top;
}
&.fullscr {
background-position: -@icon-width*4 0;
background-position: -@icon-width*4 @icon-normal-top;
}
&.zoom-up {
background-position: -@icon-width*5 -@icon-height;
@ -492,22 +471,28 @@
&.print {
background-position: -@icon-width*11 0;
background-position: -@icon-width*11 @icon-normal-top;
}
&.arrow-up {
background-position: -@icon-width*17 0;
background-position: -@icon-width*17 @icon-normal-top;
}
&.arrow-down {
background-position: -@icon-width*16 0;
background-position: -@icon-width*16 @icon-normal-top;
}
&.clear-style {
background-position: -@icon-width*12 0;
background-position: -@icon-width*12 @icon-normal-top;
}
&.go-to-location {
background-position: -@icon-width*15 0;
background-position: -@icon-width*15 @icon-normal-top;
}
&.more-vertical {
background-position: -@icon-width*14 0;
background-position: -@icon-width*14 @icon-normal-top;
}
}
@ -579,8 +564,7 @@
.masked {
background-color: transparent;
border-color: transparent;
-webkit-box-shadow: none;
box-shadow: none;
.box-shadow(none);
}
#pages {
@ -604,9 +588,9 @@
padding: 7px 15px;
border-radius: 5px;
background-color: @background-notification-popover-ie;
background-color: @background-notification-popover;
-webkit-box-shadow: 0 4px 15px -2px rgba(0, 0, 0, 0.5);
box-shadow: 0 4px 15px -2px rgba(0, 0, 0, 0.5);
.box-shadow(0 4px 15px -2px rgba(0, 0, 0, 0.5));
font-size: 11px;
}
@ -619,22 +603,23 @@
}
.asc-synchronizetip {
background-color: @btnColored;
color: @text-toolbar-header;
background-color: @background-contrast-popover;
color: @text-contrast-background;
.close {
&:before, &:after {
background-color: @text-toolbar-header;
background-color: @text-contrast-background;
}
}
}
.tip-arrow:after {
background-color: @btnColored;
background-color: @background-contrast-popover;
}
.btn-div {
display: inline-block;
border: 1px solid #fff;
border: 1px solid @border-regular-control-ie;
border: 1px solid @border-regular-control;
border-radius: 2px;
padding: 3px 12px;
margin-top: 10px;

1
apps/common/main/resources/less/colors-table-classic.less
View file

@ -14,6 +14,7 @@
--background-notification-badge: #ffd112;
--background-scrim: fade(#000, 20%);
--background-loader: fade(#000, 65%);
--background-contrast-popover: #444444;
--highlight-button-hover: #d8dadc;
--highlight-button-pressed: #7d858c;

1
apps/common/main/resources/less/colors-table-dark.less
View file

@ -15,6 +15,7 @@
--background-scrim: fade(black, 60%);
--background-loader: fade(#181818, 90%);
--background-alt-key-hint: #FFD938;
--background-contrast-popover: #363636;
--highlight-button-hover: #555;
--highlight-button-pressed: #707070;

8
apps/common/main/resources/less/colors-table.less
View file

@ -25,6 +25,8 @@
--background-scrim: fade(#000, 20%);
--background-loader: fade(#181818, 90%);
--background-alt-key-hint: #FFD938;
--background-accent-button: #446995;
--background-contrast-popover: #444444;
--highlight-button-hover: #e0e0e0;
--highlight-button-pressed: #cbcbcb;
@ -34,6 +36,8 @@
--highlight-header-button-pressed: fade(#fff, 25%);
--highlight-toolbar-tab-underline: #444;
--highlight-text-select: #3494fb;
--highlight-accent-button-hover: #375478;
--highlight-accent-button-pressed: #293F59;
--border-toolbar: #cbcbcb;
--border-divider: #dfdfdf;
@ -154,6 +158,8 @@
@background-scrim: var(--background-scrim);
@background-loader: var(--background-loader);
@background-alt-key-hint: var(--background-alt-key-hint);
@background-accent-button: var(--background-accent-button);
@background-contrast-popover: var(--background-contrast-popover);
// Highlight
// -------------------------
@ -165,6 +171,8 @@
@highlight-header-button-pressed: var(--highlight-header-button-pressed);
@highlight-toolbar-tab-underline: var(--highlight-toolbar-tab-underline);
@highlight-text-select: var(--highlight-text-select);
@highlight-accent-button-hover: var(--highlight-accent-button-hover);
@highlight-accent-button-pressed: var(--highlight-accent-button-pressed);
// Border
// -------------------------

1
apps/documenteditor/forms/app.js
View file

@ -150,6 +150,7 @@ require([
'documenteditor/forms/app/view/ApplicationView',
'common/main/lib/util/utils',
'common/main/lib/util/LocalStorage',
'common/main/lib/controller/Themes',
'common/forms/lib/view/modals'
], function() {
app.start();

67
apps/documenteditor/forms/app/controller/ApplicationController.js
View file

@ -58,6 +58,8 @@ define([
'embedded' : true
});
Common.UI.Themes.init(this.api);
$(window).on('resize', this.onDocumentResize.bind(this));
this.boxSdk = $('#editor_sdk');
@ -1061,28 +1063,49 @@ define([
}
},
onThemeClick: function(menu, item) {
Common.UI.Themes.setTheme(item.value);
},
onThemeChange: function() {
var current = Common.UI.Themes.currentThemeId();
_.each(this.view.mnuThemes.items, function(item){
item.setChecked(current===item.value, true);
});
},
createDelayedElements: function() {
var me = this,
menuItems = this.view.btnOptions.menu.items,
itemsCount = menuItems.length-3;
itemsCount = menuItems.length-4;
var initMenu = function(menu) {
var last;
// print
if (!menuItems[0].isVisible())
menuItems[1].setVisible(false);
else
last = menuItems[1];
// download
if (!menuItems[2].isVisible() && !menuItems[3].isVisible() && !menuItems[4].isVisible())
menuItems[5].setVisible(false);
else
last = menuItems[5];
if (!menuItems[6].isVisible() && !menuItems[7].isVisible())
menuItems[8].setVisible(false);
// theme
if (!menuItems[6].isVisible())
menuItems[7].setVisible(false);
else
last = menuItems[8];
last = menuItems[7];
if (!menuItems[9].isVisible() && !menuItems[10].isVisible())
// share, location
if (!menuItems[8].isVisible() && !menuItems[9].isVisible())
menuItems[10].setVisible(false);
else
last = menuItems[10];
// embed, fullscreen
if (!menuItems[11].isVisible() && !menuItems[12].isVisible())
last && last.setVisible(false);
menu.off('show:after', initMenu);
@ -1104,23 +1127,43 @@ define([
itemsCount -= 2;
}
if ( !this.embedConfig.shareUrl || this.appOptions.canFillForms) {
if (Common.UI.Themes.available()) {
var current = Common.UI.Themes.currentThemeId();
for (var t in Common.UI.Themes.map()) {
this.view.mnuThemes.addItem(new Common.UI.MenuItem({
caption : Common.UI.Themes.get(t).text,
value : t,
toggleGroup : 'themes',
checkable : true,
checked : t===current
}));
}
}
if (this.view.mnuThemes.items.length<1) {
menuItems[6].setVisible(false);
itemsCount--;
} else {
this.view.mnuThemes.on('item:click', _.bind(this.onThemeClick, this));
Common.NotificationCenter.on('uitheme:changed', this.onThemeChange.bind(this));
}
if ( !this.embedConfig.shareUrl || this.appOptions.canFillForms) {
menuItems[8].setVisible(false);
itemsCount--;
}
if (!this.appOptions.canBackToFolder) {
menuItems[7].setVisible(false);
itemsCount--;
}
if ( !this.embedConfig.embedUrl || this.appOptions.canFillForms) {
menuItems[9].setVisible(false);
itemsCount--;
}
if ( !this.embedConfig.embedUrl || this.appOptions.canFillForms) {
menuItems[11].setVisible(false);
itemsCount--;
}
if ( !this.embedConfig.fullscreenUrl ) {
menuItems[10].setVisible(false);
menuItems[12].setVisible(false);
itemsCount--;
}
if (itemsCount<1)

12
apps/documenteditor/forms/app/view/ApplicationView.js
View file

@ -23,6 +23,15 @@ define([
{caption: this.txtDownloadDocx, value: 'download-docx', iconCls: 'mi-icon svg-icon download'},
{caption: this.txtDownloadPdf, value: 'download-pdf', iconCls: 'mi-icon'},
{caption: '--'},
{caption: this.txtTheme, value: 'theme', iconCls: 'mi-icon',
menu : this.mnuThemes = new Common.UI.Menu({
cls: 'shifted-right',
menuAlign: 'tl-tr',
restoreHeight: true,
items: []
})
},
{caption: '--'},
{caption: this.txtShare, value: 'share', iconCls: 'mi-icon svg-icon share'},
{caption: this.txtFileLocation, value: 'close', iconCls: 'mi-icon svg-icon go-to-location'},
{caption: '--'},
@ -81,6 +90,7 @@ define([
txtDownloadPdf: 'Download as pdf',
textNext: 'Next Field',
textClear: 'Clear All Fields',
textSubmit: 'Submit'
textSubmit: 'Submit',
txtTheme: 'Interface theme'
});
});

1
apps/documenteditor/forms/app_dev.js
View file

@ -140,6 +140,7 @@ require([
'documenteditor/forms/app/view/ApplicationView',
'common/main/lib/util/utils',
'common/main/lib/util/LocalStorage',
'common/main/lib/controller/Themes',
'common/forms/lib/view/modals'
], function() {
window.compareVersions = true;

48
apps/documenteditor/forms/index.html
View file

@ -14,6 +14,23 @@
<!-- splash -->
<style type="text/css">
.theme-dark {
--background-toolbar: #404040;
--border-toolbar: #2a2a2a;
--highlight-button-hover: #555;
--canvas-background: #555;
}
.theme-classic-light {
}
.theme-light {
--background-toolbar: #f7f7f7;
--border-toolbar: #cbcbcb;
--highlight-button-hover: #e0e0e0;
--canvas-background: #eee;
}
.loadmask {
left: 0;
top: 0;
@ -22,7 +39,8 @@
width: 100%;
overflow: hidden;
border: none;
background-color: #f4f4f4;
background-color: #e2e2e2;
background-color: var(--canvas-background, #e2e2e2);
z-index: 1001;
}
@ -31,8 +49,11 @@
position: absolute;
height: 48px;
background-color: #F7F7F7;
-webkit-box-shadow: inset 0 -1px 0 #dbdbdb, inset 0 1px 0 #FAFAFA;
box-shadow: inset 0 -1px 0 #dbdbdb, inset 0 1px 0 #FAFAFA;
background-color: var(--background-toolbar, #F7F7F7);
-webkit-box-shadow: inset 0 -1px 0 #cbcbcb;
box-shadow: inset 0 -1px 0 #cbcbcb;
-webkit-box-shadow: inset 0 -1px 0 var(--border-toolbar, #cbcbcb);
box-shadow: inset 0 -1px 0 var(--border-toolbar, #cbcbcb);
}
.loadmask > .brendpanel > div {
@ -43,7 +64,7 @@
.loadmask > .brendpanel .loading-logo {
max-width: 200px;
height: 24px;
height: 20px;
margin-left: 10px;
text-align: center;
}
@ -60,8 +81,8 @@
.loadmask > .brendpanel .circle {
vertical-align: middle;
width: 24px;
height: 24px;
width: 20px;
height: 20px;
border-radius: 12px;
margin: 4px 10px;
background: rgba(255, 255, 255, 0.2);
@ -77,7 +98,7 @@
.loadmask > .placeholder > .line {
height: 15px;
margin: 30px;
background: #e2e2e2;
background: rgba(0,0,0,.05);
overflow: hidden;
position: relative;
@ -112,18 +133,12 @@
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.1/html5shiv.js"></script>
<![endif]-->
<script src="../../common/main/lib/util/themeinit.js"></script>
</head>
<body class="embed-body theme-classic-light theme-type-light">
<body class="embed-body">
<script src="../../common/main/lib/util/htmlutils.js"></script>
<div id="loading-mask" class="loadmask"><div class="brendpanel"><div><div class="brand-logo loading-logo"><img src=""></div><div class="doc-title"></div><div class="circle"></div></div></div><div class="placeholder"><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>
<!-- debug begin -->
<script type="text/javascript">var less=less||{};less.env='development';</script>
<script src="../../../vendor/less/dist/less.js" type="text/javascript"></script>
<!-- debug end -->
<script>
var userAgent = navigator.userAgent.toLowerCase(),
check = function(regex){ return regex.test(userAgent); },
@ -225,6 +240,11 @@
</div>
</div>
<!-- debug begin -->
<script type="text/javascript">var less=less||{};less.env='development';</script>
<script src="../../../vendor/less/dist/less.js" type="text/javascript"></script>
<!-- debug end -->
<!--vendor-->
<script type="text/javascript" src="../../../vendor/jquery/jquery.min.js"></script>
<script type="text/javascript" src="../../../vendor/xregexp/xregexp-all-min.js"></script>

20
apps/documenteditor/forms/index.html.deploy
View file

@ -20,7 +20,8 @@
width: 100%;
overflow: hidden;
border: none;
background-color: #f4f4f4;
background-color: #e2e2e2;
background-color: var(--canvas-background, #e2e2e2);
z-index: 1001;
}
@ -29,8 +30,11 @@
position: absolute;
height: 48px;
background-color: #F7F7F7;
-webkit-box-shadow: inset 0 -1px 0 #dbdbdb, inset 0 1px 0 #FAFAFA;
box-shadow: inset 0 -1px 0 #dbdbdb, inset 0 1px 0 #FAFAFA;
background-color: var(--background-toolbar, #F7F7F7);
-webkit-box-shadow: inset 0 -1px 0 #cbcbcb;
box-shadow: inset 0 -1px 0 #cbcbcb;
-webkit-box-shadow: inset 0 -1px 0 var(--border-toolbar, #cbcbcb);
box-shadow: inset 0 -1px 0 var(--border-toolbar, #cbcbcb);
}
.loadmask > .brendpanel > div {
@ -41,7 +45,7 @@
.loadmask > .brendpanel .loading-logo {
max-width: 200px;
height: 24px;
height: 20px;
margin-left: 10px;
text-align: center;
}
@ -58,8 +62,8 @@
.loadmask > .brendpanel .circle {
vertical-align: middle;
width: 24px;
height: 24px;
width: 20px;
height: 20px;
border-radius: 12px;
margin: 4px 10px;
background: rgba(255, 255, 255, 0.2);
@ -75,7 +79,7 @@
.loadmask > .placeholder > .line {
height: 15px;
margin: 30px;
background: #e2e2e2;
background: rgba(0,0,0,.05);
overflow: hidden;
position: relative;
@ -112,7 +116,7 @@
<![endif]-->
</head>
<body class="embed-body theme-classic-light theme-type-light">
<body class="embed-body">
<script src="../../../../../apps/common/main/lib/util/htmlutils.js?__inline=true"></script>
<div id="loading-mask" class="loadmask"><div class="brendpanel"><div><div class="brand-logo loading-logo"><img src=""></div><div class="doc-title"></div><div class="circle"></div></div></div><div class="placeholder"><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>

3
apps/documenteditor/forms/locale/en.json
View file

@ -57,5 +57,6 @@
"DE.ApplicationView.txtShare": "Share",
"DE.ApplicationView.textSubmit": "Submit",
"DE.ApplicationView.textClear": "Clear All Fields",
"DE.ApplicationView.textNext": "Next Field"
"DE.ApplicationView.textNext": "Next Field",
"DE.ApplicationView.txtTheme": "Interface theme"
}