Skip to content

Commit

Permalink
fix: link icon in pointer cell not visible when cell is too narrow (#…
Browse files Browse the repository at this point in the history
  • Loading branch information
sadakchap authored Oct 13, 2021
1 parent 67d10ef commit 69b897d
Show file tree
Hide file tree
Showing 3 changed files with 18 additions and 9 deletions.
8 changes: 4 additions & 4 deletions src/components/BrowserCell/BrowserCell.react.js
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ export default class BrowserCell extends Component {
}

content = this.props.onPointerClick ? (
<Pill value={ dataValue } onClick={this.props.onPointerClick.bind(undefined, this.props.value)} followClick={true} />
<Pill value={ dataValue } onClick={this.props.onPointerClick.bind(undefined, this.props.value)} followClick={true} shrinkablePill />
) : (
dataValue
);
Expand All @@ -102,7 +102,7 @@ export default class BrowserCell extends Component {
const object = new Parse.Object(v.className);
object.id = v.objectId;
array.push(
<Pill key={i} value={v.objectId} onClick={this.props.onPointerClick.bind(undefined, object)} followClick={true} />
<Pill key={i} value={v.objectId} onClick={this.props.onPointerClick.bind(undefined, object)} followClick={true} shrinkablePill />
);
});
this.copyableValue = content = <ul>
Expand All @@ -129,7 +129,7 @@ export default class BrowserCell extends Component {
this.copyableValue = content = JSON.stringify(this.props.value);
} else if (this.props.type === 'File') {
const fileName = this.props.value.url() ? getFileName(this.props.value) : 'Uploading\u2026';
content = <Pill value={fileName} fileDownloadLink={this.props.value.url()} />;
content = <Pill value={fileName} fileDownloadLink={this.props.value.url()} shrinkablePill />;
this.copyableValue = fileName;
} else if (this.props.type === 'ACL') {
let pieces = [];
Expand Down Expand Up @@ -159,7 +159,7 @@ export default class BrowserCell extends Component {
} else if (this.props.type === 'Relation') {
content = this.props.setRelation ? (
<div style={{ textAlign: 'center' }}>
<Pill onClick={() => this.props.setRelation(this.props.value)} value='View relation' followClick={true} />
<Pill onClick={() => this.props.setRelation(this.props.value)} value='View relation' followClick={true} shrinkablePill />
</div>
) : (
'Relation'
Expand Down
4 changes: 2 additions & 2 deletions src/components/Pill/Pill.react.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,15 @@ import styles from 'components/Pill/Pill.scss';
import Icon from "components/Icon/Icon.react";

//TODO: refactor, may want to move onClick outside or need to make onClick able to handle link/button a11y
let Pill = ({ value, onClick, fileDownloadLink, followClick = false }) => (
let Pill = ({ value, onClick, fileDownloadLink, followClick = false, shrinkablePill = false }) => (
<span
className={[
styles.pill,
!followClick && onClick ? styles.action : void 0
].join(" ")}
onClick={!followClick && onClick ? onClick : null}
>
<span className={!followClick && fileDownloadLink ? styles.content : ''}>{value}</span>
<span className={!followClick && fileDownloadLink ? styles.content : shrinkablePill ? styles.pillText : ''}>{value}</span>
{followClick && (
<a onClick={e => !e.metaKey && onClick()}>
<Icon name="right-outline" width={20} height={20} fill="#1669a1" />
Expand Down
15 changes: 12 additions & 3 deletions src/components/Pill/Pill.scss
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,8 @@

.pill {
@include MonospaceFont;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
display: inline-block;
color: #0E69A1;
height: 20px;
line-height: 20px;
Expand All @@ -22,6 +21,8 @@
text-overflow: ellipsis;
white-space: nowrap;
& a {
position: absolute;
right: 0;
height: 20px;
width: 20px;
background: #d6e5f2;
Expand All @@ -31,6 +32,14 @@
transform: rotate(316deg);
}
}
& .pillText {
position: absolute;
left: 0;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width: 75%;
}
}

.content {
Expand Down

0 comments on commit 69b897d

Please sign in to comment.