diff options
| author | Fire Demon <firedemon@creature.cafe> | 2020-07-18 15:03:20 -0500 |
|---|---|---|
| committer | Fire Demon <firedemon@creature.cafe> | 2020-08-30 05:43:07 -0500 |
| commit | 629847488ba4c8d8fe1aa4883271bed506eaab15 (patch) | |
| tree | 5030cef4c32fe688bf51eeffc874ce054b91954c /app/javascript | |
| parent | af8a1309bde2a85bd94d06f3f152ae6355677095 (diff) | |
[Feature, UI] Visualize thread nesting in Web app
Diffstat (limited to 'app/javascript')
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 |