ensl/ensl_gathers
0
0
Fork 0
mirror of https://github.com/ENSL/ensl_gathers.git synced 2025-04-25 00:41:07 +00:00
Code Issues Projects Releases Packages Wiki Activity

Implement sound menu

Browse source
This commit is contained in:
Chris Blanchard 2016-02-12 17:05:46 +00:00
parent 04d8dd9707
commit bf1dbd2b99
5 changed files with 59 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

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

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

3
app/javascripts/components/news.js
View file

@ -11,7 +11,6 @@ const News = exports.News = React.createClass({
let readArticles = {}; let readArticles = {};
if (storageAvailable('localStorage')) { if (storageAvailable('localStorage')) {
const raw = localStorage.getItem(READ_ARTICLES_STORAGE) || {}; const raw = localStorage.getItem(READ_ARTICLES_STORAGE) || {};
console.log(raw)
let rawJson; let rawJson;
try { try {
rawJson = JSON.parse(raw); rawJson = JSON.parse(raw);
@ -110,7 +109,7 @@ const News = exports.News = React.createClass({
{tag} {tag}
</a> </a>
<ul className="dropdown-menu"> <ul className="dropdown-menu">
<li className="header">NS2 News.org</li> <li className="header">NS2News.org</li>
<ul className="news-menu"> <ul className="news-menu">
{articles} {articles}
</ul> </ul>

75
app/javascripts/components/sound.js
View file

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

11
app/stylesheets/app.css
View file

@ -203,6 +203,15 @@ html, body {
padding: 0 15px; padding: 0 15px;
} }
.sound-menu {
list-style: none;
padding: 5px;
}
.sound-menu li {
padding: 5px;
}
/* Events */ /* Events */
.events-panel { .events-panel {
@ -266,4 +275,4 @@ html, body {
.news-menu .unread { .news-menu .unread {
font-weight: bold; font-weight: bold;
} }