Merge branch 'develop' of https://code.gab.com/gab/social/gab-social into feature/frontend_refactor

2020-01-28 11:29:26 -05:00
parent c00c202d39 1a6afcdd2b
commit 0a3c6cea89
225 changed files with 5598 additions and 2652 deletions
--- a/app/javascript/gabsocial/features/status/components/card/card.js
+++ b/app/javascript/gabsocial/features/status/components/card/card.js
@@ -59,16 +59,12 @@ export default class Card extends ImmutablePureComponent {

  static propTypes = {
    card: ImmutablePropTypes.map,
-    maxDescription: PropTypes.number,
    onOpenMedia: PropTypes.func.isRequired,
-    compact: PropTypes.bool,
    defaultWidth: PropTypes.number,
    cacheWidth: PropTypes.func,
  };

  static defaultProps = {
-    maxDescription: 50,
-    compact: false,
  };

  state = {
@@ -132,37 +128,52 @@ export default class Card extends ImmutablePureComponent {
        ref={this.setRef}
        className='status-card__image status-card-video'
        dangerouslySetInnerHTML={content}
-        style={{ height }}
+        style={{
+          height,
+          paddingBottom: 0,
+        }}
      />
    );
  }

  render () {
-    const { card, maxDescription, compact } = this.props;
+    const { card } = this.props;
    const { width, embedded } = this.state;

    if (card === null) {
      return null;
    }

-    const provider    = card.get('provider_name').length === 0 ? decodeIDNA(getHostname(card.get('url'))) : card.get('provider_name');
-    const horizontal  = (!compact && card.get('width') > card.get('height') && (card.get('width') + 100 >= width)) || card.get('type') !== 'link' || embedded;
+    const maxDescription = 150;
+    const cardImg = card.get('image');
+    const provider = card.get('provider_name').length === 0 ? decodeIDNA(getHostname(card.get('url'))) : card.get('provider_name');
+    const horizontal = (card.get('width') > card.get('height') && (card.get('width') + 100 >= width)) || card.get('type') !== 'link' || embedded;
    const interactive = card.get('type') !== 'link';
-    const className   = classnames('status-card', { horizontal, compact, interactive });
-    const title       = interactive ? <a className='status-card__title' href={card.get('url')} title={card.get('title')} rel='noopener' target='_blank'><strong>{card.get('title')}</strong></a> : <strong className='status-card__title' title={card.get('title')}>{card.get('title')}</strong>;
-    const ratio       = card.get('width') / card.get('height');
-    const height      = (compact && !embedded) ? (width / (16 / 9)) : (width / ratio);
+    const className = classnames('status-card', {
+      horizontal,
+      interactive,
+      compact: !cardImg && !interactive,
+    });
+    const title = interactive ?
+      <a className='status-card__title' href={card.get('url')} title={card.get('title')} rel='noopener' target='_blank'>
+        <strong>{card.get('title')}</strong>
+      </a>
+      : <strong className='status-card__title' title={card.get('title')}>{card.get('title')}</strong>;

    const description = (
      <div className='status-card__content'>
        {title}
-        {!(horizontal || compact) && <p className='status-card__description'>{trim(card.get('description') || '', maxDescription)}</p>}
-        <span className='status-card__host'>{provider}</span>
+        {!horizontal && <p className='status-card__description'>{trim(card.get('description') || '', maxDescription)}</p>}
+        <span className='status-card__host'>
+          <Icon id='link' fixedWidth />
+          {' '}
+          {provider}
+        </span>
      </div>
    );

-    let embed     = '';
-    let thumbnail = <div style={{ backgroundImage: `url(${card.get('image')})`, width: horizontal ? width : null, height: horizontal ? height : null }} className='status-card__image-image' />;
+    let embed = '';
+    let thumbnail = card ? <div style={{ backgroundImage: `url(${cardImg})` }} className='status-card__image-image' /> : thumbnail = <div className='status-card__image-image' />;

    if (interactive) {
      if (embedded) {
@@ -177,7 +188,6 @@ export default class Card extends ImmutablePureComponent {
        embed = (
          <div className='status-card__image'>
            {thumbnail}
-
            <div className='status-card__actions'>
              <div>
                <button onClick={this.handleEmbedClick}><Icon id={iconVariant} /></button>
@@ -191,10 +201,10 @@ export default class Card extends ImmutablePureComponent {
      return (
        <div className={className} ref={this.setRef}>
          {embed}
-          {!compact && description}
+          {description}
        </div>
      );
-    } else if (card.get('image')) {
+    } else if (cardImg) {
      embed = (
        <div className='status-card__image'>
          {thumbnail}
--- a/app/javascript/gabsocial/features/status/components/detailed_status/detailed_status.js
+++ b/app/javascript/gabsocial/features/status/components/detailed_status/detailed_status.js
@@ -1,3 +1,4 @@
+import StatusQuote from '../../../components/status_quote';
 import { Link, NavLink } from 'react-router-dom';
 import { FormattedDate, FormattedNumber } from 'react-intl';
 import ImmutablePropTypes from 'react-immutable-proptypes';
@@ -32,12 +33,17 @@ export default class DetailedStatus extends ImmutablePureComponent {
    compact: PropTypes.bool,
    showMedia: PropTypes.bool,
    onToggleMediaVisibility: PropTypes.func,
+    onShowRevisions: PropTypes.func,
  };

  state = {
    height: null,
  };

+  handleShowRevisions = () => {
+    this.props.onShowRevisions(this.props.status);
+  }
+  
  handleOpenVideo = (media, startTime) => {
    this.props.onOpenVideo(media, startTime);
  }
@@ -110,6 +116,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
            blurhash={video.get('blurhash')}
            src={video.get('url')}
            alt={video.get('description')}
+            aspectRatio={video.getIn(['meta', 'small', 'aspect'])}
            width={300}
            height={150}
            inline
@@ -185,16 +192,21 @@ export default class DetailedStatus extends ImmutablePureComponent {
            <DisplayName account={status.get('account')} localDomain={this.props.domain} />
          </NavLink>

-          {status.get('group') && (
-            <div className='status__meta'>
-              Posted in <NavLink to={`/groups/${status.getIn(['group', 'id'])}`}>{status.getIn(['group', 'title'])}</NavLink>
-            </div>
-          )}
+          {(status.get('group') || status.get('revised_at') !== null) && (
+              <div className='status__meta'>
+                {status.get('group') && <React.Fragment>Posted in <NavLink to={`/groups/${status.getIn(['group', 'id'])}`}>{status.getIn(['group', 'title'])}</NavLink></React.Fragment>}
+                {status.get('revised_at') !== null && <a onClick={this.handleShowRevisions}> Edited</a>}
+              </div>
+            )}

          <StatusContent status={status} expanded={!status.get('hidden')} onExpandedToggle={this.handleExpandedToggle} />

          {media}

+          {status.get('quote') && <StatusQuote
+            id={status.get('quote')}
+          />}
+
          <div className='detailed-status__meta'>
            <a className='detailed-status__datetime' href={status.get('url')} target='_blank' rel='noopener'>
              <FormattedDate value={new Date(status.get('created_at'))} hour12={false} year='numeric' month='short' day='2-digit' hour='2-digit' minute='2-digit' />
--- a/app/javascript/gabsocial/features/status/components/detailed_status_action_bar/detailed_status_action_bar.js
+++ b/app/javascript/gabsocial/features/status/components/detailed_status_action_bar/detailed_status_action_bar.js
@@ -10,13 +10,16 @@ import './detailed_status_action_bar.scss';

 const messages = defineMessages({
  delete: { id: 'status.delete', defaultMessage: 'Delete' },
-  redraft: { id: 'status.redraft', defaultMessage: 'Delete & re-draft' },
+  edit: { id: 'status.edit', defaultMessage: 'Edit' },
+  direct: { id: 'status.direct', defaultMessage: 'Direct message @{name}' },
  mention: { id: 'status.mention', defaultMessage: 'Mention @{name}' },
  reply: { id: 'status.reply', defaultMessage: 'Reply' },
  reblog: { id: 'status.reblog', defaultMessage: 'Repost' },
+  quote: { id: 'status.quote', defaultMessage: 'Quote' },
  reblog_private: { id: 'status.reblog_private', defaultMessage: 'Repost to original audience' },
  cancel_reblog_private: { id: 'status.cancel_reblog_private', defaultMessage: 'Un-repost' },
  cannot_reblog: { id: 'status.cannot_reblog', defaultMessage: 'This post cannot be reposted' },
+  cannot_quote: { id: 'status.cannot_quote', defaultMessage: 'This post cannot be quoted' },
  favourite: { id: 'status.favourite', defaultMessage: 'Favorite' },
  mute: { id: 'status.mute', defaultMessage: 'Mute @{name}' },
  muteConversation: { id: 'status.mute_conversation', defaultMessage: 'Mute conversation' },
@@ -50,6 +53,7 @@ class ActionBar extends ImmutablePureComponent {
    status: ImmutablePropTypes.map.isRequired,
    onReply: PropTypes.func.isRequired,
    onReblog: PropTypes.func.isRequired,
+    onQuote: PropTypes.func.isRequired,
    onFavourite: PropTypes.func.isRequired,
    onDelete: PropTypes.func.isRequired,
    onMention: PropTypes.func.isRequired,
@@ -79,6 +83,14 @@ class ActionBar extends ImmutablePureComponent {
    }
  }

+  handleQuoteClick = (e) => {
+    if (me) {
+      this.props.onQuote(this.props.status, e);
+    } else {
+      this.props.onOpenUnauthorizedModal();
+    }
+  }
+
  handleFavouriteClick = () => {
    if (me) {
      this.props.onFavourite(this.props.status);
@@ -91,8 +103,8 @@ class ActionBar extends ImmutablePureComponent {
    this.props.onDelete(this.props.status, this.context.router.history);
  }

-  handleRedraftClick = () => {
-    this.props.onDelete(this.props.status, this.context.router.history, true);
+  handleEditClick = () => {
+    this.props.onEdit(this.props.status);
  }

  handleMentionClick = () => {
@@ -176,7 +188,7 @@ class ActionBar extends ImmutablePureComponent {
      menu.push({ text: intl.formatMessage(mutingConversation ? messages.unmuteConversation : messages.muteConversation), action: this.handleConversationMuteClick });
      menu.push(null);
      menu.push({ text: intl.formatMessage(messages.delete), action: this.handleDeleteClick });
-      menu.push({ text: intl.formatMessage(messages.redraft), action: this.handleRedraftClick });
+      menu.push({ text: intl.formatMessage(messages.edit), action: this.handleEditClick });
    } else {
      menu.push({ text: intl.formatMessage(messages.mention, { name: status.getIn(['account', 'username']) }), action: this.handleMentionClick });
      menu.push(null);
@@ -208,17 +220,11 @@ class ActionBar extends ImmutablePureComponent {
    let reblog_disabled = (status.get('visibility') === 'direct' || status.get('visibility') === 'private');

    return (
-      <div className='detailed-status-action-bar'>
-        <div className='detailed-status-action-bar__button'>
-          <IconButton title={intl.formatMessage(messages.reply)} icon={status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) ? 'reply' : replyIcon} onClick={this.handleReplyClick} />
-        </div>
-        <div className='detailed-status-action-bar__button'>
-          <IconButton disabled={reblog_disabled} active={status.get('reblogged')} title={reblog_disabled ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)} icon={reblogIcon} onClick={this.handleReblogClick} />
-        </div>
-        <div className='detailed-status-action-bar__button'>
-          <IconButton className='star-icon' active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} />
-        </div>
-
+      <div className='detailed-status__action-bar'>
+        <div className='detailed-status__button'><IconButton title={intl.formatMessage(messages.reply)} icon={status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) ? 'reply' : replyIcon} onClick={this.handleReplyClick} /></div>
+        <div className='detailed-status__button'><IconButton disabled={reblog_disabled} active={status.get('reblogged')} title={reblog_disabled ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)} icon={reblogIcon} onClick={this.handleReblogClick} /></div>
+        <div className='detailed-status__button'><IconButton disabled={reblog_disabled} title={reblog_disabled ? intl.formatMessage(messages.cannot_quote) : intl.formatMessage(messages.quote)} icon='quote-left' onClick={this.handleQuoteClick} /></div>
+        <div className='detailed-status__button'><IconButton className='star-icon' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} /></div>
        {shareButton}

        <div className='detailed-status-action-bar__dropdown'>