pengjunjie/web-apps
1
0
Fork 1
mirror of https://github.com/ONLYOFFICE/web-apps.git synced 2026-07-24 03:53:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3095 from ONLYOFFICE/feature/title-doc-name

Browse Source 
Feature/title doc name
This commit is contained in:
Julia Radzhabova
2024-07-24 21:24:35 +03:00
committed by GitHub
parent e08d89714a f457649ed0
commit e43089e667
16 changed files with 114 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -83,7 +83,7 @@ define([
//'<label id="rib-doc-name" />' +
'<input id="rib-doc-name" autofill="off" autocomplete="off"/></input>' +
'</section>' +
'<section style="display: inherit;">' +
'<section id="box-right-btn-group" style="display: inherit;">' +
'<div class="hedset">' +
'<div class="btn-slot margin-right-2" id="slot-btn-header-form-submit"></div>' +
'<div class="btn-slot margin-right-2" id="slot-btn-start-fill"></div>' +

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

@ -30,8 +30,8 @@
--highlight-primary-dialog-button-hover: #666d73;
--highlight-accent-button-hover: #375478;
--highlight-accent-button-pressed: #293f59;
--highlight-header-button-hover: fade(#fff, 20%);
--highlight-header-button-pressed: fade(#000, 20%);
--highlight-header-button-hover: fade(#000, 15%);
--highlight-header-button-pressed: fade(#000, 25%);
--highlight-toolbar-tab-underline: #444;
--highlight-text-select: #3494fb;
--highlight-fill-button-hover: #ffe165;

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

@ -31,8 +31,8 @@
--highlight-primary-dialog-button-hover: #a6a6a6;
--highlight-accent-button-hover: #75a2d6;
--highlight-accent-button-pressed: #89afdc;
--highlight-header-button-hover: #424242;
--highlight-header-button-pressed: #828282;
--highlight-header-button-hover: fade(#fff, 20%);
--highlight-header-button-pressed: fade(#fff, 35%);
--highlight-toolbar-tab-underline: #d0d0d0;
--highlight-text-select: #96c8fd;
--highlight-fill-button-hover: #ffe165;

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

@ -31,8 +31,8 @@
--highlight-primary-dialog-button-hover: #fcfcfc;
--highlight-accent-button-hover: #75a2d6;
--highlight-accent-button-pressed: #89afdc;
--highlight-header-button-hover: fade(#fff, 5%);
--highlight-header-button-pressed: fade(#fff, 15%);
--highlight-header-button-hover: fade(#fff, 15%);
--highlight-header-button-pressed: fade(#fff, 25%);
--highlight-toolbar-tab-underline: #ddd;
--highlight-text-select: #96c8fd;
--highlight-fill-button-hover: #ffe165;

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

@ -28,8 +28,8 @@
@highlight-button-pressed-ie: #7d858c;
@highlight-button-pressed-hover-ie: #7d858c;
@highlight-primary-dialog-button-hover-ie: #666d73;
@highlight-header-button-hover-ie: fade(#fff, 20%);
@highlight-header-button-pressed-ie: fade(#000, 20%);
@highlight-header-button-hover-ie: fade(#000, 15%);
@highlight-header-button-pressed-ie: fade(#000, 25%);
@highlight-toolbar-tab-underline-ie: #444;
@highlight-text-select-ie: #3494fb;
@highlight-accent-button-hover-ie: #375478;

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

@ -42,8 +42,8 @@
--highlight-primary-dialog-button-hover: #1c1c1c;
--highlight-accent-button-hover: #375478;
--highlight-accent-button-pressed: #293f59;
--highlight-header-button-hover: fade(#fff, 15%);
--highlight-header-button-pressed: fade(#fff, 25%);
--highlight-header-button-hover: fade(#000, 15%);
--highlight-header-button-pressed: fade(#000, 25%);
--highlight-toolbar-tab-underline: #444;
--highlight-text-select: #3494fb;
--highlight-fill-button-hover: #ffe165;

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

@ -96,7 +96,7 @@
flex-grow: 1;
display: flex;
justify-content: center;
padding: 4px 2px;
padding: 0px 2px;
overflow: hidden;
flex-shrink: 0;
}
@ -111,14 +111,19 @@
color: @text-toolbar-header;
background-color: transparent;
border: 0 none;
padding: 1px 5px;
border-radius: 1px;
padding: 1px 8px;
cursor: default;
line-height: 24px;
&:hover:not(:disabled),&:focus {
box-shadow: 0 0 0 @scaled-one-px-value-ie @highlight-header-button-hover-ie;
box-shadow: 0 0 0 @scaled-one-px-value @highlight-header-button-hover;
border-radius: 1px;
&:hover:not(:disabled):not(:focus){
background-color: @highlight-header-button-hover-ie;
background-color: @highlight-header-button-hover;
cursor: text;
}
&:focus{
background-color: @highlight-header-button-pressed-ie;
background-color: @highlight-header-button-pressed;
cursor: text;
}
.rtl & {
@ -126,6 +131,11 @@
}
}
#box-doc-name, #box-right-btn-group {
padding-bottom: @scaled-one-px-value-ie;
padding-bottom: @scaled-one-px-value;
}
#rib-save-status {
white-space: nowrap;
&.locked {
@ -575,7 +585,7 @@
display: flex;
justify-content: center;
overflow: hidden;
padding: 4px 2px;
padding: 0px 2px;
}
#title-doc-name {
@ -585,15 +595,21 @@
text-align: center;
.font-size-medium();
line-height: 24px;
padding: 1px 5px;
padding: 1px 8px;
background-color: transparent;
border: 0 none;
cursor: default;
.user-select(text);
&:hover:not(:disabled),&:focus{
box-shadow: 0 0 0 @scaled-one-px-value-ie @highlight-header-button-hover-ie;
box-shadow: 0 0 0 @scaled-one-px-value @highlight-header-button-hover;
&:hover:not(:disabled):not(:focus){
background-color: @highlight-header-button-hover-ie;
background-color: @highlight-header-button-hover;
border-radius: 1px;
cursor: text;
}
&:focus{
background-color: @highlight-header-button-pressed-ie;
background-color: @highlight-header-button-pressed;
border-radius: 1px;
cursor: text;
}

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

@ -488,8 +488,8 @@
.tabs, .box-tabs .extra {
background-color: transparent;
box-shadow: inset 0 -1px 0 0 @border-regular-control-ie;
box-shadow: inset 0 -1px 0 0 @border-regular-control;
box-shadow: inset 0 calc(-1 * @scaled-one-px-value-ie) 0 0 @border-regular-control-ie;
box-shadow: inset 0 calc(-1 * @scaled-one-px-value) 0 0 @border-regular-control;
}
.tabs {
@ -679,9 +679,15 @@
#rib-doc-name {
color: @text-normal-ie;
color: @text-normal;
&:hover:not(:disabled),&:focus {
box-shadow: 0 0 0 @scaled-one-px-value-ie @highlight-button-hover-ie;
box-shadow: 0 0 0 @scaled-one-px-value @highlight-button-hover;
&:hover:not(:disabled):not(:focus){
background-color: @highlight-button-hover-ie;
background-color: @highlight-button-hover;
}
&:focus{
color: @text-normal-pressed-ie;
color: @text-normal-pressed;
background-color: @highlight-button-pressed-ie;
background-color: @highlight-button-pressed;
}
}

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

@ -15,7 +15,7 @@
--background-toolbar: #404040;
--border-toolbar: #2a2a2a;
--highlight-button-hover: #555;
--highlight-header-button-hover: rgba(255,255,255,.05);
--highlight-header-button-hover: rgba(255,255,255,.15);
--canvas-background: #555;
/*--canvas-content-background: #fff;*/
--skeleton-canvas-page-border: #555;
@ -34,7 +34,7 @@
--background-toolbar: #f7f7f7;
/*--border-toolbar: #cbcbcb;*/
--highlight-button-hover: #e0e0e0;
--highlight-header-button-hover: rgba(255,255,255,.15);
--highlight-header-button-hover: rgba(0,0,0,.15);
--canvas-background: #eee;
--loadmask-canvas-page-border: #ccc;
}
@ -93,8 +93,8 @@
height: 12px;
border-radius: 3px;
margin: 0 10px;
background: rgba(255,255,255,.2);
background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
background: rgba(0,0,0,.15);
background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
}
.loadmask > .brendpanel .circle {
@ -103,8 +103,8 @@
height: 20px;
border-radius: 20px;
margin: 0 10px;
background: rgba(255,255,255,.2);
background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
background: rgba(0,0,0,.15);
background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
}
.loadmask > .sktoolbar {

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

@ -71,8 +71,8 @@
height: 12px;
border-radius: 3px;
margin: 0 10px;
background: rgba(255,255,255,.2);
background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
background: rgba(0,0,0,.15);
background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
}
.loadmask > .brendpanel .circle {
@ -81,8 +81,8 @@
height: 20px;
border-radius: 20px;
margin: 0 10px;
background: rgba(255,255,255,.2);
background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
background: rgba(0,0,0,.15);
background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
}
.loadmask > .sktoolbar {

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

@ -15,7 +15,7 @@
--background-toolbar: #404040;
--border-toolbar: #2a2a2a;
--highlight-button-hover: #555;
--highlight-header-button-hover: rgba(255,255,255,.05);
--highlight-header-button-hover: rgba(255,255,255,.15);
--canvas-background: #555;
/*--canvas-content-background: #fff;*/
--skeleton-canvas-page-border: #555;
@ -34,7 +34,7 @@
--background-toolbar: #f7f7f7;
/*--border-toolbar: #cbcbcb;*/
--highlight-button-hover: #e0e0e0;
--highlight-header-button-hover: rgba(255,255,255,.15);
--highlight-header-button-hover: rgba(0,0,0,.15);
--canvas-background: #eee;
--loadmask-canvas-page-border: #ccc;
}
@ -88,8 +88,8 @@
height: 12px;
border-radius: 3px;
margin: 0 10px;
background: rgba(255,255,255,.2);
background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
background: rgba(0,0,0,.15);
background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
}
.loadmask > .brendpanel .circle {
@ -98,8 +98,8 @@
height: 20px;
border-radius: 20px;
margin: 0 10px;
background: rgba(255,255,255,.2);
background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
background: rgba(0,0,0,.15);
background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
}
.loadmask > .sktoolbar {

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

@ -66,8 +66,8 @@
height: 12px;
border-radius: 3px;
margin: 0 10px;
background: rgba(255,255,255,.2);
background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
background: rgba(0,0,0,.15);
background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
}
.loadmask > .brendpanel .circle {
@ -76,8 +76,8 @@
height: 20px;
border-radius: 20px;
margin: 0 10px;
background: rgba(255,255,255,.2);
background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
background: rgba(0,0,0,.15);
background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
}
.loadmask > .sktoolbar {

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

@ -14,13 +14,22 @@
--background-toolbar: #404040;
--border-toolbar: #2a2a2a;
--highlight-button-hover: #606060;
--highlight-header-button-hover: rgba(255,255,255,.15);
--canvas-background: #666666;
/*--canvas-content-background: #fff;*/
--canvas-page-border: #555;
}
.theme-classic-light {
--highlight-button-hover: #d8dadc;
}
.theme-light {
--background-toolbar: #f7f7f7;
/*--border-toolbar: #cbcbcb;*/
--highlight-button-hover: #ccc;
--highlight-header-button-hover: rgba(0,0,0,.15);
--canvas-background: #eee;
--canvas-page-border: #ccc;
}
.loadmask {
@ -31,8 +40,8 @@
width: 100%;
overflow: hidden;
border: none;
background: #f0f0f0;
background: var(--canvas-background, #f0f0f0);
background: #e2e2e2;
background: var(--canvas-background, #e2e2e2);
z-index: 1002;
}
@ -72,7 +81,8 @@
height: 12px;
border-radius: 3px;
margin: 0 10px;
background: rgba(255, 255, 255, 0.2);
background: rgba(0,0,0,.15);
background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
}
.loadmask > .brendpanel .circle {
@ -81,12 +91,13 @@
height: 20px;
border-radius: 20px;
margin: 0 10px;
background: rgba(255,255,255,.2);
background: rgba(0,0,0,.15);
background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
}
.loadmask > .sktoolbar {
background: #f7f7f7;
background: var(--background-toolbar, #f7f7f7);
background: #f1f1f1;
background: var(--background-toolbar, #f1f1f1);
border-bottom: 1px solid #cbcbcb;
border-bottom: var(--scaled-one-px-value, 1px) solid var(--border-toolbar, #cbcbcb);
height: 46px;
@ -103,8 +114,8 @@
}
.loadmask > .sktoolbar li {
background: #ccc;
background: var(--highlight-button-hover, #ccc);
background: #d8dadc;
background: var(--highlight-button-hover, #d8dadc);
border-radius: 3px;
width: 20px;
height: 20px;
@ -171,8 +182,8 @@
width: 100%;
background: #fff;
background: var(--canvas-content-background, #fff);
border: 1px solid #ccc;
border: var(--scaled-one-px-value, 1px) solid var(--canvas-page-border, #ccc);
border: 1px solid #bbbec2;
border: var(--scaled-one-px-value, 1px) solid var(--canvas-page-border, #bbbec2);
-webkit-animation: flickerAnimation 2s infinite ease-in-out;
-moz-animation: flickerAnimation 2s infinite ease-in-out;

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

@ -19,8 +19,8 @@
width: 100%;
overflow: hidden;
border: none;
background: #f0f0f0;
background: var(--canvas-background, #f0f0f0);
background: #e2e2e2;
background: var(--canvas-background, #e2e2e2);
z-index: 1002;
}
@ -60,7 +60,8 @@
height: 12px;
border-radius: 3px;
margin: 0 10px;
background: rgba(255, 255, 255, 0.2);
background: rgba(0,0,0,.15);
background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
}
.loadmask > .brendpanel .circle {
@ -69,12 +70,13 @@
height: 20px;
border-radius: 20px;
margin: 0 10px;
background: rgba(255,255,255,.2);
background: rgba(0,0,0,.15);
background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
}
.loadmask > .sktoolbar {
background: #f7f7f7;
background: var(--background-toolbar, #f7f7f7);
background: #f1f1f1;
background: var(--background-toolbar, #f1f1f1);
border-bottom: 1px solid #cbcbcb;
border-bottom: var(--scaled-one-px-value, 1px) solid var(--border-toolbar, #cbcbcb);
height: 46px;
@ -91,8 +93,8 @@
}
.loadmask > .sktoolbar li {
background: #ccc;
background: var(--highlight-button-hover, #ccc);
background: #d8dadc;
background: var(--highlight-button-hover, #d8dadc);
border-radius: 3px;
width: 20px;
height: 20px;
@ -159,8 +161,8 @@
width: 100%;
background: #fff;
background: var(--canvas-content-background, #fff);
border: 1px solid #ccc;
border: var(--scaled-one-px-value, 1px) solid var(--canvas-page-border, #ccc);
border: 1px solid #bbbec2;
border: var(--scaled-one-px-value, 1px) solid var(--skeleton-canvas-page-border, var(--canvas-page-border, #bbbec2));
-webkit-animation: flickerAnimation 2s infinite ease-in-out;
-moz-animation: flickerAnimation 2s infinite ease-in-out;

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

@ -14,6 +14,7 @@
--background-normal: #333;
--border-toolbar: #2a2a2a;
--highlight-button-hover: #606060;
--highlight-header-button-hover: rgba(255,255,255,.15);
--canvas-background: #666666;
/*--canvas-content-background: #fff;*/
--canvas-page-border: #555;
@ -22,11 +23,11 @@
.theme-classic-light {
}
.theme-classic-light {
.theme-light {
--background-toolbar: #f7f7f7;
/*--border-toolbar: #cbcbcb;*/
--highlight-button-hover: #ccc;
--highlight-header-button-hover: rgba(255,255,255,.15);
--highlight-header-button-hover: rgba(0,0,0,.15);
--canvas-background: #eee;
--canvas-page-border: #ccc;
}
@ -80,8 +81,8 @@
height: 12px;
border-radius: 3px;
margin: 0 10px;
background: rgba(255,255,255,.2);
background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
background: rgba(0,0,0,.15);
background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
}
.loadmask > .brendpanel .circle {
@ -90,8 +91,8 @@
height: 20px;
border-radius: 20px;
margin: 0 10px;
background: rgba(255,255,255,.2);
background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
background: rgba(0,0,0,.15);
background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
}
.loadmask > .sktoolbar {

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

@ -59,8 +59,8 @@
height: 12px;
border-radius: 3px;
margin: 0 10px;
background: rgba(255, 255, 255, 0.2);
background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
background: rgba(0,0,0,.15);
background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
}
.loadmask > .brendpanel .circle {
@ -69,8 +69,8 @@
height: 20px;
border-radius: 20px;
margin: 0 10px;
background: rgba(255,255,255,.2);
background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
background: rgba(0,0,0,.15);
background: var(--highlight-header-button-hover, rgba(0,0,0,.15));
}
.loadmask > .sktoolbar {