1
0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00

Cluster Menu scrolling & tooltip fixes

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2020-08-25 16:39:24 +03:00
parent b75cac4546
commit 849ec4f95f
2 changed files with 28 additions and 15 deletions

View File

@ -1,5 +1,4 @@
.ClustersMenu {
@include hidden-scrollbar;
$spacing: $padding * 2;
position: relative;
@ -23,8 +22,7 @@
padding: $spacing;
width: 320px;
background: $bgc;
z-index: 100;
color: white;
color: $textColorAccent;
filter: drop-shadow(0 0px 2px #ffffff33);
pointer-events: none;
@ -38,6 +36,19 @@
border-right: $arrowSize solid $bgc;
right: 100%;
}
.theme-light & {
filter: drop-shadow(0 0px 2px #777);
background: white;
&:before {
border-right-color: white;
}
}
}
.clusters {
@include hidden-scrollbar;
}
> .add-cluster {

View File

@ -110,18 +110,20 @@ export class ClustersMenu extends React.Component<Props> {
</p>
</div>
)}
{clusters.map(cluster => {
return (
<ClusterIcon
key={cluster.id}
showErrors={true}
cluster={cluster}
isActive={cluster.id === getMatchedClusterId()}
onClick={() => this.showCluster(cluster.id)}
onContextMenu={() => this.showContextMenu(cluster)}
/>
)
})}
<div className="clusters flex column gaps">
{clusters.map(cluster => {
return (
<ClusterIcon
key={cluster.id}
showErrors={true}
cluster={cluster}
isActive={cluster.id === getMatchedClusterId()}
onClick={() => this.showCluster(cluster.id)}
onContextMenu={() => this.showContextMenu(cluster)}
/>
)
})}
</div>
<div className="add-cluster" onClick={this.addCluster}>
<Tooltip targetId="add-cluster-icon">
<Trans>Add Cluster</Trans>