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

[DE forms] Support dark theme

Browse source
This commit is contained in:
Julia Radzhabova 2021-09-27 18:14:01 +03:00
parent 98c06bbac5
commit 034fa5a25b
6 changed files with 44 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -217,7 +217,7 @@
.brand-logo { .brand-logo {
display: block; display: block;
width: 100px; width: 100px;
height: 24px; height: 20px;
background: data-uri('../../../../common/main/resources/img/header/dark-logo_s.svg') no-repeat; background: data-uri('../../../../common/main/resources/img/header/dark-logo_s.svg') no-repeat;
} }

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

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

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

@ -58,6 +58,8 @@ define([
'embedded' : true 'embedded' : true
}); });
Common.UI.Themes.init(this.api);
$(window).on('resize', this.onDocumentResize.bind(this)); $(window).on('resize', this.onDocumentResize.bind(this));
this.boxSdk = $('#editor_sdk'); this.boxSdk = $('#editor_sdk');

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

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

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

@ -14,6 +14,23 @@
<!-- splash --> <!-- splash -->
<style type="text/css"> <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 { .loadmask {
left: 0; left: 0;
top: 0; top: 0;
@ -22,7 +39,8 @@
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
border: none; border: none;
background-color: #f4f4f4; background-color: #e2e2e2;
background-color: var(--canvas-background, #e2e2e2);
z-index: 1001; z-index: 1001;
} }
@ -31,8 +49,11 @@
position: absolute; position: absolute;
height: 48px; height: 48px;
background-color: #F7F7F7; background-color: #F7F7F7;
-webkit-box-shadow: inset 0 -1px 0 #dbdbdb; background-color: var(--background-toolbar, #F7F7F7);
box-shadow: inset 0 -1px 0 #dbdbdb; -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 { .loadmask > .brendpanel > div {
@ -43,7 +64,7 @@
.loadmask > .brendpanel .loading-logo { .loadmask > .brendpanel .loading-logo {
max-width: 200px; max-width: 200px;
height: 24px; height: 20px;
margin-left: 10px; margin-left: 10px;
text-align: center; text-align: center;
} }
@ -60,8 +81,8 @@
.loadmask > .brendpanel .circle { .loadmask > .brendpanel .circle {
vertical-align: middle; vertical-align: middle;
width: 24px; width: 20px;
height: 24px; height: 20px;
border-radius: 12px; border-radius: 12px;
margin: 4px 10px; margin: 4px 10px;
background: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.2);
@ -77,7 +98,7 @@
.loadmask > .placeholder > .line { .loadmask > .placeholder > .line {
height: 15px; height: 15px;
margin: 30px; margin: 30px;
background: #e2e2e2; background: rgba(0,0,0,.05);
overflow: hidden; overflow: hidden;
position: relative; position: relative;
@ -112,7 +133,6 @@
<!--[if lt IE 9]> <!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.1/html5shiv.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.1/html5shiv.js"></script>
<![endif]--> <![endif]-->
<script src="../../common/main/lib/util/themeinit.js"></script>
</head> </head>
<body class="embed-body"> <body class="embed-body">

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

@ -20,7 +20,8 @@
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
border: none; border: none;
background-color: #f4f4f4; background-color: #e2e2e2;
background-color: var(--canvas-background, #e2e2e2);
z-index: 1001; z-index: 1001;
} }
@ -29,8 +30,11 @@
position: absolute; position: absolute;
height: 48px; height: 48px;
background-color: #F7F7F7; background-color: #F7F7F7;
-webkit-box-shadow: inset 0 -1px 0 #dbdbdb; background-color: var(--background-toolbar, #F7F7F7);
box-shadow: inset 0 -1px 0 #dbdbdb; -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 { .loadmask > .brendpanel > div {
@ -41,7 +45,7 @@
.loadmask > .brendpanel .loading-logo { .loadmask > .brendpanel .loading-logo {
max-width: 200px; max-width: 200px;
height: 24px; height: 20px;
margin-left: 10px; margin-left: 10px;
text-align: center; text-align: center;
} }
@ -58,8 +62,8 @@
.loadmask > .brendpanel .circle { .loadmask > .brendpanel .circle {
vertical-align: middle; vertical-align: middle;
width: 24px; width: 20px;
height: 24px; height: 20px;
border-radius: 12px; border-radius: 12px;
margin: 4px 10px; margin: 4px 10px;
background: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.2);
@ -75,7 +79,7 @@
.loadmask > .placeholder > .line { .loadmask > .placeholder > .line {
height: 15px; height: 15px;
margin: 30px; margin: 30px;
background: #e2e2e2; background: rgba(0,0,0,.05);
overflow: hidden; overflow: hidden;
position: relative; position: relative;