Merge branch 'tusooa/unify-show-hide' into 'develop'

Unify show/hide content buttons

Closes #1294

See merge request pleroma/pleroma-fe!2178

changelog.d/unify-show-hide-buttons.add

@@ -0,0 +1 @@
+Unify show/hide content buttons

src/components/status_body/status_body.js

@@ -72,6 +72,23 @@ const StatusContent = {
     hideTallStatus () {
       return this.mightHideBecauseTall && !this.showingTall
     },
+    shouldShowToggle () {
+      return this.mightHideBecauseSubject || this.mightHideBecauseTall
+    },
+    toggleButtonClasses () {
+      return {
+        'cw-status-hider': !this.showingMore && this.mightHideBecauseSubject,
+        'tall-status-hider': !this.showingMore && this.mightHideBecauseTall,
+        'status-unhider': this.showingMore,
+      }
+    },
+    toggleText () {
+      if (this.showingMore) {
+        return this.mightHideBecauseSubject ? this.$t('status.hide_content') : this.$t('general.show_less')
+      } else {
+        return this.mightHideBecauseSubject ? this.$t('status.show_content') : this.$t('general.show_more')
+      }
+    },
     showingMore () {
       return (this.mightHideBecauseTall && this.showingTall) || (this.mightHideBecauseSubject && this.expandingSubject)
     },

src/components/status_body/status_body.scss

@@ -62,7 +62,6 @@
     &.-tall-status {
       position: relative;
       height: 16em;
-      overflow: hidden;
       z-index: 1;
 
       .media-body {
@@ -82,6 +81,10 @@
         mask-composite: exclude;
       }
     }
+
+    &.-expanded {
+      overflow: visible;
+    }
   }
 
   & .tall-status-hider,
@@ -95,6 +98,13 @@
     text-align: center;
   }
 
+  .status-unhider {
+    margin-top: auto;
+    position: sticky;
+    bottom: 0;
+    padding-bottom: 1em;
+  }
+
   .tall-status-hider {
     position: absolute;
     height: 5em;
@@ -118,6 +128,10 @@
     }
   }
 
+  .toggle-button {
+    padding: 0.5em;
+  }
+
   &.-compact {
     align-items: start;
     flex-direction: row;

src/components/status_body/status_body.vue

@@ -31,17 +31,9 @@
         </button>
       </div>
       <div
-        :class="{'-tall-status': hideTallStatus}"
         class="text-wrapper"
+        :class="{'-tall-status': hideTallStatus, '-expanded': showingMore}"
       >
-        <button
-          v-show="hideTallStatus"
-          class="button-unstyled -link tall-status-hider"
-          :class="{ '-focused': focused }"
-          @click.prevent="toggleShowMore"
-        >
-          {{ $t("general.show_more") }}
-        </button>
         <RichContent
           v-if="!hideSubjectStatus && !(singleLine && status.summary_raw_html)"
           :class="{ '-single-line': singleLine }"
@@ -54,13 +46,18 @@
           :attentions="status.attentions"
           @parse-ready="onParseReady"
         />
-
+        <div
+          v-show="shouldShowToggle"
+          :class="toggleButtonClasses"
+        >
           <button
-          v-show="hideSubjectStatus"
+            class="btn button-default toggle-button"
-          class="button-unstyled -link cw-status-hider"
+            :class="{ '-focused': focused }"
+            :aria-expanded="showingMore"
             @click.prevent="toggleShowMore"
           >
-          {{ $t("status.show_content") }}
+            {{ toggleText }}
+            <template v-if="!showingMore">
               <FAIcon
                 v-if="attachmentTypes.includes('image')"
                 icon="image"
@@ -85,14 +82,9 @@
                 v-if="status.card"
                 icon="link"
               />
+            </template>
           </button>
-        <button
+        </div>
-          v-show="showingMore && !fullContent"
-          class="button-unstyled -link status-unhider"
-          @click.prevent="toggleShowMore"
-        >
-          {{ tallStatus ? $t("general.show_less") : $t("status.hide_content") }}
-        </button>
       </div>
     </div>
     <slot v-if="!hideSubjectStatus" />