github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-29 18:33:37 -05:00
Code Issues Projects Releases Packages Wiki Activity

Implement new style for history file tree badge

Browse source 
GitOrigin-RevId: 6221bc00e5aecf49fd3f2657128d1e9a2d4e648b
This commit is contained in:
M Fahru 2023-04-13 23:29:10 -07:00 committed by Copybot
parent 0b985c7a0b
commit 8212b686c6
2 changed files with 24 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
services/web/frontend/js/features/history/components/file-tree/history-file-tree-item.tsx
View file

@ -1,5 +1,6 @@
import type { ReactNode } from 'react' import type { ReactNode } from 'react'
import { DiffOperation } from '../../services/types/diff-operation' import type { DiffOperation } from '../../services/types/diff-operation'
import Badge from '../../../../shared/components/badge'
type FileTreeItemProps = { type FileTreeItemProps = {
name: string name: string
@ -17,11 +18,9 @@ export default function FileTreeItem({
<div className="entity-name entity-name-react" role="presentation"> <div className="entity-name entity-name-react" role="presentation">
{icons} {icons}
<button className="item-name-button"> <button className="item-name-button">
<span>{name}</span> <span className="item-name-button-text">{name}</span>
{operation ? ( {operation ? (
<span className="history-file-entity-operation-badge"> <Badge className="item-name-button-badge">{operation}</Badge>
{operation}
</span>
) : null} ) : null}
</button> </button>
</div> </div>

20
services/web/frontend/stylesheets/app/editor/file-tree.less
View file

@ -131,6 +131,26 @@
text-overflow: ellipsis; text-overflow: ellipsis;
text-align: left; text-align: left;
padding-right: 32px; padding-right: 32px;
font-weight: normal;
.item-name-button-text {
display: inline-flex;
margin-right: 5px;
}
.item-name-button-badge {
text-transform: capitalize;
height: 20px;
font-size: @font-size-extra-small;
&:hover {
background-color: @neutral-20;
}
.badge-new-comment {
margin-left: 0;
}
}
} }
} }