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

Update user settings

Browse Source
This commit is contained in:
Bill 2022-02-16 17:08:14 -05:00
parent a4c3f5f278
commit aba6bc62dd
6 changed files with 48 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/assets/styles/icons.scss
View File

@ -1,4 +1,5 @@
.fas { .fas,
.svg-inline--fa {
line-height: 0 !important; line-height: 0 !important;
} }

1
src/components/index.scss
View File

@ -6,4 +6,5 @@
@import './inventory/InventoryView'; @import './inventory/InventoryView';
@import './navigator/NavigatorView'; @import './navigator/NavigatorView';
@import './toolbar/ToolbarView'; @import './toolbar/ToolbarView';
@import './user-settings/UserSettingsView';
@import './wired/WiredView'; @import './wired/WiredView';

3
src/views/user-settings/UserSettingsView.scss → src/components/user-settings/UserSettingsView.scss
View File

@ -2,7 +2,8 @@
{ {
.content-area { .content-area {
.fas { .fas,
.svg-inline--fa {
width: 20px; width: 20px;
} }
} }

80
src/views/user-settings/UserSettingsView.tsx → src/components/user-settings/UserSettingsView.tsx
View File

@ -1,6 +1,8 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { NitroSettingsEvent, UserSettingsCameraFollowComposer, UserSettingsEvent, UserSettingsOldChatComposer, UserSettingsRoomInvitesComposer, UserSettingsSoundComposer } from '@nitrots/nitro-renderer'; import { NitroSettingsEvent, UserSettingsCameraFollowComposer, UserSettingsEvent, UserSettingsOldChatComposer, UserSettingsRoomInvitesComposer, UserSettingsSoundComposer } from '@nitrots/nitro-renderer';
import { FC, useCallback, useEffect, useState } from 'react'; import { FC, useCallback, useEffect, useState } from 'react';
import { LocalizeText } from '../../api'; import { LocalizeText } from '../../api';
import { Column, Flex, Text } from '../../common';
import { UserSettingsUIEvent } from '../../events/user-settings/UserSettingsUIEvent'; import { UserSettingsUIEvent } from '../../events/user-settings/UserSettingsUIEvent';
import { CreateMessageHook, dispatchMainEvent, SendMessageHook, useUiEvent } from '../../hooks'; import { CreateMessageHook, dispatchMainEvent, SendMessageHook, useUiEvent } from '../../hooks';
import { NitroCardContentView, NitroCardHeaderView } from '../../layout'; import { NitroCardContentView, NitroCardHeaderView } from '../../layout';
@ -116,48 +118,48 @@ export const UserSettingsView: FC<{}> = props =>
return ( return (
<NitroCardView uniqueKey="user-settings" className="user-settings-window" simple> <NitroCardView uniqueKey="user-settings" className="user-settings-window" simple>
<NitroCardHeaderView headerText={ LocalizeText('widget.memenu.settings.title') } onCloseClick={event => processAction('close_view')} /> <NitroCardHeaderView headerText={ LocalizeText('widget.memenu.settings.title') } onCloseClick={event => processAction('close_view')} />
<NitroCardContentView className="text-black d-flex flex-column gap-2"> <NitroCardContentView className="text-black">
<div className="d-flex flex-column gap-1"> <Column gap={ 1 }>
<div className="form-check"> <Flex alignItems="center" gap={ 1 }>
<input className="form-check-input" type="checkbox" checked={ userSettings.oldChat } onChange={ event => processAction('oldchat', event.target.checked) } /> <input className="form-check-input" type="checkbox" checked={ userSettings.oldChat } onChange={ event => processAction('oldchat', event.target.checked) } />
<label className="form-check-label">{ LocalizeText('memenu.settings.chat.prefer.old.chat') }</label> <Text>{ LocalizeText('memenu.settings.chat.prefer.old.chat') }</Text>
</div> </Flex>
<div className="form-check"> <Flex alignItems="center" gap={ 1 }>
<input className="form-check-input" type="checkbox" checked={ userSettings.roomInvites } onChange={ event => processAction('room_invites', event.target.checked) } /> <input className="form-check-input" type="checkbox" checked={ userSettings.roomInvites } onChange={ event => processAction('room_invites', event.target.checked) } />
<label className="form-check-label">{ LocalizeText('memenu.settings.other.ignore.room.invites') }</label> <Text>{ LocalizeText('memenu.settings.other.ignore.room.invites') }</Text>
</div> </Flex>
<div className="form-check"> <Flex alignItems="center" gap={ 1 }>
<input className="form-check-input" type="checkbox" checked={ userSettings.cameraFollow } onChange={ event => processAction('camera_follow', event.target.checked) } /> <input className="form-check-input" type="checkbox" checked={ userSettings.cameraFollow } onChange={ event => processAction('camera_follow', event.target.checked) } />
<label className="form-check-label">{ LocalizeText('memenu.settings.other.disable.room.camera.follow') }</label> <Text>{ LocalizeText('memenu.settings.other.disable.room.camera.follow') }</Text>
</div> </Flex>
</div> </Column>
<div className="d-flex flex-column gap-2"> <Column>
<div className="fw-bold">{ LocalizeText('widget.memenu.settings.volume') }</div> <Text bold>{ LocalizeText('widget.memenu.settings.volume') }</Text>
<div> <Column gap={ 1 }>
<label>{ LocalizeText('widget.memenu.settings.volume.ui') }</label> <Text>{ LocalizeText('widget.memenu.settings.volume.ui') }</Text>
<div className={ 'd-flex align-items-center justify-content-center' }> <Flex alignItems="center" gap={ 1 }>
<i className={ 'fas' + ((userSettings.volumeSystem === 0) ? ' fa-volume-mute' : '') + ((userSettings.volumeSystem > 0) ? ' fa-volume-down' : '') + ((userSettings.volumeSystem >= 50) ? ' text-muted' : '') } /> <FontAwesomeIcon icon={ ((userSettings.volumeSystem === 0) ? 'volume-mute' : (userSettings.volumeSystem > 0) ? 'volume-down' : null) } className={ (userSettings.volumeSystem >= 50) ? 'text-muted' : '' } />
<input type="range" className="custom-range ms-2 me-2 w-100" min="0" max="100" step="1" id="volumeSystem" value={ userSettings.volumeSystem } onChange={ event => processAction('system_volume', event.target.value) } onMouseUp={ () => saveRangeSlider('volume') }/> <input type="range" className="custom-range w-100" min="0" max="100" step="1" id="volumeSystem" value={ userSettings.volumeSystem } onChange={ event => processAction('system_volume', event.target.value) } onMouseUp={ () => saveRangeSlider('volume') }/>
<i className={ 'fas fa-volume-up' + ((userSettings.volumeSystem < 50) ? ' text-muted': '') } /> <FontAwesomeIcon icon="volume-up" className={ (userSettings.volumeSystem < 50) ? 'text-muted' : '' } />
</div> </Flex>
</div> </Column>
<div> <Column gap={ 1 }>
<label>{ LocalizeText('widget.memenu.settings.volume.furni') }</label> <Text>{ LocalizeText('widget.memenu.settings.volume.furni') }</Text>
<div className={ 'd-flex align-items-center justify-content-center' }> <Flex alignItems="center" gap={ 1 }>
<i className={ 'fas' + ((userSettings.volumeFurni === 0) ? ' fa-volume-mute' : '') + ((userSettings.volumeFurni > 0) ? ' fa-volume-down' : '') + ((userSettings.volumeFurni >= 50) ? ' text-muted' : '') } /> <FontAwesomeIcon icon={ ((userSettings.volumeFurni === 0) ? 'volume-mute' : (userSettings.volumeFurni > 0) ? 'volume-down' : null) } className={ (userSettings.volumeFurni >= 50) ? 'text-muted' : '' } />
<input type="range" className="custom-range ms-2 me-2 w-100" min="0" max="100" step="1" id="volumeFurni" value={ userSettings.volumeFurni } onChange={ event => processAction('furni_volume', event.target.value) } onMouseUp={ () => saveRangeSlider('volume') }/> <input type="range" className="custom-range w-100" min="0" max="100" step="1" id="volumeFurni" value={ userSettings.volumeFurni } onChange={ event => processAction('furni_volume', event.target.value) } onMouseUp={ () => saveRangeSlider('volume') }/>
<i className={ 'fas fa-volume-up' + ((userSettings.volumeFurni < 50) ? ' text-muted': '') } /> <FontAwesomeIcon icon="volume-up" className={ (userSettings.volumeFurni < 50) ? 'text-muted' : '' } />
</div> </Flex>
</div> </Column>
<div> <Column gap={ 1 }>
<label>{ LocalizeText('widget.memenu.settings.volume.trax') }</label> <Text>{ LocalizeText('widget.memenu.settings.volume.trax') }</Text>
<div className={ 'd-flex align-items-center justify-content-center' }> <Flex alignItems="center" gap={ 1 }>
<i className={ 'fas' + ((userSettings.volumeTrax === 0) ? ' fa-volume-mute' : '') + ((userSettings.volumeTrax > 0) ? ' fa-volume-down' : '') + ((userSettings.volumeTrax >= 50) ? ' text-muted' : '') } /> <FontAwesomeIcon icon={ ((userSettings.volumeTrax === 0) ? 'volume-mute' : (userSettings.volumeTrax > 0) ? 'volume-down' : null) } className={ (userSettings.volumeTrax >= 50) ? 'text-muted' : '' } />
<input type="range" className="custom-range ms-2 me-2 w-100" min="0" max="100" step="1" id="volumeTrax" value={ userSettings.volumeTrax } onChange={ event => processAction('trax_volume', event.target.value) } onMouseUp={ () => saveRangeSlider('volume') }/> <input type="range" className="custom-range w-100" min="0" max="100" step="1" id="volumeTrax" value={ userSettings.volumeTrax } onChange={ event => processAction('trax_volume', event.target.value) } onMouseUp={ () => saveRangeSlider('volume') }/>
<i className={ 'fas fa-volume-up' + ((userSettings.volumeTrax < 50) ? ' text-muted': '') } /> <FontAwesomeIcon icon="volume-up" className={ (userSettings.volumeTrax < 50) ? 'text-muted' : '' } />
</div> </Flex>
</div> </Column>
</div> </Column>
</NitroCardContentView> </NitroCardContentView>
</NitroCardView> </NitroCardView>
); );

1
src/views/Styles.scss
View File

@ -10,7 +10,6 @@
@import "./room/RoomView"; @import "./room/RoomView";
@import "./room-host/RoomHostView"; @import "./room-host/RoomHostView";
@import "./mod-tools/ModToolsView"; @import "./mod-tools/ModToolsView";
@import "./user-settings/UserSettingsView";
@import "./user-profile/UserProfileVew"; @import "./user-profile/UserProfileVew";
@import "./chat-history/ChatHistoryView"; @import "./chat-history/ChatHistoryView";
@import "./floorplan-editor/FloorplanEditorView"; @import "./floorplan-editor/FloorplanEditorView";

2
src/views/main/MainView.tsx
View File

@ -9,6 +9,7 @@ import { HelpView } from '../../components/help/HelpView';
import { InventoryView } from '../../components/inventory/InventoryView'; import { InventoryView } from '../../components/inventory/InventoryView';
import { NavigatorView } from '../../components/navigator/NavigatorView'; import { NavigatorView } from '../../components/navigator/NavigatorView';
import { ToolbarView } from '../../components/toolbar/ToolbarView'; import { ToolbarView } from '../../components/toolbar/ToolbarView';
import { UserSettingsView } from '../../components/user-settings/UserSettingsView';
import { WiredView } from '../../components/wired/WiredView'; import { WiredView } from '../../components/wired/WiredView';
import { useRoomSessionManagerEvent } from '../../hooks/events/nitro/session/room-session-manager-event'; import { useRoomSessionManagerEvent } from '../../hooks/events/nitro/session/room-session-manager-event';
import { TransitionAnimation, TransitionAnimationTypes } from '../../layout'; import { TransitionAnimation, TransitionAnimationTypes } from '../../layout';
@ -24,7 +25,6 @@ import { NitropediaView } from '../nitropedia/NitropediaView';
import { RightSideView } from '../right-side/RightSideView'; import { RightSideView } from '../right-side/RightSideView';
import { RoomHostView } from '../room-host/RoomHostView'; import { RoomHostView } from '../room-host/RoomHostView';
import { UserProfileView } from '../user-profile/UserProfileView'; import { UserProfileView } from '../user-profile/UserProfileView';
import { UserSettingsView } from '../user-settings/UserSettingsView';
import { MainViewProps } from './MainView.types'; import { MainViewProps } from './MainView.types';
export const MainView: FC<MainViewProps> = props => export const MainView: FC<MainViewProps> = props =>