Add tooltips for hotkeys

master
Stefan Otto 2018-12-05 15:57:58 +01:00
parent 639b429d9d
commit bbb8f67dff
2 changed files with 35 additions and 22 deletions

View File

@ -110,6 +110,10 @@ class Me extends React.Component
{connected ?
<div className={classnames('controls', 'visible')}>
<div
data-tip='keyboard shortcut: &lsquo;m&lsquo;'
data-type='dark'
data-place='bottom'
data-for='me'
className={classnames('button', 'mic', micState, {
disabled : me.audioInProgress,
visible : micState == 'off' || this.state.controlsVisible
@ -119,7 +123,10 @@ class Me extends React.Component
micState === 'on' ? onMuteMic() : onUnmuteMic();
}}
/>
<ReactTooltip
id='me'
effect='solid'
/>
<div
className={classnames('button', 'webcam', webcamState, {
disabled : me.webcamInProgress,
@ -160,15 +167,6 @@ class Me extends React.Component
</div>
:null
}
{this._tooltip ?
<ReactTooltip
effect='solid'
delayShow={100}
delayHide={100}
/>
:null
}
</div>
);
}

View File

@ -5,6 +5,7 @@ import * as requestActions from '../redux/requestActions';
import * as stateActions from '../redux/stateActions';
import PropTypes from 'prop-types';
import Dropdown from 'react-dropdown';
import ReactTooltip from 'react-tooltip';
const modes = [ {
value : 'democratic',
@ -58,7 +59,14 @@ const Settings = ({
onChange={(device) => handleChangeAudioDevice(device.value)}
placeholder={audioDevicesText}
/>
<ReactTooltip
effect='solid'
/>
<div
data-tip='keyboard shortcut: &lsquo;a&lsquo;'
data-type='dark'
data-place='left'
>
<input
id='room-mode'
type='checkbox'
@ -66,7 +74,13 @@ const Settings = ({
onChange={onToggleAdvancedMode}
/>
<label htmlFor='room-mode'>Advanced mode</label>
</div>
<div
data-tip='keyboard shortcut: type a digit'
data-type='dark'
data-place='left'
>
<Dropdown
options={modes}
value={findOption(modes, room.mode)}
@ -74,6 +88,7 @@ const Settings = ({
/>
</div>
</div>
</div>
);
};