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

feat: update mobile design (#1526)

Browse Source
This commit is contained in:
Aman Harwara
2022-09-12 21:48:47 +05:30
committed by GitHub
parent 9fa093280d
commit 39d0ee9181
20 changed files with 314 additions and 254 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
packages/web/src/javascripts/Components/Navigation/Navigation.tsx
View File

@@ -9,6 +9,8 @@ import PanelResizer, { PanelSide, ResizeFinishCallback, PanelResizeType } from '
import ResponsivePaneContent from '@/Components/ResponsivePane/ResponsivePaneContent'
import { AppPaneId } from '@/Components/ResponsivePane/AppPaneMetadata'
import { classNames } from '@/Utils/ConcatenateClassNames'
import Icon from '../Icon/Icon'
import { useResponsiveAppPane } from '../ResponsivePane/ResponsivePaneProvider'
type Props = {
application: WebApplication
@@ -18,6 +20,7 @@ const Navigation: FunctionComponent<Props> = ({ application }) => {
const viewControllerManager = useMemo(() => application.getViewControllerManager(), [application])
const ref = useRef<HTMLDivElement>(null)
const [panelWidth, setPanelWidth] = useState<number>(0)
const { toggleAppPane } = useResponsiveAppPane()
useEffect(() => {
const removeObserver = application.addEventObserver(async () => {
@@ -48,31 +51,58 @@ const Navigation: FunctionComponent<Props> = ({ application }) => {
return (
<div
id="navigation"
className={'sn-component section app-column w-[220px] xsm-only:!w-full sm-only:!w-full'}
className="sn-component section app-column h-screen max-h-screen w-[220px] overflow-hidden pb-8 md:h-full md:min-h-0 md:py-0 xsm-only:!w-full sm-only:!w-full"
ref={ref}
>
<ResponsivePaneContent
paneId={AppPaneId.Navigation}
contentElementId="navigation-content"
contentClassName="min-h-[85vh]"
>
<div className={'section-title-bar'}>
<div className="section-title-bar-header">
<div className="title text-sm">
<span className="font-bold">Views</span>
</div>
</div>
</div>
<ResponsivePaneContent paneId={AppPaneId.Navigation} contentElementId="navigation-content">
<div
className={classNames(
'h-full overflow-y-auto overflow-x-hidden',
'md:overflow-y-hidden md:hover:overflow-y-auto',
'flex-grow overflow-y-auto overflow-x-hidden md:overflow-y-hidden md:hover:overflow-y-auto',
'md:hover:[overflow-y:_overlay]',
)}
>
<div className={'section-title-bar'}>
<div className="section-title-bar-header">
<div className="title text-sm">
<span className="font-bold">Views</span>
</div>
</div>
</div>
<SmartViewsSection viewControllerManager={viewControllerManager} />
<TagsSection viewControllerManager={viewControllerManager} />
</div>
<div className="flex items-center border-t border-border px-3.5 pt-2.5 md:hidden">
<button
className="flex h-8 min-w-8 cursor-pointer items-center justify-center rounded-full border border-solid border-border bg-default text-neutral hover:bg-contrast focus:bg-contrast"
onClick={() => {
toggleAppPane(AppPaneId.Items)
}}
title="Go to items list"
aria-label="Go to items list"
>
<Icon type="chevron-left" />
</button>
<button
className="ml-auto flex h-8 min-w-8 cursor-pointer items-center justify-center rounded-full border border-solid border-border bg-default text-neutral hover:bg-contrast focus:bg-contrast"
onClick={() => {
viewControllerManager.accountMenuController.toggleShow()
}}
title="Go to items list"
aria-label="Go to items list"
>
<Icon type="account-circle" />
</button>
<button
className="ml-2.5 flex h-8 min-w-8 cursor-pointer items-center justify-center rounded-full border border-solid border-border bg-default text-neutral hover:bg-contrast focus:bg-contrast"
onClick={() => {
viewControllerManager.quickSettingsMenuController.toggle()
}}
title="Go to items list"
aria-label="Go to items list"
>
<Icon type="tune" />
</button>
</div>
</ResponsivePaneContent>
{ref.current && (
<PanelResizer