github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-07 20:31:06 -05:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #12363 from overleaf/td-history-main-area-shell

Browse source 
Add CSS for main history view shell

GitOrigin-RevId: 9c455007bf8b177d59ea97cd73b608d48aba3907
This commit is contained in:
Tim Down 2023-03-23 14:54:00 +00:00 committed by Copybot
parent 24d2cf426f
commit 397fbd47c2
8 changed files with 77 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
services/web/frontend/js/features/history/components/change-list/change-list.tsx
View file

@ -4,8 +4,12 @@ import Main from './main'
function ChangeList() {
return (
<aside className="change-list">
<ToggleSwitch />
<Main />
<div className="history-header toggle-switch-container">
<ToggleSwitch />
</div>
<div className="version-list-container">
<Main />
</div>
</aside>
)
}

10
services/web/frontend/js/features/history/components/editor/editor.tsx
View file

@ -3,9 +3,13 @@ import Main from './main'
function Editor() {
return (
<div className="point-in-time-panel">
<Toolbar />
<Main />
<div className="doc-panel">
<div className="history-header toolbar-container">
<Toolbar />
</div>
<div className="doc-container">
<Main />
</div>
</div>
)
}

2
services/web/frontend/js/features/history/components/history-root.tsx
View file

@ -12,8 +12,8 @@ export default function HistoryRoot() {
? createPortal(<HistoryFileTree />, fileTreeContainer)
: null}
<div className="history-react">
<ChangeList />
<Editor />
<ChangeList />
</div>
</>
)

53
services/web/frontend/stylesheets/app/editor/history-react.less
View file

@ -1,22 +1,49 @@
@changesListWidth: 320px;
@versions-list-width: 320px;
@history-toolbar-height: 40px;
history-root {
height: 100%;
display: block;
}
.history-react {
.point-in-time-panel {
.full-size;
margin-right: @changesListWidth;
display: flex;
height: 100%;
background-color: @history-main-bg;
.history-header {
height: @history-toolbar-height;
background-color: @history-react-header-bg;
color: @history-react-header-color;
font-size: 14px;
display: flex;
flex-direction: column;
justify-content: center;
box-sizing: border-box;
}
.doc-panel {
flex: 1;
display: flex;
flex-direction: column;
.toolbar-container {
border-bottom: 1px solid @history-react-separator-color;
padding: 0 8px;
}
.doc-container {
flex: 1;
}
}
.change-list {
border-left: 1px solid @editor-border-color;
height: 100%;
width: @changesListWidth;
position: absolute;
right: 0;
}
width: @versions-list-width;
border-left: 1px solid @history-react-separator-color;
box-sizing: content-box;
.editor-dark {
.change-list {
border-color: @editor-dark-toolbar-border-color;
.toggle-switch-container {
padding: 0 16px;
}
}
}

5
services/web/frontend/stylesheets/core/ol-light-variables.less
View file

@ -140,3 +140,8 @@
@galileo-color: @ol-blue-gray-3;
@galileo-header-background: @ol-blue-gray-1;
@galileo-suggestion-background: @ol-blue-gray-1;
// React History
@history-react-header-bg: #fff;
@history-react-header-color: @ol-blue-gray-3;
@history-react-separator-color: @neutral-20;

7
services/web/frontend/stylesheets/core/variables.less
View file

@ -13,6 +13,7 @@
@neutral-90: #1b222c;
@neutral-40: #afb5c0;
@neutral-10: #f4f5f6;
@neutral-80: #2f3a4c;
// Styleguide colors
@ol-blue-gray-0: #f4f5f8;
@ -1161,3 +1162,9 @@
@mobile-action-element-width: 48px;
@mobile-action-element-height: @mobile-action-element-width;
// React History
@history-react-header-bg: @neutral-80;
@history-react-header-color: #fff;
@history-react-separator-color: @neutral-80;
@history-main-bg: #fff;

6
services/web/frontend/stylesheets/variables/all.less
View file

@ -949,3 +949,9 @@
@mobile-action-element-width: 48px;
@mobile-action-element-height: @mobile-action-element-width;
// React History
@history-react-header-bg: @neutral-80;
@history-react-header-color: #fff;
@history-react-separator-color: @neutral-80;
@history-main-bg: #fff;

5
services/web/frontend/stylesheets/variables/themes/light.less
View file

@ -128,3 +128,8 @@
@galileo-color: @neutral-70;
@galileo-header-background: @neutral-20;
@galileo-suggestion-background: @neutral-20;
// React History
@history-react-header-bg: #fff;
@history-react-header-color: @ol-blue-gray-3;
@history-react-separator-color: @neutral-20;