Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: mweb keyboard popup over change name #1699

Merged
merged 5 commits into from
Aug 24, 2023
Merged

fix: mweb keyboard popup over change name #1699

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
afda952
fix: set input type to search
KaustubhKumar05 Aug 24, 2023
827d391
fix: spacing
KaustubhKumar05 Aug 24, 2023
acbd56b
fix: update spacing
KaustubhKumar05 Aug 24, 2023
02697cc
fix: update spacing
KaustubhKumar05 Aug 24, 2023
8e5e279
fix: paroty
KaustubhKumar05 Aug 24, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 13 additions & 8 deletions packages/roomkit-react/src/Prebuilt/components/MoreSettings/ChangeNameContent.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,30 +27,35 @@ export const ChangeNameContent = ({
color: '$on_surface_high',
fontWeight: '$semiBold',
display: 'flex',
borderBottom: isMobile ? '1px solid $border_default' : '',
pb: '$6',
mb: '$8',
px: isMobile ? '$8' : '',
'@md': { px: '$8', borderBottom: '1px solid $border_default' },
}}
>
{isMobile ? <ChevronLeftIcon onClick={onBackClick} style={{ marginRight: '0.5rem' }} /> : null}
Change Name
<Box css={{ color: 'inherit', ml: 'auto' }} onClick={onExit}>
<Box
css={{ color: 'inherit', ml: 'auto', '&:hover': { color: '$on_surface_medium', cursor: 'pointer' } }}
onClick={onExit}
>
<CrossIcon />
</Box>
</Text>
<Flex justify="center" align="center" css={{ my: '$8', w: '100%', px: isMobile ? '$8' : '' }}>
<Text variant="sm" css={{ color: '$on_surface_medium', pb: '$6', mb: '$8', '@md': { px: '$8', mt: '$4' } }}>
Your name will be visible to other participants in the session.
</Text>
<Flex justify="center" align="center" css={{ my: '$8', w: '100%', '@md': { px: '$8' } }}>
<Input
css={{ width: '100%', bg: '$surface_default' }}
value={currentName}
// Prevents popup from showing up on chrome mweb
type={isMobile ? 'search' : 'text'}
onChange={e => {
setCurrentName(e.target.value);
}}
autoComplete="name"
required
data-testid="change_name_field"
onKeyDown={async e => {
if (e.key === 'Enter') {
if (e.key === 'Enter' && currentName.trim().length > 0 && currentName !== localPeerName) {
e.preventDefault();
changeName();
}
Expand All @@ -65,7 +70,7 @@ export const ChangeNameContent = ({
width: '100%',
gap: '$md',
mt: '$10',
px: isMobile ? '$4' : '',
'@md': { px: '$4' },
}}
>
{isMobile ? null : (
Expand Down
2 changes: 1 addition & 1 deletion packages/roomkit-react/src/Prebuilt/components/MoreSettings/ChangeNameModal.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ export const ChangeNameModal = ({ onOpenChange, openParentSheet = null }) => {
if (isMobile) {
return (
<Sheet.Root defaultOpen onOpenChange={onOpenChange}>
<Sheet.Content css={{ bg: '$surface_dim', py: '$8', px: 0 }}>
<Sheet.Content css={{ bg: '$surface_dim', p: '$8 0' }}>
<ChangeNameContent {...props} />
</Sheet.Content>
</Sheet.Root>
Expand Down
2 changes: 1 addition & 1 deletion packages/roomkit-react/src/Prebuilt/components/TileMenu/TileMenu.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@ const TileMenu = ({ audioTrackID, videoTrackID, peerID, isScreenshare = false, c
<CrossIcon />
</Sheet.Close>
</Flex>
<Box css={{ px: '$8' }}>
<Box css={{ px: '$8', pb: '$8' }}>
<TileMenuContent {...props} closeSheetOnClick={() => setOpen(false)} />
</Box>
</Sheet.Content>
Expand Down
4 changes: 3 additions & 1 deletion packages/roomkit-react/src/Prebuilt/components/TileMenu/TileMenuContent.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -220,7 +220,9 @@ export const TileMenuContent = props => {
}}
>
<PencilIcon />
<span>Change Name</span>
<Text variant="sm" css={{ '@md': { fontWeight: '$semiBold' }, c: '$on_surface_high' }}>
Change Name
</Text>
</StyledMenuTile.ItemButton>
) : null}
</>
Expand Down