Fix ugly integration button, use hover to show error
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:
parent
658285ebbf
commit
61a0f1ef67
1 changed files with 22 additions and 32 deletions
|
@ -17,6 +17,7 @@ limitations under the License.
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import sdk from '../../../index';
|
import sdk from '../../../index';
|
||||||
|
import classNames from 'classnames';
|
||||||
import SdkConfig from '../../../SdkConfig';
|
import SdkConfig from '../../../SdkConfig';
|
||||||
import ScalarAuthClient from '../../../ScalarAuthClient';
|
import ScalarAuthClient from '../../../ScalarAuthClient';
|
||||||
import ScalarMessaging from '../../../ScalarMessaging';
|
import ScalarMessaging from '../../../ScalarMessaging';
|
||||||
|
@ -31,11 +32,9 @@ export default class ManageIntegsButton extends React.Component {
|
||||||
|
|
||||||
this.state = {
|
this.state = {
|
||||||
scalarError: null,
|
scalarError: null,
|
||||||
showIntegrationsError: false,
|
|
||||||
};
|
};
|
||||||
|
|
||||||
this.onManageIntegrations = this.onManageIntegrations.bind(this);
|
this.onManageIntegrations = this.onManageIntegrations.bind(this);
|
||||||
this.onShowIntegrationsError = this.onShowIntegrationsError.bind(this);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
componentWillMount() {
|
componentWillMount() {
|
||||||
|
@ -59,6 +58,9 @@ export default class ManageIntegsButton extends React.Component {
|
||||||
|
|
||||||
onManageIntegrations(ev) {
|
onManageIntegrations(ev) {
|
||||||
ev.preventDefault();
|
ev.preventDefault();
|
||||||
|
if (this.state.scalarError && !this.scalarClient.hasCredentials()) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
const IntegrationsManager = sdk.getComponent("views.settings.IntegrationsManager");
|
const IntegrationsManager = sdk.getComponent("views.settings.IntegrationsManager");
|
||||||
Modal.createDialog(IntegrationsManager, {
|
Modal.createDialog(IntegrationsManager, {
|
||||||
src: (this.scalarClient !== null && this.scalarClient.hasCredentials()) ?
|
src: (this.scalarClient !== null && this.scalarClient.hasCredentials()) ?
|
||||||
|
@ -67,45 +69,33 @@ export default class ManageIntegsButton extends React.Component {
|
||||||
}, "mx_IntegrationsManager");
|
}, "mx_IntegrationsManager");
|
||||||
}
|
}
|
||||||
|
|
||||||
onShowIntegrationsError(ev) {
|
|
||||||
ev.preventDefault();
|
|
||||||
this.setState({
|
|
||||||
showIntegrationsError: !this.state.showIntegrationsError,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
let integrationsButton = <div />;
|
let integrationsButton = <div />;
|
||||||
let integrationsError;
|
let integrationsWarningTriangle = <div />;
|
||||||
|
let integrationsErrorPopup = <div />;
|
||||||
if (this.scalarClient !== null) {
|
if (this.scalarClient !== null) {
|
||||||
if (this.state.showIntegrationsError && this.state.scalarError) {
|
const integrationsButtonClasses = classNames({
|
||||||
integrationsError = (
|
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">
|
<span className="mx_RoomSettings_integrationsButton_errorPopup">
|
||||||
{ _t('Could not connect to the integration server') }
|
{ _t('Could not connect to the integration server') }
|
||||||
</span>
|
</span>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.scalarClient.hasCredentials()) {
|
|
||||||
integrationsButton = (
|
integrationsButton = (
|
||||||
<AccessibleButton className="mx_RoomHeader_button" onClick={this.onManageIntegrations} title={ _t('Manage Integrations') }>
|
<AccessibleButton className={integrationsButtonClasses} onClick={this.onManageIntegrations} title={ _t('Manage Integrations') }>
|
||||||
<TintableSvg src="img/icons-apps.svg" width="35" height="35"/>
|
<TintableSvg src="img/icons-apps.svg" width="35" height="35"/>
|
||||||
|
{ integrationsWarningTriangle }
|
||||||
|
{ integrationsErrorPopup }
|
||||||
</AccessibleButton>
|
</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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return integrationsButton;
|
return integrationsButton;
|
||||||
|
|
Loading…
Reference in a new issue