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

[Header] Fix styles for user's initials

Browse source
This commit is contained in:
Julia Radzhabova 2022-02-04 21:14:12 +03:00
parent 86a6b68d61
commit 7259a3f82d
9 changed files with 45 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
apps/common/main/lib/controller/Themes.js
View file

@ -43,6 +43,10 @@ define([
"toolbar-header-spreadsheet",
"toolbar-header-presentation",
"text-toolbar-header-on-background-document",
"text-toolbar-header-on-background-spreadsheet",
"text-toolbar-header-on-background-presentation",
"background-normal",
"background-toolbar",
"background-toolbar-additional",

4
apps/common/main/lib/view/Header.js
View file

@ -110,7 +110,7 @@ define([
'<button type="button" class="btn btn-header slot-btn-user-name hidden">' +
'<div class="color-user-name"></div>' +
'</button>' +
'<div class="btn-current-user btn-header hidden">' +
'<div class="btn-current-user hidden">' +
'<div class="color-user-name"></div>' +
'</div>' +
'</div>' +
@ -138,7 +138,7 @@ define([
'<button type="button" class="btn btn-header slot-btn-user-name hidden">' +
'<div class="color-user-name"></div>' +
'</button>' +
'<div class="btn-current-user btn-header hidden">' +
'<div class="btn-current-user hidden">' +
'<div class="color-user-name"></div>' +
'</div>' +
'</div>' +

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

@ -5,6 +5,10 @@
--toolbar-header-spreadsheet: #40865c;
--toolbar-header-presentation: #aa5252;
--text-toolbar-header-on-background-document: #38567A;
--text-toolbar-header-on-background-spreadsheet: #336B49;
--text-toolbar-header-on-background-presentation: #8D4444;
--background-normal: #fff;
--background-toolbar: #f1f1f1;
--background-toolbar-additional: #f1f1f1;

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

@ -5,6 +5,10 @@
--toolbar-header-spreadsheet: #2a2a2a;
--toolbar-header-presentation: #2a2a2a;
--text-toolbar-header-on-background-document: #2a2a2a;
--text-toolbar-header-on-background-spreadsheet: #2a2a2a;
--text-toolbar-header-on-background-presentation: #2a2a2a;
--background-normal: #333;
--background-toolbar: #404040;
--background-toolbar-additional: #505050;

4
apps/common/main/resources/less/colors-table-ie-fix.less
View file

@ -3,6 +3,10 @@
@toolbar-header-spreadsheet-ie: #40865c;
@toolbar-header-presentation-ie: #aa5252;
@text-toolbar-header-on-background-document-ie: #38567A;
@text-toolbar-header-on-background-spreadsheet-ie: #336B49;
@text-toolbar-header-on-background-presentation-ie: #8D4444;
@background-normal-ie: #fff;
@background-toolbar-ie: #f1f1f1;
@background-toolbar-additional-ie: #f1f1f1;

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

@ -15,6 +15,10 @@
--toolbar-header-spreadsheet: #40865c;
--toolbar-header-presentation: #aa5252;
--text-toolbar-header-on-background-document: #38567A;
--text-toolbar-header-on-background-spreadsheet: #336B49;
--text-toolbar-header-on-background-presentation: #8D4444;
--background-normal: #fff;
--background-toolbar: #f7f7f7;
--background-toolbar-additional: #efefef;

9
apps/common/main/resources/less/header.less
View file

@ -340,7 +340,10 @@
height: 100%;
width: 40px;
padding: 1px 3px;
border: var(--scaled-one-pixel, 1px) solid transparent;
}
.btn-current-user, .btn-header {
&:not(:disabled) .color-user-name {
opacity: @header-component-normal-icon-opacity;
}
@ -352,17 +355,15 @@
&:hover:not(:disabled) .color-user-name {
opacity: @header-component-hover-icon-opacity;
}
}
.btn-current-user, .btn-header {
.color-user-name {
width: 20px;
height: 20px;
border-radius: 20px;
background-color: @icon-toolbar-header-ie;
background-color: @icon-toolbar-header;
color: @header-background-color-ie;
color: @header-background-color;
color: @toolbar-header-text-on-background-document-ie;
color: @toolbar-header-text-on-background-document;
font-size: 10px;
line-height: 20px;
overflow: hidden;

25
apps/common/main/resources/less/toolbar.less
View file

@ -461,6 +461,15 @@
}
// TODO: move to appropriate module
.btn-current-user, .btn-header {
.color-user-name {
background-color: @text-normal-ie;
background-color: @text-normal;
color: @text-inverse-ie;
color: @text-inverse;
}
}
.btn-header, .btn-users, .btn-header-share {
.icon {
&.icon--inverse {
@ -520,16 +529,14 @@
fill: @text-normal-pressed;
}
}
}
}
}
.btn-current-user {
.color-user-name {
background-color: @text-normal-ie;
background-color: @text-normal;
color: @text-inverse-ie;
color: @text-inverse;
.color-user-name {
background-color: @text-normal-pressed-ie;
background-color: @text-normal-pressed;
color: @highlight-button-pressed-ie;
color: @highlight-button-pressed;
}
}
}
}

2
apps/documenteditor/main/resources/less/variables.less
View file

@ -3,6 +3,8 @@
// --------------------------------------------------
@header-background-color-ie: @toolbar-header-document-ie;
@header-background-color: var(--toolbar-header-document);
@toolbar-header-text-on-background-document-ie: @text-toolbar-header-on-background-document-ie;
@toolbar-header-text-on-background-document: var(--text-toolbar-header-on-background-document);
// Active color
// -------------------------