ensl/ensl_gathers
0
0
Fork 0
mirror of https://github.com/ENSL/ensl_gathers.git synced 2024-11-26 22:31:08 +00:00
Code Issues Projects Releases Packages Wiki Activity

Vary chatbox height size

Browse source
This commit is contained in:
Chris Blanchard 2016-04-19 00:16:10 +01:00
parent fe146546cd
commit 6f27029076
2 changed files with 21 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
app/javascripts/components/main.js
View file

@ -178,6 +178,7 @@ const GatherPage = React.createClass({
soundController: new SoundController(),
showMessageBox: true,
collapseMenu: false,
chatContainerHeight: 500,
connectionState: "connected"
};
},
@ -193,6 +194,9 @@ const GatherPage = React.createClass({
this.updateTitle();
$(window).resize(_.debounce(this.reloadChatContainerHeight, 250));
this.reloadChatContainerHeight();
socket.on('stateChange', data => {
let state = data.state;
@ -290,6 +294,13 @@ const GatherPage = React.createClass({
}
},
reloadChatContainerHeight() {
let chatContainer = document.getElementById("chat-container");
if (chatContainer) {
this.setState({ chatContainerHeight: chatContainer.clientHeight });
}
},
toggleEventsPanel(event) {
let newState = event.target.checked;
this.setState({ showEventsPanel: newState });
@ -390,7 +401,8 @@ const GatherPage = React.createClass({
</li>
);
chatroom = <Chatroom messages={this.state.messages}
user={this.state.user} socket={socket} />;
user={this.state.user} socket={socket}
containerHeight={this.state.chatContainerHeight}/>;
currentUser = (
<ul className="nav navbar-top-links navbar-right" id="currentuser">
<CurrentUser user={this.state.user} />
@ -506,12 +518,15 @@ const GatherPage = React.createClass({
</div>
</section>
</div>
<aside className="control-sidebar control-sidebar-dark" style={{"position": "fixed", "height": "auto"}}>
<aside className="control-sidebar control-sidebar-dark"
style={{"position": "fixed", "height": "auto"}}>
<div className="chat-container">
{chatroom}
</div>
</aside>
<div className="control-sidebar-bg" style={{"position":"fixed", "height":"auto"}}></div>
<div className="control-sidebar-bg"
id="chat-container"
style={{"position":"fixed", "height":"auto"}}></div>
</div>
);
}

4
app/javascripts/components/message.js
View file

@ -250,6 +250,7 @@ const Chatroom = exports.Chatroom = React.createClass({
if (prevProps.messages.length < this.props.messages.length) {
this.scrollToBottom();
}
console.log(this.props.containerHeight);
},
scrollToBottom() {
@ -270,7 +271,8 @@ const Chatroom = exports.Chatroom = React.createClass({
});
return (
<div>
<ul className="chat" id="chatmessages" ref="messageContainer">
<ul className="chat" id="chatmessages" ref="messageContainer"
style={{height: this.props.containerHeight - 170}}>
<li className="text-center">
<a href="#"
onClick={this.loadMoreMessages}