github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-10-17 21:05:04 -04: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 { Dispatch, FC, memo, SetStateAction } from 'react'
import classnames from 'classnames' import classnames from 'classnames'
import { SubView } from '../components/review-panel' import { SubView } from '../components/review-panel'
import MaterialIcon from '@/shared/components/material-icon'
import { useTranslation } from 'react-i18next'
const ReviewPanelTabs: FC<{ const ReviewPanelTabs: FC<{
subView: SubView subView: SubView
setSubView: Dispatch<SetStateAction<SubView>> setSubView: Dispatch<SetStateAction<SubView>>
}> = ({ subView, setSubView }) => { }> = ({ subView, setSubView }) => {
const { t } = useTranslation()
return ( return (
<> <>
<button <button
className={classnames('rp-nav-item', { className={classnames('review-panel-tab', {
'rp-nav-item-active': subView === 'cur_file', 'review-panel-tab-active': subView === 'cur_file',
})} })}
onClick={() => setSubView('cur_file')} onClick={() => setSubView('cur_file')}
> >
Current file <MaterialIcon type="description" />
{t('current_file')}
</button> </button>
<button <button
className={classnames('rp-nav-item', { className={classnames('review-panel-tab', {
'rp-nav-item-active': subView === 'overview', 'review-panel-tab-active': subView === 'overview',
})} })}
onClick={() => setSubView('overview')} onClick={() => setSubView('overview')}
> >
Overview <MaterialIcon type="list" />
{t('overview')}
</button> </button>
</> </>
) )

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

@ -438,12 +438,38 @@
.review-panel-footer { .review-panel-footer {
position: fixed; position: fixed;
top: calc(var(--review-panel-bottom) - 66px); height: 60px;
top: calc(var(--review-panel-bottom) - 100px);
width: var(--review-panel-width); width: var(--review-panel-width);
z-index: 2; z-index: 2;
background: @rp-bg-dim-blue; background-color: white;
border-top: 1px solid #d9d9d9; border-top: 1px solid #d9d9d9;
display: flex; 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 { .review-panel-add-comment-textarea {