Merge pull request #1527 from processing/bug/sidebar-name-overflow

[#1526] Add ellipsis to sidebar file names
This commit is contained in:
Cassie Tarakajian 2020-08-05 20:43:47 -04:00 committed by GitHub
commit 873b2b78cb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 82 additions and 7 deletions

View file

@ -10,6 +10,61 @@ import FolderRightIcon from '../../../images/triangle-arrow-right.svg';
import FolderDownIcon from '../../../images/triangle-arrow-down.svg'; import FolderDownIcon from '../../../images/triangle-arrow-down.svg';
import FileIcon from '../../../images/file.svg'; import FileIcon from '../../../images/file.svg';
function parseFileName(name) {
const nameArray = name.split('.');
if (nameArray.length > 1) {
const extension = `.${nameArray[nameArray.length - 1]}`;
const baseName = nameArray.slice(0, -1).join('');
const firstLetter = baseName[0];
const lastLetter = baseName[baseName.length - 1];
const middleText = baseName.slice(1, -1);
return {
baseName,
firstLetter,
lastLetter,
middleText,
extension
};
}
const firstLetter = name[0];
const lastLetter = name[name.length - 1];
const middleText = name.slice(1, -1);
return {
baseName: name,
firstLetter,
lastLetter,
middleText
};
}
function FileName({ name }) {
const {
baseName,
firstLetter,
lastLetter,
middleText,
extension
} = parseFileName(name);
return (
<span className="sidebar__file-item-name-text">
<span>{firstLetter}</span>
{baseName.length > 2 &&
<span className="sidebar__file-item-name--ellipsis">{middleText}</span>
}
{baseName.length > 1 &&
<span>{lastLetter}</span>
}
{extension &&
<span>{extension}</span>
}
</span>
);
}
FileName.propTypes = {
name: PropTypes.string.isRequired
};
export class FileNode extends React.Component { export class FileNode extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
@ -206,11 +261,12 @@ export class FileNode extends React.Component {
</div> </div>
} }
<button <button
aria-label="Name" aria-label={this.state.updatedName}
className="sidebar__file-item-name" className="sidebar__file-item-name"
onClick={this.handleFileClick} onClick={this.handleFileClick}
data-testid="file-name"
> >
{this.state.updatedName} <FileName name={this.state.updatedName} />
</button> </button>
<input <input
data-testid="input" data-testid="input"

View file

@ -13,7 +13,7 @@ describe('<FileNode />', () => {
}; };
const expectFileNameToBe = async (expectedName) => { const expectFileNameToBe = async (expectedName) => {
const name = screen.getByLabelText(/Name/i); const name = screen.getByTestId('file-name');
await waitFor(() => within(name).queryByText(expectedName)); await waitFor(() => within(name).queryByText(expectedName));
}; };

View file

@ -254,7 +254,7 @@ class IDEView extends React.Component {
onChange={size => this.setState({ sidebarSize: size })} onChange={size => this.setState({ sidebarSize: size })}
onDragFinished={this._handleSidebarPaneOnDragFinished} onDragFinished={this._handleSidebarPaneOnDragFinished}
allowResize={this.props.ide.sidebarIsExpanded} allowResize={this.props.ide.sidebarIsExpanded}
minSize={20} minSize={125}
> >
<Sidebar <Sidebar
files={this.props.files} files={this.props.files}

View file

@ -110,8 +110,28 @@
} }
} }
.sidebar__file-item-name--ellipsis {
overflow-x: hidden;
white-space: nowrap;
text-overflow: ellipsis;
min-width: #{15 / $base-font-size}rem;
}
.sidebar__file-item-name-text {
display: flex;
width: 100%;
overflow: hidden;
min-width: #{50 / $base-font-size}rem;
white-space: nowrap;
text-align: left;
}
.sidebar__file-item-name { .sidebar__file-item-name {
padding: #{4 / $base-font-size}rem 0; padding: #{4 / $base-font-size}rem 0;
padding-right: #{25 / $base-font-size}rem;
font-family: Inconsolata, monospace;
font-size: #{14 / $base-font-size}rem;
overflow: hidden;
.sidebar__file-item--editing & { .sidebar__file-item--editing & {
display: none; display: none;
} }
@ -174,6 +194,8 @@
padding: 0; padding: 0;
border: 0; border: 0;
width: calc(100% - #{63 / $base-font-size}rem); width: calc(100% - #{63 / $base-font-size}rem);
font-family: Inconsolata, monospace;
font-size: #{14 / $base-font-size}rem;
.sidebar__file-item--editing & { .sidebar__file-item--editing & {
display: inline-block; display: inline-block;
} }
@ -254,9 +276,6 @@
fill: getThemifyVariable('secondary-text-color'); fill: getThemifyVariable('secondary-text-color');
} }
} }
& svg {
height: #{10 / $base-font-size}rem;
}
background-color: transparent; background-color: transparent;
border: none; border: none;
} }