feat(native-participants-pane) slider ui fixes
This commit is contained in:
parent
600af62945
commit
7854437e31
|
@ -1,9 +1,8 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import Slider from '@react-native-community/slider';
|
|
||||||
import _ from 'lodash';
|
import _ from 'lodash';
|
||||||
import React, { PureComponent } from 'react';
|
import React, { PureComponent } from 'react';
|
||||||
import { View } from 'react-native';
|
import { View, Slider } from 'react-native';
|
||||||
import { withTheme } from 'react-native-paper';
|
import { withTheme } from 'react-native-paper';
|
||||||
|
|
||||||
import { translate } from '../../../base/i18n';
|
import { translate } from '../../../base/i18n';
|
||||||
|
@ -16,6 +15,9 @@ import { connect } from '../../../base/redux';
|
||||||
import { setVolume } from '../../../participants-pane/actions.native';
|
import { setVolume } from '../../../participants-pane/actions.native';
|
||||||
import { VOLUME_SLIDER_SCALE } from '../../constants';
|
import { VOLUME_SLIDER_SCALE } from '../../constants';
|
||||||
|
|
||||||
|
import styles from './styles';
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The type of the React {@code Component} props of {@link VolumeSlider}.
|
* The type of the React {@code Component} props of {@link VolumeSlider}.
|
||||||
*/
|
*/
|
||||||
|
@ -101,16 +103,18 @@ class VolumeSlider extends PureComponent<Props, State> {
|
||||||
const onVolumeChange = _startSilent ? undefined : this._onVolumeChange;
|
const onVolumeChange = _startSilent ? undefined : this._onVolumeChange;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View>
|
<View style = { styles.volumeSliderContainer } >
|
||||||
<Icon
|
<Icon
|
||||||
size = { 24 }
|
size = { 20 }
|
||||||
src = { IconVolumeEmpty } />
|
src = { IconVolumeEmpty }
|
||||||
|
style = { styles.volumeIcon } />
|
||||||
<Slider
|
<Slider
|
||||||
maximumTrackTintColor = { palette.field02 }
|
maximumTrackTintColor = { palette.field02 }
|
||||||
maximumValue = { VOLUME_SLIDER_SCALE }
|
maximumValue = { VOLUME_SLIDER_SCALE }
|
||||||
minimumTrackTintColor = { palette.action01 }
|
minimumTrackTintColor = { palette.action01 }
|
||||||
minimumValue = { 0 }
|
minimumValue = { 0 }
|
||||||
onValueChange = { onVolumeChange }
|
onValueChange = { onVolumeChange }
|
||||||
|
style = { styles.sliderContainer }
|
||||||
thumbTintColor = { palette.field02 }
|
thumbTintColor = { palette.field02 }
|
||||||
value = { volumeLevel } />
|
value = { volumeLevel } />
|
||||||
</View>
|
</View>
|
||||||
|
|
|
@ -63,7 +63,7 @@ export default createStyleSheet({
|
||||||
},
|
},
|
||||||
|
|
||||||
sliderContainer: {
|
sliderContainer: {
|
||||||
marginLeft: BaseTheme.spacing[3],
|
marginLeft: BaseTheme.spacing[2],
|
||||||
minWidth: '88%'
|
minWidth: '92%'
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in New Issue