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

Merge pull request #20511 from overleaf/dp-review-panel-footer

Browse source 
Update UI for new review panel footer

GitOrigin-RevId: 8beb554f78fa5876d5349981d96b44a16ab5567c
This commit is contained in:
David 2024-09-24 09:54:32 +01:00 committed by Copybot
parent ab43a44b76
commit 7002d1e4bf
2 changed files with 40 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
services/web/frontend/js/features/review-panel-new/components/review-panel-tabs.tsx
View file

@ -1,28 +1,34 @@
import { Dispatch, FC, memo, SetStateAction } from 'react'
import classnames from 'classnames'
import { SubView } from '../components/review-panel'
import MaterialIcon from '@/shared/components/material-icon'
import { useTranslation } from 'react-i18next'
const ReviewPanelTabs: FC<{
subView: SubView
setSubView: Dispatch<SetStateAction<SubView>>
}> = ({ subView, setSubView }) => {
const { t } = useTranslation()
return (
<>
<button
className={classnames('rp-nav-item', {
'rp-nav-item-active': subView === 'cur_file',
className={classnames('review-panel-tab', {
'review-panel-tab-active': subView === 'cur_file',
})}
onClick={() => setSubView('cur_file')}
>
Current file
<MaterialIcon type="description" />
{t('current_file')}
</button>
<button
className={classnames('rp-nav-item', {
'rp-nav-item-active': subView === 'overview',
className={classnames('review-panel-tab', {
'review-panel-tab-active': subView === 'overview',
})}
onClick={() => setSubView('overview')}
>
Overview
<MaterialIcon type="list" />
{t('overview')}
</button>
</>
)

30
services/web/frontend/stylesheets/app/editor/review-panel-new.less
View file

@ -438,12 +438,38 @@
.review-panel-footer {
position: fixed;
top: calc(var(--review-panel-bottom) - 66px);
height: 60px;
top: calc(var(--review-panel-bottom) - 100px);
width: var(--review-panel-width);
z-index: 2;
background: @rp-bg-dim-blue;
background-color: white;
border-top: 1px solid #d9d9d9;
display: flex;
.review-panel-tab {
flex: 0 0 50%;
padding: 6px 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
border: 0;
border-top: solid 3px transparent;
background: none;
color: @content-secondary;
font-size: @font-size-02;
&:hover,
&:focus {
text-decoration: none;
color: @content-primary;
}
&-active {
color: @content-primary;
border-top: solid 3px @green-50;
}
}
}
.review-panel-add-comment-textarea {