From 4e9855e09aa4cc2720fed262ffaa6e0c94cf5688 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Tue, 22 Mar 2022 09:48:12 +0100 Subject: [PATCH] Add hint about missing media attachment description in web UI (#17845) --- .../features/compose/components/upload.js | 9 ++- .../styles/mastodon/components.scss | 60 ++++--------------- 2 files changed, 20 insertions(+), 49 deletions(-) diff --git a/app/javascript/mastodon/features/compose/components/upload.js b/app/javascript/mastodon/features/compose/components/upload.js index 1289d6b943d..706824dc712 100644 --- a/app/javascript/mastodon/features/compose/components/upload.js +++ b/app/javascript/mastodon/features/compose/components/upload.js @@ -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 { {({ scale }) => (
-
+
{!isEditingStatus && ()}
+ + {(media.get('description') || '').length === 0 && ( +
+ +
+ )}
)} diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index da249205252..d1b36d33bd7 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -596,30 +596,24 @@ display: flex; align-items: flex-start; justify-content: space-between; - opacity: 0; - transition: opacity .1s ease; + } - .icon-button { - flex: 0 1 auto; - color: $secondary-text-color; - font-size: 14px; - font-weight: 500; - padding: 10px; - font-family: inherit; + .icon-button { + flex: 0 1 auto; + color: $secondary-text-color; + font-size: 14px; + font-weight: 500; + padding: 10px; + font-family: inherit; - &:hover, - &:focus, - &:active { - color: lighten($secondary-text-color, 7%); - } - } - - &.active { - opacity: 1; + &:hover, + &:focus, + &:active { + color: lighten($secondary-text-color, 7%); } } - &-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; - } } }