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

fix: move mobile nav button next to note/file title (#1568)

Browse Source
This commit is contained in:
Aman Harwara
2022-09-14 20:14:21 +05:30
committed by GitHub
parent f3738358c9
commit 110c5ff47f
4 changed files with 28 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
packages/web/src/javascripts/Components/NoteGroupView/MobileItemsListButton.tsx Normal file
View File

@@ -0,0 +1,22 @@
import { AppPaneId } from '../ResponsivePane/AppPaneMetadata'
import Icon from '../Icon/Icon'
import { useResponsiveAppPane } from '../ResponsivePane/ResponsivePaneProvider'
const MobileItemsListButton = () => {
const { toggleAppPane } = useResponsiveAppPane()
return (
<button
className="bg-text-padding mr-3 flex h-8 min-w-8 cursor-pointer items-center justify-center rounded-full border border-solid border-border text-neutral hover:bg-contrast focus:bg-contrast md:hidden"
onClick={() => {
toggleAppPane(AppPaneId.Items)
}}
title="Go to items list"
aria-label="Go to items list"
>
<Icon type="chevron-left" />
</button>
)
}
export default MobileItemsListButton

22
packages/web/src/javascripts/Components/NoteGroupView/NoteGroupView.tsx
View File

@@ -9,27 +9,6 @@ import FileView from '@/Components/FileView/FileView'
import { FileDnDContext } from '@/Components/FileDragNDropProvider/FileDragNDropProvider'
import { AppPaneId } from '../ResponsivePane/AppPaneMetadata'
import ResponsivePaneContent from '../ResponsivePane/ResponsivePaneContent'
import Icon from '../Icon/Icon'
import { useResponsiveAppPane } from '../ResponsivePane/ResponsivePaneProvider'
const MobileItemsListButton = () => {
const { toggleAppPane } = useResponsiveAppPane()
return (
<div className="px-3.5 pt-2.5 md:hidden">
<button
className="bg-text-padding flex h-8 min-w-8 cursor-pointer items-center justify-center rounded-full border border-solid border-border 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>
</div>
)
}
type State = {
showMultipleSelectedNotes: boolean
@@ -115,7 +94,6 @@ class NoteGroupView extends PureComponent<Props, State> {
className="app-column app-column-third flex min-h-screen flex-col md:h-full md:min-h-0"
>
<ResponsivePaneContent paneId={AppPaneId.Editor} className="flex-grow">
<MobileItemsListButton />
{this.state.showMultipleSelectedNotes && (
<MultipleSelectedNotes
application={this.application}