diff --git a/src/skins/vector/css/common.css b/src/skins/vector/css/common.css index aff9666e9..93012c0f1 100644 --- a/src/skins/vector/css/common.css +++ b/src/skins/vector/css/common.css @@ -86,6 +86,10 @@ a:visited { cursor: pointer; } +.mx_ContextualMenu_spinner { + display: block; + margin: 0 auto; +} .mx_Dialog_background { position: fixed; diff --git a/src/skins/vector/img/spinner.gif b/src/skins/vector/img/spinner.gif new file mode 100644 index 000000000..ab4871214 Binary files /dev/null and b/src/skins/vector/img/spinner.gif differ diff --git a/src/skins/vector/views/atoms/Spinner.js b/src/skins/vector/views/atoms/Spinner.js new file mode 100644 index 000000000..908f26785 --- /dev/null +++ b/src/skins/vector/views/atoms/Spinner.js @@ -0,0 +1,34 @@ +/* +Copyright 2015 OpenMarket Ltd + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +'use strict'; + +var React = require('react'); + +module.exports = React.createClass({ + displayName: 'Spinner', + + render: function() { + var w = this.props.w || 32; + var h = this.props.h || 32; + var imgClass = this.props.imgClassName || ""; + return ( +
+ +
+ ); + } +}); diff --git a/src/skins/vector/views/molecules/MemberInfo.js b/src/skins/vector/views/molecules/MemberInfo.js index cc9a8f2d3..a2a3874ac 100644 --- a/src/skins/vector/views/molecules/MemberInfo.js +++ b/src/skins/vector/views/molecules/MemberInfo.js @@ -17,6 +17,7 @@ limitations under the License. 'use strict'; var React = require('react'); +var Loader = require("../atoms/Spinner"); var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg'); var MemberInfoController = require('matrix-react-sdk/lib/controllers/molecules/MemberInfo') @@ -26,7 +27,7 @@ module.exports = React.createClass({ mixins: [MemberInfoController], render: function() { - var interactButton, kickButton, banButton, muteButton, giveModButton; + var interactButton, kickButton, banButton, muteButton, giveModButton, spinner; if (this.props.member.userId === MatrixClientPeg.get().credentials.userId) { interactButton =
Leave room
; } @@ -34,6 +35,10 @@ module.exports = React.createClass({ interactButton =
Start chat
; } + if (this.state.creatingRoom) { + spinner = ; + } + if (this.state.can.kick) { kickButton =
Kick @@ -64,6 +69,7 @@ module.exports = React.createClass({ {kickButton} {banButton} {giveModButton} + {spinner}
); }