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 setting styling

Browse Source
This commit is contained in:
MyNameIsBatman 2022-02-13 12:52:28 -03:00
parent 9d664896d5
commit 3ebe441906
1 changed files with 38 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -114,44 +114,48 @@ export const UserSettingsView: FC<{}> = props =>
if(!isVisible) return null; if(!isVisible) return null;
return ( return (
<NitroCardView uniqueKey="user-settings" className="user-settings-window"> <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"> <NitroCardContentView className="text-black d-flex flex-column gap-2">
<div className="form-check"> <div className="d-flex flex-column gap-1">
<input className="form-check-input" type="checkbox" checked={ userSettings.oldChat } onChange={ event => processAction('oldchat', event.target.checked) } /> <div className="form-check">
<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) } />
</div> <label className="form-check-label">{ LocalizeText('memenu.settings.chat.prefer.old.chat') }</label>
<div className="form-check"> </div>
<input className="form-check-input" type="checkbox" checked={ userSettings.roomInvites } onChange={ event => processAction('room_invites', event.target.checked) } /> <div className="form-check">
<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) } />
</div> <label className="form-check-label">{ LocalizeText('memenu.settings.other.ignore.room.invites') }</label>
<div className="form-check"> </div>
<input className="form-check-input" type="checkbox" checked={ userSettings.cameraFollow } onChange={ event => processAction('camera_follow', event.target.checked) } /> <div className="form-check">
<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) } />
</div> <label className="form-check-label">{ LocalizeText('memenu.settings.other.disable.room.camera.follow') }</label>
<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>
</div> </div>
<div className="mb-2"> <div className="d-flex flex-column gap-2">
<label>{ LocalizeText('widget.memenu.settings.volume.furni') }</label> <div className="fw-bold">{ LocalizeText('widget.memenu.settings.volume') }</div>
<div className={ 'd-flex align-items-center justify-content-center' }> <div>
<i className={ 'fas' + ((userSettings.volumeFurni === 0) ? ' fa-volume-mute' : '') + ((userSettings.volumeFurni > 0) ? ' fa-volume-down' : '') + ((userSettings.volumeFurni >= 50) ? ' text-muted' : '') } /> <label>{ LocalizeText('widget.memenu.settings.volume.ui') }</label>
<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') }/> <div className={ 'd-flex align-items-center justify-content-center' }>
<i className={ 'fas fa-volume-up' + ((userSettings.volumeFurni < 50) ? ' text-muted': '') } /> <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>
</div> <div>
<div className="mb-2"> <label>{ LocalizeText('widget.memenu.settings.volume.furni') }</label>
<label>{ LocalizeText('widget.memenu.settings.volume.trax') }</label> <div className={ 'd-flex align-items-center justify-content-center' }>
<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' : '') } />
<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="volumeFurni" value={ userSettings.volumeFurni } onChange={ event => processAction('furni_volume', event.target.value) } onMouseUp={ () => saveRangeSlider('volume') }/>
<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.volumeFurni < 50) ? ' text-muted': '') } />
<i className={ 'fas fa-volume-up' + ((userSettings.volumeTrax < 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>
</div> </div>
</NitroCardContentView> </NitroCardContentView>