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

feat: "create new note" floating button on mobile (#1857)

Browse Source
This commit is contained in:
Aman Harwara
2022-10-21 18:36:55 +05:30
committed by GitHub
parent 173bacdfa3
commit 21f725bb2a
14 changed files with 96 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
packages/web/src/javascripts/Components/ContentListView/Header/ContentListHeader.tsx
View File

@@ -5,11 +5,13 @@ import { classNames } from '@/Utils/ConcatenateClassNames'
import Popover from '@/Components/Popover/Popover'
import DisplayOptionsMenu from './DisplayOptionsMenu'
import { NavigationMenuButton } from '@/Components/NavigationMenu/NavigationMenu'
import RoundIconButton from '@/Components/Button/RoundIconButton'
type Props = {
application: {
getPreference: WebApplication['getPreference']
setPreference: WebApplication['setPreference']
isNativeMobileWeb: WebApplication['isNativeMobileWeb']
}
panelTitle: string
addButtonLabel: string
@@ -44,16 +46,13 @@ const ContentListHeader = ({
</div>
<div className="flex">
<div className="relative" ref={displayOptionsContainerRef}>
<button
className={classNames(
'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',
showDisplayOptionsMenu && 'bg-contrast',
)}
<RoundIconButton
className={classNames(showDisplayOptionsMenu && 'bg-contrast')}
onClick={toggleDisplayOptionsMenu}
ref={displayOptionsButtonRef}
>
<Icon type="sort-descending" />
</button>
icon="sort-descending"
label="Display options menu"
/>
<Popover
open={showDisplayOptionsMenu}
anchorElement={displayOptionsButtonRef.current}
@@ -70,12 +69,12 @@ const ContentListHeader = ({
</Popover>
</div>
<button
className="ml-3 flex h-8 min-w-8 cursor-pointer items-center justify-center rounded-full border border-solid border-transparent bg-info text-info-contrast hover:brightness-125"
className="absolute bottom-6 right-6 ml-3 flex h-13 w-13 cursor-pointer items-center justify-center rounded-full border border-solid border-transparent bg-info text-info-contrast hover:brightness-125 md:static md:h-8 md:w-8"
title={addButtonLabel}
aria-label={addButtonLabel}
onClick={addNewItem}
>
<Icon type="add" />
<Icon type="add" size="custom" className="h-6 w-6 md:h-5 md:w-5" />
</button>
</div>
</div>

13
packages/web/src/javascripts/Components/ContentListView/Header/StyledDisplayOptionsButton.tsx
View File

@@ -1,13 +0,0 @@
import { DisclosureButton } from '@reach/disclosure'
import styled from 'styled-components'
const StyledDisplayOptionsButton = styled(DisclosureButton).attrs(() => ({
className:
'flex justify-center items-center min-w-8 h-8 bg-text-padding hover:bg-contrast focus:bg-contrast text-neutral border border-solid border-border rounded-full cursor-pointer',
}))<{
$pressed: boolean
}>`
background-color: ${(props) => (props.$pressed ? 'var(--sn-stylekit-contrast-background-color)' : 'transparent')};
`
export default StyledDisplayOptionsButton