Commit 74a27802 authored by Andrey Azov's avatar Andrey Azov
Browse files

Prevent wrapping of contents of TrackPanelItem

parent 0a3b0b89
@import 'src/styles/common';
.track {
display: flex;
display: grid;
grid-template-columns: 1fr [controls] auto;
align-items: center;
font-size: 12px;
margin-left: 0;
padding: 4px 10px;
white-space: nowrap;
img {
height: 16px;
width: 16px;
}
.chevron {
margin-left: 8px;
height: 6px;
&WithChildren {
grid-template-columns: auto 1fr [controls] auto;
}
&:hover,
......@@ -21,36 +18,6 @@
background: $ice-blue;
}
&.main {
font-weight: $bold;
}
label {
width: calc(100% - 50px);
button {
margin-left: 0;
}
.mainText {
margin-right: 10px;
}
.selectedInfo {
color: $black;
display: inline-block;
font-size: 10px;
font-weight: $normal;
margin-right: 10px;
}
.additionalInfo {
display: inline-block;
font-size: 10px;
font-weight: $light;
}
}
.box {
border: 1px solid;
display: inline-block;
......@@ -81,6 +48,54 @@
}
}
.labelTextPrimary {
margin-right: 10px;
}
.main {
.labelTextPrimary {
font-weight: $bold;
}
}
// TODO: would sure be nice to rename this class
.selectedInfo {
color: $black;
font-size: 10px;
font-weight: $normal;
margin-right: 10px;
}
// TODO: would sure be nice to rename this class
.additionalInfo {
font-size: 10px;
font-weight: $light;
}
.controls {
display: flex;
grid-column: controls;
margin-left: 26px;
& > * {
flex: 0 0 auto;
}
}
.label {
overflow: hidden;
text-overflow: ellipsis;
}
.chevronWrapper {
justify-self: start;
}
.chevron {
margin-left: 8px;
height: 6px;
}
.ellipsisHolder {
height: 16px;
width: 16px;
......
......@@ -200,6 +200,7 @@ export const TrackPanelListItem = (props: TrackPanelListItemProps) => {
};
const trackClassNames = classNames(styles.track, {
[styles.trackWithChildren]: props.children,
[styles.main]: track.track_id === TrackId.GENE,
[styles.trackHighlighted]:
track.track_id === drawerView || track.track_id === highlightedTrackId
......@@ -207,46 +208,51 @@ export const TrackPanelListItem = (props: TrackPanelListItemProps) => {
return (
<>
<dd className={trackClassNames} onClick={drawerViewListHandler}>
<label>
<div className={trackClassNames} onClick={drawerViewListHandler}>
<div className={styles.label}>
{track.colour && (
<span
className={getBoxClasses(track.colour as TrackItemColourKey)}
/>
)}
<span className={styles.mainText}>{track.label}</span>
{track.support_level && (
<span className={styles.selectedInfo}>{track.support_level}</span>
)}
{track.additional_info && (
<span className={styles.additionalInfo}>
{track.additional_info}
</span>
)}
{props.children && (
<Chevron
onClick={toggleExpand}
direction={isCollapsed ? 'down' : 'up'}
classNames={{ svg: styles.chevron }}
/>
)}
</label>
<div className={styles.ellipsisHolder}>
<ImageButton
status={Status.DEFAULT}
description={`Go to ${track.label}`}
onClick={drawerViewButtonHandler}
image={Ellipsis}
/>
<span>
<span className={styles.labelTextPrimary}>{track.label}</span>
{track.support_level ? (
<span className={styles.selectedInfo}>{track.support_level}</span>
) : (
track.additional_info && (
<span className={styles.additionalInfo}>
{track.additional_info}
</span>
)
)}
</span>
</div>
<div className={styles.eyeHolder}>
<VisibilityIcon
status={trackStatus}
description={'enable/disable track'}
onClick={toggleTrack}
{props.children && (
<Chevron
onClick={toggleExpand}
direction={isCollapsed ? 'down' : 'up'}
classNames={{ wrapper: styles.chevronWrapper, svg: styles.chevron }}
/>
)}
<div className={styles.controls}>
<div className={styles.ellipsisHolder}>
<ImageButton
status={Status.DEFAULT}
description={`Go to ${track.label}`}
onClick={drawerViewButtonHandler}
image={Ellipsis}
/>
</div>
<div className={styles.eyeHolder}>
<VisibilityIcon
status={trackStatus}
description={'enable/disable track'}
onClick={toggleTrack}
/>
</div>
</div>
</dd>
</div>
{!isCollapsed && props.children}
</>
);
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment