forked from treehouse/mastodon
Add hint about missing media attachment description in web UI (#17845)
parent
69f9dc4f4e
commit
4e9855e09a
|
@ -5,7 +5,6 @@ import Motion from '../../ui/util/optional_motion';
|
|||
import spring from 'react-motion/lib/spring';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import classNames from 'classnames';
|
||||
import Icon from 'mastodon/components/icon';
|
||||
|
||||
export default class Upload extends ImmutablePureComponent {
|
||||
|
@ -43,10 +42,16 @@ export default class Upload extends ImmutablePureComponent {
|
|||
<Motion defaultStyle={{ scale: 0.8 }} style={{ scale: spring(1, { stiffness: 180, damping: 12 }) }}>
|
||||
{({ scale }) => (
|
||||
<div className='compose-form__upload-thumbnail' style={{ transform: `scale(${scale})`, backgroundImage: `url(${media.get('preview_url')})`, backgroundPosition: `${x}% ${y}%` }}>
|
||||
<div className={classNames('compose-form__upload__actions', { active: true })}>
|
||||
<div className='compose-form__upload__actions'>
|
||||
<button className='icon-button' onClick={this.handleUndoClick}><Icon id='times' /> <FormattedMessage id='upload_form.undo' defaultMessage='Delete' /></button>
|
||||
{!isEditingStatus && (<button className='icon-button' onClick={this.handleFocalPointClick}><Icon id='pencil' /> <FormattedMessage id='upload_form.edit' defaultMessage='Edit' /></button>)}
|
||||
</div>
|
||||
|
||||
{(media.get('description') || '').length === 0 && (
|
||||
<div className='compose-form__upload__warning'>
|
||||
<button className='icon-button' onClick={this.handleFocalPointClick}><Icon id='info-circle' /> <FormattedMessage id='upload_form.description_missing' defaultMessage='No description added' /></button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</Motion>
|
||||
|
|
|
@ -596,8 +596,7 @@
|
|||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
opacity: 0;
|
||||
transition: opacity .1s ease;
|
||||
}
|
||||
|
||||
.icon-button {
|
||||
flex: 0 1 auto;
|
||||
|
@ -614,12 +613,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&-description {
|
||||
&__warning {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
bottom: 0;
|
||||
|
@ -627,34 +621,6 @@
|
|||
right: 0;
|
||||
box-sizing: border-box;
|
||||
background: linear-gradient(0deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent);
|
||||
padding: 10px;
|
||||
opacity: 0;
|
||||
transition: opacity .1s ease;
|
||||
|
||||
textarea {
|
||||
background: transparent;
|
||||
color: $secondary-text-color;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
|
||||
&:focus {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
opacity: 0.75;
|
||||
color: $secondary-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue