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

[UX]: navigation to cluster overview from sidebar's top icon (#3867)

Browse Source 
* UX: navigate to "/cluster" overview page from sidebar's top icon
* highlight hotbar-icon border on click
This commit is contained in:
Roman 2021-09-22 16:42:16 +03:00 committed by GitHub
parent e2a9d5213e
commit 963d801cf7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/renderer/components/hotbar/hotbar-icon.scss
View File

@ -31,12 +31,20 @@
} }
.HotbarIcon { .HotbarIcon {
--iconActiveShadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px var(--textColorAccent);
--iconHoverShadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px #ffffff50;
border-radius: 6px; border-radius: 6px;
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
transition: none; transition: none;
text-shadow: 0 0 4px #0000008f; text-shadow: 0 0 4px #0000008f;
position: relative; position: relative;
z-index: 0; // allows to catch state of :active pseudo-selector
&:active .MuiAvatar-root {
box-shadow: var(--iconActiveShadow) !important;
}
div.MuiAvatar-colorDefault { div.MuiAvatar-colorDefault {
font-weight:500; font-weight:500;
@ -64,20 +72,17 @@
box-shadow: none; box-shadow: none;
} }
div.MuiAvatar-root { .MuiAvatar-root {
width: var(--size); width: var(--size);
height: var(--size); height: var(--size);
border-radius: 6px;
&.active { &.active {
box-shadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px var(--textColorAccent); box-shadow: var(--iconActiveShadow);
} }
&.interactive { &.interactive:not(.active):hover {
&:hover { box-shadow: var(--iconHoverShadow);
&:not(.active) {
box-shadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px #ffffff50;
}
}
} }
} }
@ -117,20 +122,6 @@
} }
} }
img {
border-radius: 6px;
&.active {
box-shadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px var(--textColorAccent);
}
&:hover {
&:not(.active) {
box-shadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px #ffffff50;
}
}
}
.materialIcon { .materialIcon {
margin-left: 1px; margin-left: 1px;
margin-top: 1px; margin-top: 1px;

5
src/renderer/components/layout/sidebar.tsx
View File

@ -32,7 +32,7 @@ import { Storage } from "../+storage";
import { Network } from "../+network"; import { Network } from "../+network";
import { crdStore } from "../+custom-resources/crd.store"; import { crdStore } from "../+custom-resources/crd.store";
import { CustomResources } from "../+custom-resources/custom-resources"; import { CustomResources } from "../+custom-resources/custom-resources";
import { isActiveRoute } from "../../navigation"; import { isActiveRoute, navigate } from "../../navigation";
import { isAllowedResource } from "../../../common/utils/allowed-resource"; import { isAllowedResource } from "../../../common/utils/allowed-resource";
import { Spinner } from "../spinner"; import { Spinner } from "../spinner";
import { ClusterPageMenuRegistration, ClusterPageMenuRegistry, ClusterPageRegistry, getExtensionPageUrl } from "../../../extensions/registries"; import { ClusterPageMenuRegistration, ClusterPageMenuRegistry, ClusterPageRegistry, getExtensionPageUrl } from "../../../extensions/registries";
@ -110,7 +110,7 @@ export class Sidebar extends React.Component<Props> {
const routes: TabLayoutRoute[] = []; const routes: TabLayoutRoute[] = [];
const subMenus = ClusterPageMenuRegistry.getInstance().getSubItems(menu); const subMenus = ClusterPageMenuRegistry.getInstance().getSubItems(menu);
const clusterPageRegistry= ClusterPageRegistry.getInstance(); const clusterPageRegistry = ClusterPageRegistry.getInstance();
for (const subMenu of subMenus) { for (const subMenu of subMenus) {
const page = clusterPageRegistry.getByPageTarget(subMenu.target); const page = clusterPageRegistry.getByPageTarget(subMenu.target);
@ -193,6 +193,7 @@ export class Sidebar extends React.Component<Props> {
source={metadata.source} source={metadata.source}
src={spec.icon?.src} src={spec.icon?.src}
className="mr-5" className="mr-5"
onClick={() => navigate(routes.clusterURL())}
/> />
<div className={styles.clusterName}> <div className={styles.clusterName}>
{metadata.name} {metadata.name}