mirror of
https://github.com/billsonnn/nitro-react.git
synced 2024-10-23 11:23:05 +02:00
Update user settings
This commit is contained in:
Bill
parent
f40e717dbc
commit
092f6a831c
@ -1,15 +1,9 @@
|
||||
.user-settings-window
|
||||
{
|
||||
.content-area
|
||||
{
|
||||
color: black;
|
||||
}
|
||||
.content-area {
|
||||
|
||||
.custom-range {
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.icon-container {
|
||||
width: 50px;
|
||||
.fas {
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
<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>
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
</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 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 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>
|
||||
</div>
|
||||
<div className="mb-2">
|
||||
<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 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>
|
||||
</div>
|
||||
<div className="mb-2">
|
||||
<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 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>
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</NitroCardContentView>
|
||||
</NitroCardView>
|
||||
</div>
|
||||
</div>
|
||||
</NitroCardContentView>
|
||||
</NitroCardView>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user