[UI] Show all body tags

2 files changed, 96 insertions, 34 deletions

diff --git a/app/javascript/flavours/glitch/components/status_content.js b/app/javascript/flavours/glitch/components/status_content.js
index 9fec168f3..f46c8a04d 100644
--- a/app/javascript/flavours/glitch/components/status_content.js
+++ b/app/javascript/flavours/glitch/components/status_content.js
@@ -232,7 +232,7 @@ export default class StatusContent extends React.PureComponent {
 
     let element = e.target;
     while (element) {
-      if (['button', 'video', 'a', 'label', 'canvas'].includes(element.localName)) {
+      if (['button', 'video', 'a', 'label', 'canvas', 'details', 'summary'].includes(element.localName)) {
         return;
       }
       element = element.parentNode;
@@ -350,7 +350,7 @@ export default class StatusContent extends React.PureComponent {
       </li>
     ));
 
-    const permissions = status_permission_items && (
+    const permissions = (status_permission_items || account_permission_items) && (
       <details className='status__permissions' onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp}>
         <summary>
           <Icon id='unlock-alt' />
@@ -366,6 +366,42 @@ export default class StatusContent extends React.PureComponent {
       </details>
     );
 
+    const tag_items = status.get('tags') && status.get('tags').map(hashtag =>
+      (
+        <li>
+          <Icon id='tag' />
+          <Permalink
+            href={hashtag.get('url')}
+            to={`/timelines/tag/${hashtag.get('name')}`}
+          >
+            <span>{hashtag.get('name')}</span>
+          </Permalink>
+        </li>
+      ));
+
+    const tags = tag_items && (
+      <details className='status__tags' onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp}>
+        <summary>
+          <Icon id='tag' />
+          <FormattedMessage
+            id='status.tags'
+            defaultMessage='Show all tags...'
+            key={`tags-${status.get('id')}`}
+          />
+        </summary>
+        <ul>
+          {tag_items}
+        </ul>
+      </details>
+    );
+
+    const footers = (
+      <div className='status__footers'>
+        {permissions}
+        {tags}
+      </div>
+    );
+
     const content = { __html: status.get('contentHtml') };
     const spoilerContent = { __html: status.get('spoilerHtml') };
     const directionStyle = { direction: 'ltr' };
@@ -446,7 +482,7 @@ export default class StatusContent extends React.PureComponent {
             {media}
           </div>
 
-          {permissions}
+          {footers}
 
         </div>
       );
@@ -469,7 +505,7 @@ export default class StatusContent extends React.PureComponent {
             tabIndex='0'
           />
           {media}
-          {permissions}
+          {footers}
         </div>
       );
     } else {
@@ -483,7 +519,7 @@ export default class StatusContent extends React.PureComponent {
           {status_notice_wrapper}
           <div ref={this.setContentsRef} key={`contents-${tagLinks}`} className='status__content__text' dangerouslySetInnerHTML={content} tabIndex='0' />
           {media}
-          {permissions}
+          {footers}
         </div>
       );
     }
diff --git a/app/javascript/flavours/glitch/styles/monsterfork/components/status.scss b/app/javascript/flavours/glitch/styles/monsterfork/components/status.scss
index 2976f6807..562be1975 100644
--- a/app/javascript/flavours/glitch/styles/monsterfork/components/status.scss
+++ b/app/javascript/flavours/glitch/styles/monsterfork/components/status.scss
@@ -2,7 +2,8 @@
   margin-bottom: 1em;
 }
 
-.status__notice-wrapper:empty {
+.status__notice-wrapper:empty,
+.status__footers:empty {
   display: none;
 }
 
@@ -23,45 +24,70 @@
   }
 }
 
-.status__permissions {
+.status__footers {
   font-size: 12px;
   margin-top: 1em;
 
-  & > summary {
-    font-size: 12px;
-
-    &:focus, &:active {
-      outline: none;
+  & > details {
+    & > summary {
+      &:focus, &:active {
+        outline: none;
+      }
+    }
+    
+    & > summary > span,
+    & > ul > li > span,
+    & > ul > li > a {
+      color: lighten($dark-text-color, 4%);
+      padding-left: 8px;
     }
   }
 
-  & > summary > span,
-  & > ul > li > span {
-    color: lighten($dark-text-color, 4%);
-    padding-left: 8px;
-  }
-
-  & > ul > li > span > span:first-child {
-    display: inline-block;
-    text-transform: capitalize;
-    min-width: 5em;
-  }
+  .status__tags {
+    & > ul {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+    }
 
-  & > summary > i {
-    color: #999966;
-  }
+    & > ul > li {
+      list-style: none;
+      display: inline-block;
+      width: 50%;
+    }
 
-  & > ul > li.permission-status > i {
-    color: #99cccc;
+    & > summary > i,
+    & > ul > li > i {
+      color: #669999;
+    }
   }
 
-  & > ul > li.permission-account > i {
-    color: #cc99cc;
-  }
+  .status__permissions {
+    & > summary > i {
+      color: #999966;
+    }
 
-  & > ul > li > span > span,
-  & > ul > li > span > code {
-    color: lighten($primary-text-color, 30%);
+    & > ul > li {
+      &.permission-status > i {
+        color: #99cccc;
+      }
+
+      &.permission-account > i {
+        color: #cc99cc;
+      }
+
+      & > span {
+        & > span, & > code {
+          color: lighten($primary-text-color, 30%);
+        }
+
+        & > span:first-child {
+          display: inline-block;
+          text-transform: capitalize;
+          min-width: 5em;
+        }
+      }
+    }
   }
 }