From b8b7b506a27ddc1373032078a4f1cfd47242627a Mon Sep 17 00:00:00 2001 From: Yamagishi Kazutoshi Date: Fri, 19 May 2017 18:42:54 +0900 Subject: [PATCH] Replace inline styles with stylesheet (#3115) --- .../components/autosuggest_textarea.js | 3 +- app/javascript/mastodon/components/button.js | 12 ++- .../mastodon/components/column_collapsable.js | 2 +- .../mastodon/components/icon_button.js | 9 +- .../mastodon/components/media_gallery.js | 2 +- .../mastodon/components/status_content.js | 14 +-- .../mastodon/components/video_player.js | 4 +- .../features/account/components/header.js | 14 +-- .../components/emoji_picker_dropdown.js | 18 +--- .../features/getting_started/index.js | 2 +- app/javascript/mastodon/features/ui/index.js | 2 +- app/javascript/styles/components.scss | 89 ++++++++++++++++++- spec/javascript/components/button.test.jsx | 6 +- 13 files changed, 122 insertions(+), 55 deletions(-) diff --git a/app/javascript/mastodon/components/autosuggest_textarea.js b/app/javascript/mastodon/components/autosuggest_textarea.js index 869ecad6b0..b3d62ec3a6 100644 --- a/app/javascript/mastodon/components/autosuggest_textarea.js +++ b/app/javascript/mastodon/components/autosuggest_textarea.js @@ -79,6 +79,7 @@ class AutosuggestTextarea extends ImmutablePureComponent { } // auto-resize textarea + e.target.style.height = 'auto'; e.target.style.height = `${e.target.scrollHeight}px`; this.props.onChange(e); @@ -197,7 +198,7 @@ class AutosuggestTextarea extends ImmutablePureComponent { style={style} /> -
0 && !suggestionsHidden) ? 'block' : 'none' }} className='autosuggest-textarea__suggestions'> +
{suggestions.map((suggestion, i) => (
+ ); diff --git a/app/javascript/mastodon/components/column_collapsable.js b/app/javascript/mastodon/components/column_collapsable.js index a54f76932a..44ec63af86 100644 --- a/app/javascript/mastodon/components/column_collapsable.js +++ b/app/javascript/mastodon/components/column_collapsable.js @@ -35,7 +35,7 @@ class ColumnCollapsable extends React.PureComponent {
-
+
{children}
diff --git a/app/javascript/mastodon/components/icon_button.js b/app/javascript/mastodon/components/icon_button.js index b229e57483..c2fbbd4b9e 100644 --- a/app/javascript/mastodon/components/icon_button.js +++ b/app/javascript/mastodon/components/icon_button.js @@ -36,18 +36,15 @@ class IconButton extends React.PureComponent { } render () { - let style = { + const style = { fontSize: `${this.props.size}px`, width: `${this.props.size * 1.28571429}px`, height: `${this.props.size * 1.28571429}px`, lineHeight: `${this.props.size}px`, - ...this.props.style + ...this.props.style, + ...(this.props.active ? this.props.activeStyle : {}) }; - if (this.props.active) { - style = { ...style, ...this.props.activeStyle }; - } - const classes = ['icon-button']; if (this.props.active) { diff --git a/app/javascript/mastodon/components/media_gallery.js b/app/javascript/mastodon/components/media_gallery.js index 4395887353..10389751ef 100644 --- a/app/javascript/mastodon/components/media_gallery.js +++ b/app/javascript/mastodon/components/media_gallery.js @@ -173,7 +173,7 @@ class MediaGallery extends React.PureComponent { return (
-
+
diff --git a/app/javascript/mastodon/components/status_content.js b/app/javascript/mastodon/components/status_content.js index fd12cc78a9..4d002607d2 100644 --- a/app/javascript/mastodon/components/status_content.js +++ b/app/javascript/mastodon/components/status_content.js @@ -117,15 +117,15 @@ class StatusContent extends React.PureComponent { return (
- {mentionsPlaceholder} -