agw/overleaf-cep
1
0
Fork 0
mirror of https://github.com/yu-i-i/overleaf-cep.git synced 2026-11-14 14:13:43 +01:00
Code Issues Packages Projects Releases 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-09 08:05:08 +00:00
committed by Copybot
parent 264bacab10
commit c19fa74aa4
2 changed files with 25 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
services/web/frontend/js/features/history/components/file-tree/history-file-tree-item.tsx
+6 -6
View File
@@ -17,20 +17,20 @@ export default function HistoryFileTreeItem({
return ( return (
<div className="history-file-tree-item" role="presentation"> <div className="history-file-tree-item" role="presentation">
{icons} {icons}
<button className="history-file-tree-item-button"> <div className="history-file-tree-item-name-wrapper">
<span <div
className={classNames('history-file-tree-item-button-text', { className={classNames('history-file-tree-item-name', {
strikethrough: operation === 'removed', strikethrough: operation === 'removed',
})} })}
> >
{name} {name}
</span> </div>
{operation ? ( {operation ? (
<Badge className="history-file-tree-item-button-badge" size="sm"> <Badge className="history-file-tree-item-badge" size="sm">
{operation} {operation}
</Badge> </Badge>
) : null} ) : null}
</button> </div>
</div> </div>
) )
} }
services/web/frontend/stylesheets/app/editor/history-react.less
+19 -15
View File
@@ -382,6 +382,7 @@ history-root {
li { li {
line-height: @file-tree-line-height; line-height: @file-tree-line-height;
position: relative; position: relative;
margin-left: 8px;
&:focus { &:focus {
outline: none; outline: none;
@@ -391,9 +392,9 @@ history-root {
color: @file-tree-item-color; color: @file-tree-item-color;
cursor: pointer; cursor: pointer;
white-space: nowrap; white-space: nowrap;
overflow: hidden;
text-overflow: clip;
user-select: none; user-select: none;
display: flex;
align-items: center;
&:focus { &:focus {
outline: none; 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%; width: 100%;
overflow: hidden; 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 { .history-file-tree-item-name {
display: inline-flex; margin-right: @margin-xs;
margin-right: 5px; overflow: hidden;
text-overflow: ellipsis;
text-align: left;
font-weight: normal;
flex-grow: 1;
&.strikethrough { &.strikethrough {
text-decoration: line-through; text-decoration: line-through;
} }
} }
.history-file-tree-item-button-badge { .history-file-tree-item-badge {
text-transform: capitalize; text-transform: capitalize;
font-weight: normal;
margin-right: @margin-sm;
flex-shrink: 0;
&:hover { &:hover {
background-color: @neutral-20; background-color: @neutral-20;
@@ -452,6 +454,8 @@ history-root {
i.fa { i.fa {
color: @file-tree-item-icon-color; color: @file-tree-item-icon-color;
font-size: 14px; font-size: 14px;
display: inline-flex;
flex-shrink: 0;
&.file-tree-icon { &.file-tree-icon {
margin-right: 4px; margin-right: 4px;