Keeping Icon focus state only for keyboard (#1234)

* Passing toolbar prop into action menus

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

* Toggling .mouse-intent

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

* Icon focus restyling

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

* Adding what-input dependency

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

package.json

@@ -392,6 +392,7 @@
     "webpack-cli": "^3.3.11",
     "webpack-dev-server": "^3.11.0",
     "webpack-node-externals": "^1.7.2",
+    "what-input": "^5.2.10",
     "xterm": "^4.6.0",
     "xterm-addon-fit": "^0.4.0"
   }

src/renderer/components/app.tsx

@@ -38,7 +38,8 @@ import { webFrame } from "electron";
 import { clusterPageRegistry } from "../../extensions/registries/page-registry";
 import { DynamicPage } from "../../extensions/dynamic-page";
 import { extensionLoader } from "../../extensions/extension-loader";
-import { appEventBus } from "../../common/event-bus"
+import { appEventBus } from "../../common/event-bus";
+import whatInput from 'what-input';
 
 @observer
 export class App extends React.Component {
@@ -57,6 +58,7 @@ export class App extends React.Component {
     window.addEventListener("online", () => {
       window.location.reload()
     })
+    whatInput.ask() // Start to monitor user input device
   }
 
   get startURL() {

src/renderer/components/drawer/drawer.scss

@@ -3,6 +3,7 @@
   --size: 50%;
   --full-size: 75%;
   --spacing: #{$padding * 3};
+  --icon-focus-color: white;
 
   position: absolute;
   background: $contentColor;

src/renderer/components/icon/icon.scss

@@ -5,6 +5,7 @@
   --big-size: 32px;
   --color-active: #{$iconActiveColor};
   --bgc-active: #{$iconActiveBackground};
+  --focus-color: var(--icon-focus-color, #{$lensBlue});
 
   display: inline-flex;
   flex-shrink: 0;
@@ -106,7 +107,7 @@
 
   &.active {
     color: var(--color-active);
-    box-shadow: 0 0 0 3px $iconActiveBackground;
+    box-shadow: 0 0 0 2px $iconActiveBackground;
     background-color: $iconActiveBackground;
   }
 
@@ -115,8 +116,16 @@
     transition: 250ms color, 250ms opacity, 150ms background-color, 150ms box-shadow;
     border-radius: 50%;
 
-    &.focusable:focus {
-      @extend .active;
+    &.focusable:focus:not(:hover) {
+      box-shadow: 0 0 0 2px var(--focus-color);
+
+      [data-whatintent='mouse'] & {
+        box-shadow: none;
+
+        &.active {
+          box-shadow: 0 0 0 2px $iconActiveBackground;
+        }
+      }
     }
 
     &:hover {

src/renderer/components/kube-object/kube-object-menu.tsx

@@ -57,11 +57,11 @@ export class KubeObjectMenu extends React.Component<KubeObjectMenuProps> {
 
   render() {
     const { remove, update, renderRemoveMessage, isEditable, isRemovable } = this;
-    const { className, object, editable, removable, ...menuProps } = this.props;
+    const { className, object, editable, removable, toolbar, ...menuProps } = this.props;
     if (!object) return null;
 
     const menuItems = kubeObjectMenuRegistry.getItemsForKind(object.kind, object.apiVersion).map((item, index) => {
-      return <item.components.MenuItem object={object} key={`menu-item-${index}`} />
+      return <item.components.MenuItem object={object} key={`menu-item-${index}`} toolbar={toolbar} />
     })
     return (
       <MenuActions
@@ -69,6 +69,7 @@ export class KubeObjectMenu extends React.Component<KubeObjectMenuProps> {
         updateAction={isEditable ? update : undefined}
         removeAction={isRemovable ? remove : undefined}
         removeConfirmationMessage={renderRemoveMessage}
+        toolbar={toolbar}
         {...menuProps}
       >
         {menuItems}

src/renderer/components/layout/main-layout.tsx

@@ -38,6 +38,7 @@ export class MainLayout extends React.Component<MainLayoutProps> {
     (sidebarWidth) => this.storage.merge({ sidebarWidth })
   );
 
+
   toggleSidebar = () => {
     this.isPinned = !this.isPinned;
     this.isAccessible = false;

yarn.lock

@@ -14850,6 +14850,11 @@ wgxpath@~1.0.0:
   resolved "https://registry.yarnpkg.com/wgxpath/-/wgxpath-1.0.0.tgz#eef8a4b9d558cc495ad3a9a2b751597ecd9af690"
   integrity sha1-7vikudVYzEla06mit1FZfs2a9pA=
 
+what-input@^5.2.10:
+  version "5.2.10"
+  resolved "https://registry.yarnpkg.com/what-input/-/what-input-5.2.10.tgz#f79f5b65cf95d75e55e6d580bb0a6b98174cad4e"
+  integrity sha512-7AQoIMGq7uU8esmKniOtZG3A+pzlwgeyFpkS3f/yzRbxknSL68tvn5gjE6bZ4OMFxCPjpaBd2udUTqlZ0HwrXQ==
+
 whatwg-encoding@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz#5abacf777c32166a51d085d6b4f3e7d27113ddb0"