fix(e2ee) show entire content at all times
This commit is contained in:
parent
cf34b0a783
commit
cd5f2b483f
|
@ -5,14 +5,6 @@
|
||||||
.description {
|
.description {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
margin: 15px 0;
|
margin: 15px 0;
|
||||||
|
|
||||||
.read-more {
|
|
||||||
cursor: pointer;
|
|
||||||
opacity: .9;
|
|
||||||
color: #fff;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.control-row {
|
.control-row {
|
||||||
|
|
|
@ -78,13 +78,10 @@ class E2EESection extends Component<Props, State> {
|
||||||
super(props);
|
super(props);
|
||||||
|
|
||||||
this.state = {
|
this.state = {
|
||||||
enabled: false,
|
enabled: false
|
||||||
expand: false
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// Bind event handlers so they are only bound once for every instance.
|
// Bind event handlers so they are only bound once for every instance.
|
||||||
this._onExpand = this._onExpand.bind(this);
|
|
||||||
this._onExpandKeyPress = this._onExpandKeyPress.bind(this);
|
|
||||||
this._onToggle = this._onToggle.bind(this);
|
this._onToggle = this._onToggle.bind(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -96,7 +93,7 @@ class E2EESection extends Component<Props, State> {
|
||||||
*/
|
*/
|
||||||
render() {
|
render() {
|
||||||
const { _everyoneSupportE2EE, t } = this.props;
|
const { _everyoneSupportE2EE, t } = this.props;
|
||||||
const { enabled, expand } = this.state;
|
const { enabled } = this.state;
|
||||||
const description = t('dialog.e2eeDescription');
|
const description = t('dialog.e2eeDescription');
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -105,25 +102,10 @@ class E2EESection extends Component<Props, State> {
|
||||||
aria-live = 'polite'
|
aria-live = 'polite'
|
||||||
className = 'description'
|
className = 'description'
|
||||||
id = 'e2ee-section-description'>
|
id = 'e2ee-section-description'>
|
||||||
{ expand && description }
|
{ description }
|
||||||
{ !expand && description.substring(0, 100) }
|
{ !_everyoneSupportE2EE && <br /> }
|
||||||
{ !expand && <span
|
{ !_everyoneSupportE2EE && t('dialog.e2eeWarning') }
|
||||||
aria-controls = 'e2ee-section-description'
|
|
||||||
aria-expanded = { expand }
|
|
||||||
className = 'read-more'
|
|
||||||
onClick = { this._onExpand }
|
|
||||||
onKeyPress = { this._onExpandKeyPress }
|
|
||||||
role = 'button'
|
|
||||||
tabIndex = { 0 }>
|
|
||||||
... { t('dialog.readMore') }
|
|
||||||
</span> }
|
|
||||||
</p>
|
</p>
|
||||||
{
|
|
||||||
!_everyoneSupportE2EE
|
|
||||||
&& <span className = 'warning'>
|
|
||||||
{ t('dialog.e2eeWarning') }
|
|
||||||
</span>
|
|
||||||
}
|
|
||||||
<div className = 'control-row'>
|
<div className = 'control-row'>
|
||||||
<label htmlFor = 'e2ee-section-switch'>
|
<label htmlFor = 'e2ee-section-switch'>
|
||||||
{ t('dialog.e2eeLabel') }
|
{ t('dialog.e2eeLabel') }
|
||||||
|
@ -137,35 +119,6 @@ class E2EESection extends Component<Props, State> {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
_onExpand: () => void;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Callback to be invoked when the description is expanded.
|
|
||||||
*
|
|
||||||
* @returns {void}
|
|
||||||
*/
|
|
||||||
_onExpand() {
|
|
||||||
this.setState({
|
|
||||||
expand: true
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
_onExpandKeyPress: (Object) => void;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* KeyPress handler for accessibility.
|
|
||||||
*
|
|
||||||
* @param {Object} e - The key event to handle.
|
|
||||||
*
|
|
||||||
* @returns {void}
|
|
||||||
*/
|
|
||||||
_onExpandKeyPress(e) {
|
|
||||||
if (e.key === ' ' || e.key === 'Enter') {
|
|
||||||
e.preventDefault();
|
|
||||||
this._onExpand();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
_onToggle: () => void;
|
_onToggle: () => void;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
Loading…
Reference in New Issue