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;
}

1
src/components/index.scss
View File

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

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

@ -2,7 +2,8 @@
{
.content-area {
.fas {
.fas,
.svg-inline--fa {
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 { FC, useCallback, useEffect, useState } from 'react';
import { LocalizeText } from '../../api';
import { Column, Flex, Text } from '../../common';
import { UserSettingsUIEvent } from '../../events/user-settings/UserSettingsUIEvent';
import { CreateMessageHook, dispatchMainEvent, SendMessageHook, useUiEvent } from '../../hooks';
import { NitroCardContentView, NitroCardHeaderView } from '../../layout';
@ -116,48 +118,48 @@ export const UserSettingsView: FC<{}> = props =>
return (
<NitroCardView uniqueKey="user-settings" className="user-settings-window" simple>
<NitroCardHeaderView headerText={ LocalizeText('widget.memenu.settings.title') } onCloseClick={event => processAction('close_view')} />
<NitroCardContentView className="text-black d-flex flex-column gap-2">
<div className="d-flex flex-column gap-1">
<div className="form-check">
<NitroCardContentView className="text-black">
<Column gap={ 1 }>
<Flex alignItems="center" gap={ 1 }>
<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>
</div>
<div className="form-check">
<Text>{ LocalizeText('memenu.settings.chat.prefer.old.chat') }</Text>
</Flex>
<Flex alignItems="center" gap={ 1 }>
<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>
</div>
<div className="form-check">
<Text>{ LocalizeText('memenu.settings.other.ignore.room.invites') }</Text>
</Flex>
<Flex alignItems="center" gap={ 1 }>
<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>
</div>
</div>
<div className="d-flex flex-column gap-2">
<div className="fw-bold">{ LocalizeText('widget.memenu.settings.volume') }</div>
<div>
<label>{ LocalizeText('widget.memenu.settings.volume.ui') }</label>
<div className={ 'd-flex align-items-center justify-content-center' }>
<i className={ 'fas' + ((userSettings.volumeSystem === 0) ? ' fa-volume-mute' : '') + ((userSettings.volumeSystem > 0) ? ' fa-volume-down' : '') + ((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') }/>
<i className={ 'fas fa-volume-up' + ((userSettings.volumeSystem < 50) ? ' text-muted': '') } />
</div>
</div>
<div>
<label>{ LocalizeText('widget.memenu.settings.volume.furni') }</label>
<div className={ 'd-flex align-items-center justify-content-center' }>
<i className={ 'fas' + ((userSettings.volumeFurni === 0) ? ' fa-volume-mute' : '') + ((userSettings.volumeFurni > 0) ? ' fa-volume-down' : '') + ((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') }/>
<i className={ 'fas fa-volume-up' + ((userSettings.volumeFurni < 50) ? ' text-muted': '') } />
</div>
</div>
<div>
<label>{ LocalizeText('widget.memenu.settings.volume.trax') }</label>
<div className={ 'd-flex align-items-center justify-content-center' }>
<i className={ 'fas' + ((userSettings.volumeTrax === 0) ? ' fa-volume-mute' : '') + ((userSettings.volumeTrax > 0) ? ' fa-volume-down' : '') + ((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') }/>
<i className={ 'fas fa-volume-up' + ((userSettings.volumeTrax < 50) ? ' text-muted': '') } />
</div>
</div>
</div>
<Text>{ LocalizeText('memenu.settings.other.disable.room.camera.follow') }</Text>
</Flex>
</Column>
<Column>
<Text bold>{ LocalizeText('widget.memenu.settings.volume') }</Text>
<Column gap={ 1 }>
<Text>{ LocalizeText('widget.memenu.settings.volume.ui') }</Text>
<Flex alignItems="center" gap={ 1 }>
<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 w-100" min="0" max="100" step="1" id="volumeSystem" value={ userSettings.volumeSystem } onChange={ event => processAction('system_volume', event.target.value) } onMouseUp={ () => saveRangeSlider('volume') }/>
<FontAwesomeIcon icon="volume-up" className={ (userSettings.volumeSystem < 50) ? 'text-muted' : '' } />
</Flex>
</Column>
<Column gap={ 1 }>
<Text>{ LocalizeText('widget.memenu.settings.volume.furni') }</Text>
<Flex alignItems="center" gap={ 1 }>
<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 w-100" min="0" max="100" step="1" id="volumeFurni" value={ userSettings.volumeFurni } onChange={ event => processAction('furni_volume', event.target.value) } onMouseUp={ () => saveRangeSlider('volume') }/>
<FontAwesomeIcon icon="volume-up" className={ (userSettings.volumeFurni < 50) ? 'text-muted' : '' } />
</Flex>
</Column>
<Column gap={ 1 }>
<Text>{ LocalizeText('widget.memenu.settings.volume.trax') }</Text>
<Flex alignItems="center" gap={ 1 }>
<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 w-100" min="0" max="100" step="1" id="volumeTrax" value={ userSettings.volumeTrax } onChange={ event => processAction('trax_volume', event.target.value) } onMouseUp={ () => saveRangeSlider('volume') }/>
<FontAwesomeIcon icon="volume-up" className={ (userSettings.volumeTrax < 50) ? 'text-muted' : '' } />
</Flex>
</Column>
</Column>
</NitroCardContentView>
</NitroCardView>
);

1
src/views/Styles.scss
View File

@ -10,7 +10,6 @@
@import "./room/RoomView";
@import "./room-host/RoomHostView";
@import "./mod-tools/ModToolsView";
@import "./user-settings/UserSettingsView";
@import "./user-profile/UserProfileVew";
@import "./chat-history/ChatHistoryView";
@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 { NavigatorView } from '../../components/navigator/NavigatorView';
import { ToolbarView } from '../../components/toolbar/ToolbarView';
import { UserSettingsView } from '../../components/user-settings/UserSettingsView';
import { WiredView } from '../../components/wired/WiredView';
import { useRoomSessionManagerEvent } from '../../hooks/events/nitro/session/room-session-manager-event';
import { TransitionAnimation, TransitionAnimationTypes } from '../../layout';
@ -24,7 +25,6 @@ import { NitropediaView } from '../nitropedia/NitropediaView';
import { RightSideView } from '../right-side/RightSideView';
import { RoomHostView } from '../room-host/RoomHostView';
import { UserProfileView } from '../user-profile/UserProfileView';
import { UserSettingsView } from '../user-settings/UserSettingsView';
import { MainViewProps } from './MainView.types';
export const MainView: FC<MainViewProps> = props =>