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

fixes: cluster-icon/clusters-menu

Browse Source 
Signed-off-by: Roman <ixrock@gmail.com>
This commit is contained in:
Roman 2020-07-27 16:52:51 +03:00
parent 483feda7e9
commit 7eee65dba5
4 changed files with 12 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/renderer/components/+cluster-settings/cluster-icon.scss
View File

@ -2,15 +2,15 @@
--size: 37px; --size: 37px;
position: relative; position: relative;
opacity: .75; opacity: .55;
border-radius: $radius; border-radius: $radius;
padding: $radius;
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
&.active, &.interactive:hover { &.active, &.interactive:hover {
opacity: 1; opacity: 1;
background-color: #fff; background-color: #fff;
box-shadow: 0 0 0 $radius #fff;
} }
> img { > img {

2
src/renderer/components/+cluster-settings/cluster-icon.tsx
View File

@ -38,7 +38,7 @@ export class ClusterIcon extends React.Component<Props> {
const { clusterName, icon } = preferences; const { clusterName, icon } = preferences;
const clusterIconId = `cluster-icon-${clusterId}`; const clusterIconId = `cluster-icon-${clusterId}`;
const className = cssNames("ClusterIcon flex inline", this.props.className, { const className = cssNames("ClusterIcon flex inline", this.props.className, {
interactive: interactive || !!this.props.onClick, interactive: interactive !== undefined ? interactive : !!this.props.onClick,
active: isActive, active: isActive,
}); });
return ( return (

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

@ -1,11 +1,13 @@
.ClustersMenu { .ClustersMenu {
$spacing: $padding * 2;
position: relative; position: relative;
text-align: center; text-align: center;
padding: $padding * 2; padding: $spacing;
background: var(--clusters-menu-bgc); background: var(--clusters-menu-bgc);
.is-mac & { .is-mac & {
padding-top: $padding * 3; padding-top: $spacing * 2;
} }
> .startup-tooltip { > .startup-tooltip {
@ -16,7 +18,7 @@
top: 20px; top: 20px;
left: 100%; left: 100%;
margin: $padding; margin: $padding;
padding: $padding * 2; padding: $spacing;
width: 320px; width: 320px;
background: $bgc; background: $bgc;
z-index: 100; z-index: 100;
@ -37,12 +39,11 @@
} }
> .clusters { > .clusters {
//@include hidden-scrollbar; // fixme: uncomment after refactoring tooltip.tsx @include hidden-scrollbar;
--flex-gap: #{$padding * 2}; margin-bottom: $spacing !important;
margin: var(--flex-gap) 0;
&:empty { &:empty {
margin-bottom: 0; display: none;
} }
} }

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

@ -90,7 +90,7 @@ export class ClustersMenu extends React.Component<Props> {
const showStartupHint = this.showHint && isLanding && noClusters; const showStartupHint = this.showHint && isLanding && noClusters;
return ( return (
<div <div
className={cssNames("ClustersMenu flex column", className)} className={cssNames("ClustersMenu flex column gaps", className)}
onMouseEnter={() => this.showHint = false} onMouseEnter={() => this.showHint = false}
> >
{showStartupHint && ( {showStartupHint && (