Implement sound menu

app/javascripts/components/main.js

@@ -405,11 +405,7 @@ const App = React.createClass({
 						</a>
 						<div className="navbar-custom-menu">
 							<ul className="nav navbar-nav">    
-								<li className="dropdown messages-menu">
-									<a href="#" className="dropdown-toggle">
-										<i className="fa fa-headphones"></i>
-									</a>
-								</li>
+								<SoundPanel soundController={this.state.soundController} />
 								{profileLink}
 								<News />
 								<li>

app/javascripts/components/message.js

@@ -354,10 +354,10 @@ const ChatMessage = React.createClass({
 							{this.props.message.author.username}
 							</strong>
 						<small className="pull-right text-muted">
-							{deleteButton}
 							<span className="hidden-xs">
 								{moment(this.props.message.createdAt).format("hh:mm DD/MM")}&nbsp;
 							</span>
+							{deleteButton}
 						</small>
 					</div>
 					<p className="wordwrap">{this.messageContent()}</p>

app/javascripts/components/news.js

@@ -11,7 +11,6 @@ const News = exports.News = React.createClass({
 		let readArticles = {};
 		if (storageAvailable('localStorage')) {
 			const raw = localStorage.getItem(READ_ARTICLES_STORAGE) || {};
-			console.log(raw)
 			let rawJson;
 			try {
 				rawJson = JSON.parse(raw);

app/javascripts/components/sound.js

@@ -195,6 +195,16 @@ var MusicSelector = React.createClass({
 })
 
 var SoundPanel = React.createClass({
+	getInitialState() {
+		return {
+			show: false
+		};
+	},
+
+	toggleShow() {
+		this.setState({ show: !this.state.show });
+	},
+
 	componentDidMount() {
 		let soundController = this.props.soundController;
 		let scale = 10;
@@ -212,6 +222,12 @@ var SoundPanel = React.createClass({
 		}).slider('setValue', soundController.getVolume() * scale);
 	},
 
+	componentClass() {
+		let componentClass = ["dropdown", "messages-menu"];
+		if (this.state.show) componentClass.push("open");
+		return componentClass.join(" ");
+	},
+
 	mute() {
 		this.props.soundController.mute();
 		this.forceUpdate();
@@ -249,12 +265,12 @@ var SoundPanel = React.createClass({
 				</a>
 			</li>;
 		}
-		return <ul className="nav navbar-top-links navbar-right">
-		  <li className="dropdown">
-				<a className="dropdown-toggle" href="#" id="sound-dropdown">
-					Sound &nbsp;{mutedIcon}&nbsp;<i className="fa fa-caret-down"></i>
-				</a>
-				<ul className="dropdown-menu" id="sound-dropdown">
+		return (
+			<li className={this.componentClass()}>
+			  <a href="#" onClick={this.toggleShow}>{mutedIcon}</a>
+			  <ul className="dropdown-menu">
+			    <li className="header">Sound Settings</li>
+				  <ul className="sound-menu">
 				    {mutedButton}
 						<li>
 							<a href='#' onClick={this.play}>
@@ -277,8 +293,9 @@ var SoundPanel = React.createClass({
 							<MusicSelector soundController={soundController} />
 						</li>
 				  </ul>
+			  </ul>
 			</li>
-	  </ul>;
+		);
 	}
 });
 

app/stylesheets/app.css

@@ -203,6 +203,15 @@ html, body {
 	padding: 0 15px;
 }
 
+.sound-menu {
+	list-style: none;
+	padding: 5px;
+}
+
+.sound-menu li {
+	padding: 5px;
+}
+
 /* Events */
 
 .events-panel {