github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2025-02-20 04:44:04 +00:00
Code Issues Projects Releases Packages Wiki Activity

In history react file tree, always show badge (stick to the right side) and truncate long filename with ellipsis (#12897)

Browse source 
GitOrigin-RevId: 2e982f03b7a60e506f061a2c5bf1ab3d93dfccf5
This commit is contained in:
M Fahru 2023-05-08 08:53:31 -07:00 committed by Copybot
parent 264bacab10
commit c19fa74aa4
2 changed files with 25 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -17,20 +17,20 @@ export default function HistoryFileTreeItem({
return (
<div className="history-file-tree-item" role="presentation">
{icons}
<button className="history-file-tree-item-button">
<span
className={classNames('history-file-tree-item-button-text', {
<div className="history-file-tree-item-name-wrapper">
<div
className={classNames('history-file-tree-item-name', {
strikethrough: operation === 'removed',
})}
>
{name}
</span>
</div>
{operation ? (
<Badge className="history-file-tree-item-button-badge" size="sm">
<Badge className="history-file-tree-item-badge" size="sm">
{operation}
</Badge>
) : null}
</button>
</div>
</div>
)
}

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

@ -382,6 +382,7 @@ history-root {
li {
line-height: @file-tree-line-height;
position: relative;
margin-left: 8px;
&:focus {
outline: none;
@ -391,9 +392,9 @@ history-root {
color: @file-tree-item-color;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
user-select: none;
display: flex;
align-items: center;
&:focus {
outline: none;
@ -418,29 +419,30 @@ history-root {
}
}
.history-file-tree-item-button {
.history-file-tree-item-name-wrapper {
display: flex;
align-items: center;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
padding-right: 40px;
font-weight: normal;
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
.history-file-tree-item-button-text {
display: inline-flex;
margin-right: 5px;
.history-file-tree-item-name {
margin-right: @margin-xs;
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
font-weight: normal;
flex-grow: 1;
&.strikethrough {
text-decoration: line-through;
}
}
.history-file-tree-item-button-badge {
.history-file-tree-item-badge {
text-transform: capitalize;
font-weight: normal;
margin-right: @margin-sm;
flex-shrink: 0;
&:hover {
background-color: @neutral-20;
@ -452,6 +454,8 @@ history-root {
i.fa {
color: @file-tree-item-icon-color;
font-size: 14px;
display: inline-flex;
flex-shrink: 0;
&.file-tree-icon {
margin-right: 4px;