Redesigned compose form

6 files changed, 78 insertions, 71 deletions

diff --git a/app/assets/javascripts/components/features/compose/containers/private_toggle_container.jsx b/app/assets/javascripts/components/features/compose/containers/privacy_dropdown_container.jsx
index ee3596902..1eee8f84c 100644
--- a/app/assets/javascripts/components/features/compose/containers/private_toggle_container.jsx
+++ b/app/assets/javascripts/components/features/compose/containers/privacy_dropdown_container.jsx
@@ -1,17 +1,17 @@
 import { connect } from 'react-redux';
-import PrivateToggle from '../components/private_toggle';
+import PrivacyDropdown from '../components/privacy_dropdown';
 import { changeComposeVisibility } from '../../../actions/compose';
 
 const mapStateToProps = state => ({
-  isPrivate: state.getIn(['compose', 'private'])
+  value: state.getIn(['compose', 'privacy'])
 });
 
 const mapDispatchToProps = dispatch => ({
 
-  onChange (e) {
-    dispatch(changeComposeVisibility(e.target.checked));
+  onChange (value) {
+    dispatch(changeComposeVisibility(value));
   }
 
 });
 
-export default connect(mapStateToProps, mapDispatchToProps)(PrivateToggle);
+export default connect(mapStateToProps, mapDispatchToProps)(PrivacyDropdown);
diff --git a/app/assets/javascripts/components/features/compose/containers/sensitive_button_container.jsx b/app/assets/javascripts/components/features/compose/containers/sensitive_button_container.jsx
new file mode 100644
index 000000000..074b568f4
--- /dev/null
+++ b/app/assets/javascripts/components/features/compose/containers/sensitive_button_container.jsx
@@ -0,0 +1,49 @@
+import { connect } from 'react-redux';
+import TextIconButton from '../components/text_icon_button';
+import { changeComposeSensitivity } from '../../../actions/compose';
+import { Motion, spring } from 'react-motion';
+import { injectIntl, defineMessages } from 'react-intl';
+
+const messages = defineMessages({
+  title: { id: 'compose_form.sensitive', defaultMessage: 'Mark media as sensitive' }
+});
+
+const mapStateToProps = state => ({
+  visible: state.getIn(['compose', 'media_attachments']).size > 0,
+  active: state.getIn(['compose', 'sensitive'])
+});
+
+const mapDispatchToProps = dispatch => ({
+
+  onClick () {
+    dispatch(changeComposeSensitivity());
+  }
+
+});
+
+const SensitiveButton = React.createClass({
+
+  propTypes: {
+    visible: React.PropTypes.bool,
+    active: React.PropTypes.bool,
+    onClick: React.PropTypes.func.isRequired,
+    intl: React.PropTypes.object.isRequired
+  },
+
+  render () {
+    const { visible, active, onClick, intl } = this.props;
+
+    return (
+      <Motion defaultStyle={{ scale: 0.87 }} style={{ scale: spring(visible ? 1 : 0.87, { stiffness: 200, damping: 3 }) }}>
+        {({ scale }) =>
+          <div style={{ display: visible ? 'block' : 'none', transform: `translateZ(0) scale(${scale})` }}>
+            <TextIconButton onClick={onClick} label='NSFW' title={intl.formatMessage(messages.title)} active={active} />
+          </div>
+        }
+      </Motion>
+    );
+  }
+
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(SensitiveButton));
diff --git a/app/assets/javascripts/components/features/compose/containers/sensitive_toggle_container.jsx b/app/assets/javascripts/components/features/compose/containers/sensitive_toggle_container.jsx
deleted file mode 100644
index 97b3361ba..000000000
--- a/app/assets/javascripts/components/features/compose/containers/sensitive_toggle_container.jsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { connect } from 'react-redux';
-import SensitiveToggle from '../components/sensitive_toggle';
-import { changeComposeSensitivity } from '../../../actions/compose';
-
-const mapStateToProps = state => ({
-  hasMedia: state.getIn(['compose', 'media_attachments']).size > 0,
-  isSensitive: state.getIn(['compose', 'sensitive'])
-});
-
-const mapDispatchToProps = dispatch => ({
-
-  onChange (e) {
-    dispatch(changeComposeSensitivity(e.target.checked));
-  }
-
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(SensitiveToggle);
diff --git a/app/assets/javascripts/components/features/compose/containers/spoiler_button_container.jsx b/app/assets/javascripts/components/features/compose/containers/spoiler_button_container.jsx
new file mode 100644
index 000000000..61ac32b85
--- /dev/null
+++ b/app/assets/javascripts/components/features/compose/containers/spoiler_button_container.jsx
@@ -0,0 +1,24 @@
+import { connect } from 'react-redux';
+import TextIconButton from '../components/text_icon_button';
+import { changeComposeSpoilerness } from '../../../actions/compose';
+import { injectIntl, defineMessages } from 'react-intl';
+
+const messages = defineMessages({
+  title: { id: 'compose_form.spoiler', defaultMessage: 'Hide text behind content warning' }
+});
+
+const mapStateToProps = (state, { intl }) => ({
+  label: 'CW',
+  title: intl.formatMessage(messages.title),
+  active: state.getIn(['compose', 'spoiler'])
+});
+
+const mapDispatchToProps = dispatch => ({
+
+  onClick () {
+    dispatch(changeComposeSpoilerness());
+  }
+
+});
+
+export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(TextIconButton));
diff --git a/app/assets/javascripts/components/features/compose/containers/spoiler_toggle_container.jsx b/app/assets/javascripts/components/features/compose/containers/spoiler_toggle_container.jsx
deleted file mode 100644
index 0bd4df759..000000000
--- a/app/assets/javascripts/components/features/compose/containers/spoiler_toggle_container.jsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { connect } from 'react-redux';
-import SpoilerToggle from '../components/spoiler_toggle';
-import { changeComposeSpoilerness } from '../../../actions/compose';
-
-const mapStateToProps = state => ({
-  isSpoiler: state.getIn(['compose', 'spoiler'])
-});
-
-const mapDispatchToProps = dispatch => ({
-
-  onChange (e) {
-    dispatch(changeComposeSpoilerness(e.target.checked));
-  }
-
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(SpoilerToggle);
diff --git a/app/assets/javascripts/components/features/compose/containers/unlisted_toggle_container.jsx b/app/assets/javascripts/components/features/compose/containers/unlisted_toggle_container.jsx
deleted file mode 100644
index ceac903d9..000000000
--- a/app/assets/javascripts/components/features/compose/containers/unlisted_toggle_container.jsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { connect } from 'react-redux';
-import UnlistedToggle from '../components/unlisted_toggle';
-import { makeGetStatus } from '../../../selectors';
-import { changeComposeListability } from '../../../actions/compose';
-
-const makeMapStateToProps = () => {
-  const getStatus = makeGetStatus();
-
-  const mapStateToProps = state => {
-    const status = getStatus(state, state.getIn(['compose', 'in_reply_to']));
-    const me     = state.getIn(['compose', 'me']);
-
-    return {
-      isPrivate: state.getIn(['compose', 'private']),
-      isUnlisted: state.getIn(['compose', 'unlisted']),
-      isReplyToOther: status ? status.getIn(['account', 'id']) !== me : false
-    };
-  };
-
-  return mapStateToProps;
-};
-
-const mapDispatchToProps = dispatch => ({
-
-  onChangeListability (e) {
-    dispatch(changeComposeListability(e.target.checked));
-  }
-
-});
-
-export default connect(makeMapStateToProps, mapDispatchToProps)(UnlistedToggle);