Add a bit of text to explain the purpose of the RoomPreviewSpinner

Fixes https://github.com/vector-im/riot-web/issues/5869
This commit is contained in:
Travis Ralston 2018-10-17 13:53:12 -06:00
parent b7c05d8dec
commit af8dfda9a7
4 changed files with 18 additions and 1 deletions

View file

@ -56,3 +56,7 @@ limitations under the License.
.mx_RoomPreviewBar_warningIcon { .mx_RoomPreviewBar_warningIcon {
padding: 12px; padding: 12px;
} }
.mx_RoomPreviewBar_spinnerIntro {
margin-top: 50px;
}

View file

@ -1514,6 +1514,7 @@ module.exports = React.createClass({
canPreview={false} error={this.state.roomLoadError} canPreview={false} error={this.state.roomLoadError}
roomAlias={roomAlias} roomAlias={roomAlias}
spinner={this.state.joining} spinner={this.state.joining}
spinnerState="joining"
inviterName={inviterName} inviterName={inviterName}
invitedEmail={invitedEmail} invitedEmail={invitedEmail}
room={this.state.room} room={this.state.room}
@ -1558,6 +1559,7 @@ module.exports = React.createClass({
inviterName={inviterName} inviterName={inviterName}
canPreview={false} canPreview={false}
spinner={this.state.joining} spinner={this.state.joining}
spinnerState="joining"
room={this.state.room} room={this.state.room}
/> />
</div> </div>
@ -1645,6 +1647,7 @@ module.exports = React.createClass({
onForgetClick={this.onForgetClick} onForgetClick={this.onForgetClick}
onRejectClick={this.onRejectThreepidInviteButtonClicked} onRejectClick={this.onRejectThreepidInviteButtonClicked}
spinner={this.state.joining} spinner={this.state.joining}
spinnerState="joining"
inviterName={inviterName} inviterName={inviterName}
invitedEmail={invitedEmail} invitedEmail={invitedEmail}
canPreview={this.state.canPeek} canPreview={this.state.canPeek}

View file

@ -44,9 +44,13 @@ module.exports = React.createClass({
error: PropTypes.object, error: PropTypes.object,
canPreview: PropTypes.bool, canPreview: PropTypes.bool,
spinner: PropTypes.bool,
room: PropTypes.object, room: PropTypes.object,
// When a spinner is present, a spinnerState can be specified to indicate the
// purpose of the spinner.
spinner: PropTypes.bool,
spinnerState: PropTypes.oneOf(["joining"]),
// The alias that was used to access this room, if appropriate // The alias that was used to access this room, if appropriate
// If given, this will be how the room is referred to (eg. // If given, this will be how the room is referred to (eg.
// in error messages). // in error messages).
@ -93,7 +97,12 @@ module.exports = React.createClass({
if (this.props.spinner || this.state.busy) { if (this.props.spinner || this.state.busy) {
const Spinner = sdk.getComponent("elements.Spinner"); const Spinner = sdk.getComponent("elements.Spinner");
let spinnerIntro = "";
if (this.props.spinnerState === "joining") {
spinnerIntro = _t("Joining room...");
}
return (<div className="mx_RoomPreviewBar"> return (<div className="mx_RoomPreviewBar">
<p className="mx_RoomPreviewBar_spinnerIntro">{ spinnerIntro }</p>
<Spinner /> <Spinner />
</div>); </div>);
} }

View file

@ -512,6 +512,7 @@
"You have no historical rooms": "You have no historical rooms", "You have no historical rooms": "You have no historical rooms",
"Historical": "Historical", "Historical": "Historical",
"System Alerts": "System Alerts", "System Alerts": "System Alerts",
"Joining room...": "Joining room...",
"Unable to ascertain that the address this invite was sent to matches one associated with your account.": "Unable to ascertain that the address this invite was sent to matches one associated with your account.", "Unable to ascertain that the address this invite was sent to matches one associated with your account.": "Unable to ascertain that the address this invite was sent to matches one associated with your account.",
"This invitation was sent to an email address which is not associated with this account:": "This invitation was sent to an email address which is not associated with this account:", "This invitation was sent to an email address which is not associated with this account:": "This invitation was sent to an email address which is not associated with this account:",
"You may wish to login with a different account, or add this email to this account.": "You may wish to login with a different account, or add this email to this account.", "You may wish to login with a different account, or add this email to this account.": "You may wish to login with a different account, or add this email to this account.",