Merge pull request #1207 from ONLYOFFICE/fix/form-colors
Fix/form colors
This commit is contained in:
commit
3356e7c6ac
|
@ -78,13 +78,11 @@
|
||||||
@import "../../../../common/main/resources/less/calendar.less";
|
@import "../../../../common/main/resources/less/calendar.less";
|
||||||
@import "../../../../common/main/resources/less/spinner.less";
|
@import "../../../../common/main/resources/less/spinner.less";
|
||||||
|
|
||||||
@toolbarBorderColor: #dbdbdb;
|
@toolbarBorderColor: @border-toolbar-ie;
|
||||||
@toolbarBorderShadowColor: #FAFAFA;
|
@toolbarBorderColor: @border-toolbar;
|
||||||
@toolbarTopColor: #F7F7F7;
|
@toolbarTopColor: @background-toolbar-ie;
|
||||||
|
@toolbarTopColor: @background-toolbar;
|
||||||
@toolbarFontSize: 12px;
|
@toolbarFontSize: 12px;
|
||||||
@btnColored: #446995;
|
|
||||||
@btnActiveColored: #293F59;
|
|
||||||
@btnHoverColored: #375478;
|
|
||||||
|
|
||||||
@iconSpriteCommonPath: "../../../../common/forms/resources/img/glyphicons.png";
|
@iconSpriteCommonPath: "../../../../common/forms/resources/img/glyphicons.png";
|
||||||
@icon-socnet-size: 40px;
|
@icon-socnet-size: 40px;
|
||||||
|
@ -144,20 +142,7 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 48px;
|
height: 48px;
|
||||||
|
|
||||||
-webkit-box-shadow: inset 0 -1px 0 @toolbarBorderColor, inset 0 1px 0 @toolbarBorderShadowColor;
|
.box-inner-shadow(0 -1px 0 @toolbarBorderColor);
|
||||||
//-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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.group {
|
.group {
|
||||||
|
@ -211,27 +196,6 @@
|
||||||
text-overflow: ellipsis;
|
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 {
|
.margin-right-small {
|
||||||
|
@ -253,28 +217,34 @@
|
||||||
.brand-logo {
|
.brand-logo {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100px;
|
width: 100px;
|
||||||
height: 24px;
|
height: 20px;
|
||||||
background: data-uri('../../../../common/forms/resources/img/logo.svg') no-repeat;
|
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 {
|
.btn-text-default {
|
||||||
&.colored {
|
&.colored {
|
||||||
padding: 0 16px;
|
padding: 0 16px;
|
||||||
height: 28px;
|
height: 28px;
|
||||||
background-color: @btnColored;
|
background-color: @background-accent-button;
|
||||||
border: 1px solid transparent;
|
border: 1px solid transparent;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
color: #ffffff;
|
color: @text-contrast-background !important;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
|
|
||||||
&:hover:not(.disabled),
|
&:hover:not(.disabled),
|
||||||
.over:not(.disabled) {
|
.over:not(.disabled) {
|
||||||
background-color: @btnHoverColored !important;
|
background-color: @highlight-accent-button-hover !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active:not(.disabled),
|
&:active:not(.disabled),
|
||||||
&.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;
|
background-origin: content-box;
|
||||||
padding: 1px 0 0 1px;
|
padding: 1px 0 0 1px;
|
||||||
|
|
||||||
-webkit-box-shadow: 0 0 0 2px rgba(255,255,255,0.3);
|
.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);
|
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
opacity: .6;
|
opacity: .6;
|
||||||
|
@ -453,21 +421,32 @@
|
||||||
|
|
||||||
@icon-width: 20px;
|
@icon-width: 20px;
|
||||||
@icon-height: 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 {
|
.svg-icon {
|
||||||
background: data-uri('../../../../common/forms/resources/img/icon-menu-sprite.svg') no-repeat;
|
background: data-uri('../../../../common/forms/resources/img/icon-menu-sprite.svg') no-repeat;
|
||||||
background-size: @icon-width*19 @icon-height*2;
|
background-size: @icon-width*19 @icon-height*2;
|
||||||
|
|
||||||
&.download {
|
&.download {
|
||||||
background-position: -@icon-width 0;
|
background-position: -@icon-width 0;
|
||||||
|
background-position: -@icon-width @icon-normal-top;
|
||||||
}
|
}
|
||||||
&.share {
|
&.share {
|
||||||
background-position: -@icon-width*2 0;
|
background-position: -@icon-width*2 0;
|
||||||
|
background-position: -@icon-width*2 @icon-normal-top;
|
||||||
}
|
}
|
||||||
&.embed {
|
&.embed {
|
||||||
background-position: -@icon-width*3 0;
|
background-position: -@icon-width*3 0;
|
||||||
|
background-position: -@icon-width*3 @icon-normal-top;
|
||||||
}
|
}
|
||||||
&.fullscr {
|
&.fullscr {
|
||||||
background-position: -@icon-width*4 0;
|
background-position: -@icon-width*4 0;
|
||||||
|
background-position: -@icon-width*4 @icon-normal-top;
|
||||||
}
|
}
|
||||||
&.zoom-up {
|
&.zoom-up {
|
||||||
background-position: -@icon-width*5 -@icon-height;
|
background-position: -@icon-width*5 -@icon-height;
|
||||||
|
@ -492,22 +471,28 @@
|
||||||
|
|
||||||
&.print {
|
&.print {
|
||||||
background-position: -@icon-width*11 0;
|
background-position: -@icon-width*11 0;
|
||||||
|
background-position: -@icon-width*11 @icon-normal-top;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.arrow-up {
|
&.arrow-up {
|
||||||
background-position: -@icon-width*17 0;
|
background-position: -@icon-width*17 0;
|
||||||
|
background-position: -@icon-width*17 @icon-normal-top;
|
||||||
}
|
}
|
||||||
&.arrow-down {
|
&.arrow-down {
|
||||||
background-position: -@icon-width*16 0;
|
background-position: -@icon-width*16 0;
|
||||||
|
background-position: -@icon-width*16 @icon-normal-top;
|
||||||
}
|
}
|
||||||
&.clear-style {
|
&.clear-style {
|
||||||
background-position: -@icon-width*12 0;
|
background-position: -@icon-width*12 0;
|
||||||
|
background-position: -@icon-width*12 @icon-normal-top;
|
||||||
}
|
}
|
||||||
&.go-to-location {
|
&.go-to-location {
|
||||||
background-position: -@icon-width*15 0;
|
background-position: -@icon-width*15 0;
|
||||||
|
background-position: -@icon-width*15 @icon-normal-top;
|
||||||
}
|
}
|
||||||
&.more-vertical {
|
&.more-vertical {
|
||||||
background-position: -@icon-width*14 0;
|
background-position: -@icon-width*14 0;
|
||||||
|
background-position: -@icon-width*14 @icon-normal-top;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -579,8 +564,7 @@
|
||||||
.masked {
|
.masked {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
border-color: transparent;
|
border-color: transparent;
|
||||||
-webkit-box-shadow: none;
|
.box-shadow(none);
|
||||||
box-shadow: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#pages {
|
#pages {
|
||||||
|
@ -604,9 +588,9 @@
|
||||||
|
|
||||||
padding: 7px 15px;
|
padding: 7px 15px;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
|
background-color: @background-notification-popover-ie;
|
||||||
background-color: @background-notification-popover;
|
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;
|
font-size: 11px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -619,22 +603,23 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.asc-synchronizetip {
|
.asc-synchronizetip {
|
||||||
background-color: @btnColored;
|
background-color: @background-contrast-popover;
|
||||||
color: @text-toolbar-header;
|
color: @text-contrast-background;
|
||||||
.close {
|
.close {
|
||||||
&:before, &:after {
|
&:before, &:after {
|
||||||
background-color: @text-toolbar-header;
|
background-color: @text-contrast-background;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.tip-arrow:after {
|
.tip-arrow:after {
|
||||||
background-color: @btnColored;
|
background-color: @background-contrast-popover;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-div {
|
.btn-div {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
border: 1px solid #fff;
|
border: 1px solid @border-regular-control-ie;
|
||||||
|
border: 1px solid @border-regular-control;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
padding: 3px 12px;
|
padding: 3px 12px;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
|
|
|
@ -14,6 +14,7 @@
|
||||||
--background-notification-badge: #ffd112;
|
--background-notification-badge: #ffd112;
|
||||||
--background-scrim: fade(#000, 20%);
|
--background-scrim: fade(#000, 20%);
|
||||||
--background-loader: fade(#000, 65%);
|
--background-loader: fade(#000, 65%);
|
||||||
|
--background-contrast-popover: #444444;
|
||||||
|
|
||||||
--highlight-button-hover: #d8dadc;
|
--highlight-button-hover: #d8dadc;
|
||||||
--highlight-button-pressed: #7d858c;
|
--highlight-button-pressed: #7d858c;
|
||||||
|
|
|
@ -15,6 +15,7 @@
|
||||||
--background-scrim: fade(black, 60%);
|
--background-scrim: fade(black, 60%);
|
||||||
--background-loader: fade(#181818, 90%);
|
--background-loader: fade(#181818, 90%);
|
||||||
--background-alt-key-hint: #FFD938;
|
--background-alt-key-hint: #FFD938;
|
||||||
|
--background-contrast-popover: #363636;
|
||||||
|
|
||||||
--highlight-button-hover: #555;
|
--highlight-button-hover: #555;
|
||||||
--highlight-button-pressed: #707070;
|
--highlight-button-pressed: #707070;
|
||||||
|
|
|
@ -25,6 +25,8 @@
|
||||||
--background-scrim: fade(#000, 20%);
|
--background-scrim: fade(#000, 20%);
|
||||||
--background-loader: fade(#181818, 90%);
|
--background-loader: fade(#181818, 90%);
|
||||||
--background-alt-key-hint: #FFD938;
|
--background-alt-key-hint: #FFD938;
|
||||||
|
--background-accent-button: #446995;
|
||||||
|
--background-contrast-popover: #444444;
|
||||||
|
|
||||||
--highlight-button-hover: #e0e0e0;
|
--highlight-button-hover: #e0e0e0;
|
||||||
--highlight-button-pressed: #cbcbcb;
|
--highlight-button-pressed: #cbcbcb;
|
||||||
|
@ -34,6 +36,8 @@
|
||||||
--highlight-header-button-pressed: fade(#fff, 25%);
|
--highlight-header-button-pressed: fade(#fff, 25%);
|
||||||
--highlight-toolbar-tab-underline: #444;
|
--highlight-toolbar-tab-underline: #444;
|
||||||
--highlight-text-select: #3494fb;
|
--highlight-text-select: #3494fb;
|
||||||
|
--highlight-accent-button-hover: #375478;
|
||||||
|
--highlight-accent-button-pressed: #293F59;
|
||||||
|
|
||||||
--border-toolbar: #cbcbcb;
|
--border-toolbar: #cbcbcb;
|
||||||
--border-divider: #dfdfdf;
|
--border-divider: #dfdfdf;
|
||||||
|
@ -154,6 +158,8 @@
|
||||||
@background-scrim: var(--background-scrim);
|
@background-scrim: var(--background-scrim);
|
||||||
@background-loader: var(--background-loader);
|
@background-loader: var(--background-loader);
|
||||||
@background-alt-key-hint: var(--background-alt-key-hint);
|
@background-alt-key-hint: var(--background-alt-key-hint);
|
||||||
|
@background-accent-button: var(--background-accent-button);
|
||||||
|
@background-contrast-popover: var(--background-contrast-popover);
|
||||||
|
|
||||||
// Highlight
|
// Highlight
|
||||||
// -------------------------
|
// -------------------------
|
||||||
|
@ -165,6 +171,8 @@
|
||||||
@highlight-header-button-pressed: var(--highlight-header-button-pressed);
|
@highlight-header-button-pressed: var(--highlight-header-button-pressed);
|
||||||
@highlight-toolbar-tab-underline: var(--highlight-toolbar-tab-underline);
|
@highlight-toolbar-tab-underline: var(--highlight-toolbar-tab-underline);
|
||||||
@highlight-text-select: var(--highlight-text-select);
|
@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
|
// Border
|
||||||
// -------------------------
|
// -------------------------
|
||||||
|
|
|
@ -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();
|
||||||
|
|
|
@ -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');
|
||||||
|
@ -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() {
|
createDelayedElements: function() {
|
||||||
var me = this,
|
var me = this,
|
||||||
menuItems = this.view.btnOptions.menu.items,
|
menuItems = this.view.btnOptions.menu.items,
|
||||||
itemsCount = menuItems.length-3;
|
itemsCount = menuItems.length-4;
|
||||||
var initMenu = function(menu) {
|
var initMenu = function(menu) {
|
||||||
var last;
|
var last;
|
||||||
|
// print
|
||||||
if (!menuItems[0].isVisible())
|
if (!menuItems[0].isVisible())
|
||||||
menuItems[1].setVisible(false);
|
menuItems[1].setVisible(false);
|
||||||
else
|
else
|
||||||
last = menuItems[1];
|
last = menuItems[1];
|
||||||
|
|
||||||
|
// download
|
||||||
if (!menuItems[2].isVisible() && !menuItems[3].isVisible() && !menuItems[4].isVisible())
|
if (!menuItems[2].isVisible() && !menuItems[3].isVisible() && !menuItems[4].isVisible())
|
||||||
menuItems[5].setVisible(false);
|
menuItems[5].setVisible(false);
|
||||||
else
|
else
|
||||||
last = menuItems[5];
|
last = menuItems[5];
|
||||||
|
|
||||||
if (!menuItems[6].isVisible() && !menuItems[7].isVisible())
|
// theme
|
||||||
menuItems[8].setVisible(false);
|
if (!menuItems[6].isVisible())
|
||||||
|
menuItems[7].setVisible(false);
|
||||||
else
|
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);
|
last && last.setVisible(false);
|
||||||
|
|
||||||
menu.off('show:after', initMenu);
|
menu.off('show:after', initMenu);
|
||||||
|
@ -1104,23 +1127,43 @@ define([
|
||||||
itemsCount -= 2;
|
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);
|
menuItems[6].setVisible(false);
|
||||||
itemsCount--;
|
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) {
|
if (!this.appOptions.canBackToFolder) {
|
||||||
menuItems[7].setVisible(false);
|
|
||||||
itemsCount--;
|
|
||||||
}
|
|
||||||
|
|
||||||
if ( !this.embedConfig.embedUrl || this.appOptions.canFillForms) {
|
|
||||||
menuItems[9].setVisible(false);
|
menuItems[9].setVisible(false);
|
||||||
itemsCount--;
|
itemsCount--;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if ( !this.embedConfig.embedUrl || this.appOptions.canFillForms) {
|
||||||
|
menuItems[11].setVisible(false);
|
||||||
|
itemsCount--;
|
||||||
|
}
|
||||||
|
|
||||||
if ( !this.embedConfig.fullscreenUrl ) {
|
if ( !this.embedConfig.fullscreenUrl ) {
|
||||||
menuItems[10].setVisible(false);
|
menuItems[12].setVisible(false);
|
||||||
itemsCount--;
|
itemsCount--;
|
||||||
}
|
}
|
||||||
if (itemsCount<1)
|
if (itemsCount<1)
|
||||||
|
|
|
@ -23,6 +23,15 @@ define([
|
||||||
{caption: this.txtDownloadDocx, value: 'download-docx', iconCls: 'mi-icon svg-icon download'},
|
{caption: this.txtDownloadDocx, value: 'download-docx', iconCls: 'mi-icon svg-icon download'},
|
||||||
{caption: this.txtDownloadPdf, value: 'download-pdf', iconCls: 'mi-icon'},
|
{caption: this.txtDownloadPdf, value: 'download-pdf', iconCls: 'mi-icon'},
|
||||||
{caption: '--'},
|
{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.txtShare, value: 'share', iconCls: 'mi-icon svg-icon share'},
|
||||||
{caption: this.txtFileLocation, value: 'close', iconCls: 'mi-icon svg-icon go-to-location'},
|
{caption: this.txtFileLocation, value: 'close', iconCls: 'mi-icon svg-icon go-to-location'},
|
||||||
{caption: '--'},
|
{caption: '--'},
|
||||||
|
@ -81,6 +90,7 @@ define([
|
||||||
txtDownloadPdf: 'Download as pdf',
|
txtDownloadPdf: 'Download as pdf',
|
||||||
textNext: 'Next Field',
|
textNext: 'Next Field',
|
||||||
textClear: 'Clear All Fields',
|
textClear: 'Clear All Fields',
|
||||||
textSubmit: 'Submit'
|
textSubmit: 'Submit',
|
||||||
|
txtTheme: 'Interface theme'
|
||||||
});
|
});
|
||||||
});
|
});
|
|
@ -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;
|
||||||
|
|
|
@ -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, inset 0 1px 0 #FAFAFA;
|
background-color: var(--background-toolbar, #F7F7F7);
|
||||||
box-shadow: inset 0 -1px 0 #dbdbdb, inset 0 1px 0 #FAFAFA;
|
-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,18 +133,12 @@
|
||||||
<!--[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 theme-classic-light theme-type-light">
|
<body class="embed-body">
|
||||||
<script src="../../common/main/lib/util/htmlutils.js"></script>
|
<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>
|
<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>
|
<script>
|
||||||
var userAgent = navigator.userAgent.toLowerCase(),
|
var userAgent = navigator.userAgent.toLowerCase(),
|
||||||
check = function(regex){ return regex.test(userAgent); },
|
check = function(regex){ return regex.test(userAgent); },
|
||||||
|
@ -225,6 +240,11 @@
|
||||||
</div>
|
</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 -->
|
||||||
|
|
||||||
<!--vendor-->
|
<!--vendor-->
|
||||||
<script type="text/javascript" src="../../../vendor/jquery/jquery.min.js"></script>
|
<script type="text/javascript" src="../../../vendor/jquery/jquery.min.js"></script>
|
||||||
<script type="text/javascript" src="../../../vendor/xregexp/xregexp-all-min.js"></script>
|
<script type="text/javascript" src="../../../vendor/xregexp/xregexp-all-min.js"></script>
|
||||||
|
|
|
@ -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, inset 0 1px 0 #FAFAFA;
|
background-color: var(--background-toolbar, #F7F7F7);
|
||||||
box-shadow: inset 0 -1px 0 #dbdbdb, inset 0 1px 0 #FAFAFA;
|
-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;
|
||||||
|
|
||||||
|
@ -112,7 +116,7 @@
|
||||||
<![endif]-->
|
<![endif]-->
|
||||||
</head>
|
</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>
|
<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>
|
<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>
|
||||||
|
|
||||||
|
|
|
@ -57,5 +57,6 @@
|
||||||
"DE.ApplicationView.txtShare": "Share",
|
"DE.ApplicationView.txtShare": "Share",
|
||||||
"DE.ApplicationView.textSubmit": "Submit",
|
"DE.ApplicationView.textSubmit": "Submit",
|
||||||
"DE.ApplicationView.textClear": "Clear All Fields",
|
"DE.ApplicationView.textClear": "Clear All Fields",
|
||||||
"DE.ApplicationView.textNext": "Next Field"
|
"DE.ApplicationView.textNext": "Next Field",
|
||||||
|
"DE.ApplicationView.txtTheme": "Interface theme"
|
||||||
}
|
}
|
Loading…
Reference in a new issue