Unify show/hide content buttons

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,45 +46,45 @@
           :attentions="status.attentions"
           @parse-ready="onParseReady"
         />
-
-        <button
-          v-show="hideSubjectStatus"
-          class="button-unstyled -link cw-status-hider"
-          @click.prevent="toggleShowMore"
+        <div
+          v-show="shouldShowToggle"
+          :class="toggleButtonClasses"
         >
-          {{ $t("status.show_content") }}
-          <FAIcon
-            v-if="attachmentTypes.includes('image')"
-            icon="image"
-          />
-          <FAIcon
-            v-if="attachmentTypes.includes('video')"
-            icon="video"
-          />
-          <FAIcon
-            v-if="attachmentTypes.includes('audio')"
-            icon="music"
-          />
-          <FAIcon
-            v-if="attachmentTypes.includes('unknown')"
-            icon="file"
-          />
-          <FAIcon
-            v-if="status.poll && status.poll.options"
-            icon="poll-h"
-          />
-          <FAIcon
-            v-if="status.card"
-            icon="link"
-          />
-        </button>
-        <button
-          v-show="showingMore && !fullContent"
-          class="button-unstyled -link status-unhider"
-          @click.prevent="toggleShowMore"
-        >
-          {{ tallStatus ? $t("general.show_less") : $t("status.hide_content") }}
-        </button>
+          <button
+            class="btn button-default toggle-button"
+            :class="{ '-focused': focused }"
+            :aria-expanded="showingMore"
+            @click.prevent="toggleShowMore"
+          >
+            {{ toggleText }}
+            <template v-if="!showingMore">
+              <FAIcon
+                v-if="attachmentTypes.includes('image')"
+                icon="image"
+              />
+              <FAIcon
+                v-if="attachmentTypes.includes('video')"
+                icon="video"
+              />
+              <FAIcon
+                v-if="attachmentTypes.includes('audio')"
+                icon="music"
+              />
+              <FAIcon
+                v-if="attachmentTypes.includes('unknown')"
+                icon="file"
+              />
+              <FAIcon
+                v-if="status.poll && status.poll.options"
+                icon="poll-h"
+              />
+              <FAIcon
+                v-if="status.card"
+                icon="link"
+              />
+            </template>
+          </button>
+        </div>
       </div>
     </div>
     <slot v-if="!hideSubjectStatus" />