Progress

2020-02-13 19:40:04 -05:00
parent 389b189d64
commit cdde454915
44 changed files with 783 additions and 819 deletions
--- a/app/javascript/gabsocial/features/account_timeline/account_timeline.js
+++ b/app/javascript/gabsocial/features/account_timeline/account_timeline.js
@@ -7,7 +7,7 @@ import { expandAccountFeaturedTimeline, expandAccountTimeline } from '../../acti
 import { fetchAccountIdentityProofs } from '../../actions/identity_proofs';
 import { me } from '../../initial_state';
 import StatusList from '../../components/status_list/status_list';
-import ColumnIndicator from '../../components/column_indicator/column_indicator';
+import ColumnIndicator from '../../components/column_indicator';
 import Column from '../../components/column';
 import SectionHeadlineBar from '../../components/section_headline_bar' ;

--- a/app/javascript/gabsocial/features/compose/components/character_counter/character_counter.js
+++ b/app/javascript/gabsocial/features/compose/components/character_counter/character_counter.js
@@ -1,23 +1,36 @@
-import { length } from 'stringz';
-import classNames from 'classnames';
+import { length } from 'stringz'

 export default class CharacterCounter extends PureComponent {

  static propTypes = {
    text: PropTypes.string.isRequired,
    max: PropTypes.number.isRequired,
-  };
+  }

  render () {
-    const diff = this.props.max - length(this.props.text);
-
-    const classes = classNames('character-counter', {
-      'character-counter--over': (diff < 0),
-    });
+    const radius = 12
+    const circumference = 2 * Math.PI * radius
+    const diff = length(this.props.text) / this.props.max
+    const dashoffset = circumference * (1 - diff)

    return (
-      <div className='character-counter__wrapper'>
-        <span className={classes}>{diff}</span>
+      <div className={[styles.default, styles.marginRight10PX, styles.justifyContentCenter, styles.alignItemsCenter].join(' ')}>
+        <svg width="32" height="32" viewBox="0 0 32 32">
+          <circle fill='none' cx="16" cy="16" r="12" fill="none" stroke="#e6e6e6" stroke-width="2" />
+          <circle style={{
+              // transform: 'rotate(-90deg)',
+              strokeDashoffset: dashoffset,
+              strokeDasharray: circumference,
+            }}
+            fill='none'
+            cx="16"
+            cy="16"
+            r="12"
+            strokeWidth="2"
+            strokeLinecap='round'
+            stroke='#21cf7a'
+          />
+        </svg>
      </div>
    )
  }
--- a/app/javascript/gabsocial/features/compose/components/compose_extra_button.js
+++ b/app/javascript/gabsocial/features/compose/components/compose_extra_button.js
@@ -59,7 +59,7 @@ export default class ComposeExtraButton extends PureComponent {
          onMouseEnter={() => this.handleOnMouseEnter()}
          onMouseLeave={() => this.handleOnMouseLeave()}
        >
-          <Icon icon={icon} width='18px' height='18px' />
+          <Icon id={icon} width='18px' height='18px' className={styles.fillColorSubtle} />
          <span className={titleClasses}>
            {title}
          </span>
--- a/app/javascript/gabsocial/features/compose/components/compose_form/compose_form.js
+++ b/app/javascript/gabsocial/features/compose/components/compose_form/compose_form.js
@@ -299,6 +299,7 @@ class ComposeForm extends ImmutablePureComponent {
            </div>
            <CharacterCounter max={maxPostCharacterCount} text={text} />
            <Button
+              className={[styles.fontSize15PX, styles.paddingHorizontal15PX].join(' ')}
              text={intl.formatMessage(scheduledAt ? messages.schedulePost : messages.publish)}
              onClick={this.handleSubmit}
              disabled={disabledButton}
--- a/app/javascript/gabsocial/features/compose/components/poll_button.js
+++ b/app/javascript/gabsocial/features/compose/components/poll_button.js
@@ -54,7 +54,7 @@ class PollButton extends PureComponent {
        title={intl.formatMessage(active ? messages.remove_poll : messages.title)}
        disabled={disabled}
        onClick={this.handleClick}
-        icon='tasks'
+        icon='poll'
      />
    )
  }
--- a/app/javascript/gabsocial/features/compose/components/upload_button.js
+++ b/app/javascript/gabsocial/features/compose/components/upload_button.js
@@ -65,7 +65,7 @@ class UploadButton extends ImmutablePureComponent {
        title={intl.formatMessage(messages.title)}
        disabled={disabled}
        onClick={this.handleClick}
-        icon='upload'
+        icon='media'
      >
        <label>
          <span className={styles.displayNone}>{intl.formatMessage(messages.upload)}</span>
--- a/app/javascript/gabsocial/features/pinned_statuses/pinned_statuses.js
+++ b/app/javascript/gabsocial/features/pinned_statuses/pinned_statuses.js
@@ -5,7 +5,7 @@ import { fetchPinnedStatuses } from '../../actions/pin_statuses';
 import { meUsername } from '../../initial_state';
 import Column from '../../components/column';
 import StatusList from '../../components/status_list/status_list';
-import ColumnIndicator from '../../components/column_indicator/column_indicator';
+import ColumnIndicator from '../../components/column_indicator';

 const mapStateToProps = (state, { params: { username } }) => {
  return {
--- a/app/javascript/gabsocial/features/status/components/card/card.js
+++ b/app/javascript/gabsocial/features/status/components/card/card.js
@@ -115,113 +115,131 @@ export default class Card extends ImmutablePureComponent {
  }

  renderVideo () {
-    const { card }  = this.props;
-    const content   = { __html: addAutoPlay(card.get('html')) };
-    const { width } = this.state;
-    const ratio     = card.get('width') / card.get('height');
-    const height    = width / ratio;
+    const { card }  = this.props
+    const content   = { __html: addAutoPlay(card.get('html')) }
+    const { width } = this.state
+    const ratio     = card.get('width') / card.get('height')
+    const height    = width / ratio

    return (
      <div
        ref={this.setRef}
-        className='status-card__image status-card-video'
+        className={[styles.default, styles.backgroundColorSubtle3, styles.positionAbsolute, styles.top0, styles.right0, styles.bottom0, styles.left0, styles.statusCardVideo].join(' ')}
        dangerouslySetInnerHTML={content}
-        style={{
-          height,
-          paddingBottom: 0,
-        }}
      />
-    );
+    )
  }

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

-    if (card === null) {
-      return null;
-    }
+    if (card === null) return null
+
+    const maxDescription = 160
+    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 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,
-      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>;
+      (
+        <a
+          className={[styles.default, styles.displayFlex, styles.text, styles.noUnderline, styles.overflowWrapBreakWord, styles.colorBlack, styles.fontSize15PX, styles.fontWeight500].join(' ')}
+          href={card.get('url')}
+          title={card.get('title')}
+          rel='noopener'
+          target='_blank'
+        >
+          {card.get('title')}
+        </a>
+      )
+      : (
+        <span className={[styles.default, styles.displayFlex, styles.text, styles.overflowWrapBreakWord, styles.colorBlack, styles.fontSize15PX, styles.fontWeight500].join(' ')}>
+          {card.get('title')}
+        </span>
+      )

    const description = (
-      <div className='status-card__content'>
+      <div className={[styles.default, styles.flexNormal, styles.paddingHorizontal10PX, styles.paddingVertical10PX, styles.borderColorSubtle, styles.borderLeft1PX].join(' ')}>
        {title}
-        {!horizontal && <p className='status-card__description'>{trim(card.get('description') || '', maxDescription)}</p>}
-        <span className='status-card__host'>
-          <Icon id='link' fixedWidth />
-          {' '}
+        <p className={[styles.default, styles.displayFlex, styles.text, styles.marginVertical5PX, styles.overflowWrapBreakWord, styles.colorSubtle, styles.fontSize13PX, styles.fontWeightNormal].join(' ')}>
+          {trim(card.get('description') || '', maxDescription)}
+        </p>
+        <span className={[styles.default, styles.marginTopAuto, styles.flexRow, styles.alignItemsCenter, styles.colorSubtle, styles.text, styles.displayFlex, styles.textOverflowEllipsis, styles.fontSize13PX].join(' ')}>
+          <Icon id='link' width='12px' height='12px' className={[styles.fillColorSubtle, styles.marginRight5PX].join(' ')} fixedWidth />
          {provider}
        </span>
      </div>
-    );
+    )

-    let embed = '';
-    let thumbnail = card ? <div style={{ backgroundImage: `url(${cardImg})` }} className='status-card__image-image' /> : thumbnail = <div className='status-card__image-image' />;
+    let embed = ''
+    let thumbnail = interactive ?
+      <img src={cardImg} className={[styles.default, styles.objectFitCover, styles.positionAbsolute, styles.width100PC, styles.height100PC, styles.top0, styles.right0, styles.bottom0, styles.left0].join(' ')} />
+      :
+      <img src={cardImg} className={[styles.default, styles.objectFitCover, styles.width400PX, styles.height260PX].join(' ')} />

    if (interactive) {
      if (embedded) {
-        embed = this.renderVideo();
-      } else {
-        let iconVariant = 'play';
+        embed = this.renderVideo()
+      }

-        if (card.get('type') === 'photo') {
-          iconVariant = 'search-plus';
-        }
+      let iconVariant = 'play'

-        embed = (
-          <div className='status-card__image'>
-            {thumbnail}
-            <div className='status-card__actions'>
-              <div>
-                <button onClick={this.handleEmbedClick}><Icon id={iconVariant} /></button>
-                {horizontal && <a href={card.get('url')} target='_blank' rel='noopener'><Icon id='external-link' /></a>}
-              </div>
-            </div>
-          </div>
-        );
+      if (card.get('type') === 'photo') {
+        iconVariant = 'search-plus'
      }

      return (
-        <div className={className} ref={this.setRef}>
-          {embed}
-          {description}
+        <div className={[styles.default, styles.width100PC, styles.paddingHorizontal10PX].join(' ')}>
+          <div className={[styles.default, styles.overflowHidden, styles.width100PC, styles.borderColorSubtle2, styles.border1PX, styles.radiusSmall].join(' ')}>
+            <div className={[styles.default, styles.width100PC].join(' ')}>
+              <div className={[styles.default, styles.width100PC, styles.paddingTop5625PC].join(' ')}>
+                { !!embed && embed}
+                { !embed && thumbnail}
+                { !embed &&
+                  <div className={[styles.default, styles.positionAbsolute, styles.top0, styles.right0, styles.left0, styles.bottom0, styles.alignItemsCenter, styles.justifyContentCenter].join(' ')}>
+                    <button
+                      className={[styles.default, styles.cursorPointer, styles.backgroundColorOpaque, styles.radiusSmall, styles.paddingVertical15PX, styles.paddingHorizontal15PX].join(' ')}
+                      onClick={this.handleEmbedClick}
+                    >
+                      <Icon id={iconVariant} className={[styles.fillColorWhite].join(' ')}/>
+                    </button>
+                  </div>
+                }
+              </div>
+            </div>
+            {description}
+          </div>
        </div>
-      );
+      )
    } else if (cardImg) {
      embed = (
-        <div className='status-card__image'>
+        <div className={[styles.default].join(' ')}>
          {thumbnail}
        </div>
-      );
+      )
    } else {
      embed = (
-        <div className='status-card__image'>
-          <Icon id='file-text' />
+        <div className={[styles.default, styles.paddingVertical15PX, styles.paddingHorizontal15PX, styles.width72PX, styles.alignItemsCenter, styles.justifyContentCenter].join(' ')}>
+          <Icon id='file-text' width='22px' height='22px' className={styles.fillColorSubtle} />
        </div>
-      );
+      )
    }

    return (
-      <a href={card.get('url')} className={className} target='_blank' rel='noopener' ref={this.setRef}>
-        {embed}
-        {description}
-      </a>
-    );
+      <div className={[styles.default, styles.width100PC, styles.paddingHorizontal10PX].join(' ')}>
+        <a
+          href={card.get('url')}
+          className={[styles.default, styles.cursorPointer, styles.flexRow, styles.overflowHidden, styles.noUnderline, styles.width100PC, styles.borderColorSubtle2, styles.border1PX, styles.radiusSmall].join(' ')}
+          rel='noopener'
+          ref={this.setRef}
+          >
+          {embed}
+          {description}
+        </a>
+        </div>
+    )
  }

 }
--- a/app/javascript/gabsocial/features/ui/ui.js
+++ b/app/javascript/gabsocial/features/ui/ui.js
@@ -32,7 +32,7 @@ import HomePage from '../../pages/home_page';
 // import GroupSidebarPanel from '../groups/sidebar_panel';

 import {
-  // Status,
+  Status,
  // GettingStarted,
  // CommunityTimeline,
  // AccountTimeline,
@@ -230,10 +230,10 @@ class SwitchingColumnsArea extends PureComponent {

        <Redirect from='/@:username/pins' to='/:username/pins' />
        <WrappedRoute path='/:username/pins' component={PinnedStatuses} page={ProfilePage} content={children} />
-
+        */ }
        <Redirect from='/@:username/posts/:statusId' to='/:username/posts/:statusId' exact />
        <WrappedRoute path='/:username/posts/:statusId' publicRoute exact layout={LAYOUT.STATUS} component={Status} content={children} />
-
+        { /*
        <Redirect from='/@:username/posts/:statusId/reblogs' to='/:username/posts/:statusId/reblogs' />
        <WrappedRoute path='/:username/posts/:statusId/reblogs' layout={LAYOUT.STATUS} component={Reblogs} content={children} />

--- a/app/javascript/gabsocial/features/ui/util/wrapped_route.js
+++ b/app/javascript/gabsocial/features/ui/util/wrapped_route.js
@@ -54,7 +54,7 @@ export default class WrappedRoute extends Component {
  }

  renderLoading = () => {
-    return <ColumnIndicator type='loading' />;
+    return <div />
  }

  renderError = (props) => {