Skip to content

[#1526] Add ellipsis to sidebar file names #1527

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Aug 6, 2020
Merged

[#1526] Add ellipsis to sidebar file names #1527

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
937421e
[#1526] Add ellipsis to sidebar file names
catarak Jul 30, 2020
21761a6
Merge branch 'develop' into bug/sidebar-name-overflow
catarak Aug 3, 2020
65bd4b2
[#1526] Refactor FileName component
catarak Aug 3, 2020
3f30968
Merge branch 'bug/sidebar-name-overflow' of github.com:processing/p5.…
catarak Aug 3, 2020
223d716
Merge branch 'develop' into bug/sidebar-name-overflow
catarak Aug 5, 2020
a56740c
[#1532] Fix labels for files
catarak Aug 5, 2020
90e81d8
Merge branch 'develop' into bug/sidebar-name-overflow
catarak Aug 5, 2020
763ee14
[#1526] Fix failing FileNode test
catarak Aug 5, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 58 additions & 2 deletions client/modules/IDE/components/FileNode.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,61 @@ import FolderRightIcon from '../../../images/triangle-arrow-right.svg';
import FolderDownIcon from '../../../images/triangle-arrow-down.svg';
import FileIcon from '../../../images/file.svg';

function parseFileName(name) {
const nameArray = name.split('.');
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's a good idea to catch if (!name) return; at the beginning of the function, otherwise .split can explode

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

name is a required string proptype, which means that the component itself will complain if it's used without this prop, so is this necessary?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

True, in this case it's kind of pointless

if (nameArray.length > 1) {
const extension = `.${nameArray[nameArray.length - 1]}`;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can use nameArray.slice(-1) here, if that's more readable

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I always forget that I can use slice for this 😄

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think I'm actually going to change this to nameArray.charAt(nameArray.length - 1) as I think that's the most readable.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wow, so apparently charAt can work in some really wacky ways (see this StackOverflow answer), so......... I'm just going to stick with bracket notation.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Make sure to check/test what happens if you pass an empty string to it!
Javascript doesn't like array[-1]

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nevermind, you're catching this on line 15. My bad!

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];
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ditto

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 {
constructor(props) {
super(props);
Expand Down Expand Up @@ -206,11 +261,12 @@ export class FileNode extends React.Component {
</div>
}
<button
aria-label="Name"
aria-label={this.state.updatedName}
className="sidebar__file-item-name"
onClick={this.handleFileClick}
data-testid="file-name"
>
{this.state.updatedName}
<FileName name={this.state.updatedName} />
</button>
<input
data-testid="input"
Expand Down
2 changes: 1 addition & 1 deletion client/modules/IDE/components/FileNode.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ describe('<FileNode />', () => {
};

const expectFileNameToBe = async (expectedName) => {
const name = screen.getByLabelText(/Name/i);
const name = screen.getByTestId('file-name');
await waitFor(() => within(name).queryByText(expectedName));
};

Expand Down
2 changes: 1 addition & 1 deletion client/modules/IDE/pages/IDEView.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -254,7 +254,7 @@ class IDEView extends React.Component {
onChange={size => this.setState({ sidebarSize: size })}
onDragFinished={this._handleSidebarPaneOnDragFinished}
allowResize={this.props.ide.sidebarIsExpanded}
minSize={20}
minSize={125}
>
<Sidebar
files={this.props.files}
Expand Down
25 changes: 22 additions & 3 deletions client/styles/components/_sidebar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
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 & {
display: none;
}
Expand Down Expand Up @@ -174,6 +194,8 @@
padding: 0;
border: 0;
width: calc(100% - #{63 / $base-font-size}rem);
font-family: Inconsolata, monospace;
font-size: #{14 / $base-font-size}rem;
.sidebar__file-item--editing & {
display: inline-block;
}
Expand Down Expand Up @@ -254,9 +276,6 @@
fill: getThemifyVariable('secondary-text-color');
}
}
& svg {
height: #{10 / $base-font-size}rem;
}
background-color: transparent;
border: none;
}
Expand Down