From 91e6df70266bd475c3d4ef2b411f42cff805bd47 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Tue, 22 Mar 2022 09:48:12 +0100 Subject: [PATCH] [Glitch] Add hint about missing media attachment description in web UI Port 4e9855e09aa4cc2720fed262ffaa6e0c94cf5688 to glitch-soc Signed-off-by: Claire --- .../features/compose/components/upload.js | 9 ++- .../glitch/styles/components/composer.scss | 63 +++++-------------- .../glitch/styles/mastodon-light/diff.scss | 8 --- 3 files changed, 24 insertions(+), 56 deletions(-) diff --git a/app/javascript/flavours/glitch/features/compose/components/upload.js b/app/javascript/flavours/glitch/features/compose/components/upload.js index 338bfca37c..963b95c87b 100644 --- a/app/javascript/flavours/glitch/features/compose/components/upload.js +++ b/app/javascript/flavours/glitch/features/compose/components/upload.js @@ -5,7 +5,6 @@ import Motion from 'flavours/glitch/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 'flavours/glitch/components/icon'; import { isUserTouching } from 'flavours/glitch/util/is_mobile'; @@ -44,10 +43,16 @@ export default class Upload extends ImmutablePureComponent { {({ scale }) => (
-
+
{!isEditingStatus && ()}
+ + {(media.get('description') || '').length === 0 && ( +
+ +
+ )}
)} diff --git a/app/javascript/flavours/glitch/styles/components/composer.scss b/app/javascript/flavours/glitch/styles/components/composer.scss index 937751d00a..96ea096e17 100644 --- a/app/javascript/flavours/glitch/styles/components/composer.scss +++ b/app/javascript/flavours/glitch/styles/components/composer.scss @@ -425,54 +425,12 @@ background-repeat: no-repeat; 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 } } - &.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 { flex: 0 1 auto; - color: $ui-secondary-color; + color: $secondary-text-color; font-size: 14px; font-weight: 500; padding: 10px; @@ -481,15 +439,28 @@ &:hover, &:focus, &:active { - color: lighten($ui-secondary-color, 4%); + color: lighten($secondary-text-color, 7%); } } - &.active { - opacity: 1; + &__warning { + 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 { display: flex; padding: 10px; diff --git a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss index 020d39affe..bb91abdac0 100644 --- a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss +++ b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss @@ -165,14 +165,6 @@ } } -.composer--upload_form--item > div input { - color: lighten($white, 7%); - - &::placeholder { - color: lighten($white, 10%); - } -} - .dropdown-menu__separator, .dropdown-menu__item.edited-timestamp__history__item, .dropdown-menu__container__header,