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

Update user settings

Browse Source
This commit is contained in:
Bill 2021-08-15 01:39:54 -04:00
parent f40e717dbc
commit 092f6a831c
2 changed files with 45 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/views/user-settings/UserSettingsView.scss
View File

@ -1,15 +1,9 @@
.user-settings-window
{
.content-area
{
color: black;
}
.content-area {
.custom-range {
margin-top: 3px;
.fas {
width: 20px;
}
.icon-container {
width: 50px;
}
}

74
src/views/user-settings/UserSettingsView.tsx
View File

@ -8,8 +8,8 @@ import { LocalizeText } from '../../utils';
export const UserSettingsView: FC<{}> = props =>
{
const [isVisible, setIsVisible] = useState(false);
const [userSettings, setUserSettings] = useState<NitroSettingsEvent>(null);
const [ isVisible, setIsVisible ] = useState(false);
const [ userSettings, setUserSettings ] = useState<NitroSettingsEvent>(null);
const onUserSettingsUIEvent = useCallback((event: UserSettingsUIEvent) =>
{
@ -114,67 +114,47 @@ export const UserSettingsView: FC<{}> = props =>
if (!isVisible) return null;
return (
<div className="user-settings-window">
<NitroCardView>
<NitroCardHeaderView headerText={LocalizeText('widget.memenu.settings.title')} onCloseClick={event => processAction('close_view')} />
<NitroCardContentView>
<NitroCardView uniqueKey="user-settings" className="user-settings-window">
<NitroCardHeaderView headerText={ LocalizeText('widget.memenu.settings.title') } onCloseClick={event => processAction('close_view')} />
<NitroCardContentView className="text-black">
<div className="form-check">
<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>
<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">
<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>
<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">
<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>
<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 className="mt-3 mb-2">{LocalizeText('widget.memenu.settings.volume')}</div>
<div className="mt-3 mb-2">{ LocalizeText('widget.memenu.settings.volume') }</div>
<div className="mb-2">
<label>{LocalizeText('widget.memenu.settings.volume.ui')}</label>
<div className="d-flex flex-row">
<div className={ 'icon-container ' + (userSettings.volumeSystem >= 50 ? 'text-muted' : '')}>
<i className={'fas ' + (userSettings.volumeSystem === 0 ? 'fa-volume-mute' : '') + (userSettings.volumeSystem > 0 ? 'fa-volume-down' : '')}></i>
</div>
<div className="w-100 ml-2 mr-2">
<input type="range" className="custom-range" min="0" max="100" step="1" id="volumeSystem" value={userSettings.volumeSystem} onChange={event => processAction("system_volume", event.target.value)} onMouseUp={ () => saveRangeSlider("volume")}/>
</div>
<div className={ userSettings.volumeSystem < 50 ? 'text-muted': '' }>
<i className="fas fa-volume-up"></i>
</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 className="mb-2">
<label>{LocalizeText('widget.memenu.settings.volume.furni')}</label>
<div className="d-flex flex-row">
<div className={ 'icon-container ' + (userSettings.volumeFurni >= 50 ? 'text-muted' : '')}>
<i className={'fas ' + (userSettings.volumeFurni === 0 ? 'fa-volume-mute' : '') + (userSettings.volumeFurni > 0 ? 'fa-volume-down' : '')}></i>
</div>
<div className="w-100 ml-2 mr-2">
<input type="range" className="custom-range" min="0" max="100" step="1" id="volumeSystem" value={userSettings.volumeFurni} onChange={event => processAction("furni_volume", event.target.value)} onMouseUp={ () => saveRangeSlider("volume")}/>
</div>
<div className={ userSettings.volumeFurni < 50 ? 'text-muted': '' }>
<i className="fas fa-volume-up"></i>
</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 className="mb-2">
<label>{LocalizeText('widget.memenu.settings.volume.trax')}</label>
<div className="d-flex flex-row">
<div className={'icon-container ' + (userSettings.volumeTrax >= 50 ? 'text-muted' : '')}>
<i className={'fas ' + (userSettings.volumeTrax === 0 ? 'fa-volume-mute' : '') + (userSettings.volumeTrax > 0 ? 'fa-volume-down' : '')}></i>
</div>
<div className="w-100 ml-2 mr-2">
<input type="range" className="custom-range" min="0" max="100" step="1" id="volumeSystem" value={userSettings.volumeTrax} onChange={event => processAction("trax_volume", event.target.value)} onMouseUp={ () => saveRangeSlider("volume")}/>
</div>
<div className={ userSettings.volumeTrax < 50 ? 'text-muted': '' }>
<i className="fas fa-volume-up"></i>
</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>
</NitroCardContentView>
</NitroCardView>
</div>
);
}