rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: disable focus mode and dynamic panel switches on mobile (#1607)

Browse Source
This commit is contained in:
Aman Harwara
2022-09-21 22:09:02 +05:30
committed by GitHub
parent d1b71861ec
commit 9dfeac7489
3 changed files with 11 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/web/src/javascripts/Components/Icon/PremiumFeatureIcon.ts
View File

@@ -1,4 +1,4 @@
import { IconType } from '@standardnotes/snjs' import { IconType } from '@standardnotes/snjs'
export const PremiumFeatureIconName: IconType = 'asterisk' export const PremiumFeatureIconName: IconType = 'asterisk'
export const PremiumFeatureIconClass = 'text-info' export const PremiumFeatureIconClass = 'text-info group-disabled:text-passive-2'

6
packages/web/src/javascripts/Components/QuickSettingsMenu/FocusModeSwitch.tsx
View File

@@ -5,6 +5,7 @@ import Icon from '@/Components/Icon/Icon'
import { usePremiumModal } from '@/Hooks/usePremiumModal' import { usePremiumModal } from '@/Hooks/usePremiumModal'
import Switch from '@/Components/Switch/Switch' import Switch from '@/Components/Switch/Switch'
import { PremiumFeatureIconClass, PremiumFeatureIconName } from '../Icon/PremiumFeatureIcon' import { PremiumFeatureIconClass, PremiumFeatureIconName } from '../Icon/PremiumFeatureIcon'
import { isMobileScreen } from '@/Utils'
type Props = { type Props = {
application: WebApplication application: WebApplication
@@ -34,11 +35,12 @@ const FocusModeSwitch: FunctionComponent<Props> = ({ application, onToggle, onCl
return ( return (
<> <>
<button <button
className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none" className="group flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none disabled:bg-default disabled:text-passive-2"
onClick={toggle} onClick={toggle}
disabled={application.isNativeMobileWeb() || isMobileScreen()}
> >
<div className="flex items-center"> <div className="flex items-center">
<Icon type="menu-close" className="mr-2 text-neutral" /> <Icon type="menu-close" className="mr-2 text-neutral group-disabled:text-passive-2" />
Focused Writing Focused Writing
</div> </div>
{isEntitled ? ( {isEntitled ? (

8
packages/web/src/javascripts/Components/QuickSettingsMenu/ThemesMenuButton.tsx
View File

@@ -1,5 +1,5 @@
import { WebApplication } from '@/Application/Application' import { WebApplication } from '@/Application/Application'
import { FeatureStatus } from '@standardnotes/snjs' import { FeatureIdentifier, FeatureStatus } from '@standardnotes/snjs'
import { FunctionComponent, MouseEventHandler, useCallback, useMemo } from 'react' import { FunctionComponent, MouseEventHandler, useCallback, useMemo } from 'react'
import Icon from '@/Components/Icon/Icon' import Icon from '@/Components/Icon/Icon'
import { usePremiumModal } from '@/Hooks/usePremiumModal' import { usePremiumModal } from '@/Hooks/usePremiumModal'
@@ -7,6 +7,7 @@ import Switch from '@/Components/Switch/Switch'
import { ThemeItem } from './ThemeItem' import { ThemeItem } from './ThemeItem'
import RadioIndicator from '../RadioIndicator/RadioIndicator' import RadioIndicator from '../RadioIndicator/RadioIndicator'
import { PremiumFeatureIconClass, PremiumFeatureIconName } from '../Icon/PremiumFeatureIcon' import { PremiumFeatureIconClass, PremiumFeatureIconName } from '../Icon/PremiumFeatureIcon'
import { isMobileScreen } from '@/Utils'
type Props = { type Props = {
item: ThemeItem item: ThemeItem
@@ -43,11 +44,14 @@ const ThemesMenuButton: FunctionComponent<Props> = ({ application, item }) => {
[application, canActivateTheme, item, premiumModal], [application, canActivateTheme, item, premiumModal],
) )
const isMobile = application.isNativeMobileWeb() || isMobileScreen()
return ( return (
<button <button
className={ className={
'flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:bg-info-backdrop focus:shadow-none focus:shadow-none' 'group flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none disabled:bg-default disabled:text-passive-2'
} }
disabled={item.identifier === FeatureIdentifier.DynamicTheme && isMobile}
onClick={toggleTheme} onClick={toggleTheme}
> >
{item.component?.isLayerable() ? ( {item.component?.isLayerable() ? (