diff --git a/src/components/Menu.ls b/src/components/Menu.ls index 135c115..0bc0537 100644 --- a/src/components/Menu.ls +++ b/src/components/Menu.ls @@ -1,54 +1,90 @@ require! { react: {Component, DOM, create-element} + \lodash.assign : assign } class Menu extends Component + styles: + anchor: + color: \#fff + button: + padding: '12px 12px' + background-color: 'rgba(0, 0, 0, 0.3)' + container: + position: \fixed + will-change: \transform + bottom: \5% + right: 0 + left: 0 + text-align: \center + font-size: \36px + z-index: 1000 + render: -> DOM.div do - style: - position: \fixed - will-change: \transform - bottom: \5% - right: \5% - font-size: \36px - background-color: 'rgba(0, 0, 0, 0.3)' - color: \#fff - padding: '5px 10px' - z-index: 1000 + style: @styles.container switch @props.route | \config => - DOM.i do - style: - margin: '0px 10px' - className: 'fa fa-close' + DOM.a do + style: @styles.anchor + href: \# on-click: @props.move-sessions + DOM.i do + style: @styles.button + className: 'fa fa-close' | \session => [ - DOM.i do + DOM.a do + key: \menu-prev + style: @styles.anchor + href: \# + on-click: @props.prev-post + DOM.i do + style: @styles.button + className: 'fa fa-arrow-left' + DOM.a do key: \menu-reblog - style: - margin: '0px 10px' - className: 'fa fa-retweet' + style: @styles.anchor + href: \# on-click: @props.reblog - DOM.i do + DOM.i do + style: @styles.button + className: 'fa fa-retweet' + DOM.a do key: \menu-like - style: - margin: '0px 10px' - color: if @props.liked then \#BC523C else \#fff - className: 'fa fa-heart' + style: @styles.anchor + href: \# on-click: @props.like - DOM.i do + DOM.i do + style: + assign do + @styles.button + color: if @props.liked then \#BC523C else \#fff + className: 'fa fa-heart' + DOM.a do key: \menu-back - style: - margin: '0px 10px' - className: 'fa fa-clone' + style: @styles.anchor + href: \# on-click: @props.move-sessions + DOM.i do + style: @styles.button + className: 'fa fa-clone' + DOM.a do + key: \menu-next + style: @styles.anchor + href: \# + on-click: @props.next-post + DOM.i do + style: @styles.button + className: 'fa fa-arrow-right' ] | \sessions => - DOM.i do - style: - margin: '0px 10px' - className: 'fa fa-cog' + DOM.a do + style: @styles.anchor + href: \# on-click: @props.move-config + DOM.i do + style: @styles.button + className: 'fa fa-cog' module.exports = Menu diff --git a/src/components/Navigator.ls b/src/components/Navigator.ls deleted file mode 100644 index 4f43a96..0000000 --- a/src/components/Navigator.ls +++ /dev/null @@ -1,39 +0,0 @@ -require! { - react: {Component, DOM} -} - -class Navigator extends Component - render: -> - DOM.div do - style: - position: \fixed - width: window.inner-width - height: window.inner-height - top: 0 - left: 0 - on-touch-start: (event)~> - @prev-x = event.changed-touches.0.client-x - on-touch-end: (event)~> - current-x = event.changed-touches.0.client-x - diff = @prev-x - current-x - switch - | diff > 100 => @props.next-post! - | diff < -100 => @props.prev-post! - DOM.div do - style: - position: \absolute - top: 0 - left: 0 - width: \30% - height: \100% - on-click: @props.prev-post - DOM.div do - style: - position: \absolute - top: 0 - right: 0 - width: \30% - height: \100% - on-click: @props.next-post - -module.exports = Navigator diff --git a/src/components/Rblg.ls b/src/components/Rblg.ls index d35c5b0..19f2678 100644 --- a/src/components/Rblg.ls +++ b/src/components/Rblg.ls @@ -34,6 +34,7 @@ class Rblg extends Component position: \absolute top: 0 left: 0 + margin-bottom: \30% create-element do Notification ref: \notification @@ -50,6 +51,8 @@ class Rblg extends Component move-session: ~> @props.dispatch set-route \session reblog: ~> @props.dispatch reblog! like: ~> @props.dispatch like! + next-post: ~> @props.dispatch next-post! + prev-post: ~> @props.dispatch prev-post! switch @props.route | \sessions => create-element do @@ -64,8 +67,6 @@ class Rblg extends Component create-element do Session session: @props.current-session - next-post: ~> @props.dispatch next-post! - prev-post: ~> @props.dispatch prev-post! | \config => create-element do User diff --git a/src/components/Session.ls b/src/components/Session.ls index 955b5bf..1e0c22b 100644 --- a/src/components/Session.ls +++ b/src/components/Session.ls @@ -2,7 +2,6 @@ require! { react: {Component, DOM, create-element} \lodash.assign : assign \./Posts.ls - \./Navigator.ls } class Session extends Component @@ -34,9 +33,5 @@ class Session extends Component create-element do Posts session: @props.session - create-element do - Navigator - next-post: @props.next-post - prev-post: @props.prev-post module.exports = Session