ensl/ensl_gathers
0
0
Fork 0
mirror of https://github.com/ENSL/ensl_gathers.git synced 2025-02-18 09:51:26 +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(), soundController: new SoundController(),
showMessageBox: true, showMessageBox: true,
collapseMenu: false, collapseMenu: false,
chatContainerHeight: 500,
connectionState: "connected" connectionState: "connected"
}; };
}, },
@ -193,6 +194,9 @@ const GatherPage = React.createClass({
this.updateTitle(); this.updateTitle();
$(window).resize(_.debounce(this.reloadChatContainerHeight, 250));
this.reloadChatContainerHeight();
socket.on('stateChange', data => { socket.on('stateChange', data => {
let state = data.state; 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) { toggleEventsPanel(event) {
let newState = event.target.checked; let newState = event.target.checked;
this.setState({ showEventsPanel: newState }); this.setState({ showEventsPanel: newState });
@ -390,7 +401,8 @@ const GatherPage = React.createClass({
</li> </li>
); );
chatroom = <Chatroom messages={this.state.messages} chatroom = <Chatroom messages={this.state.messages}
user={this.state.user} socket={socket} />; user={this.state.user} socket={socket}
containerHeight={this.state.chatContainerHeight}/>;
currentUser = ( currentUser = (
<ul className="nav navbar-top-links navbar-right" id="currentuser"> <ul className="nav navbar-top-links navbar-right" id="currentuser">
<CurrentUser user={this.state.user} /> <CurrentUser user={this.state.user} />
@ -506,12 +518,15 @@ const GatherPage = React.createClass({
</div> </div>
</section> </section>
</div> </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"> <div className="chat-container">
{chatroom} {chatroom}
</div> </div>
</aside> </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> </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) { if (prevProps.messages.length < this.props.messages.length) {
this.scrollToBottom(); this.scrollToBottom();
} }
console.log(this.props.containerHeight);
}, },
scrollToBottom() { scrollToBottom() {
@ -270,7 +271,8 @@ const Chatroom = exports.Chatroom = React.createClass({
}); });
return ( return (
<div> <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"> <li className="text-center">
<a href="#" <a href="#"
onClick={this.loadMoreMessages} onClick={this.loadMoreMessages}