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

fix: cluster-icon's badge (events-count) is cropped in clusters-menu

Browse Source 
Signed-off-by: Roman <ixrock@gmail.com>
This commit is contained in:
Roman 2020-07-29 17:08:25 +03:00
parent d9eb7cb28e
commit ec095cac8e
5 changed files with 17 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -44,7 +44,7 @@ Allows faster separately re-run some of involved processes:
1. `yarn dev:renderer` compiles electron's renderer part and start watching files 1. `yarn dev:renderer` compiles electron's renderer part and start watching files
1. `yarn dev-run` runs app in dev-mode and restarts when electron's main process file has changed 1. `yarn dev-run` runs app in dev-mode and restarts when electron's main process file has changed
## Developer's RTFM recommended list: ## Developer's ~~RTFM~~ recommended list:
- [TypeScript](https://www.typescriptlang.org/docs/home.html) (front-end/back-end) - [TypeScript](https://www.typescriptlang.org/docs/home.html) (front-end/back-end)
- [ReactJS](https://reactjs.org/docs/getting-started.html) (front-end, ui) - [ReactJS](https://reactjs.org/docs/getting-started.html) (front-end, ui)

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

@ -26,5 +26,6 @@
right: 0; right: 0;
bottom: 0; bottom: 0;
margin: -$padding * 1.5; margin: -$padding * 1.5;
font-size: $font-size-small;
} }
} }

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

@ -51,7 +51,7 @@ export class ClusterIcon extends React.Component<Props> {
{showErrors && isAdmin && eventCount > 0 && ( {showErrors && isAdmin && eventCount > 0 && (
<Badge <Badge
className={cssNames("events-count", errorClass)} className={cssNames("events-count", errorClass)}
label={eventCount >= 1000 ? Math.ceil(eventCount / 1000) * 1000 + "+" : eventCount} label={eventCount >= 1000 ? Math.ceil(eventCount / 1000) + "k+" : eventCount}
/> />
)} )}
{children} {children}

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

@ -1,4 +1,5 @@
.ClustersMenu { .ClustersMenu {
@include hidden-scrollbar;
$spacing: $padding * 2; $spacing: $padding * 2;
position: relative; position: relative;
@ -38,17 +39,9 @@
} }
} }
> .clusters {
@include hidden-scrollbar;
margin-bottom: $spacing !important;
&:empty {
display: none;
}
}
> .add-cluster { > .add-cluster {
position: relative; position: relative;
margin-top: $padding;
.Icon { .Icon {
border-radius: $radius; border-radius: $radius;

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

@ -103,20 +103,18 @@ export class ClustersMenu extends React.Component<Props> {
</p> </p>
</div> </div>
)} )}
<div className="clusters flex column gaps"> {clusters.map(cluster => {
{clusters.map(cluster => { return (
return ( <ClusterIcon
<ClusterIcon key={cluster.id}
key={cluster.id} showErrors={true}
showErrors={true} cluster={cluster}
cluster={cluster} isActive={cluster.id === clusterStore.activeClusterId}
isActive={cluster.id === clusterStore.activeClusterId} onClick={() => this.showCluster(cluster.id)}
onClick={() => this.showCluster(cluster.id)} onContextMenu={() => this.showContextMenu(cluster)}
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>