From ef7fa74e0f7560a738eeda938c48f420c11c2993 Mon Sep 17 00:00:00 2001 From: Roie Natan Date: Thu, 30 Nov 2023 09:20:29 -0500 Subject: [PATCH 1/6] custom-tab: added user-select: none to prevent selecting text possibly causing to a tab to not be clicked --- src/shared/components/Tabs/Tab/index.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/shared/components/Tabs/Tab/index.scss b/src/shared/components/Tabs/Tab/index.scss index 79475ed58d..b05a0db7c2 100644 --- a/src/shared/components/Tabs/Tab/index.scss +++ b/src/shared/components/Tabs/Tab/index.scss @@ -24,6 +24,7 @@ border-bottom: 0.25rem solid var(--tab-bb-color); cursor: pointer; transition: color 0.2s, border-bottom-color 0.2s; + user-select: none; &:active { --tab-bb-color: var(--tab-inactive-hover-color); From b406feeb1e186c4b7ce4fd0398036519c6f20b9c Mon Sep 17 00:00:00 2001 From: Roie Natan Date: Thu, 30 Nov 2023 09:22:57 -0500 Subject: [PATCH 2/6] added also -webkit-user-select --- src/shared/components/Tabs/Tab/index.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/shared/components/Tabs/Tab/index.scss b/src/shared/components/Tabs/Tab/index.scss index b05a0db7c2..26398f6e85 100644 --- a/src/shared/components/Tabs/Tab/index.scss +++ b/src/shared/components/Tabs/Tab/index.scss @@ -25,6 +25,7 @@ cursor: pointer; transition: color 0.2s, border-bottom-color 0.2s; user-select: none; + -webkit-user-select: none; &:active { --tab-bb-color: var(--tab-inactive-hover-color); From 0ed1c5a2e10be6e37c4d17cad975f2281ee12b82 Mon Sep 17 00:00:00 2001 From: Roie Natan Date: Thu, 30 Nov 2023 09:36:43 -0500 Subject: [PATCH 3/6] try onContextMenu and useLongPress --- src/shared/components/Tabs/Tab/Tab.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/shared/components/Tabs/Tab/Tab.tsx b/src/shared/components/Tabs/Tab/Tab.tsx index a0926f1cfa..ce336fb792 100644 --- a/src/shared/components/Tabs/Tab/Tab.tsx +++ b/src/shared/components/Tabs/Tab/Tab.tsx @@ -1,5 +1,6 @@ import React, { useCallback, FC, ReactNode } from "react"; import classNames from "classnames"; +import { useLongPress } from "use-long-press"; import { useTabContext } from "../context"; import { getPanelId, getLabelId } from "../helpers"; import "./index.scss"; @@ -30,6 +31,8 @@ const Tab: FC = (props) => { const panelId = getPanelId(value, panelIdTemplate); const labelId = getLabelId(panelId); + const getLongPressProps = useLongPress(null); + const handleChange = useCallback(() => { onChange(value, labelId); }, [onChange, value, labelId]); @@ -53,6 +56,8 @@ const Tab: FC = (props) => { aria-selected={isActive} aria-controls={panelId} onClick={handleChange} + onContextMenu={(e) => e.preventDefault()} + {...getLongPressProps()} > {withIcons && icon} {label} From cdff22f53b5ac8e26e2f612cd475b05f9ccd5443 Mon Sep 17 00:00:00 2001 From: Roie Natan Date: Mon, 4 Dec 2023 15:11:56 -0500 Subject: [PATCH 4/6] show hover only when (pointer: fine) --- src/index.scss | 9 --------- src/shared/components/Tabs/Tab/index.scss | 20 ++++++++++++++++---- 2 files changed, 16 insertions(+), 13 deletions(-) diff --git a/src/index.scss b/src/index.scss index f99d58aee4..dcaa2ad22a 100644 --- a/src/index.scss +++ b/src/index.scss @@ -204,15 +204,6 @@ body { } } -/* Disable hover effects globally when using a touch device */ -@media (hover: none) { - * { - :hover { - opacity: unset !important; - } - } -} - code { font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; diff --git a/src/shared/components/Tabs/Tab/index.scss b/src/shared/components/Tabs/Tab/index.scss index 26398f6e85..0138493986 100644 --- a/src/shared/components/Tabs/Tab/index.scss +++ b/src/shared/components/Tabs/Tab/index.scss @@ -32,8 +32,10 @@ --tab-color: var(--tab-inactive-hover-color); } - &:hover { - --tab-color: var(--tab-inactive-hover-color); + @media (hover: hover) and (pointer: fine) { + &:hover { + --tab-color: var(--tab-inactive-hover-color); + } } &:first-child { @@ -50,11 +52,21 @@ --tab-bb-color: var(--secondary-text); --tab-color: var(--secondary-text); - &:active, - &:hover { + &:active { --tab-bb-color: var(--secondary-text); --tab-color: var(--secondary-text); } + + @media (hover: hover) and (pointer: fine) { + &:hover { + --tab-bb-color: var(--secondary-text); + --tab-color: var(--secondary-text); + } + } + // &:hover { + // --tab-bb-color: var(--secondary-text); + // --tab-color: var(--secondary-text); + // } } .custom-tab--with-icon { --tab-pb: 0; From 823e965ef65f0bb59450b5385ed4f8fc946869bf Mon Sep 17 00:00:00 2001 From: Roie Natan Date: Mon, 4 Dec 2023 15:42:39 -0500 Subject: [PATCH 5/6] . --- src/shared/components/Tabs/Tab/Tab.tsx | 5 --- src/shared/components/Tabs/Tab/index.scss | 32 +++++++++---------- .../components/LayoutTabs/LayoutTabs.tsx | 1 + 3 files changed, 16 insertions(+), 22 deletions(-) diff --git a/src/shared/components/Tabs/Tab/Tab.tsx b/src/shared/components/Tabs/Tab/Tab.tsx index ce336fb792..a0926f1cfa 100644 --- a/src/shared/components/Tabs/Tab/Tab.tsx +++ b/src/shared/components/Tabs/Tab/Tab.tsx @@ -1,6 +1,5 @@ import React, { useCallback, FC, ReactNode } from "react"; import classNames from "classnames"; -import { useLongPress } from "use-long-press"; import { useTabContext } from "../context"; import { getPanelId, getLabelId } from "../helpers"; import "./index.scss"; @@ -31,8 +30,6 @@ const Tab: FC = (props) => { const panelId = getPanelId(value, panelIdTemplate); const labelId = getLabelId(panelId); - const getLongPressProps = useLongPress(null); - const handleChange = useCallback(() => { onChange(value, labelId); }, [onChange, value, labelId]); @@ -56,8 +53,6 @@ const Tab: FC = (props) => { aria-selected={isActive} aria-controls={panelId} onClick={handleChange} - onContextMenu={(e) => e.preventDefault()} - {...getLongPressProps()} > {withIcons && icon} {label} diff --git a/src/shared/components/Tabs/Tab/index.scss b/src/shared/components/Tabs/Tab/index.scss index 0138493986..fb6a7c10df 100644 --- a/src/shared/components/Tabs/Tab/index.scss +++ b/src/shared/components/Tabs/Tab/index.scss @@ -32,12 +32,6 @@ --tab-color: var(--tab-inactive-hover-color); } - @media (hover: hover) and (pointer: fine) { - &:hover { - --tab-color: var(--tab-inactive-hover-color); - } - } - &:first-child { --tab-ml: 0; } @@ -56,17 +50,6 @@ --tab-bb-color: var(--secondary-text); --tab-color: var(--secondary-text); } - - @media (hover: hover) and (pointer: fine) { - &:hover { - --tab-bb-color: var(--secondary-text); - --tab-color: var(--secondary-text); - } - } - // &:hover { - // --tab-bb-color: var(--secondary-text); - // --tab-color: var(--secondary-text); - // } } .custom-tab--with-icon { --tab-pb: 0; @@ -76,3 +59,18 @@ align-items: center; border: 0; } + +@media (hover: hover) and (pointer: fine) { + .custom-tab { + &:hover { + --tab-color: var(--tab-inactive-hover-color); + } + } + + .custom-tab--active { + &:hover { + --tab-bb-color: var(--secondary-text); + --tab-color: var(--secondary-text); + } + } +} diff --git a/src/shared/layouts/CommonSidenavLayout/components/LayoutTabs/LayoutTabs.tsx b/src/shared/layouts/CommonSidenavLayout/components/LayoutTabs/LayoutTabs.tsx index de37d17d22..7cb3148206 100644 --- a/src/shared/layouts/CommonSidenavLayout/components/LayoutTabs/LayoutTabs.tsx +++ b/src/shared/layouts/CommonSidenavLayout/components/LayoutTabs/LayoutTabs.tsx @@ -95,6 +95,7 @@ const LayoutTabs: FC = (props) => { const handleTabChange = (value: unknown) => { if (activeTab === value) { + console.log("SAME TAB. DO NOTHING"); return; } From 1e0b34ab5e2cc96eac5393d55c0d256f48644b8d Mon Sep 17 00:00:00 2001 From: Roie Natan Date: Mon, 4 Dec 2023 15:48:45 -0500 Subject: [PATCH 6/6] . --- .../CommonSidenavLayout/components/LayoutTabs/LayoutTabs.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/shared/layouts/CommonSidenavLayout/components/LayoutTabs/LayoutTabs.tsx b/src/shared/layouts/CommonSidenavLayout/components/LayoutTabs/LayoutTabs.tsx index 7cb3148206..de37d17d22 100644 --- a/src/shared/layouts/CommonSidenavLayout/components/LayoutTabs/LayoutTabs.tsx +++ b/src/shared/layouts/CommonSidenavLayout/components/LayoutTabs/LayoutTabs.tsx @@ -95,7 +95,6 @@ const LayoutTabs: FC = (props) => { const handleTabChange = (value: unknown) => { if (activeTab === value) { - console.log("SAME TAB. DO NOTHING"); return; }