hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Cluster Menu scrolling & tooltip fixes

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/renderer/components/cluster-manager/clusters-menu.scss
View File

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

26
src/renderer/components/cluster-manager/clusters-menu.tsx
View File

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