mirror of
https://github.com/overleaf/overleaf.git
synced 2024-11-21 20:47:08 -05:00
Improve spacing in file tree (#7736)
GitOrigin-RevId: f1cbc3b3f637d15d56d40693b15f53c53a24792f
This commit is contained in:
parent
3ccd925d29
commit
11b3e7b6c8
4 changed files with 43 additions and 22 deletions
|
@ -41,7 +41,9 @@ FileTreeDoc.propTypes = {
|
||||||
export const FileTreeIcon = ({ isLinkedFile, name }) => {
|
export const FileTreeIcon = ({ isLinkedFile, name }) => {
|
||||||
const { t } = useTranslation()
|
const { t } = useTranslation()
|
||||||
|
|
||||||
const className = classnames('spaced', { 'linked-file-icon': isLinkedFile })
|
const className = classnames('spaced', 'file-tree-icon', {
|
||||||
|
'linked-file-icon': isLinkedFile,
|
||||||
|
})
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
|
|
@ -45,9 +45,17 @@ function FileTreeFolder({ name, id, folders, docs, files }) {
|
||||||
onClick={handleExpandCollapseClick}
|
onClick={handleExpandCollapseClick}
|
||||||
aria-label={expanded ? t('collapse') : t('expand')}
|
aria-label={expanded ? t('collapse') : t('expand')}
|
||||||
>
|
>
|
||||||
<Icon type={expanded ? 'angle-down' : 'angle-right'} fw />
|
<Icon
|
||||||
|
type={expanded ? 'angle-down' : 'angle-right'}
|
||||||
|
fw
|
||||||
|
className="file-tree-expand-icon"
|
||||||
|
/>
|
||||||
</button>
|
</button>
|
||||||
<Icon type={expanded ? 'folder-open' : 'folder'} fw />
|
<Icon
|
||||||
|
type={expanded ? 'folder-open' : 'folder'}
|
||||||
|
fw
|
||||||
|
className="file-tree-folder-icon"
|
||||||
|
/>
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
|
|
||||||
|
|
|
@ -37,7 +37,8 @@ function FileTreeItemMenu({ id }) {
|
||||||
return (
|
return (
|
||||||
<div className="menu-button btn-group">
|
<div className="menu-button btn-group">
|
||||||
<Button
|
<Button
|
||||||
className="entity-menu-toggle btn btn-default"
|
className="entity-menu-toggle"
|
||||||
|
bsSize="sm"
|
||||||
id={`menu-button-${id}`}
|
id={`menu-button-${id}`}
|
||||||
onClick={withoutPropagation(handleClick)}
|
onClick={withoutPropagation(handleClick)}
|
||||||
ref={menuButtonRef}
|
ref={menuButtonRef}
|
||||||
|
|
|
@ -93,7 +93,7 @@
|
||||||
|
|
||||||
.entity > ul,
|
.entity > ul,
|
||||||
ul[role='tree'] {
|
ul[role='tree'] {
|
||||||
margin-left: (@line-height-computed / 2);
|
margin-left: 22px;
|
||||||
}
|
}
|
||||||
|
|
||||||
li.bottom-buffer {
|
li.bottom-buffer {
|
||||||
|
@ -171,9 +171,12 @@
|
||||||
i.fa {
|
i.fa {
|
||||||
color: @file-tree-item-icon-color;
|
color: @file-tree-item-icon-color;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
|
||||||
|
|
||||||
i.fa.linked-file-icon {
|
&.file-tree-icon {
|
||||||
|
margin-right: 4px;
|
||||||
|
margin-left: 8px;
|
||||||
|
|
||||||
|
&.linked-file-icon {
|
||||||
position: relative;
|
position: relative;
|
||||||
left: -2px;
|
left: -2px;
|
||||||
|
|
||||||
|
@ -184,10 +187,20 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
top: 4px;
|
top: 4px;
|
||||||
width: 0;
|
width: 0;
|
||||||
left: -2px;
|
left: -5px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.file-tree-folder-icon {
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.file-tree-expand-icon {
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
i.fa-folder-open,
|
i.fa-folder-open,
|
||||||
i.fa-folder {
|
i.fa-folder {
|
||||||
|
@ -195,10 +208,6 @@
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
i.spaced {
|
|
||||||
margin-left: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
i.toggle {
|
i.toggle {
|
||||||
width: 24px;
|
width: 24px;
|
||||||
padding: 6px;
|
padding: 6px;
|
||||||
|
@ -252,13 +261,14 @@
|
||||||
.menu-button {
|
.menu-button {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 0;
|
||||||
|
top: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.rename-input {
|
.rename-input {
|
||||||
display: block;
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 1px;
|
top: 1px;
|
||||||
left: 44px;
|
left: 32px;
|
||||||
right: 32px;
|
right: 32px;
|
||||||
color: @file-tree-item-input-color;
|
color: @file-tree-item-input-color;
|
||||||
input {
|
input {
|
||||||
|
|
Loading…
Reference in a new issue