github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-10-24 21:12:38 -04:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #21250 from overleaf/dp-resolved-comments-ui

Browse source 
UI tweaks for resolved comments menu

GitOrigin-RevId: 23df6f9f0374277c315d2fb9c9940dd92ec19f4e
This commit is contained in:
David 2024-10-23 11:14:28 +01:00 committed by Copybot
parent 1c5f5950fa
commit c872d97295
3 changed files with 20 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
services/web/frontend/js/features/review-panel-new/components/review-panel-resolved-threads-menu.tsx
View file

@ -7,6 +7,7 @@ import { useFileTreeData } from '@/shared/context/file-tree-data-context'
import { Change, CommentOperation } from '../../../../../types/change' import { Change, CommentOperation } from '../../../../../types/change'
import { ThreadId } from '../../../../../types/review-panel/review-panel' import { ThreadId } from '../../../../../types/review-panel/review-panel'
import LoadingSpinner from '@/shared/components/loading-spinner' import LoadingSpinner from '@/shared/components/loading-spinner'
import OLBadge from '@/features/ui/components/ol/ol-badge'
export const ReviewPanelResolvedThreadsMenu: FC = () => { export const ReviewPanelResolvedThreadsMenu: FC = () => {
const { t } = useTranslation() const { t } = useTranslation()
@ -76,9 +77,13 @@ export const ReviewPanelResolvedThreadsMenu: FC = () => {
<div className="review-panel-resolved-comments-label"> <div className="review-panel-resolved-comments-label">
{t('resolved_comments')} {t('resolved_comments')}
</div> </div>
<div className="review-panel-resolved-comments-count"> <OLBadge
bg="light"
text="dark"
className="review-panel-resolved-comments-count"
>
{resolvedThreads.length} {resolvedThreads.length}
</div> </OLBadge>
</div> </div>
{resolvedThreads.map(thread => { {resolvedThreads.map(thread => {
const comment = allComments.get(thread.id) const comment = allComments.get(thread.id)

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

@ -269,9 +269,10 @@
} }
.review-panel-resolved-comments-count { .review-panel-resolved-comments-count {
color: @content-secondary;
background-color: @neutral-20; background-color: @neutral-20;
border-radius: @border-radius-base-new; font-weight: normal;
padding: 2px; padding: 4px;
} }
.review-panel-resolved-comment { .review-panel-resolved-comment {
@ -322,6 +323,10 @@
background-color: @neutral-20; background-color: @neutral-20;
border-radius: @border-radius-base-new; border-radius: @border-radius-base-new;
padding: 4px 8px; padding: 4px 8px;
.btn-inline-link {
font-size: 12px;
}
} }
.review-panel-resolved-comment-quoted-text-label { .review-panel-resolved-comment-quoted-text-label {
@ -330,6 +335,7 @@
} }
.review-panel-resolved-comment-quoted-text-quote { .review-panel-resolved-comment-quoted-text-quote {
color: @content-primary;
overflow-wrap: anywhere; overflow-wrap: anywhere;
font-size: 14px; font-size: 14px;
} }

11
services/web/frontend/stylesheets/bootstrap-5/pages/editor/review-panel-new.scss
View file

@ -279,12 +279,6 @@
font-size: var(--font-size-02); font-size: var(--font-size-02);
} }
.review-panel-resolved-comments-count {
background-color: var(--neutral-20);
border-radius: var(--border-radius-base);
padding: var(--spacing-01);
}
.review-panel-resolved-comment { .review-panel-resolved-comment {
background-color: var(--white); background-color: var(--white);
border-radius: var(--border-radius-base); border-radius: var(--border-radius-base);
@ -292,6 +286,10 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--spacing-04); gap: var(--spacing-04);
.btn-inline-link {
font-size: 12px;
}
} }
.review-panel-resolved-comment-header { .review-panel-resolved-comment-header {
@ -342,6 +340,7 @@
} }
.review-panel-resolved-comment-quoted-text-quote { .review-panel-resolved-comment-quoted-text-quote {
color: var(--content-primary);
overflow-wrap: anywhere; overflow-wrap: anywhere;
font-size: var(--font-size-02); font-size: var(--font-size-02);
} }