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 {
--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;
user-select: none;
cursor: pointer;
transition: none;
text-shadow: 0 0 4px #0000008f;
position: relative;
z-index: 0; // allows to catch state of :active pseudo-selector
&:active .MuiAvatar-root {
box-shadow: var(--iconActiveShadow) !important;
}
div.MuiAvatar-colorDefault {
font-weight:500;
@ -64,20 +72,17 @@
box-shadow: none;
}
div.MuiAvatar-root {
.MuiAvatar-root {
width: var(--size);
height: var(--size);
border-radius: 6px;
&.active {
box-shadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px var(--textColorAccent);
box-shadow: var(--iconActiveShadow);
}
&.interactive {
&:hover {
&:not(.active) {
box-shadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px #ffffff50;
}
}
&.interactive:not(.active):hover {
box-shadow: var(--iconHoverShadow);
}
}
@ -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 {
margin-left: 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 { crdStore } from "../+custom-resources/crd.store";
import { CustomResources } from "../+custom-resources/custom-resources";
import { isActiveRoute } from "../../navigation";
import { isActiveRoute, navigate } from "../../navigation";
import { isAllowedResource } from "../../../common/utils/allowed-resource";
import { Spinner } from "../spinner";
import { ClusterPageMenuRegistration, ClusterPageMenuRegistry, ClusterPageRegistry, getExtensionPageUrl } from "../../../extensions/registries";
@ -110,7 +110,7 @@ export class Sidebar extends React.Component<Props> {
const routes: TabLayoutRoute[] = [];
const subMenus = ClusterPageMenuRegistry.getInstance().getSubItems(menu);
const clusterPageRegistry= ClusterPageRegistry.getInstance();
const clusterPageRegistry = ClusterPageRegistry.getInstance();
for (const subMenu of subMenus) {
const page = clusterPageRegistry.getByPageTarget(subMenu.target);
@ -193,6 +193,7 @@ export class Sidebar extends React.Component<Props> {
source={metadata.source}
src={spec.icon?.src}
className="mr-5"
onClick={() => navigate(routes.clusterURL())}
/>
<div className={styles.clusterName}>
{metadata.name}