nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-23 06:40:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update doorbell widget layout

Browse Source
This commit is contained in:
Bill 2022-03-02 22:20:21 -05:00
parent 35006024ab
commit c8a7a17049
5 changed files with 44 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/App.scss
View File

@ -78,6 +78,9 @@ $nitro-group-manager-height: 355px;
$nitro-chooser-width: 200px;
$nitro-chooser-height: 200px;
$nitro-doorbell-width: 300px;
$nitro-doorbell-height: 200px;
$nitro-guide-tool-width: 250px;
.nitro-app {

16
src/components/navigator/views/room-doorbell/NavigatorRoomDoorbellView.tsx
View File

@ -48,13 +48,15 @@ export const NavigatorRoomDoorbellView: FC<NavigatorRoomDoorbellViewProps> = pro
{ (state === UpdateDoorStateEvent.STATE_NO_ANSWER) &&
<Text>{ LocalizeText('navigator.doorbell.no.answer') }</Text> }
</Column>
{ (state === UpdateDoorStateEvent.START_DOORBELL) &&
<Button variant="success" size="sm" onClick={ ring }>
{ LocalizeText('navigator.doorbell.button.ring') }
</Button> }
<Button variant="danger" size="sm" onClick={ close }>
{ LocalizeText('generic.cancel') }
</Button>
<Column gap={ 1 }>
{ (state === UpdateDoorStateEvent.START_DOORBELL) &&
<Button variant="success" size="sm" onClick={ ring }>
{ LocalizeText('navigator.doorbell.button.ring') }
</Button> }
<Button variant="danger" size="sm" onClick={ close }>
{ LocalizeText('generic.cancel') }
</Button>
</Column>
</NitroCardContentView>
</NitroCardView>
);

5
src/views/room/widgets/RoomWidgets.scss
View File

@ -94,6 +94,11 @@
width: 22px;
}
.nitro-widget-doorbell {
width: $nitro-doorbell-width;
height: $nitro-doorbell-height;
}
@import './avatar-info/AvatarInfoWidgetView';
@import './chat/ChatWidgetView';
@import './chat-input/ChatInputView';

29
src/views/room/widgets/doorbell/DoorbellWidgetItemView.tsx
View File

@ -1,29 +0,0 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { FC } from 'react';
import { Button, ButtonGroup, Flex, Text } from '../../../../common';
interface DoorbellWidgetItemViewProps
{
userName: string;
accept: () => void;
deny: () => void;
}
export const DoorbellWidgetItemView: FC<DoorbellWidgetItemViewProps> = props =>
{
const { userName = '', accept = null, deny = null } = props;
return (
<Flex alignItems="center" justifyContent="between">
<Text bold>{ userName }</Text>
<ButtonGroup>
<Button variant="success" onClick={ accept }>
<FontAwesomeIcon icon="check" />
</Button>
<Button variant="danger" onClick={ deny }>
<FontAwesomeIcon icon="times" />
</Button>
</ButtonGroup>
</Flex>
);
}

32
src/views/room/widgets/doorbell/DoorbellWidgetView.tsx
View File

@ -1,10 +1,9 @@
import { FC, useCallback, useState } from 'react';
import { LocalizeText, RoomWidgetDoorbellEvent, RoomWidgetLetUserInMessage } from '../../../../api';
import { Column } from '../../../../common';
import { Base, Button, Column, Flex, Grid } from '../../../../common';
import { BatchUpdates, CreateEventDispatcherHook } from '../../../../hooks';
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
import { useRoomContext } from '../../context/RoomContext';
import { DoorbellWidgetItemView } from './DoorbellWidgetItemView';
export const DoorbellWidgetView: FC<{}> = props =>
{
@ -68,9 +67,32 @@ export const DoorbellWidgetView: FC<{}> = props =>
return (
<NitroCardView className="nitro-widget-doorbell" simple={ true }>
<NitroCardHeaderView headerText={ LocalizeText('navigator.doorbell.title') } onCloseClick={ event => setIsVisible(false) } />
<NitroCardContentView overflow="hidden">
<Column overflow="auto">
{ users && (users.length > 0) && users.map(userName => <DoorbellWidgetItemView key={ userName } userName={ userName } accept={ () => answer(userName, true) } deny={ () => answer(userName, false) } />) }
<NitroCardContentView overflow="hidden" gap={ 0 }>
<Column gap={ 2 }>
<Grid gap={ 1 } className="text-black fw-bold border-bottom px-1 pb-1">
<Base className="g-col-6">Username</Base>
<Base className="g-col-6"></Base>
</Grid>
</Column>
<Column overflow="auto" className="striped-children" gap={ 0 }>
{ users && (users.length > 0) && users.map(userName =>
{
return (
<Grid key={ userName } gap={ 1 } alignItems="center" className="text-black border-bottom p-1">
<Base className="g-col-6">{ userName }</Base>
<Base className="g-col-6">
<Flex alignItems="center" justifyContent="end" gap={ 1 }>
<Button variant="success" onClick={ () => answer(userName, true) }>
{ LocalizeText('generic.accept') }
</Button>
<Button variant="danger" onClick={ () => answer(userName, false) }>
{ LocalizeText('generic.deny') }
</Button>
</Flex>
</Base>
</Grid>
);
}) }
</Column>
</NitroCardContentView>
</NitroCardView>