PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

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 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={integrationsButtonClasses} onClick={this.onManageIntegrations} title={ _t('Manage Integrations') }>
<AccessibleButton className="mx_RoomHeader_button" 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 }
</AccessibleButton> { integrationsErrorPopup }
); </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;