diff --git a/browser/main/Components/BlueprintForm.jsx b/browser/main/Components/BlueprintForm.jsx index 97361b41..05aaf1da 100644 --- a/browser/main/Components/BlueprintForm.jsx +++ b/browser/main/Components/BlueprintForm.jsx @@ -97,7 +97,7 @@ var BlueprintForm = React.createClass({ ) : ( -
+
Preview mode
diff --git a/browser/main/Components/PlanetArticleDetail.jsx b/browser/main/Components/PlanetArticleDetail.jsx new file mode 100644 index 00000000..743fdbce --- /dev/null +++ b/browser/main/Components/PlanetArticleDetail.jsx @@ -0,0 +1,108 @@ +var React = require('react/addons') +var moment = require('moment') + +var CodeViewer = require('../Components/CodeViewer') +var ModalBase = require('../Components/ModalBase') +var SnippetEditModal = require('../Components/SnippetEditModal') +var SnippetDeleteModal = require('../Components/SnippetDeleteModal') +var BlueprintEditModal = require('../Components/BlueprintEditModal') +var BlueprintDeleteModal = require('../Components/BlueprintDeleteModal') + +var ForceUpdate = require('../Mixins/ForceUpdate') +var Markdown = require('../Mixins/Markdown') + +var PlanetArticleDetail = React.createClass({ + mixins: [ForceUpdate(60000), Markdown], + propTypes: { + article: React.PropTypes.object + }, + getInitialState: function () { + return { + isEditModalOpen: false + } + }, + openEditModal: function () { + this.setState({isEditModalOpen: true}) + }, + closeEditModal: function () { + this.setState({isEditModalOpen: false}) + }, + submitEditModal: function () { + this.setState({isEditModalOpen: false}) + }, + openDeleteModal: function () { + this.setState({isDeleteModalOpen: true}) + }, + closeDeleteModal: function () { + this.setState({isDeleteModalOpen: false}) + }, + submitDeleteModal: function () { + this.setState({isDeleteModalOpen: false}) + }, + render: function () { + var article = this.props.article + + var tags = article.Tags.length > 0 ? article.Tags.map(function (tag) { + return ( + #{tag.name} + ) + }) : ( + Not tagged yet + ) + if (article.type === 'snippet') { + return ( +
+
+ {article.callSign} {moment(article.updatedAt).fromNow()} + + + + + + + + + + + + +
+
+
+
{article.description}
+
{tags}
+
+
+ +
+
+
+ ) + } + return ( +
+
+ {article.title} {moment(article.updatedAt).fromNow()} + + + + + + + + + + + + +
+
+
{tags}
+
+
+
+ ) + } +}) + +module.exports = PlanetArticleDetail diff --git a/browser/main/Components/PlanetArticleList.jsx b/browser/main/Components/PlanetArticleList.jsx new file mode 100644 index 00000000..809cc658 --- /dev/null +++ b/browser/main/Components/PlanetArticleList.jsx @@ -0,0 +1,103 @@ +var React = require('react/addons') +var ReactRouter = require('react-router') +var moment = require('moment') + +var ForceUpdate = require('../Mixins/ForceUpdate') +var Markdown = require('../Mixins/Markdown') + +var PlanetArticleList = React.createClass({ + mixins: [ReactRouter.Navigation, ReactRouter.State, ForceUpdate(60000), Markdown], + propTypes: { + planet: React.PropTypes.shape({ + Snippets: React.PropTypes.array, + Blueprints: React.PropTypes.array, + Articles: React.PropTypes.array + }), + onPressDown: React.PropTypes.func, + onPressUp: React.PropTypes.func + }, + handleKeyDown: function (e) { + switch (e.keyCode) { + case 38: + e.preventDefault() + this.props.onPressUp() + break + case 40: + e.preventDefault() + this.props.onPressDown() + } + }, + render: function () { + var articles = this.props.planet.Articles.map(function (article) { + var tags = article.Tags.length > 0 ? article.Tags.map(function (tag) { + return ( + #{tag.name} + ) + }) : ( + Not tagged yet + ) + var params = this.getParams() + var isActive = article.type === 'snippet' ? this.isActive('snippets') && parseInt(params.localId, 10) === article.localId : this.isActive('blueprints') && parseInt(params.localId, 10) === article.localId + + var handleClick + + if (article.type === 'snippet') { + + handleClick = function () { + this.transitionTo('snippets', { + userName: params.userName, + planetName: params.planetName, + localId: article.localId + }) + }.bind(this) + + return ( +
  • +
    +
    +
    {article.callSign}
    +
    {moment(article.updatedAt).fromNow()}
    +
    +
    {article.description.length > 50 ? article.description.substring(0, 50) + ' …' : article.description}
    +
    {tags}
    +
    +
    +
  • + ) + } + + handleClick = function () { + this.transitionTo('blueprints', { + userName: params.userName, + planetName: params.planetName, + localId: article.localId + }) + }.bind(this) + + return ( +
  • +
    +
    +
    {article.title}
    +
    {moment(article.updatedAt).fromNow()}
    +
    +
    {this.markdown(article.content.substring(0, 150)).replace(/(<([^>]+)>)/ig, '').substring(0, 75)}
    +
    {tags}
    +
    +
    +
  • + ) + + }.bind(this)) + + return ( +
    +
      + {articles} +
    +
    + ) + } +}) + +module.exports = PlanetArticleList diff --git a/browser/main/Components/PlanetHeader.jsx b/browser/main/Components/PlanetHeader.jsx new file mode 100644 index 00000000..c7e0b8bb --- /dev/null +++ b/browser/main/Components/PlanetHeader.jsx @@ -0,0 +1,51 @@ +var React = require('react/addons') + +var PlanetHeader = React.createClass({ + propTypes: { + currentPlanet: React.PropTypes.object, + currentUser: React.PropTypes.object + }, + getInitialState: function () { + return { + isMenuDropDownOpen: false + } + }, + toggleMenuDropDown: function () { + this.setState({isMenuDropDownOpen: !this.state.isMenuDropDownOpen}, function () { + if (this.state.isMenuDropDownOpen) { + document.body.onclick = function () { + this.setState({isMenuDropDownOpen: false}, function () { + document.body.onclick = null + }) + }.bind(this) + } + }) + }, + interceptClick: function (e) { + e.stopPropagation() + }, + render: function () { + var currentPlanetName = this.props.currentPlanet.name + + return ( +
    + {currentPlanetName} + + + + + + + Download Mac app +
    + ) + } +}) + +module.exports = PlanetHeader diff --git a/browser/main/Components/PlanetNavigator.jsx b/browser/main/Components/PlanetNavigator.jsx new file mode 100644 index 00000000..ee42b80b --- /dev/null +++ b/browser/main/Components/PlanetNavigator.jsx @@ -0,0 +1,56 @@ +var React = require('react/addons') + +var ModalBase = require('../Components/ModalBase') +var LaunchModal = require('../Components/LaunchModal') + +var PlanetNavigator = React.createClass({ + propTypes: { + currentPlanet: React.PropTypes.shape({ + name: React.PropTypes.string + }), + currentUser: React.PropTypes.shape({ + name: React.PropTypes.string + }) + }, + getInitialState: function () { + return { + isLaunchModalOpen: false + } + }, + openLaunchModal: function () { + console.log('and...OPEN!!') + this.setState({isLaunchModalOpen: true}) + }, + closeLaunchModal: function () { + this.setState({isLaunchModalOpen: false}) + }, + submitLaunchModal: function (ret) { + console.log(ret) + this.setState({isLaunchModalOpen: false}) + }, + render: function () { + return ( +
    + + + + + +
    + ) + } +}) + +module.exports = PlanetNavigator diff --git a/browser/main/Containers/PlanetContainer.jsx b/browser/main/Containers/PlanetContainer.jsx index 991a557f..55efd1a1 100644 --- a/browser/main/Containers/PlanetContainer.jsx +++ b/browser/main/Containers/PlanetContainer.jsx @@ -1,308 +1,15 @@ var React = require('react/addons') var ReactRouter = require('react-router') -var moment = require('moment') -var ForceUpdate = require('../Mixins/ForceUpdate') -var ModalBase = require('../Components/ModalBase') -var LaunchModal = require('../Components/LaunchModal') -var CodeViewer = require('../Components/CodeViewer') -var SnippetEditModal = require('../Components/SnippetEditModal') -var SnippetDeleteModal = require('../Components/SnippetDeleteModal') -var BlueprintEditModal = require('../Components/BlueprintEditModal') -var BlueprintDeleteModal = require('../Components/BlueprintDeleteModal') -var AuthStore = require('../Stores/AuthStore') -var PlanetStore = require('../Stores/PlanetStore') +var PlanetHeader = require('../Components/PlanetHeader') +var PlanetNavigator = require('../Components/PlanetNavigator') +var PlanetArticleList = require('../Components/PlanetArticleList') +var PlanetArticleDetail = require('../Components/PlanetArticleDetail') var PlanetActions = require('../Actions/PlanetActions') -var Markdown = require('../Mixins/Markdown') - -var PlanetHeader = React.createClass({ - propTypes: { - currentPlanet: React.PropTypes.object, - currentUser: React.PropTypes.object - }, - getInitialState: function () { - return { - isMenuDropDownOpen: false - } - }, - toggleMenuDropDown: function () { - this.setState({isMenuDropDownOpen: !this.state.isMenuDropDownOpen}, function () { - if (this.state.isMenuDropDownOpen) { - document.body.onclick = function () { - this.setState({isMenuDropDownOpen: false}, function () { - document.body.onclick = null - }) - }.bind(this) - } - }) - }, - interceptClick: function (e) { - e.stopPropagation() - }, - render: function () { - var currentPlanetName = this.props.currentPlanet.name - - return ( -
    - {currentPlanetName} - - - - - - - Download Mac app -
    - ) - } -}) -var PlanetNavigator = React.createClass({ - propTypes: { - currentPlanet: React.PropTypes.shape({ - name: React.PropTypes.string - }), - currentUser: React.PropTypes.shape({ - name: React.PropTypes.string - }) - }, - getInitialState: function () { - return { - isLaunchModalOpen: false - } - }, - openLaunchModal: function () { - console.log('and...OPEN!!') - this.setState({isLaunchModalOpen: true}) - }, - closeLaunchModal: function () { - this.setState({isLaunchModalOpen: false}) - }, - submitLaunchModal: function (ret) { - console.log(ret) - this.setState({isLaunchModalOpen: false}) - }, - render: function () { - return ( -
    - - - - - -
    - ) - } -}) - -var PlanetArticleList = React.createClass({ - mixins: [ReactRouter.Navigation, ReactRouter.State, ForceUpdate(60000), Markdown], - propTypes: { - planet: React.PropTypes.shape({ - Snippets: React.PropTypes.array, - Blueprints: React.PropTypes.array, - Articles: React.PropTypes.array - }), - onPressDown: React.PropTypes.func, - onPressUp: React.PropTypes.func - }, - handleKeyDown: function (e) { - switch (e.keyCode) { - case 38: - e.preventDefault() - this.props.onPressUp() - break - case 40: - e.preventDefault() - this.props.onPressDown() - } - }, - render: function () { - var articles = this.props.planet.Articles.map(function (article) { - var tags = article.Tags.length > 0 ? article.Tags.map(function (tag) { - return ( - #{tag.name} - ) - }) : ( - Not tagged yet - ) - var params = this.getParams() - var isActive = article.type === 'snippet' ? this.isActive('snippets') && parseInt(params.localId, 10) === article.localId : this.isActive('blueprints') && parseInt(params.localId, 10) === article.localId - - var handleClick - - if (article.type === 'snippet') { - - handleClick = function () { - this.transitionTo('snippets', { - userName: params.userName, - planetName: params.planetName, - localId: article.localId - }) - }.bind(this) - - return ( -
  • -
    -
    -
    {article.callSign}
    -
    {moment(article.updatedAt).fromNow()}
    -
    -
    {article.description.length > 50 ? article.description.substring(0, 50) + ' …' : article.description}
    -
    {tags}
    -
    -
    -
  • - ) - } - - handleClick = function () { - this.transitionTo('blueprints', { - userName: params.userName, - planetName: params.planetName, - localId: article.localId - }) - }.bind(this) - - return ( -
  • -
    -
    -
    {article.title}
    -
    {moment(article.updatedAt).fromNow()}
    -
    -
    {this.markdown(article.content.substring(0, 150)).replace(/(<([^>]+)>)/ig, '').substring(0, 75)}
    -
    {tags}
    -
    -
    -
  • - ) - - }.bind(this)) - - return ( -
    -
      - {articles} -
    -
    - ) - } -}) - -var PlanetArticleDetail = React.createClass({ - mixins: [ForceUpdate(60000), Markdown], - propTypes: { - article: React.PropTypes.object - }, - getInitialState: function () { - return { - isEditModalOpen: false - } - }, - openEditModal: function () { - this.setState({isEditModalOpen: true}) - }, - closeEditModal: function () { - this.setState({isEditModalOpen: false}) - }, - submitEditModal: function () { - this.setState({isEditModalOpen: false}) - }, - openDeleteModal: function () { - this.setState({isDeleteModalOpen: true}) - }, - closeDeleteModal: function () { - this.setState({isDeleteModalOpen: false}) - }, - submitDeleteModal: function () { - this.setState({isDeleteModalOpen: false}) - }, - render: function () { - var article = this.props.article - - var tags = article.Tags.length > 0 ? article.Tags.map(function (tag) { - return ( - #{tag.name} - ) - }) : ( - Not tagged yet - ) - if (article.type === 'snippet') { - return ( -
    -
    - {article.callSign} {moment(article.updatedAt).fromNow()} - - - - - - - - - - - - -
    -
    -
    -
    {article.description}
    -
    {tags}
    -
    -
    - -
    -
    -
    - ) - } - return ( -
    -
    - {article.title} {moment(article.updatedAt).fromNow()} - - - - - - - - - - - - -
    -
    -
    {tags}
    -
    -
    -
    - ) - - } -}) +var AuthStore = require('../Stores/AuthStore') +var PlanetStore = require('../Stores/PlanetStore') module.exports = React.createClass({ mixins: [ReactRouter.Navigation, ReactRouter.State], diff --git a/browser/styles/main/index.styl b/browser/styles/main/index.styl index 2de1ec8b..fb04df1b 100644 --- a/browser/styles/main/index.styl +++ b/browser/styles/main/index.styl @@ -83,6 +83,9 @@ button display inline-block margin-right 5px +.relative + position relative + textarea.block-input resize vertical height 125px diff --git a/browser/styles/shared/modal.styl b/browser/styles/shared/modal.styl index dac18c35..cdf073ba 100644 --- a/browser/styles/shared/modal.styl +++ b/browser/styles/shared/modal.styl @@ -70,12 +70,10 @@ .ace_editor height 358px .previewMode - position absolute - right 15px + absolute top right font-size 0.8em line-height 24px padding 0 10px - top 139px background-color transparentify(invBackgroundColor, 0.2) color invTextColor border-top-right-radius 5px