Another large update for all components

reorganization, linting, updating file imports, consolidation warning: there will be errors in this commit todo: update webpack, add missing styles, scss files, consolidate group page components.
2019-08-09 12:06:27 -04:00
parent 280dc51d85
commit 3d509c84a2
183 changed files with 4802 additions and 2361 deletions
--- a/app/javascript/gabsocial/components/modal/embed_modal/embed_modal.js
+++ b/app/javascript/gabsocial/components/modal/embed_modal/embed_modal.js
@@ -1,7 +1,13 @@
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import { FormattedMessage, injectIntl } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 import api from '../../../api'

+const messages = defineMessages({
+  embed: { id: 'status.embed', defaultMessage: 'Embed' },
+  instructions: { id: 'embed.instructions', defaultMessage: 'Embed this status on your website by copying the code below.' },
+  preview: { id: 'embed.preview', defaultMessage: 'Here is what it will look like:' },
+});
+
 export default @injectIntl
 class EmbedModal extends ImmutablePureComponent {

@@ -48,15 +54,15 @@ class EmbedModal extends ImmutablePureComponent {
  }

  render () {
-    const { oembed } = this.state;
+    const { oembed, intl } = this.state;

    return (
      <div className='modal-root__modal embed-modal'>
-        <h4><FormattedMessage id='status.embed' defaultMessage='Embed' /></h4>
+        <h4>{intl.formatMessage(messages.embed)}</h4>

        <div className='embed-modal__container'>
          <p className='hint'>
-            <FormattedMessage id='embed.instructions' defaultMessage='Embed this status on your website by copying the code below.' />
+            {intl.formatMessage(messages.instructions)}
          </p>

          <input
@@ -68,7 +74,7 @@ class EmbedModal extends ImmutablePureComponent {
          />

          <p className='hint'>
-            <FormattedMessage id='embed.preview' defaultMessage='Here is what it will look like:' />
+            {intl.formatMessage(messages.preview)}
          </p>

          <iframe
--- a/app/javascript/gabsocial/components/modal/embed_modal/embed_modal.scss
+++ b/app/javascript/gabsocial/components/modal/embed_modal/embed_modal.scss
@@ -0,0 +1,59 @@
+.embed-modal {
+  max-width: 80vw;
+  max-height: 80vh;
+
+  h4 {
+    padding: 30px;
+    font-weight: 500;
+    font-size: 16px;
+    text-align: center;
+  }
+
+  .embed-modal__container {
+    padding: 10px;
+
+    .hint {
+      margin-bottom: 15px;
+    }
+
+    .embed-modal__html {
+      outline: 0;
+      box-sizing: border-box;
+      display: block;
+      width: 100%;
+      border: none;
+      padding: 10px;
+      font-family: $font-monospace, monospace;
+      background: $ui-base-color;
+      color: $primary-text-color;
+      font-size: 14px;
+      margin: 0;
+      margin-bottom: 15px;
+
+      &::-moz-focus-inner {
+        border: 0;
+      }
+
+      &::-moz-focus-inner,
+      &:focus,
+      &:active {
+        outline: 0 !important;
+      }
+
+      &:focus {
+        background: lighten($ui-base-color, 4%);
+      }
+
+      @media screen and (max-width: 600px) {
+        font-size: 16px;
+      }
+    }
+
+    .embed-modal__iframe {
+      width: 400px;
+      max-width: 100%;
+      overflow: hidden;
+      border: 0;
+    }
+  }
+}
--- a/app/javascript/gabsocial/components/modal/focal_point_modal/focal_point_modal.js
+++ b/app/javascript/gabsocial/components/modal/focal_point_modal/focal_point_modal.js
@@ -5,6 +5,8 @@ import { changeUploadCompose } from '../../../actions/compose';
 import { getPointerPosition } from '../../../utils/element_position';
 import ImageLoader from '../../image_loader';

+import './focal_point_modal.scss';
+
 const mapStateToProps = (state, { id }) => ({
  media: state.getIn(['compose', 'media_attachments']).find(item => item.get('id') === id),
 });
@@ -101,7 +103,7 @@ class FocalPointModal extends ImmutablePureComponent {
    const height = media.getIn(['meta', 'original', 'height']) || null;

    return (
-      <div className='modal-root__modal video-modal focal-point-modal'>
+      <div className='modal-root__modal focal-point-modal'>
        <div className={classNames('focal-point', { dragging })} ref={this.setRef}>
          <ImageLoader
            previewSrc={media.get('preview_url')}
--- a/app/javascript/gabsocial/components/modal/focal_point_modal/focal_point_modal.scss
+++ b/app/javascript/gabsocial/components/modal/focal_point_modal/focal_point_modal.scss
@@ -0,0 +1,36 @@
+.focal-point-modal {
+  position: relative;
+
+  @include max-size(80vw, 80vh);
+}
+
+.focal-point {
+  position: relative;
+  cursor: pointer;
+  overflow: hidden;
+
+  &.dragging {
+    cursor: move;
+  }
+
+  img {
+    margin: auto;
+
+    @include max-size(80vw, 80vh);
+    @include size(auto);
+  }
+
+  &__reticle {
+    position: absolute;
+    transform: translate(-50%, -50%);
+    background: url('/assets/images/reticle.png') no-repeat 0 0;
+    box-shadow: 0 0 0 9999em rgba($base-shadow-color, 0.35);
+
+    @include circle(100px);
+  }
+
+  &__overlay {
+    @include size(100%);
+    @include abs-position(0, auto, auto, 0);
+  }
+}
--- a/app/javascript/gabsocial/components/modal/media_modal/media_modal.js
+++ b/app/javascript/gabsocial/components/modal/media_modal/media_modal.js
@@ -9,6 +9,8 @@ import IconButton from '../../icon_button';
 import ImageLoader from '../../image_loader';
 import Icon from '../../icon';

+import './media_modal.scss';
+
 const messages = defineMessages({
  close: { id: 'lightbox.close', defaultMessage: 'Close' },
  previous: { id: 'lightbox.previous', defaultMessage: 'Previous' },
--- a/app/javascript/gabsocial/components/modal/media_modal/media_modal.scss
+++ b/app/javascript/gabsocial/components/modal/media_modal/media_modal.scss
@@ -0,0 +1,103 @@
+.media-modal {
+  position: relative;
+
+  @include size(100%);
+
+  &__closer {
+    @include abs-position(0, 0, 0, 0);
+  }
+
+  &__navigation {
+    pointer-events: none;
+    transition: opacity 0.3s linear;
+    will-change: opacity;
+
+    @include abs-position(0, 0, 0, 0);
+
+    * {
+      pointer-events: auto;
+    }
+
+    &.media-modal__navigation--hidden {
+      opacity: 0;
+
+      * {
+        pointer-events: none;
+      }
+    }
+  }
+
+  &__nav {
+    background: rgba($base-overlay-background, 0.5);
+    box-sizing: border-box;
+    border: 0;
+    color: $primary-text-color;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-size: 24px;
+    height: 20vmax;
+    margin: auto 0;
+    padding: 30px 15px;
+
+    @include abs-position(0, auto, 0, auto);
+
+    &--left {
+      left: 0;
+    }
+
+    &--right {
+      right: 0;
+    }
+  }
+
+  &__meta,
+  &__pagination {
+    width: 100%;
+    text-align: center;
+    pointer-events: none;
+
+    @include abs-position(auto, auto, 20px, 0);
+  }
+
+  &__meta {
+    &--shifted {
+      bottom: 62px;
+    }
+
+    a {
+      text-decoration: none;
+      font-weight: 500;
+      color: $ui-secondary-color;
+
+      &:hover,
+      &:focus,
+      &:active {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  &__page-dot {
+    display: inline-block;
+  }
+
+  &__button {
+    background-color: $primary-text-color;
+    border-radius: 6px;
+    margin: 10px;
+    padding: 0;
+    border: 0;
+    font-size: 0;
+
+    @include size(12px);
+
+    &--active {
+      background-color: $highlight-text-color;
+    }
+  }
+
+  &__close {
+    @include abs-position(8px, 8px);
+  }
+}
--- a/app/javascript/gabsocial/components/modal/mute_modal/mute_modal.js
+++ b/app/javascript/gabsocial/components/modal/mute_modal/mute_modal.js
@@ -1,5 +1,5 @@
 import { injectIntl, FormattedMessage } from 'react-intl';
-import Toggle from 'react-toggle';
+import ToggleSwitch from '../../toggle_switch';
 import Button from '../../button';
 import { closeModal } from '../../../actions/modal';
 import { muteAccount } from '../../../actions/accounts';
@@ -82,7 +82,7 @@ class MuteModal extends PureComponent {
            <label htmlFor='mute-modal__hide-notifications-checkbox'>
              <FormattedMessage id='mute_modal.hide_notifications' defaultMessage='Hide notifications from this user?' />
              {' '}
-              <Toggle id='mute-modal__hide-notifications-checkbox' checked={notifications} onChange={this.toggleNotifications} />
+              <ToggleSwitch id='mute-modal__hide-notifications-checkbox' checked={notifications} onChange={this.toggleNotifications} />
            </label>
          </div>
        </div>
--- a/app/javascript/gabsocial/components/modal/report_modal/report_modal.js
+++ b/app/javascript/gabsocial/components/modal/report_modal/report_modal.js
@@ -2,7 +2,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
 import { OrderedSet } from 'immutable';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import Toggle from 'react-toggle';
+import ToggleSwitch from '../../toggle_switch';
 import { changeReportComment, changeReportForward, submitReport } from '../../../actions/reports';
 import { expandAccountTimeline } from '../../../actions/timelines';
 import { makeGetAccount } from '../../../selectors';
@@ -111,7 +111,7 @@ class ReportModal extends ImmutablePureComponent {
                <p><FormattedMessage id='report.forward_hint' defaultMessage='The account is from another server. Send an anonymized copy of the report there as well?' /></p>

                <div className='setting-toggle'>
-                  <Toggle id='report-forward' checked={forward} disabled={isSubmitting} onChange={this.handleForwardChange} />
+                  <ToggleSwitch id='report-forward' checked={forward} disabled={isSubmitting} onChange={this.handleForwardChange} />
                  <label htmlFor='report-forward' className='setting-toggle__label'><FormattedMessage id='report.forward' defaultMessage='Forward to {target}' values={{ target: domain }} /></label>
                </div>
              </div>