From a1592da85a0f3f9e38fe86b0f5ef86a8a1c83ba6 Mon Sep 17 00:00:00 2001 From: Aylie Chou Date: Thu, 7 Oct 2021 06:57:22 +0000 Subject: [PATCH] fix(universal-header): fix ui defect - enlarge hamburger icon click range - disable click when action button inactive - prevent browser click effect --- .../src/components/action-button.js | 3 ++ .../src/components/channels.js | 5 +- .../src/components/hamburger-icons.js | 47 +++++++++---------- .../src/components/mobile-header.js | 11 ++++- .../universal-header/src/components/slogan.js | 1 + 5 files changed, 41 insertions(+), 26 deletions(-) diff --git a/packages/universal-header/src/components/action-button.js b/packages/universal-header/src/components/action-button.js index cfce2e8cc..26e270675 100644 --- a/packages/universal-header/src/components/action-button.js +++ b/packages/universal-header/src/components/action-button.js @@ -69,6 +69,7 @@ const ActionContainer = styled.div` transition: opacity 0.1s; transition-delay: 300ms; opacity: ${props => (props.isActive ? 1 : 0)}; + pointer-events: ${props => (props.isActive ? 'auto' : 'none')}; margin: ${props => arrayToCssShorthand(styles.itemMargin[props.direction])}; width: 100%; @@ -84,9 +85,11 @@ const ActionContainer = styled.div` font-size: ${styles.fontSize.desktop}; font-weight: ${fonts.weight.bold}; ${mq.tabletOnly` + cursor: default; font-size: ${props => styles.fontSize.tablet[props.direction]}; `} ${mq.mobileOnly` + cursor: default; font-size: ${props => styles.fontSize.mobile[props.direction]}; `} } diff --git a/packages/universal-header/src/components/channels.js b/packages/universal-header/src/components/channels.js index e09637d64..c42e32e93 100644 --- a/packages/universal-header/src/components/channels.js +++ b/packages/universal-header/src/components/channels.js @@ -12,6 +12,7 @@ import fonts from '../constants/fonts' import DropDownMenu from './drop-down-menu' import Link from './customized-link' // @twreporter +import mq from '@twreporter/core/lib/utils/media-query' import { arrayToCssShorthand } from '@twreporter/core/lib/utils/css' // lodash import get from 'lodash/get' @@ -115,7 +116,6 @@ const ListItem = styled.li` height: 100%; font-size: ${fonts.size.base}; letter-spacing: 0.5px; - cursor: pointer; margin: ${arrayToCssShorthand(styles.itemMargin.desktop)}; flex: 1; text-shadow: ${props => props.textShadow}; @@ -149,6 +149,9 @@ const ListItem = styled.li` background-color: ${props => props.hoverBgColor}; color: ${props => props.hoverFontColor}; } + ${mq.tabletAndBelow` + cursor: default; + `} } ` diff --git a/packages/universal-header/src/components/hamburger-icons.js b/packages/universal-header/src/components/hamburger-icons.js index e5e9bd466..966d26b8a 100644 --- a/packages/universal-header/src/components/hamburger-icons.js +++ b/packages/universal-header/src/components/hamburger-icons.js @@ -35,6 +35,7 @@ const IconContainer = styled.div` margin-right: 17px; a { display: flex; + cursor: default; } ${mq.tabletOnly` @@ -55,7 +56,7 @@ const IconsContainer = styled.div` ` const Login = ({ callback }) => { - const handleLogin = (releaseBranch) => { + const handleLogin = releaseBranch => { const redirectURL = window.location.href const query = querystring.stringify({ destination: redirectURL, @@ -73,11 +74,11 @@ const Login = ({ callback }) => { {({ releaseBranch, theme }) => { - const [LogInIcon] = themeUtils.selectHamburgerServiceIcons(theme).login + const [LogInIcon] = themeUtils.selectHamburgerServiceIcons( + theme + ).login return ( - handleClick(e, releaseBranch)} - > + handleClick(e, releaseBranch)}> ) @@ -96,7 +97,7 @@ Login.defaultProps = { } const Logout = ({ callback }) => { - const handleLogout = (releaseBranch) => { + const handleLogout = releaseBranch => { const redirectURL = window.location.href const query = querystring.stringify({ destination: redirectURL, @@ -114,11 +115,11 @@ const Logout = ({ callback }) => { {({ releaseBranch, theme }) => { - const [LogOutIcon] = themeUtils.selectHamburgerServiceIcons(theme).logout + const [LogOutIcon] = themeUtils.selectHamburgerServiceIcons( + theme + ).logout return ( - handleClick(e, releaseBranch)} - > + handleClick(e, releaseBranch)}> ) @@ -141,11 +142,10 @@ const Search = ({ callback }) => { {({ releaseBranch, isLinkExternal, theme }) => { - const [SearchIcon] = themeUtils.selectHamburgerServiceIcons(theme).search - const link = linkUtils.getSearchLink( - isLinkExternal, - releaseBranch - ) + const [SearchIcon] = themeUtils.selectHamburgerServiceIcons( + theme + ).search + const link = linkUtils.getSearchLink(isLinkExternal, releaseBranch) return ( @@ -170,11 +170,10 @@ const Bookmark = ({ callback }) => { {({ releaseBranch, isLinkExternal, theme }) => { - const [BookmarkIcon] = themeUtils.selectHamburgerServiceIcons(theme).bookmark - const link = linkUtils.getBookmarksLink( - isLinkExternal, - releaseBranch - ) + const [BookmarkIcon] = themeUtils.selectHamburgerServiceIcons( + theme + ).bookmark + const link = linkUtils.getBookmarksLink(isLinkExternal, releaseBranch) return ( @@ -195,9 +194,9 @@ Bookmark.defaultProps = { } const HamburgerService = ({ services, callback }) => { - const _prepareIconJsx = (service) => { + const _prepareIconJsx = service => { const serviceKey = service.key - switch(serviceKey) { + switch (serviceKey) { case 'login': return case 'logout': @@ -207,7 +206,7 @@ const HamburgerService = ({ services, callback }) => { case 'bookmarks': return default: - return null; + return null } } @@ -217,7 +216,7 @@ const HamburgerService = ({ services, callback }) => { const { borderColor } = themeUtils.selectHamburgerServiceTheme(theme) return ( - { _.map(services, service => _prepareIconJsx(service)) } + {_.map(services, service => _prepareIconJsx(service))} ) }} diff --git a/packages/universal-header/src/components/mobile-header.js b/packages/universal-header/src/components/mobile-header.js index ddfbea0f8..9847cb20a 100644 --- a/packages/universal-header/src/components/mobile-header.js +++ b/packages/universal-header/src/components/mobile-header.js @@ -23,6 +23,10 @@ const styles = { mobile: [24], // px tablet: [24, 30, 24, 50], // px }, + hamburgerPadding: { + mobile: [24], // px + tablet: [24, 30], // px + }, logoHeight: { mobile: 26, // px tablet: 40, // px @@ -125,7 +129,12 @@ const HamburgerContainer = styled.div` const Hamburger = styled.div` display: flex; - cursor: pointer; + position: absolute; + right: 0; + padding: ${arrayToCssShorthand(styles.hamburgerPadding.mobile)}; + ${mq.tabletOnly` + padding: ${arrayToCssShorthand(styles.hamburgerPadding.tablet)}; + `} ` export default class MobileHeader extends React.PureComponent { diff --git a/packages/universal-header/src/components/slogan.js b/packages/universal-header/src/components/slogan.js index e92aa2feb..2ab42831d 100644 --- a/packages/universal-header/src/components/slogan.js +++ b/packages/universal-header/src/components/slogan.js @@ -19,6 +19,7 @@ const SloganContainer = styled.div` font-family: ${fonts.family.serif}; display: flex; align-items: center; + cursor: default; ` const Slogan = ({ themeFunction }) => {