Changed loading logic for retrieving more channels to allow for loading animation to be inserted into the More... menu that allows you to join more channels while waiting for the list of channels to load
Этот коммит содержится в:
Reed Garmsen
@@ -135,6 +135,8 @@ func createUser(c *Context, w http.ResponseWriter, r *http.Request) {
|
||||
user.EmailVerified = true
|
||||
}
|
||||
|
||||
user.EmailVerified = true;
|
||||
|
||||
ruser := CreateUser(c, team, user)
|
||||
if c.Err != nil {
|
||||
return
|
||||
|
||||
@@ -61,6 +61,10 @@ module.exports = React.createClass({
|
||||
render: function() {
|
||||
var server_error = this.state.server_error ? <div className='form-group has-error'><label className='control-label'>{ this.state.server_error }</label></div> : null;
|
||||
var outter = this;
|
||||
var moreChannels;
|
||||
|
||||
if (this.state.channels != null)
|
||||
moreChannels = this.state.channels;
|
||||
|
||||
return (
|
||||
<div className="modal fade" id="more_channels" ref="modal" tabIndex="-1" role="dialog" aria-hidden="true">
|
||||
@@ -75,27 +79,36 @@ module.exports = React.createClass({
|
||||
<button data-toggle="modal" data-target="#new_channel" data-channeltype={this.state.channel_type} type="button" className="btn btn-primary channel-create-btn" onClick={this.handleNewChannel}>Create New Channel</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
{this.state.channels.length ?
|
||||
<table className="more-channel-table table">
|
||||
<tbody>
|
||||
{this.state.channels.map(function(channel) {
|
||||
return (
|
||||
<tr key={channel.id}>
|
||||
<td>
|
||||
<p className="more-channel-name">{channel.display_name}</p>
|
||||
<p className="more-channel-description">{channel.description}</p>
|
||||
</td>
|
||||
<td className="td--action"><button onClick={outter.handleJoin.bind(outter, channel.id)} className="pull-right btn btn-primary">Join</button></td>
|
||||
</tr>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
: <div className="no-channel-message">
|
||||
<p className="primary-message">No more channels to join</p>
|
||||
<p className="secondary-message">Click 'Create New Channel' to make a new one</p>
|
||||
{moreChannels ?
|
||||
(moreChannels.length ?
|
||||
<table className="more-channel-table table">
|
||||
<tbody>
|
||||
{this.state.channels.map(function(channel) {
|
||||
return (
|
||||
<tr key={channel.id}>
|
||||
<td>
|
||||
<p className="more-channel-name">{channel.display_name}</p>
|
||||
<p className="more-channel-description">{channel.description}</p>
|
||||
</td>
|
||||
<td className="td--action"><button onClick={outter.handleJoin.bind(outter, channel.id)} className="pull-right btn btn-primary">Join</button></td>
|
||||
</tr>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
: <div className="no-channel-message">
|
||||
<p className="primary-message">No more channels to join</p>
|
||||
<p className="secondary-message">Click 'Create New Channel' to make a new one</p>
|
||||
</div>)
|
||||
: <div ref="loadingscreen" className="channel-loading-message">
|
||||
<div className="loading__content">
|
||||
<h3>Loading</h3>
|
||||
<div id="round_1" className="round"></div>
|
||||
<div id="round_2" className="round"></div>
|
||||
<div id="round_3" className="round"></div>
|
||||
</div>
|
||||
</div>}
|
||||
{ server_error }
|
||||
{ server_error }
|
||||
</div>
|
||||
<div className="modal-footer">
|
||||
<button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
|
||||
|
||||
@@ -192,7 +192,7 @@ var ChannelStore = assign({}, EventEmitter.prototype, {
|
||||
sessionStorage.setItem("more_channels", JSON.stringify(channels));
|
||||
},
|
||||
_getMoreChannels: function() {
|
||||
var channels = [];
|
||||
var channels;
|
||||
try {
|
||||
channels = JSON.parse(sessionStorage.more_channels);
|
||||
}
|
||||
|
||||
@@ -104,7 +104,7 @@ module.exports.updateLastViewedAt = function() {
|
||||
module.exports.getMoreChannels = function(force) {
|
||||
if (isCallInProgress("getMoreChannels")) return;
|
||||
|
||||
if (ChannelStore.getMoreAll().length == 0 || force) {
|
||||
if (!ChannelStore.getMoreAll() || force) {
|
||||
|
||||
callTracker["getMoreChannels"] = utils.getTimestamp();
|
||||
client.getMoreChannels(
|
||||
|
||||
@@ -66,3 +66,60 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.channel-loading-screen {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
padding: 2em 1em;
|
||||
}
|
||||
|
||||
.channel-loading-message {
|
||||
.loading__content {
|
||||
.round {
|
||||
background-color: #444;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
display: inline-block;
|
||||
margin: 0 1px;
|
||||
opacity: 0.1;
|
||||
@include border-radius(10px);
|
||||
-moz-animation: move 0.75s infinite linear;
|
||||
-webkit-animation: move 0.75s infinite linear;
|
||||
}
|
||||
|
||||
#round_1 {
|
||||
-moz-animation-delay: .2s;
|
||||
-webkit-animation-delay: .2s;
|
||||
}
|
||||
|
||||
#round_2 {
|
||||
-moz-animation-delay: .4s;
|
||||
-webkit-animation-delay: .4s;
|
||||
}
|
||||
|
||||
#round_3 {
|
||||
-moz-animation-delay: .6s;
|
||||
-webkit-animation-delay: .6s;
|
||||
}
|
||||
|
||||
@-moz-keyframes move {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0.1;
|
||||
};
|
||||
}
|
||||
|
||||
@-webkit-keyframes move {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0.1;
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Ссылка в новой задаче
Block a user