Skip to content

Commit

Permalink
Merge pull request #1806 from oasisprotocol/lw/vertical-scrolls
Browse files Browse the repository at this point in the history 
Refactor layerOverlayMinHeight to avoid needless scrollbars
  • Loading branch information
@lukaw3d
lukaw3d authored Dec 18, 2023
2 parents 0527188 + 6e67efd commit 3873f3a
Show file tree
Hide file tree
Showing 16 changed files with 371 additions and 322 deletions.
1 change: 1 addition & 0 deletions .changelog/1806.bugfix.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Refactor layerOverlayMinHeight to avoid needless scrollbars
2 changes: 1 addition & 1 deletion src/app/components/ResponsiveLayer/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export function ResponsiveLayer(props: LayerExtendedProps) {
<Layer {...props} ref={layerRef} style={{ overflowY: 'auto', ...props.style }}>
<Box
// Prevents Grommet flex overlap issue in smaller viewport
flex={{ shrink: 0 }}
flex={{ shrink: 0, grow: 1 }}
style={{
minHeight: isMobile ? '100dvh' : 'auto',
}}
Expand Down
221 changes: 112 additions & 109 deletions src/app/components/Toolbar/Features/Account/ManageableAccountDetails.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
import { useContext, useState } from 'react'
import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { Box } from 'grommet/es6/components/Box'
import { Button } from 'grommet/es6/components/Button'
import { Form } from 'grommet/es6/components/Form'
import { FormField } from 'grommet/es6/components/FormField'
import { ResponsiveContext } from 'grommet/es6/contexts/ResponsiveContext'
import { Tab } from 'grommet/es6/components/Tab'
import { Tabs } from 'grommet/es6/components/Tabs'
import { Text } from 'grommet/es6/components/Text'
Expand All @@ -15,11 +14,11 @@ import { Trans, useTranslation } from 'react-i18next'
import { Wallet } from '../../../../state/wallet/types'
import { DerivationFormatter } from './DerivationFormatter'
import { AddressBox } from '../../../AddressBox'
import { layerOverlayMinHeight } from '../layer'
import { LayerContainer } from './../LayerContainer'
import { DeleteAccount } from './DeleteAccount'
import { PrivateKeyFormatter } from '../../../PrivateKeyFormatter'
import { RevealOverlayButton } from '../../../RevealOverlayButton'
import styled from 'styled-components'

interface FormValue {
name: string
Expand All @@ -35,6 +34,13 @@ interface ManageableAccountDetailsProps {
wallet: Wallet
}

const StyledForm = styled(Form)`
display: flex;
flex-direction: column;
flex-grow: 1;
justify-content: space-between;
` as typeof Form

export const ManageableAccountDetails = ({
animation,
closeHandler,
Expand All @@ -48,7 +54,6 @@ export const ManageableAccountDetails = ({
const [value, setValue] = useState({ name: wallet.name || '' })
const [layerVisibility, setLayerVisibility] = useState(false)
const [deleteLayerVisibility, setDeleteLayerVisibility] = useState(false)
const isMobile = useContext(ResponsiveContext) === 'small'
const hideLayer = () => {
setLayerVisibility(false)
}
Expand All @@ -58,116 +63,114 @@ export const ManageableAccountDetails = ({
<LayerContainer animation={animation} hideLayer={closeHandler}>
<Tabs>
<Tab title={t('toolbar.settings.myAccountsTab', 'My Accounts')}>
<Box flex="grow" justify="between" height={{ min: isMobile ? 'auto' : layerOverlayMinHeight }}>
<Form<FormValue>
onSubmit={({ value }) => {
if (!editAccount) {
return
<StyledForm<FormValue>
onSubmit={({ value }) => {
if (!editAccount) {
return
}
editAccount(value.name)
closeHandler()
}}
value={value}
onChange={nextValue => setValue(nextValue)}
>
<Box gap="medium">
<FormField
disabled={!editAccount}
info={
!editAccount ? (
<span>
<Trans
i18nKey="toolbar.settings.accountNamingNotAvailable"
t={t}
components={{
OpenWalletButton: (
<Button
color="link"
onClick={() => {
closeParentHandler ? closeParentHandler() : closeHandler()
navigate('/open-wallet')
}}
/>
),
}}
defaults="To name your account create a profile while <OpenWalletButton>opening a wallet</OpenWalletButton>."
/>
</span>
) : undefined
}
editAccount(value.name)
closeHandler()
}}
value={value}
onChange={nextValue => setValue(nextValue)}
>
<Box gap="medium">
<FormField
name="name"
validate={(name: string) =>
name.trim().length > 16
? {
message: t('toolbar.settings.nameLengthError', 'No more than 16 characters'),
status: 'error',
}
: undefined
}
>
<TextInput
disabled={!editAccount}
info={
!editAccount ? (
<span>
<Trans
i18nKey="toolbar.settings.accountNamingNotAvailable"
t={t}
components={{
OpenWalletButton: (
<Button
color="link"
onClick={() => {
closeParentHandler ? closeParentHandler() : closeHandler()
navigate('/open-wallet')
}}
/>
),
}}
defaults="To name your account create a profile while <OpenWalletButton>opening a wallet</OpenWalletButton>."
/>
</span>
) : undefined
}
name="name"
validate={(name: string) =>
name.trim().length > 16
? {
message: t('toolbar.settings.nameLengthError', 'No more than 16 characters'),
status: 'error',
}
: undefined
}
>
<TextInput
disabled={!editAccount}
name="name"
placeholder={t('toolbar.settings.optionalName', 'Name (optional)')}
/>
</FormField>
<Box>
<AddressBox address={wallet.address} border />
<Text size="small" margin={'small'}>
<DerivationFormatter pathDisplay={wallet.pathDisplay} type={wallet.type} />
</Text>
</Box>
<Box justify="between" direction="row">
placeholder={t('toolbar.settings.optionalName', 'Name (optional)')}
/>
</FormField>
<Box>
<AddressBox address={wallet.address} border />
<Text size="small" margin={'small'}>
<DerivationFormatter pathDisplay={wallet.pathDisplay} type={wallet.type} />
</Text>
</Box>
<Box justify="between" direction="row" gap="medium">
<Button
alignSelf="start"
label={t('toolbar.settings.exportPrivateKey.title', 'Export Private Key')}
disabled={!wallet.privateKey}
onClick={() => setLayerVisibility(true)}
/>

{deleteAccount ? (
<Button
alignSelf="start"
label={t('toolbar.settings.exportPrivateKey.title', 'Export Private Key')}
disabled={!wallet.privateKey}
onClick={() => setLayerVisibility(true)}
plain
color="status-error"
label={t('toolbar.settings.delete.title', 'Delete Account')}
onClick={() => setDeleteLayerVisibility(true)}
/>

{deleteAccount ? (
<Button
plain
color="status-error"
label={t('toolbar.settings.delete.title', 'Delete Account')}
onClick={() => setDeleteLayerVisibility(true)}
/>
) : (
<Tip
content={t(
'toolbar.settings.delete.tooltip',
'You must have at least one account at all times.',
)}
dropProps={{ align: { bottom: 'top' } }}
>
<Box>
<Button
icon={<CircleInformation size="18px" color="status-error" />}
disabled={true}
plain
color="status-error"
label={t('toolbar.settings.delete.title', 'Delete Account')}
onClick={() => setDeleteLayerVisibility(true)}
/>
</Box>
</Tip>
)}
</Box>
</Box>
<Box direction="row" justify="between" pad={{ top: 'large' }}>
<Button secondary label={t('toolbar.settings.cancel', 'Cancel')} onClick={closeHandler} />
<Button primary label={t('toolbar.settings.save', 'Save')} type="submit" />
) : (
<Tip
content={t(
'toolbar.settings.delete.tooltip',
'You must have at least one account at all times.',
)}
dropProps={{ align: { bottom: 'top' } }}
>
<Box>
<Button
icon={<CircleInformation size="18px" color="status-error" />}
disabled={true}
plain
color="status-error"
label={t('toolbar.settings.delete.title', 'Delete Account')}
onClick={() => setDeleteLayerVisibility(true)}
/>
</Box>
</Tip>
)}
</Box>
</Form>
</Box>
</Box>
<Box direction="row" justify="between" pad={{ top: 'large' }}>
<Button secondary label={t('toolbar.settings.cancel', 'Cancel')} onClick={closeHandler} />
<Button primary label={t('toolbar.settings.save', 'Save')} type="submit" />
</Box>
</StyledForm>
</Tab>
</Tabs>
</LayerContainer>
{layerVisibility && (
<LayerContainer hideLayer={hideLayer}>
<Tabs>
<Tab title={t('toolbar.settings.exportPrivateKey.title', 'Export Private Key')}>
<Box flex="grow" justify="between" height={{ min: isMobile ? 'auto' : layerOverlayMinHeight }}>
<Box flex="grow" justify="between">
<Box gap="medium">
<Text>
{t(
Expand All @@ -181,15 +184,15 @@ export const ManageableAccountDetails = ({
'Once the private key is lost, it cannot be retrieved. Please make sure to Backup the private key and keep it in a safe place.',
)}
</Text>
<RevealOverlayButton
label={t(
'toolbar.settings.exportPrivateKey.confirm',
'I understand, reveal my private key',
)}
>
<PrivateKeyFormatter privateKey={wallet.privateKey!} />
</RevealOverlayButton>
</Box>
<RevealOverlayButton
label={t(
'toolbar.settings.exportPrivateKey.confirm',
'I understand, reveal my private key',
)}
>
<PrivateKeyFormatter privateKey={wallet.privateKey!} />
</RevealOverlayButton>
<Box direction="row" justify="between" pad={{ top: 'large' }}>
<Button secondary label={t('toolbar.settings.cancel', 'Cancel')} onClick={hideLayer} />
</Box>
Expand Down
6 changes: 1 addition & 5 deletions src/app/components/Toolbar/Features/Contacts/AddContact.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,11 @@
import { useContext } from 'react'
import { useDispatch } from 'react-redux'
import { useTranslation } from 'react-i18next'
import { Box } from 'grommet/es6/components/Box'
import { Tabs } from 'grommet/es6/components/Tabs'
import { Tab } from 'grommet/es6/components/Tab'
import { ResponsiveContext } from 'grommet/es6/contexts/ResponsiveContext'
import { contactsActions } from 'app/state/contacts'
import { Contact } from 'app/state/contacts/types'
import { ContactAccountForm } from './ContactAccountForm'
import { layerOverlayMinHeight } from '../layer'
import { LayerContainer } from '../LayerContainer'

interface AddContactProps {
Expand All @@ -17,15 +14,14 @@ interface AddContactProps {

export const AddContact = ({ setLayerVisibility }: AddContactProps) => {
const { t } = useTranslation()
const isMobile = useContext(ResponsiveContext) === 'small'
const dispatch = useDispatch()
const submitHandler = (contact: Contact) => dispatch(contactsActions.add(contact))

return (
<LayerContainer hideLayer={() => setLayerVisibility(false)}>
<Tabs>
<Tab title={t('toolbar.contacts.add', 'Add Contact')} style={{ textTransform: 'capitalize' }}>
<Box flex="grow" justify="center" height={{ min: isMobile ? 'auto' : layerOverlayMinHeight }}>
<Box flex="grow" justify="center">
<ContactAccountForm
onCancel={() => setLayerVisibility(false)}
onSave={contract => {
Expand Down
7 changes: 2 additions & 5 deletions src/app/components/Toolbar/Features/Contacts/ContactAccount.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,13 @@
import { useContext, useState } from 'react'
import { useState } from 'react'
import { useDispatch } from 'react-redux'
import { useTranslation } from 'react-i18next'
import { Box } from 'grommet/es6/components/Box'
import { ResponsiveContext } from 'grommet/es6/contexts/ResponsiveContext'
import { Tabs } from 'grommet/es6/components/Tabs'
import { Tab } from 'grommet/es6/components/Tab'
import { contactsActions } from 'app/state/contacts'
import { Contact } from 'app/state/contacts/types'
import { Account } from '../Account/Account'
import { ContactAccountForm } from './ContactAccountForm'
import { layerOverlayMinHeight } from '../layer'
import { LayerContainer } from '../LayerContainer'

interface ContactAccountProps {
Expand All @@ -19,7 +17,6 @@ interface ContactAccountProps {
export const ContactAccount = ({ contact }: ContactAccountProps) => {
const { t } = useTranslation()
const [layerVisibility, setLayerVisibility] = useState(false)
const isMobile = useContext(ResponsiveContext) === 'small'
const dispatch = useDispatch()
const submitHandler = (contact: Contact) => dispatch(contactsActions.update(contact))
const deleteHandler = (address: string) => dispatch(contactsActions.delete(address))
Expand All @@ -42,7 +39,7 @@ export const ContactAccount = ({ contact }: ContactAccountProps) => {
<LayerContainer hideLayer={() => setLayerVisibility(false)}>
<Tabs>
<Tab title={t('toolbar.contacts.manage', 'Manage Contact')}>
<Box flex="grow" justify="center" height={{ min: isMobile ? 'auto' : layerOverlayMinHeight }}>
<Box flex="grow" justify="center">
<ContactAccountForm
contact={contact}
onDelete={address => {
Expand Down
Loading

0 comments on commit 3873f3a

Please sign in to comment.