aboutsummaryrefslogtreecommitdiff
path: root/src/web/js/components/RightPanel.react.js
diff options
context:
space:
mode:
authorFrançois Schmidts <francois.schmidts@gmail.com>2016-01-29 00:27:47 +0100
committerFrançois Schmidts <francois.schmidts@gmail.com>2016-01-29 00:27:47 +0100
commit56ab5f6df51ff301a4dccc458eb83917bba49afc (patch)
tree8bd5edbfc9eb3f42b5ab8a407930b5f3ee544303 /src/web/js/components/RightPanel.react.js
parentredoing menu, sorting in place and not in python (diff)
downloadnewspipe-56ab5f6df51ff301a4dccc458eb83917bba49afc.tar.gz
newspipe-56ab5f6df51ff301a4dccc458eb83917bba49afc.tar.bz2
newspipe-56ab5f6df51ff301a4dccc458eb83917bba49afc.zip
wip right panel
Diffstat (limited to 'src/web/js/components/RightPanel.react.js')
-rw-r--r--src/web/js/components/RightPanel.react.js121
1 files changed, 89 insertions, 32 deletions
diff --git a/src/web/js/components/RightPanel.react.js b/src/web/js/components/RightPanel.react.js
index d195dc08..a1e15e94 100644
--- a/src/web/js/components/RightPanel.react.js
+++ b/src/web/js/components/RightPanel.react.js
@@ -1,61 +1,117 @@
var React = require('react');
-
+var Col = require('react-bootstrap/Col');
+var Panel = require('react-bootstrap/Panel');
var RightPanelStore = require('../stores/RightPanelStore');
var RightPanelActions = require('../actions/RightPanelActions');
-
var Article = React.createClass({
-
+ propTypes: {article: React.PropTypes.object.isRequired},
render: function() {
return (<div />);
},
});
-
var Feed = React.createClass({
+ propTypes: {feed: React.PropTypes.object.isRequired},
render: function() {
- return (<div />);
+ var icon = null;
+ if(this.props.feed.icon_url){
+ icon = (<img width="16px" src={this.props.feed.icon_url} />);
+ }
+ var header = (<h4>
+ {icon}<strong>Title:</strong> {this.props.feed.title}
+ </h4>);
+ return (<Panel header={header}>
+ <dl className="dl-horizontal">
+ <dt>Description</dt>
+ <dd>{this.props.feed.description}</dd>
+ <dt>Created on</dt>
+ <dd>{this.props.feed.created_date}</dd>
+ <dt>Feed adress</dt>
+ <dd>
+ <a href={this.props.feed.link}>
+ {this.props.feed.link}
+ </a>
+ </dd>
+ <dt>Site link</dt>
+ <dd>
+ <a href={this.props.feed.site_link}>
+ {this.props.feed.site_link}
+ </a>
+ </dd>
+ <dt>Last fetched</dt>
+ <dd>{this.props.feed.last_retrieved}</dd>
+ <dt>Enabled</dt>
+ <dd>{this.props.feed.enabled}</dd>
+ </dl>
+ </Panel>
+ );
},
});
-
var Category = React.createClass({
+ propTypes: {category: React.PropTypes.object.isRequired},
render: function() {
- return (<div />);
+ return (<Panel header={this.props.category.name}>
+ test
+ </Panel>
+ );
},
});
-
-var RightPanelMenu = React.createClass({
+var RightPanel = React.createClass({
getInitialState: function() {
- return {};
- },
- render: function() {
- return (<div />);
+ return {category: null, feed: null, article: null};
},
- componentDidMount: function() {
- RightPanelStore.addChangeListener(this._onChange);
+ getCategoryCrum: function() {
+ return (<li><a onClick={this.selectCategory} href="#">
+ {this.state.category.name}
+ </a></li>);
},
- componentWillUnmount: function() {
- RightPanelStore.removeChangeListener(this._onChange);
+ getFeedCrum: function() {
+ return (<li><a onClick={this.selectFeed} href="#">
+ {this.state.feed.title}
+ </a></li>);
},
- _onChange: function() {
- },
-});
-
-var RightPanel = React.createClass({
- getInitialState: function() {
- return {obj_type: null, obj_id: null};
+ getArticleCrum: function() {
+ return <li>Article</li>;
},
render: function() {
- if (this.state.obj_type == 'article') {
- return <Article />;
- } else if (this.state.obj_type == 'feed') {
- return <Feed />;
- } else if (this.state.obj_type == 'category') {
- return <Category />;
+ var content = null;
+ var breadcrum = null;
+ if(this.state.article) {
+ var breadcrum = (<ol className="breadcrumb">
+ {this.getCategoryCrum()}
+ {this.getFeedCrum()}
+ {this.getArticleCrum()}
+ </ol>);
+ var content = <Article />;
+ } else if(this.state.feed) {
+ var breadcrum = (<ol className="breadcrumb">
+ {this.getCategoryCrum()}
+ {this.getFeedCrum()}
+ </ol>);
+ var content = <Feed feed={this.state.feed} />;
+ } else if(this.state.category) {
+ var breadcrum = (<ol className="breadcrumb">
+ {this.getCategoryCrum()}
+ </ol>);
+ var content = <Category category={this.state.category} />;
}
- return <div />;
+
+ return (<Col id="right-panel" xsOffset={2} smOffset={2}
+ mdOffset={7} lgOffset={6}
+ xs={10} sm={10} md={5} lg={6}>
+ {breadcrum}
+ {content}
+ </Col>
+ );
+ },
+ selectCategory: function() {
+ this.setState({feed: null, article: null});
+ },
+ selectFeed: function() {
+ this.setState({article: null});
},
componentDidMount: function() {
RightPanelStore.addChangeListener(this._onChange);
@@ -64,7 +120,8 @@ var RightPanel = React.createClass({
RightPanelStore.removeChangeListener(this._onChange);
},
_onChange: function() {
+ this.setState(RightPanelStore._datas);
},
});
-module.exports = {RightPanelMenu: RightPanelMenu, RightPanel: RightPanel};
+module.exports = RightPanel;
bgstack15