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

Port 4e9855e09aa4cc2720fed262ffaa6e0c94cf5688 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

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 338bfca37..963b95c87 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 {
         <Motion defaultStyle={{ scale: 0.8 }} style={{ scale: spring(1, { stiffness: 180, damping: 12, }) }}>
           {({ scale }) => (
             <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>
                 {!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='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>
           )}
         </Motion>
diff --git a/app/javascript/flavours/glitch/styles/components/composer.scss b/app/javascript/flavours/glitch/styles/components/composer.scss
index 937751d00..96ea096e1 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 020d39aff..bb91abdac 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,