From c424df5192f346dba5332a4b3a2de43b2f028e0c Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Thu, 9 Feb 2017 01:20:09 +0100 Subject: [PATCH] Progress on moving color styles to Sass --- .../components/components/account.jsx | 41 +-- .../components/components/button.jsx | 1 - .../components/column_back_button.jsx | 11 +- .../components/column_back_button_slim.jsx | 4 +- .../components/components/load_more.jsx | 10 +- .../components/missing_indicator.jsx | 10 +- .../components/components/status.jsx | 21 +- .../components/components/status_content.jsx | 18 +- .../account/components/action_bar.jsx | 29 +- .../features/account/components/header.jsx | 13 +- .../compose/components/compose_form.jsx | 16 +- .../features/compose/components/drawer.jsx | 45 +-- .../compose/components/navigation_bar.jsx | 6 +- .../compose/components/reply_indicator.jsx | 7 +- .../features/compose/components/search.jsx | 22 +- .../features/getting_started/index.jsx | 2 +- .../features/status/components/action_bar.jsx | 5 +- .../features/ui/components/column.jsx | 9 +- .../features/ui/components/column_header.jsx | 2 +- .../features/ui/components/tabs_bar.jsx | 33 +-- .../components/features/ui/index.jsx | 2 +- app/assets/stylesheets/components.scss | 268 ++++++++++++++++++ 22 files changed, 340 insertions(+), 235 deletions(-) diff --git a/app/assets/javascripts/components/components/account.jsx b/app/assets/javascripts/components/components/account.jsx index 13ffab49b5..7a1c9f5ce0 100644 --- a/app/assets/javascripts/components/components/account.jsx +++ b/app/assets/javascripts/components/components/account.jsx @@ -13,26 +13,6 @@ const messages = defineMessages({ unblock: { id: 'account.unblock', defaultMessage: 'Unblock' } }); -const outerStyle = { - padding: '10px', - borderBottom: '1px solid #363c4b' -}; - -const itemStyle = { - flex: '1 1 auto', - display: 'block', - color: '#9baec8', - overflow: 'hidden', - textDecoration: 'none', - fontSize: '14px' -}; - -const noteStyle = { - paddingTop: '5px', - fontSize: '12px', - color: '#616b86' -}; - const buttonsStyle = { padding: '10px', height: '18px' @@ -45,16 +25,9 @@ const Account = React.createClass({ me: React.PropTypes.number.isRequired, onFollow: React.PropTypes.func.isRequired, onBlock: React.PropTypes.func.isRequired, - withNote: React.PropTypes.bool, intl: React.PropTypes.object.isRequired }, - getDefaultProps () { - return { - withNote: false - }; - }, - mixins: [PureRenderMixin], handleFollow () { @@ -66,17 +39,13 @@ const Account = React.createClass({ }, render () { - const { account, me, withNote, intl } = this.props; + const { account, me, intl } = this.props; if (!account) { return
; } - let note, buttons; - - if (account.get('note').length > 0 && withNote) { - note =
{account.get('note')}
; - } + let buttons; if (account.get('id') !== me && account.get('relationship', null) !== null) { const following = account.getIn(['relationship', 'following']); @@ -93,9 +62,9 @@ const Account = React.createClass({ } return ( -
+
- +
@@ -104,8 +73,6 @@ const Account = React.createClass({ {buttons}
- - {note}
); } diff --git a/app/assets/javascripts/components/components/button.jsx b/app/assets/javascripts/components/components/button.jsx index fb70d57721..babc6b2598 100644 --- a/app/assets/javascripts/components/components/button.jsx +++ b/app/assets/javascripts/components/components/button.jsx @@ -35,7 +35,6 @@ const Button = React.createClass({ boxSizing: 'border-box', textAlign: 'center', border: '10px none', - color: '#fff', fontSize: '14px', fontWeight: '500', letterSpacing: '0', diff --git a/app/assets/javascripts/components/components/column_back_button.jsx b/app/assets/javascripts/components/components/column_back_button.jsx index 2f499c7491..6abf11239b 100644 --- a/app/assets/javascripts/components/components/column_back_button.jsx +++ b/app/assets/javascripts/components/components/column_back_button.jsx @@ -1,15 +1,6 @@ import PureRenderMixin from 'react-addons-pure-render-mixin'; import { FormattedMessage } from 'react-intl'; -const outerStyle = { - padding: '15px', - fontSize: '16px', - background: '#2f3441', - flex: '0 0 auto', - cursor: 'pointer', - color: '#2b90d9' -}; - const iconStyle = { display: 'inline-block', marginRight: '5px' @@ -29,7 +20,7 @@ const ColumnBackButton = React.createClass({ render () { return ( -
+
diff --git a/app/assets/javascripts/components/components/column_back_button_slim.jsx b/app/assets/javascripts/components/components/column_back_button_slim.jsx index cdbe135057..780e3b1825 100644 --- a/app/assets/javascripts/components/components/column_back_button_slim.jsx +++ b/app/assets/javascripts/components/components/column_back_button_slim.jsx @@ -7,10 +7,8 @@ const outerStyle = { top: '-48px', padding: '15px', fontSize: '16px', - background: '#2f3441', flex: '0 0 auto', - cursor: 'pointer', - color: '#2b90d9' + cursor: 'pointer' }; const iconStyle = { diff --git a/app/assets/javascripts/components/components/load_more.jsx b/app/assets/javascripts/components/components/load_more.jsx index 1866fc1001..2cb9b09a83 100644 --- a/app/assets/javascripts/components/components/load_more.jsx +++ b/app/assets/javascripts/components/components/load_more.jsx @@ -1,15 +1,7 @@ import { FormattedMessage } from 'react-intl'; -const loadMoreStyle = { - display: 'block', - color: '#616b86', - textAlign: 'center', - padding: '15px', - textDecoration: 'none' -}; - const LoadMore = ({ onClick }) => ( - + ); diff --git a/app/assets/javascripts/components/components/missing_indicator.jsx b/app/assets/javascripts/components/components/missing_indicator.jsx index ed8b4fe24a..75129ae14b 100644 --- a/app/assets/javascripts/components/components/missing_indicator.jsx +++ b/app/assets/javascripts/components/components/missing_indicator.jsx @@ -1,15 +1,7 @@ import { FormattedMessage } from 'react-intl'; -const style = { - textAlign: 'center', - fontSize: '16px', - fontWeight: '500', - color: '#616b86', - paddingTop: '120px' -}; - const MissingIndicator = () => ( -
+
); diff --git a/app/assets/javascripts/components/components/status.jsx b/app/assets/javascripts/components/components/status.jsx index 21adfd5789..66c41b5f71 100644 --- a/app/assets/javascripts/components/components/status.jsx +++ b/app/assets/javascripts/components/components/status.jsx @@ -11,15 +11,6 @@ import { FormattedMessage } from 'react-intl'; import emojify from '../emoji'; import escapeTextContentForBrowser from 'react/lib/escapeTextContentForBrowser'; -const outerStyle = { - padding: '8px 10px', - paddingLeft: '68px', - position: 'relative', - minHeight: '48px', - borderBottom: '1px solid #363c4b', - cursor: 'default' -}; - const Status = React.createClass({ contextTypes: { @@ -55,7 +46,7 @@ const Status = React.createClass({ render () { let media = ''; - const { status, now, ...other } = this.props; + const { status, ...other } = this.props; if (status === null) { return
; @@ -72,9 +63,9 @@ const Status = React.createClass({ return (
-
+
- }} /> + }} />
@@ -91,13 +82,13 @@ const Status = React.createClass({ } return ( -
+
- +
- +
diff --git a/app/assets/javascripts/components/components/status_content.jsx b/app/assets/javascripts/components/components/status_content.jsx index 9263a76f55..c0397e81c2 100644 --- a/app/assets/javascripts/components/components/status_content.jsx +++ b/app/assets/javascripts/components/components/status_content.jsx @@ -5,17 +5,6 @@ import emojify from '../emoji'; import { FormattedMessage } from 'react-intl'; import Permalink from './permalink'; -const spoilerStyle = { - display: 'inline-block', - borderRadius: '2px', - color: '#363c4b', - fontWeight: '500', - fontSize: '11px', - padding: '0px 6px', - textTransform: 'uppercase', - lineHeight: 'inherit' -}; - const StatusContent = React.createClass({ contextTypes: { @@ -42,7 +31,7 @@ const StatusContent = React.createClass({ for (var i = 0; i < links.length; ++i) { let link = links[i]; let mention = this.props.status.get('mentions').find(item => link.href === item.get('url')); - let media = this.props.status.get('media_attachments').find(item => link.href === item.get('text_url') || link.href === item.get('remote_url')); + let media = this.props.status.get('media_attachments').find(item => link.href === item.get('text_url') || (item.get('remote_url').length > 0 && link.href === item.get('remote_url'))); if (mention) { link.addEventListener('click', this.onMentionClick.bind(this, mention), false); @@ -92,7 +81,8 @@ const StatusContent = React.createClass({ this.startXY = null; }, - handleSpoilerClick () { + handleSpoilerClick (e) { + e.preventDefault(); this.setState({ hidden: !this.state.hidden }); }, @@ -121,7 +111,7 @@ const StatusContent = React.createClass({ return (
{mentionsPlaceholder} diff --git a/app/assets/javascripts/components/features/account/components/action_bar.jsx b/app/assets/javascripts/components/features/account/components/action_bar.jsx index ab7b08dc7d..fe110954d0 100644 --- a/app/assets/javascripts/components/features/account/components/action_bar.jsx +++ b/app/assets/javascripts/components/features/account/components/action_bar.jsx @@ -14,15 +14,6 @@ const messages = defineMessages({ block: { id: 'account.block', defaultMessage: 'Block' } }); -const outerStyle = { - borderTop: '1px solid #363c4b', - borderBottom: '1px solid #363c4b', - lineHeight: '36px', - overflow: 'hidden', - flex: '0 0 auto', - display: 'flex' -}; - const outerDropdownStyle = { padding: '10px', flex: '1 1 auto' @@ -64,25 +55,25 @@ const ActionBar = React.createClass({ } return ( -
+
- - - + + + - - - + + + - - - + + +
diff --git a/app/assets/javascripts/components/features/account/components/header.jsx b/app/assets/javascripts/components/features/account/components/header.jsx index 30e0449c51..b2d943c1c6 100644 --- a/app/assets/javascripts/components/features/account/components/header.jsx +++ b/app/assets/javascripts/components/features/account/components/header.jsx @@ -16,7 +16,8 @@ const Header = React.createClass({ propTypes: { account: ImmutablePropTypes.map.isRequired, me: React.PropTypes.number.isRequired, - onFollow: React.PropTypes.func.isRequired + onFollow: React.PropTypes.func.isRequired, + intl: React.PropTypes.object.isRequired }, mixins: [PureRenderMixin], @@ -61,18 +62,18 @@ const Header = React.createClass({ const displayNameHTML = { __html: emojify(escapeTextContentForBrowser(displayName)) }; return ( -
-
+
+
- +
- @{account.get('acct')} {lockedIcon} -
+ @{account.get('acct')} {lockedIcon} +
{info} {actionBtn} diff --git a/app/assets/javascripts/components/features/compose/components/compose_form.jsx b/app/assets/javascripts/components/features/compose/components/compose_form.jsx index 48939054d5..46b62964a4 100644 --- a/app/assets/javascripts/components/features/compose/components/compose_form.jsx +++ b/app/assets/javascripts/components/features/compose/components/compose_form.jsx @@ -166,30 +166,30 @@ const ComposeForm = React.createClass({
-