IntenseWebs/mattermost
3
0
Fork 0
mirror of https://github.com/mattermost/mattermost.git synced 2025-02-25 18:55:24 -06:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' of https://github.com/asaadmahmoodspin/platform

Browse Source
This commit is contained in:
Asaad Mahmood
2015-07-08 22:40:28 +05:00
parent 689692b22d c721a3deac
commit 235beeb829
4 changed files with 91 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
web/react/components/more_channels.jsx
View File

@@ -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,25 +79,34 @@ 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>
{moreChannels.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 }
</div>

2
web/react/stores/channel_store.jsx
View File

@@ -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);
}

2
web/react/utils/async_client.jsx
View File

@@ -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(

57
web/sass-files/sass/partials/_loading.scss
View File

@@ -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;
};
}
}
}