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);
@@ -110,7 +109,7 @@ const News = exports.News = React.createClass({
 			    {tag}
 			  </a>
 			  <ul className="dropdown-menu">
-			    <li className="header">NS2 News.org</li>
+			    <li className="header">NS2News.org</li>
 				  <ul className="news-menu">
 				    {articles}
 				  </ul>

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,36 +265,37 @@ 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">
-					{mutedButton}
-					<li>
-						<a href='#' onClick={this.play}>
-							<i className="fa fa-play"></i>&nbsp;Play
-						</a>
-					</li>
-					<li>
-						<a href='#' onClick={this.stop}>
-							<i className="fa fa-stop"></i>&nbsp;Stop
-						</a>
-					</li>
-					<hr />
-					<li>
-						<div className="volume-slide">
-							<label>Volume</label>
-							<div id="volume-slide"></div>
-						</div>
-					</li>
-					<li>
-						<MusicSelector soundController={soundController} />
-					</li>
-				</ul>
+		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}>
+								<i className="fa fa-play"></i>&nbsp;Play
+							</a>
+						</li>
+						<li>
+							<a href='#' onClick={this.stop}>
+								<i className="fa fa-stop"></i>&nbsp;Stop
+							</a>
+						</li>
+						<hr />
+						<li>
+							<div className="volume-slide">
+								<label>Volume</label>
+								<div id="volume-slide"></div>
+							</div>
+						</li>
+						<li>
+							<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 {
@@ -266,4 +275,4 @@ html, body {
 
 .news-menu .unread {
 	font-weight: bold;
-}
+}