about summary refs log tree commit diff
path: root/app/javascript
diff options
context:
space:
mode:
authorFire Demon <firedemon@creature.cafe>2020-07-18 15:03:20 -0500
committerFire Demon <firedemon@creature.cafe>2020-08-30 05:43:07 -0500
commit629847488ba4c8d8fe1aa4883271bed506eaab15 (patch)
tree5030cef4c32fe688bf51eeffc874ce054b91954c /app/javascript
parentaf8a1309bde2a85bd94d06f3f152ae6355677095 (diff)
[Feature, UI] Visualize thread nesting in Web app
Diffstat (limited to 'app/javascript')
-rw-r--r--app/javascript/flavours/glitch/components/status.js1
-rw-r--r--app/javascript/flavours/glitch/features/status/components/detailed_status.js8
-rw-r--r--app/javascript/flavours/glitch/styles/monsterfork/components/status.scss14
3 files changed, 22 insertions, 1 deletions
diff --git a/app/javascript/flavours/glitch/components/status.js b/app/javascript/flavours/glitch/components/status.js
index 5d3789b24..021c75c76 100644
--- a/app/javascript/flavours/glitch/components/status.js
+++ b/app/javascript/flavours/glitch/components/status.js
@@ -673,6 +673,7 @@ class Status extends ImmutablePureComponent {
     //  Users can use those for theming, hiding avatars etc via UserStyle
     const selectorAttribs = {
       'data-status-by': `@${status.getIn(['account', 'acct'])}`,
+      'data-nest-level': status.get('nest_level'),
     };
 
     if (prepend && account) {
diff --git a/app/javascript/flavours/glitch/features/status/components/detailed_status.js b/app/javascript/flavours/glitch/features/status/components/detailed_status.js
index e4aecbf94..24e614a8d 100644
--- a/app/javascript/flavours/glitch/features/status/components/detailed_status.js
+++ b/app/javascript/flavours/glitch/features/status/components/detailed_status.js
@@ -251,9 +251,15 @@ export default class DetailedStatus extends ImmutablePureComponent {
       );
     }
 
+    const selectorAttribs = {
+      'data-status-by': `@${status.getIn(['account', 'acct'])}`,
+      'data-nest-level': status.get('nest_level'),
+      'data-nest-deep': status.get('nest_level') >= 15,
+    };
+
     return (
       <div style={outerStyle}>
-        <div ref={this.setRef} className={classNames('detailed-status', `detailed-status-${status.get('visibility')}`, { compact })} data-status-by={status.getIn(['account', 'acct'])}>
+        <div ref={this.setRef} className={classNames('detailed-status', `detailed-status-${status.get('visibility')}`, { compact })} {...selectorAttribs}>
           <a href={status.getIn(['account', 'url'])} onClick={this.handleAccountClick} className='detailed-status__display-name'>
             <div className='detailed-status__display-avatar'><Avatar account={status.get('account')} size={48} /></div>
             <DisplayName account={status.get('account')} localDomain={this.props.domain} />
diff --git a/app/javascript/flavours/glitch/styles/monsterfork/components/status.scss b/app/javascript/flavours/glitch/styles/monsterfork/components/status.scss
index e64f21a21..f7b3a8ccd 100644
--- a/app/javascript/flavours/glitch/styles/monsterfork/components/status.scss
+++ b/app/javascript/flavours/glitch/styles/monsterfork/components/status.scss
@@ -6,3 +6,17 @@
     font-size: 12px;
   }
 }
+
+@for $i from 0 through 15 {
+  div[data-nest-level="#{$i}"] {
+    border-left: #{$i * 5}px solid darken($ui-base-color, 8%);
+  }
+}
+
+div[data-nest-deep="true"] {
+  border-left: 75px solid darken($ui-base-color, 8%);
+}
+
+.status, .detailed-status {
+  border-bottom: 1px solid darken($ui-base-color, 8%);
+}
\ No newline at end of file