fix(style): Fix regressions introduced by #2338 (#2345)

Put Column Slim Back Button classnames in order so it is positioned right and top. Add icon button style back to privacy dropdown and upload buttons so they are positioned correctly and do not wiggle. Remove abstracted style from CSS. Add missed class for the upload form thumbnail. Add the missed styles for upload form thumnail. Alphabetize styles for column-back-button. Fix fontSize typo for media-spoiler-video-play-icon.

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 f739b3f83de22985ea61b920350a7e4c297da16c..719690097197873a725005ed3da429923656d713 100644 (file)
--- a/app/assets/javascripts/components/components/column_back_button_slim.jsx
+++ b/app/assets/javascripts/components/components/column_back_button_slim.jsx
@@ -15,7 +15,7 @@ class ColumnBackButtonSlim extends React.PureComponent {
   render () {
     return (
       <div className='column-back-button--slim'>
-        <div className='column-back-button--slim-button' role='button' tabIndex='0' onClick={this.handleClick} className='column-back-button'>
+        <div role='button' tabIndex='0' onClick={this.handleClick} className='column-back-button column-back-button--slim-button'>
           <i className='fa fa-fw fa-chevron-left column-back-button__icon' />
           <FormattedMessage id='column_back_button.label' defaultMessage='Back' />
         </div>

diff --git a/app/assets/javascripts/components/features/compose/components/privacy_dropdown.jsx b/app/assets/javascripts/components/features/compose/components/privacy_dropdown.jsx
index 537871bb5fc160d7be138fb1ee25193d75142691..507fe7b580c386cd2fe9cc660b5b89b9d27c4d82 100644 (file)
--- a/app/assets/javascripts/components/features/compose/components/privacy_dropdown.jsx
+++ b/app/assets/javascripts/components/features/compose/components/privacy_dropdown.jsx
@@ -14,6 +14,11 @@ const messages = defineMessages({
   change_privacy: { id: 'privacy.change', defaultMessage: 'Adjust status privacy' }
 });
 
+const iconStyle = {
+  height: null,
+  lineHeight: '27px'
+}
+
 class PrivacyDropdown extends React.PureComponent {
 
   constructor (props, context) {
@@ -72,7 +77,7 @@ class PrivacyDropdown extends React.PureComponent {
 
     return (
       <div ref={this.setRef} className={`privacy-dropdown ${open ? 'active' : ''}`}>
-        <div className='privacy-dropdown__value'><IconButton className='privacy-dropdown__value-icon' icon={valueOption.icon} title={intl.formatMessage(messages.change_privacy)} size={18} active={open} inverted onClick={this.handleToggle} /></div>
+        <div className='privacy-dropdown__value'><IconButton className='privacy-dropdown__value-icon' icon={valueOption.icon} title={intl.formatMessage(messages.change_privacy)} size={18} active={open} inverted onClick={this.handleToggle} style={iconStyle}/></div>
         <div className='privacy-dropdown__dropdown'>
           {options.map(item =>
             <div role='button' tabIndex='0' key={item.value} onClick={this.handleClick.bind(this, item.value)} className={`privacy-dropdown__option ${item.value === value ? 'active' : ''}`}>

diff --git a/app/assets/javascripts/components/features/compose/components/upload_button.jsx b/app/assets/javascripts/components/features/compose/components/upload_button.jsx
index 80e5a0545c8036f1b2e655a275bf81630a8036cf..9b2de0332fee81582bf9a34c31e522f8b2dc2873 100644 (file)
--- a/app/assets/javascripts/components/features/compose/components/upload_button.jsx
+++ b/app/assets/javascripts/components/features/compose/components/upload_button.jsx
@@ -6,6 +6,12 @@ const messages = defineMessages({
   upload: { id: 'upload_button.label', defaultMessage: 'Add media' }
 });
 
+
+const iconStyle = {
+  height: null,
+  lineHeight: '27px'
+}
+
 class UploadButton extends React.PureComponent {
 
   constructor (props, context) {
@@ -30,11 +36,12 @@ class UploadButton extends React.PureComponent {
   }
 
   render () {
+
     const { intl, resetFileKey, disabled } = this.props;
 
     return (
       <div className='compose-form__upload-button'>
-        <IconButton icon='camera' title={intl.formatMessage(messages.upload)} disabled={disabled} onClick={this.handleClick} className='compose-form__upload-button-icon' size={18} inverted />
+        <IconButton icon='camera' title={intl.formatMessage(messages.upload)} disabled={disabled} onClick={this.handleClick} className='compose-form__upload-button-icon' size={18} inverted style={iconStyle}/>
         <input key={resetFileKey} ref={this.setRef} type='file' multiple={false} onChange={this.handleChange} disabled={disabled} style={{ display: 'none' }} />
       </div>
     );

diff --git a/app/assets/javascripts/components/features/compose/components/upload_form.jsx b/app/assets/javascripts/components/features/compose/components/upload_form.jsx
index a937cafb76c78d7ef41694a82d42b86c7fa7f299..4aafe698e8f122ced1c50b6505d26ecdd1241ae4 100644 (file)
--- a/app/assets/javascripts/components/features/compose/components/upload_form.jsx
+++ b/app/assets/javascripts/components/features/compose/components/upload_form.jsx
@@ -18,7 +18,7 @@ class UploadForm extends React.PureComponent {
       <div className='compose-form__upload' key={attachment.get('id')}>
         <Motion defaultStyle={{ scale: 0.8 }} style={{ scale: spring(1, { stiffness: 180, damping: 12 }) }}>
           {({ scale }) =>
-            <div style={{ transform: `translateZ(0) scale(${scale})`, background: `url(${attachment.get('preview_url')}) no-repeat center` }}>
+            <div className='compose-form__upload-thumbnail' style={{ transform: `translateZ(0) scale(${scale})`, background: `url(${attachment.get('preview_url')}) no-repeat center` }}>
               <IconButton icon='times' title={intl.formatMessage(messages.undo)} size={36} onClick={this.props.onRemoveFile.bind(this, attachment.get('id'))} />
             </div>
           }

diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss
index ac9a264ee5425b6b855032fe2d9ac23e28d2899a..228c2f8ceba6d024c6e07ecadbe87b782ceb2c40 100644 (file)
--- a/app/assets/stylesheets/components.scss
+++ b/app/assets/stylesheets/components.scss
@@ -261,6 +261,12 @@
   margin: 5px;
 }
 
+.compose-form__upload-thumbnail {
+  border-radius: 4px;
+  height: 100px;
+  width: 100%;
+}
+
 .compose-form__upload-cancel {
   background-size: cover;
   border-radius: 4px;
@@ -1347,12 +1353,12 @@ a.status__content__spoiler-link {
 }
 
 .column-back-button {
-  padding: 15px;
-  font-size: 16px;
   background: lighten($color1, 4%);
-  flex: 0 0 auto;
-  cursor: pointer;
   color: $color4;
+  cursor: pointer;
+  flex: 0 0 auto;
+  font-size: 16px;
+  padding: 15px;
   z-index: 3;
 
   &:hover {
@@ -2375,10 +2381,6 @@ button.icon-button.active i.fa-retweet {
     box-shadow: 0 -4px 4px rgba($color8, 0.1);
   }
 
-  .privacy-dropdown__value-icon {
-    line-height: 27px;
-  }
-
   .privacy-dropdown__dropdown {
     display: block;
     box-shadow: 2px 4px 6px rgba($color8, 0.1);
@@ -3061,7 +3063,7 @@ button.icon-button.active i.fa-retweet {
 .media-spoiler-video-play-icon {
   border-radius: 100px;
   color: rgba(255, 255, 255, 0.8);
-  fontSize: 36px;
+  font-size: 36px;
   padding: 5px;
   position: absolute;
   top: 50%;