From 44e57f64dd8b00900c31d7fd56fda94f4e69e986 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Thu, 25 Aug 2016 19:52:55 +0200
Subject: Improving statuses, adding a composer drawer, which doesn't work yet

---
 .../javascripts/components/components/button.jsx   | 22 +++++++++++
 .../components/components/character_counter.jsx    | 16 ++++++++
 .../javascripts/components/components/column.jsx   |  2 +-
 .../components/components/composer_drawer.jsx      | 46 ++++++++++++++++++++++
 .../components/components/display_name.jsx         |  2 +-
 .../javascripts/components/components/frontend.jsx |  6 ++-
 .../javascripts/components/components/nav_bar.jsx  |  6 ++-
 .../components/components/relative_timestamp.jsx   |  2 +-
 .../javascripts/components/components/status.jsx   |  2 +-
 9 files changed, 97 insertions(+), 7 deletions(-)
 create mode 100644 app/assets/javascripts/components/components/button.jsx
 create mode 100644 app/assets/javascripts/components/components/character_counter.jsx
 create mode 100644 app/assets/javascripts/components/components/composer_drawer.jsx

(limited to 'app/assets/javascripts/components/components')

diff --git a/app/assets/javascripts/components/components/button.jsx b/app/assets/javascripts/components/components/button.jsx
new file mode 100644
index 000000000..b2d7ba9a9
--- /dev/null
+++ b/app/assets/javascripts/components/components/button.jsx
@@ -0,0 +1,22 @@
+const Button = React.createClass({
+  propTypes: {
+    text: React.PropTypes.string.isRequired,
+    onClick: React.PropTypes.func
+  },
+
+  handleClick (e) {
+    e.preventDefault();
+    this.props.onClick();
+  },
+
+  render () {
+    return (
+      <a href='#' onClick={this.handleClick} style={{ display: 'inline-block', position: 'relative', boxSizing: 'border-box', textAlign: 'center', border: '10px none', backgroundColor: '#2b90d9', color: '#fff', fontSize: '14px', fontWeight: '500', letterSpacing: '0', textTransform: 'uppercase', padding: '0 16px', height: '36px', cursor: 'pointer', lineHeight: '36px', borderRadius: '4px', textDecoration: 'none' }}>
+        {this.props.text}
+      </a>
+    );
+  }
+
+});
+
+export default Button;
diff --git a/app/assets/javascripts/components/components/character_counter.jsx b/app/assets/javascripts/components/components/character_counter.jsx
new file mode 100644
index 000000000..b58d9fe32
--- /dev/null
+++ b/app/assets/javascripts/components/components/character_counter.jsx
@@ -0,0 +1,16 @@
+const CharacterCounter = React.createClass({
+  propTypes: {
+    text: React.PropTypes.string.isRequired
+  },
+
+  render () {
+    return (
+      <span style={{ fontSize: '16px', cursor: 'default' }}>
+        {this.props.text.length}
+      </span>
+    );
+  }
+
+});
+
+export default CharacterCounter;
diff --git a/app/assets/javascripts/components/components/column.jsx b/app/assets/javascripts/components/components/column.jsx
index c585b6b0b..c1f5b84a2 100644
--- a/app/assets/javascripts/components/components/column.jsx
+++ b/app/assets/javascripts/components/components/column.jsx
@@ -8,7 +8,7 @@ const Column = React.createClass({
 
   render: function() {
     return (
-      <div style={{ width: '350px', flex: '0 0 auto', background: '#282c37', margin: '10px', marginRight: '0', display: 'flex', flexDirection: 'column' }}>
+      <div style={{ width: '380px', flex: '0 0 auto', background: '#282c37', margin: '10px', marginRight: '0', display: 'flex', flexDirection: 'column' }}>
         <ColumnHeader type={this.props.type} />
         <StatusListContainer type={this.props.type} />
       </div>
diff --git a/app/assets/javascripts/components/components/composer_drawer.jsx b/app/assets/javascripts/components/components/composer_drawer.jsx
new file mode 100644
index 000000000..d33e28219
--- /dev/null
+++ b/app/assets/javascripts/components/components/composer_drawer.jsx
@@ -0,0 +1,46 @@
+import CharacterCounter from './character_counter';
+import Button           from './button';
+import { publish }      from '../actions/statuses';
+
+const ComposerDrawer = React.createClass({
+
+  propTypes: {
+    onSubmit: React.PropTypes.func.isRequired
+  },
+
+  getInitialState() {
+    return {
+      text: ''
+    };
+  },
+
+  handleChange (e) {
+    this.setState({ text: e.target.value });
+  },
+
+  handleKeyUp (e) {
+    if (e.keyCode === 13 && e.ctrlKey) {
+      this.handleSubmit();
+    }
+  },
+
+  handleSubmit () {
+    this.props.onSubmit(this.state.text, null);
+  },
+
+  render () {
+    return (
+      <div style={{ width: '230px', background: '#454b5e', margin: '10px 0', padding: '10px' }}>
+        <textarea placeholder='What is on your mind?' value={this.state.text} onKeyUp={this.handleKeyUp} onChange={this.handleChange} style={{ display: 'block', boxSizing: 'border-box', width: '100%', height: '100px', background: '#fff', resize: 'none', border: 'none', color: '#282c37', padding: '10px', fontFamily: 'Roboto', fontSize: '14px' }} />
+
+        <div style={{ marginTop: '10px', overflow: 'hidden' }}>
+          <div style={{ float: 'right' }}><Button text='Publish' onClick={this.handleSubmit} /></div>
+          <div style={{ float: 'right', marginRight: '16px', lineHeight: '36px' }}><CharacterCounter text={this.state.text} /></div>
+        </div>
+      </div>
+    );
+  }
+
+});
+
+export default ComposerDrawer;
diff --git a/app/assets/javascripts/components/components/display_name.jsx b/app/assets/javascripts/components/components/display_name.jsx
index 97db31707..9faefba67 100644
--- a/app/assets/javascripts/components/components/display_name.jsx
+++ b/app/assets/javascripts/components/components/display_name.jsx
@@ -11,7 +11,7 @@ const DisplayName = React.createClass({
     var url         = this.props.account.get('url');
 
     return (
-      <a href={url} style={{ color: '#616b86', textDecoration: 'none' }}>
+      <a href={url} style={{ display: 'inline-block', color: '#616b86', textDecoration: 'none', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', width: '190px' }}>
         <strong style={{ fontWeight: 'bold', color: '#fff' }}>{displayName}</strong> <span>{acct}</span>
       </a>
     );
diff --git a/app/assets/javascripts/components/components/frontend.jsx b/app/assets/javascripts/components/components/frontend.jsx
index 6f9c46fa9..01ad3490a 100644
--- a/app/assets/javascripts/components/components/frontend.jsx
+++ b/app/assets/javascripts/components/components/frontend.jsx
@@ -1,5 +1,6 @@
-import NavBar      from './nav_bar';
-import ColumnsArea from './columns_area';
+import NavBar                  from './nav_bar';
+import ColumnsArea             from './columns_area';
+import ComposerDrawerContainer from '../containers/composer_drawer_container';
 
 const Frontend = React.createClass({
 
@@ -7,6 +8,7 @@ const Frontend = React.createClass({
     return (
       <div style={{ flex: '0 0 auto', display: 'flex', width: '100%', height: '100%', background: '#1a1c23' }}>
         <NavBar />
+        <ComposerDrawerContainer />
         <ColumnsArea />
       </div>
     );
diff --git a/app/assets/javascripts/components/components/nav_bar.jsx b/app/assets/javascripts/components/components/nav_bar.jsx
index 1ece3cc34..f3f6768e6 100644
--- a/app/assets/javascripts/components/components/nav_bar.jsx
+++ b/app/assets/javascripts/components/components/nav_bar.jsx
@@ -1,7 +1,11 @@
 const NavBar = React.createClass({
 
   render: function() {
-    return <div style={{ background: '#2f3441', width: '60px', margin: '10px', marginRight: '0' }} />;
+    return (
+      <div style={{ background: '#2f3441', width: '60px', margin: '10px', marginRight: '0' }}>
+
+      </div>
+    );
   }
 });
 
diff --git a/app/assets/javascripts/components/components/relative_timestamp.jsx b/app/assets/javascripts/components/components/relative_timestamp.jsx
index 3216d0a0d..49158ee13 100644
--- a/app/assets/javascripts/components/components/relative_timestamp.jsx
+++ b/app/assets/javascripts/components/components/relative_timestamp.jsx
@@ -12,7 +12,7 @@ moment.updateLocale('en', {
     d:  "a day",
     dd: "%dd",
     M:  "a month",
-    MM: "%dm",
+    MM: "%dmo",
     y:  "a year",
     yy: "%dy"
   }
diff --git a/app/assets/javascripts/components/components/status.jsx b/app/assets/javascripts/components/components/status.jsx
index e54bc8c04..bb518a9e1 100644
--- a/app/assets/javascripts/components/components/status.jsx
+++ b/app/assets/javascripts/components/components/status.jsx
@@ -13,7 +13,7 @@ const Status = React.createClass({
     var status  = this.props.status;
 
     return (
-      <div style={{ padding: '8px 10px', display: 'flex', flexDirection: 'row', borderBottom: '1px solid #363c4b' }}>
+      <div style={{ padding: '8px 10px', display: 'flex', flexDirection: 'row', borderBottom: '1px solid #363c4b', cursor: 'pointer' }}>
         <Avatar src={status.getIn(['account', 'avatar'])} />
 
         <div style={{ flex: '1 1 auto', marginLeft: '10px' }}>
-- 
cgit