Improve spacing in file tree (#7736)

GitOrigin-RevId: f1cbc3b3f637d15d56d40693b15f53c53a24792f
This commit is contained in:
Alf Eaton 2022-05-11 12:27:09 +01:00 committed by Copybot
parent 3ccd925d29
commit 11b3e7b6c8
4 changed files with 43 additions and 22 deletions

View file

@ -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 (
<> <>

View file

@ -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"
/>
</> </>
) )

View file

@ -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}

View file

@ -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 {