Move HotbarIcon to css modules

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/+catalog/catalog.tsx

@@ -221,7 +221,7 @@ export class Catalog extends React.Component<Props> {
           className={styles.catalogAvatar}
           size={24}
         >
-          {item.entity.spec.icon?.material && <Icon material={item.entity.spec.icon?.material}/>}
+          {item.entity.spec.icon?.material && <Icon material={item.entity.spec.icon?.material} small/>}
         </Avatar>
         <span>{item.name}</span>
         <Icon

src/renderer/components/avatar/avatar.module.css

@@ -44,3 +44,8 @@
 .rounded {
   border-radius: var(--border-radius);
 }
+
+.disabled {
+  opacity: 0.5;
+  filter: grayscale(0.7);
+}

src/renderer/components/avatar/avatar.tsx

@@ -21,20 +21,20 @@
 
 import styles from "./avatar.module.css";
 
-import React, { DOMAttributes } from "react";
+import React, { HTMLAttributes, ImgHTMLAttributes } from "react";
 import randomColor from "randomcolor";
 import GraphemeSplitter from "grapheme-splitter";
 import { cssNames, iter } from "../../utils";
 
-interface Props extends DOMAttributes<any> {
+export interface AvatarProps extends HTMLAttributes<HTMLElement> {
   title: string;
   colorHash?: string;
   size?: number;
   src?: string;
-  className?: string;
   background?: string;
   variant?: "circle" | "rounded" | "square";
-  imgProps?: React.ImgHTMLAttributes<HTMLImageElement>;
+  imgProps?: ImgHTMLAttributes<HTMLImageElement>;
+  disabled?: boolean;
 }
 
 function getNameParts(name: string): string[] {
@@ -71,8 +71,8 @@ function getLabelFromTitle(title: string) {
   ].filter(Boolean).join("");
 }
 
-export function Avatar(props: Props) {
+export function Avatar(props: AvatarProps) {
-  const { title, variant = "rounded", size = 32, colorHash, children, background, imgProps, src, className, ...rest } = props;
+  const { title, variant = "rounded", size = 32, colorHash, children, background, imgProps, src, className, disabled, ...rest } = props;
 
   const getBackgroundColor = () => {
     return background || randomColor({ seed: colorHash, luminosity: "dark" });
@@ -91,6 +91,7 @@ export function Avatar(props: Props) {
       className={cssNames(styles.Avatar, {
         [styles.circle]: variant == "circle",
         [styles.rounded]: variant == "rounded",
+        [styles.disabled]: disabled,
       }, className)}
       style={{ width: `${size}px`, height: `${size}px`, backgroundColor: getBackgroundColor() }}
       {...rest}

src/renderer/components/hotbar/hotbar-entity-icon.module.css

@@ -0,0 +1,56 @@
+/**
+ * Copyright (c) 2021 OpenLens Authors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+.led {
+  position: absolute;
+  left: 3px;
+  top: 3px;
+  background-color: var(--layoutBackground);
+  border: 1px solid var(--clusterMenuBackground);
+  border-radius: 50%;
+  padding: 0px;
+  width: 8px;
+  height: 8px;
+
+  &.online {
+    background-color: var(--primary);
+    box-shadow: 0 0 5px var(--clusterMenuBackground), 0 0 5px var(--primary);
+  }
+}
+
+.badge {
+  position: absolute;
+  right: -2px;
+  bottom: -3px;
+  margin: -8px;
+  font-size: var(--font-size-small);
+  background: var(--clusterMenuBackground);
+  color: var(--textColorAccent);
+  padding: 0px;
+  border-radius: 50%;
+  border: 2px solid var(--clusterMenuBackground);
+  width: 15px;
+  height: 15px;
+
+  svg {
+    width: 13px;
+  }
+}

src/renderer/components/hotbar/hotbar-entity-icon.tsx

@@ -19,7 +19,9 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import React, { DOMAttributes } from "react";
+import styles from "./hotbar-entity-icon.module.css";
+
+import React, { HTMLAttributes } from "react";
 import { makeObservable, observable } from "mobx";
 import { observer } from "mobx-react";
 
@@ -32,10 +34,9 @@ import { Icon } from "../icon";
 import { HotbarIcon } from "./hotbar-icon";
 import { LensKubernetesClusterStatus } from "../../../common/catalog-entities/kubernetes-cluster";
 
-interface Props extends DOMAttributes<HTMLElement> {
+interface Props extends HTMLAttributes<HTMLElement> {
   entity: CatalogEntity;
   index: number;
-  className?: IClassName;
   errorClass?: IClassName;
   add: (item: CatalogEntity, index: number) => void;
   remove: (uid: string) => void;
@@ -55,7 +56,7 @@ export class HotbarEntityIcon extends React.Component<Props> {
   }
 
   get kindIcon() {
-    const className = "badge";
+    const className = styles.badge;
     const category = catalogCategoryRegistry.getCategoryForEntity(this.props.entity);
 
     if (!category) {
@@ -74,7 +75,7 @@ export class HotbarEntityIcon extends React.Component<Props> {
       return null;
     }
 
-    const className = cssNames("led", { online: this.props.entity.status.phase === LensKubernetesClusterStatus.CONNECTED }); // TODO: make it more generic
+    const className = cssNames(styles.led, { [styles.online]: this.props.entity.status.phase === LensKubernetesClusterStatus.CONNECTED }); // TODO: make it more generic
 
     return <div className={className} />;
   }
@@ -83,34 +84,25 @@ export class HotbarEntityIcon extends React.Component<Props> {
     return catalogEntityRegistry.activeEntity?.metadata?.uid == item.getId();
   }
 
+  async onMenuOpen() {
+    const menuItems: CatalogEntityContextMenu[] = [];
+
+    menuItems.unshift({
+      title: "Remove from Hotbar",
+      onClick: () => this.props.remove(this.props.entity.metadata.uid),
+    });
+
+    this.contextMenu.menuItems = menuItems;
+
+    await this.props.entity.onContextMenuOpen(this.contextMenu);
+  }
+
   render() {
     if (!this.contextMenu) {
       return null;
     }
 
-    const {
+    const { entity, errorClass, add, remove, index, children, ...elemProps } = this.props;
-      entity, errorClass, add, remove,
-      index, children, ...elemProps
-    } = this.props;
-    const className = cssNames("HotbarEntityIcon", this.props.className, {
-      interactive: true,
-      active: this.isActive(entity),
-      disabled: !entity,
-    });
-
-    const onOpen = async () => {
-      const menuItems: CatalogEntityContextMenu[] = [];
-
-      menuItems.unshift({
-        title: "Remove from Hotbar",
-        onClick: () => remove(entity.metadata.uid),
-      });
-
-      this.contextMenu.menuItems = menuItems;
-
-      await entity.onContextMenuOpen(this.contextMenu);
-    };
-    const isActive = this.isActive(entity);
 
     return (
       <HotbarIcon
@@ -120,9 +112,10 @@ export class HotbarEntityIcon extends React.Component<Props> {
         src={entity.spec.icon?.src}
         material={entity.spec.icon?.material}
         background={entity.spec.icon?.background}
-        className={className}
+        className={this.props.className}
-        active={isActive}
+        active={this.isActive(entity)}
-        onMenuOpen={onOpen}
+        onMenuOpen={() => this.onMenuOpen()}
+        disabled={!entity}
         menuItems={this.contextMenu.menuItems}
         tooltip={`${entity.metadata.name} (${entity.metadata.source})`}
         {...elemProps}

src/renderer/components/hotbar/hotbar-icon.module.css

@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2021 OpenLens Authors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+.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;
+
+  display: flex;
+  cursor: pointer;
+  transition: none;
+  position: relative;
+  border-radius: var(--border-radius);
+
+  &:not(.active):hover {
+    box-shadow: var(--iconHoverShadow);
+  }
+}
+
+.contextMenuAvailable {
+  cursor: context-menu;
+}
+
+.active {
+  box-shadow: var(--iconActiveShadow);
+}

src/renderer/components/hotbar/hotbar-icon.scss

@@ -19,16 +19,16 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-.HotbarMenu {
+// .HotbarMenu {
-  .HotbarIconMenu {
+//   .HotbarIconMenu {
-    left: 30px;
+//     left: 30px;
-    min-width: 250px;
+//     min-width: 250px;
 
-    li.MenuItem {
+//     li.MenuItem {
-      font-size: 0.9em;
+//       font-size: 0.9em;
-    }
+//     }
-  }
+//   }
-}
+// }
 
 .HotbarIcon {
   --iconActiveShadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px var(--textColorAccent);

src/renderer/components/hotbar/hotbar-icon.tsx

@@ -19,32 +19,27 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import "./hotbar-icon.scss";
+import styles from "./hotbar-icon.module.css";
 
-import React, { DOMAttributes, useState } from "react";
+import React, { useState } from "react";
 
 import type { CatalogEntityContextMenu } from "../../../common/catalog";
-import { cssNames, IClassName } from "../../utils";
+import { cssNames } from "../../utils";
 import { ConfirmDialog } from "../confirm-dialog";
 import { Menu, MenuItem } from "../menu";
 import { observer } from "mobx-react";
-import { Avatar } from "../avatar/avatar";
+import { Avatar, AvatarProps } from "../avatar/avatar";
 import { Icon } from "../icon";
 import { Tooltip } from "../tooltip";
 
-export interface HotbarIconProps extends DOMAttributes<HTMLElement> {
+export interface Props extends AvatarProps {
   uid: string;
-  title: string;
   source: string;
-  src?: string;
   material?: string;
   onMenuOpen?: () => void;
-  className?: IClassName;
   active?: boolean;
   menuItems?: CatalogEntityContextMenu[];
   disabled?: boolean;
-  size?: number;
-  background?: string;
   tooltip?: string;
 }
 
@@ -65,7 +60,7 @@ function onMenuItemClick(menuItem: CatalogEntityContextMenu) {
   }
 }
 
-export const HotbarIcon = observer(({ menuItems = [], size = 40, tooltip, ...props }: HotbarIconProps) => {
+export const HotbarIcon = observer(({ menuItems = [], size = 40, tooltip, ...props }: Props) => {
   const { uid, title, src, material, active, className, source, disabled, onMenuOpen, onClick, children, ...rest } = props;
   const id = `hotbarIcon-${uid}`;
   const [menuOpen, setMenuOpen] = useState(false);
@@ -75,32 +70,25 @@ export const HotbarIcon = observer(({ menuItems = [], size = 40, tooltip, ...pro
   };
 
   return (
-    <div className={cssNames("HotbarIcon flex", className, { disabled, contextMenuAvailable: menuItems.length > 0 })}>
+    <div className={cssNames(styles.HotbarIcon, className, { [styles.contextMenuAvailable]: menuItems.length > 0 })}>
       {tooltip && <Tooltip targetId={id}>{tooltip}</Tooltip>}
-      <div
+      <Avatar
+        {...rest}
         id={id}
-        onClick={(event) => {
+        title={title}
-          if (!disabled) {
+        colorHash={`${title}-${source}`}
-            onClick?.(event);
+        className={cssNames({ [styles.active]: active })}
-          }
+        disabled={disabled}
-        }}
+        size={size}
+        src={src}
+        onClick={(event) => !disabled && onClick?.(event)}
       >
-        <Avatar
+        {material && <Icon material={material} />}
-          {...rest}
+      </Avatar>
-          title={title}
+      {children}
-          colorHash={`${title}-${source}`}
-          className={cssNames(active ? "active" : "default", { interactive: !!onClick })}
-          size={size}
-          src={src}
-        >
-          {material && <Icon className="materialIcon" material={material} />}
-        </Avatar>
-        {children}
-      </div>
       <Menu
         usePortal
         htmlFor={id}
-        className="HotbarIconMenu"
         isOpen={menuOpen}
         toggleEvent="contextmenu"
         position={{ right: true, bottom: true }} // FIXME: position does not work

src/renderer/components/hotbar/hotbar-menu.scss

@@ -97,7 +97,7 @@
         }
 
         &:not(:empty) {
-          .HotbarIcon {
+          > div {
             animation: click .1s;
           }
         }