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

fix: hide dynamic panels & focused mode options on mobile

Browse Source
This commit is contained in:
Aman Harwara
2022-10-18 21:02:41 +05:30
parent 07ffc01ede
commit e4de9c1be7
2 changed files with 18 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -21,17 +21,20 @@ const FocusModeSwitch: FunctionComponent<Props> = ({ application, onToggle, onCl
[onToggle, isEnabled, onClose], [onToggle, isEnabled, onClose],
) )
const isMobile = application.isNativeMobileWeb() || isMobileScreen()
if (isMobile) {
return null
}
return ( return (
<> <button
<button 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"
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">Focused Writing</div>
> <Switch className="px-0" checked={isEnabled} />
<div className="flex items-center">Focused Writing</div> </button>
<Switch className="px-0" checked={isEnabled} />
</button>
</>
) )
} }

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

@@ -46,13 +46,17 @@ const ThemesMenuButton: FunctionComponent<Props> = ({ application, item }) => {
) )
const isMobile = application.isNativeMobileWeb() || isMobileScreen() const isMobile = application.isNativeMobileWeb() || isMobileScreen()
const shouldHideButton = item.identifier === FeatureIdentifier.DynamicTheme && isMobile
if (shouldHideButton) {
return null
}
return ( return (
<button <button
className={ className={
'group flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-mobile-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none disabled:bg-default disabled:text-passive-2 md:text-sm' 'group flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-mobile-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none disabled:bg-default disabled:text-passive-2 md:text-sm'
} }
disabled={item.identifier === FeatureIdentifier.DynamicTheme && isMobile}
onClick={toggleTheme} onClick={toggleTheme}
> >
{item.component?.isLayerable() ? ( {item.component?.isLayerable() ? (