Skip to content
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

[plugin] : align tree item description properly #7237

Merged
merged 1 commit into from
Feb 27, 2020
Merged

[plugin] : align tree item description properly #7237

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
27 changes: 13 additions & 14 deletions packages/plugin-ext/src/main/browser/view/tree-view-widget.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -254,7 +254,7 @@ export class TreeViewWidget extends TreeWidget {
return React.createElement('div', attrs, ...children);
}

protected getCaption(node: TreeNode): React.ReactNode[] {
protected getCaption(node: TreeNode): React.ReactNode {
Copy link
Member Author

Choose a reason for hiding this comment

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

The main trick is that we turn each element to span that it does not create multiple lines and then wrap them into div element with block display and noWrapInfo class install. It makes sure that all span are treated as one element and get trimmed accordingly only once.

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 had to solve this issue already many times and each time it is hard for me, had to remember that text overflow does not play nicely with flex display.

const nodes: React.ReactNode[] = [];

const name = this.toNodeName(node) || '';
Expand All @@ -266,29 +266,28 @@ export class TreeViewWidget extends TreeWidget {
const matchResult = work.match(regex);

if (matchResult) {
matchResult.forEach(match => {
const part = work.substring(0, work.indexOf(match));
nodes.push(part);
matchResult.forEach((match, index) => {
nodes.push(<span key={`m${index}`}>{work.substring(0, work.indexOf(match))}</span>);

const execResult = regex.exec(name);
const link = <a href={execResult![2]}
nodes.push(<a key={`l${index}`}
href={execResult![2]}
target='_blank'
className={TREE_NODE_HYPERLINK}
onClick={e => e.stopPropagation()}>{execResult![1]}</a >;
nodes.push(link);
onClick={e => e.stopPropagation()}>{execResult![1]}</a>
);

work = work.substring(work.indexOf(match) + match.length);
});
}

const className = [TREE_NODE_SEGMENT_CLASS, TREE_NODE_SEGMENT_GROW_CLASS].join(' ');
nodes.push(<div className={className}>{work}</div >);
if (description) {
nodes.push(<div className='theia-tree-view-description'>
return <div className='noWrapInfo'>
{...nodes}
{work && <span>{work}</span>}
{description && <span className='theia-tree-view-description'>
{description}
</div>);
}
return nodes;
</span>}
</div>;
}

protected renderTailDecorations(node: TreeViewNode, props: NodeProps): React.ReactNode {
Expand Down