From b2f3cdd0d29b1a462670f819b4a47ac1edfaca92 Mon Sep 17 00:00:00 2001 From: Alex Andreev Date: Tue, 10 Nov 2020 12:36:06 +0300 Subject: [PATCH] Keeping Icon focus state only for keyboard (#1234) * Passing toolbar prop into action menus Signed-off-by: Alex Andreev * Toggling .mouse-intent Signed-off-by: Alex Andreev * Icon focus restyling Signed-off-by: Alex Andreev * Adding what-input dependency Signed-off-by: Alex Andreev --- package.json | 1 + src/renderer/components/app.tsx | 4 +++- src/renderer/components/drawer/drawer.scss | 1 + src/renderer/components/icon/icon.scss | 15 ++++++++++++--- .../components/kube-object/kube-object-menu.tsx | 5 +++-- src/renderer/components/layout/main-layout.tsx | 1 + yarn.lock | 5 +++++ 7 files changed, 26 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index c0758e4aa0..ad7a4a80c8 100644 --- a/package.json +++ b/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" } diff --git a/src/renderer/components/app.tsx b/src/renderer/components/app.tsx index 5ad908a528..a5ebe554d1 100755 --- a/src/renderer/components/app.tsx +++ b/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() { diff --git a/src/renderer/components/drawer/drawer.scss b/src/renderer/components/drawer/drawer.scss index 72a2f10eb1..488a890f2c 100644 --- a/src/renderer/components/drawer/drawer.scss +++ b/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; diff --git a/src/renderer/components/icon/icon.scss b/src/renderer/components/icon/icon.scss index 253423bd4c..e581ccbbdc 100644 --- a/src/renderer/components/icon/icon.scss +++ b/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 { diff --git a/src/renderer/components/kube-object/kube-object-menu.tsx b/src/renderer/components/kube-object/kube-object-menu.tsx index fa008f1bac..0333bf6f9c 100644 --- a/src/renderer/components/kube-object/kube-object-menu.tsx +++ b/src/renderer/components/kube-object/kube-object-menu.tsx @@ -57,11 +57,11 @@ export class KubeObjectMenu extends React.Component { 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 + return }) return ( { updateAction={isEditable ? update : undefined} removeAction={isRemovable ? remove : undefined} removeConfirmationMessage={renderRemoveMessage} + toolbar={toolbar} {...menuProps} > {menuItems} diff --git a/src/renderer/components/layout/main-layout.tsx b/src/renderer/components/layout/main-layout.tsx index 67c6c08bce..e66fed3d17 100755 --- a/src/renderer/components/layout/main-layout.tsx +++ b/src/renderer/components/layout/main-layout.tsx @@ -38,6 +38,7 @@ export class MainLayout extends React.Component { (sidebarWidth) => this.storage.merge({ sidebarWidth }) ); + toggleSidebar = () => { this.isPinned = !this.isPinned; this.isAccessible = false; diff --git a/yarn.lock b/yarn.lock index c145c32e43..b6a0e4add1 100644 --- a/yarn.lock +++ b/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"