mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-29 12:58:53 +03:00
Code Issues Projects Releases Packages Wiki Activity

Fix ugly integration button, use hover to show error

Browse source 
This simplifies the implementation of the button but also adjusts the appeareance such that a warning triangle appears in the top-right of button if an error has occured. The error popup will now appear when hovering over the button (with related CSS).
This commit is contained in:
Luke Barnard 2017-09-19 11:57:23 +01:00
parent 658285ebbf
commit 61a0f1ef67
1 changed files with 22 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
src/components/views/elements/ManageIntegsButton.js
View file

@ -17,6 +17,7 @@ limitations under the License.
import React from 'react';
import PropTypes from 'prop-types';
import sdk from '../../../index';
import classNames from 'classnames';
import SdkConfig from '../../../SdkConfig';
import ScalarAuthClient from '../../../ScalarAuthClient';
import ScalarMessaging from '../../../ScalarMessaging';
@ -31,11 +32,9 @@ export default class ManageIntegsButton extends React.Component {
this.state = {
scalarError: null,
showIntegrationsError: false,
};
this.onManageIntegrations = this.onManageIntegrations.bind(this);
this.onShowIntegrationsError = this.onShowIntegrationsError.bind(this);
}
componentWillMount() {
@ -59,6 +58,9 @@ export default class ManageIntegsButton extends React.Component {
onManageIntegrations(ev) {
ev.preventDefault();
if (this.state.scalarError && !this.scalarClient.hasCredentials()) {
return;
}
const IntegrationsManager = sdk.getComponent("views.settings.IntegrationsManager");
Modal.createDialog(IntegrationsManager, {
src: (this.scalarClient !== null && this.scalarClient.hasCredentials()) ?
@ -67,45 +69,33 @@ export default class ManageIntegsButton extends React.Component {
}, "mx_IntegrationsManager");
}
onShowIntegrationsError(ev) {
ev.preventDefault();
this.setState({
showIntegrationsError: !this.state.showIntegrationsError,
});
}
render() {
let integrationsButton = <div />;
let integrationsError;
let integrationsWarningTriangle = <div />;
let integrationsErrorPopup = <div />;
if (this.scalarClient !== null) {
if (this.state.showIntegrationsError && this.state.scalarError) {
integrationsError = (
const integrationsButtonClasses = classNames({
mx_RoomHeader_button: true,
mx_RoomSettings_integrationsButton_error: !!this.state.scalarError,
});
if (this.state.scalarError && !this.scalarClient.hasCredentials()) {
integrationsWarningTriangle = <img src="img/warning.svg" title={_t('Integrations Error')} width="17"/>;
// Popup shown when hovering over integrationsButton_error (via CSS)
integrationsErrorPopup = (
<span className="mx_RoomSettings_integrationsButton_errorPopup">
{ _t('Could not connect to the integration server') }
</span>
);
}
if (this.scalarClient.hasCredentials()) {
integrationsButton = (
<AccessibleButton className="mx_RoomHeader_button" onClick={this.onManageIntegrations} title={ _t('Manage Integrations') }>
<TintableSvg src="img/icons-apps.svg" width="35" height="35"/>
</AccessibleButton>
);
} else if (this.state.scalarError) {
integrationsButton = (
<div className="mx_RoomSettings_integrationsButton_error" onClick={ this.onShowIntegrationsError }>
<img src="img/warning.svg" title={_t('Integrations Error')} width="17"/>
{ integrationsError }
</div>
);
} else {
integrationsButton = (
<AccessibleButton className="mx_RoomHeader_button" onClick={this.onManageIntegrations} title={ _t('Manage Integrations') }>
<TintableSvg src="img/icons-apps.svg" width="35" height="35"/>
</AccessibleButton>
);
}
integrationsButton = (
<AccessibleButton className={integrationsButtonClasses} onClick={this.onManageIntegrations} title={ _t('Manage Integrations') }>
<TintableSvg src="img/icons-apps.svg" width="35" height="35"/>
{ integrationsWarningTriangle }
{ integrationsErrorPopup }
</AccessibleButton>
);
}
return integrationsButton;