fedi/mastodon
1
0
Fork 1
mirror of https://github.com/mastodon/mastodon.git synced 2024-11-27 07:46:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

[Glitch] Add hint about missing media attachment description in web UI

Browse source 
Port 4e9855e09a to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
Eugen Rochko 2022-03-22 09:48:12 +01:00 committed by Claire
parent 59864ff495
commit 91e6df7026
3 changed files with 24 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
app/javascript/flavours/glitch/features/compose/components/upload.js
View file

@ -5,7 +5,6 @@ import Motion from 'flavours/glitch/util/optional_motion';
import spring from 'react-motion/lib/spring'; import spring from 'react-motion/lib/spring';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import classNames from 'classnames';
import Icon from 'flavours/glitch/components/icon'; import Icon from 'flavours/glitch/components/icon';
import { isUserTouching } from 'flavours/glitch/util/is_mobile'; import { isUserTouching } from 'flavours/glitch/util/is_mobile';
@ -44,10 +43,16 @@ export default class Upload extends ImmutablePureComponent {
<Motion defaultStyle={{ scale: 0.8 }} style={{ scale: spring(1, { stiffness: 180, damping: 12, }) }}> <Motion defaultStyle={{ scale: 0.8 }} style={{ scale: spring(1, { stiffness: 180, damping: 12, }) }}>
{({ scale }) => ( {({ scale }) => (
<div style={{ transform: `scale(${scale})`, backgroundImage: `url(${media.get('preview_url')})`, backgroundPosition: `${x}% ${y}%` }}> <div style={{ transform: `scale(${scale})`, backgroundImage: `url(${media.get('preview_url')})`, backgroundPosition: `${x}% ${y}%` }}>
<div className={classNames('composer--upload_form--actions', { active: true })}> <div className='composer--upload_form--actions'>
<button className='icon-button' onClick={this.handleUndoClick}><Icon id='times' /> <FormattedMessage id='upload_form.undo' defaultMessage='Delete' /></button> <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>)} {!isEditingStatus && (<button className='icon-button' onClick={this.handleFocalPointClick}><Icon id='pencil' /> <FormattedMessage id='upload_form.edit' defaultMessage='Edit' /></button>)}
</div> </div>
{(media.get('description') || '').length === 0 && (
<div className='composer--upload_form--item__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> </div>
)} )}
</Motion> </Motion>

63
app/javascript/flavours/glitch/styles/components/composer.scss
View file

@ -425,54 +425,12 @@
background-repeat: no-repeat; background-repeat: no-repeat;
overflow: hidden; overflow: hidden;
textarea {
display: block;
position: absolute;
box-sizing: border-box;
bottom: 0;
left: 0;
margin: 0;
border: 0;
padding: 10px;
width: 100%;
color: $secondary-text-color;
background: linear-gradient(0deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent);
font-size: 14px;
font-family: inherit;
font-weight: 500;
opacity: 0;
z-index: 2;
transition: opacity .1s ease;
&:focus { color: $white }
&::placeholder {
opacity: 0.54;
color: $secondary-text-color;
}
}
& > .close { mix-blend-mode: difference } & > .close { mix-blend-mode: difference }
} }
&.active {
& > div {
textarea { opacity: 1 }
}
}
}
.composer--upload_form--actions {
background: linear-gradient(180deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent);
display: flex;
align-items: flex-start;
justify-content: space-between;
opacity: 0;
transition: opacity .1s ease;
.icon-button { .icon-button {
flex: 0 1 auto; flex: 0 1 auto;
color: $ui-secondary-color; color: $secondary-text-color;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
padding: 10px; padding: 10px;
@ -481,15 +439,28 @@
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
color: lighten($ui-secondary-color, 4%); color: lighten($secondary-text-color, 7%);
} }
} }
&.active { &__warning {
opacity: 1; position: absolute;
z-index: 2;
bottom: 0;
left: 0;
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);
} }
} }
.composer--upload_form--actions {
background: linear-gradient(180deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent);
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.composer--upload_form--progress { .composer--upload_form--progress {
display: flex; display: flex;
padding: 10px; padding: 10px;

8
app/javascript/flavours/glitch/styles/mastodon-light/diff.scss
View file

@ -165,14 +165,6 @@
} }
} }
.composer--upload_form--item > div input {
color: lighten($white, 7%);
&::placeholder {
color: lighten($white, 10%);
}
}
.dropdown-menu__separator, .dropdown-menu__separator,
.dropdown-menu__item.edited-timestamp__history__item, .dropdown-menu__item.edited-timestamp__history__item,
.dropdown-menu__container__header, .dropdown-menu__container__header,