learningtribes-studio-frontend 1.4.2-alpha.1 → 1.4.2-alpha.3

package/src/components/EditImageModal/displayMessages.jsx

@@ -48,9 +48,14 @@ const messages = defineMessages({
   },
   editImageModalImageDescriptionLabel: {
     id: 'editImageModalImageDescriptionLabel',
-    defaultMessage: 'Image Description (Alt Text)',
+    defaultMessage: 'Image Description',
     description: 'Label for the text input box for an image\'s description',
   },
+  editImageModalImageDecorativeDescription: {
+    id: 'editImageModalImageDecorativeDescription',
+    defaultMessage: 'If this image is purely decorative, it does not require alternative text.',
+    description: 'Help text shown under the image description when alternative text is optional',
+  },
   editImageModalImageDescriptionLegend: {
     id: 'editImageModalImageDescriptionLegend',
     defaultMessage: 'Image Description',

package/src/components/EditImageModal/index.jsx

@@ -1,4 +1,4 @@
-import { Button, Fieldset, Icon, InputText, Modal, StatusAlert, Variant } from '@edx/paragon';
+import { Button, CheckBox, Fieldset, InputText, Modal, StatusAlert, Variant } from '@edx/paragon';
 import classNames from 'classnames';
 import { connect } from 'react-redux';
 import FontAwesomeStyles from 'font-awesome/css/font-awesome.min.css';
@@ -57,6 +57,7 @@ const initialEditImageModalState = {
   isModalOpen: false,
   isStatusAlertOpen: false,
   pageNumber: 1,
+  editingExisting: false,
   shouldShowPreviousButton: false,
 };
 
@@ -122,12 +123,27 @@ export default class EditImageModal extends React.Component {
         break;
       }
       default: {
-        if (nextProps.selectedAsset.portable_url) {
+        if (nextProps.selectedAsset.portable_url &&
+          nextProps.selectedAsset.id !== this.props.selectedAsset.id) {
           newState.imageSource = nextProps.selectedAsset.portable_url;
         }
         break;
       }
     }
+
+    if (nextProps.assetsStatus.type !== assetActions.upload.UPLOAD_ASSET_SUCCESS &&
+      !nextProps.selectedAsset.id && this.state.imageSource && nextProps.assetsList.length) {
+      const source = this.state.imageSource;
+      const match = nextProps.assetsList.find(asset => (
+        asset.id && (
+          asset.portable_url === source || asset.url === source || asset.external_url === source
+        )
+      ));
+      if (match) {
+        nextProps.selectAsset(match);
+      }
+    }
+
     this.setState(state => ({
       ...newState,
       assetsPageType: getPageType(nextProps, state.assetsPageType),
@@ -408,6 +424,8 @@ export default class EditImageModal extends React.Component {
       <WrappedMessage message={messages.editImageModalImageDescriptionDescription} />
       {' '}
       {this.getLearnMoreLink()}
+      {' '}
+      <WrappedMessage message={messages.editImageModalImageDecorativeDescription} />
     </React.Fragment>
   );
 
@@ -422,8 +440,8 @@ export default class EditImageModal extends React.Component {
       }}
       variantIconDescription={<WrappedMessage message={messages.editImageModalFormError} />}
     >
-      <div className="form-row">
-        <div className="col">
+      <div className={styles['dimensions-row']}>
+        <div className={styles['dimension-field']}>
           <InputText
             name="imageWidth"
             label={
@@ -437,10 +455,8 @@ export default class EditImageModal extends React.Component {
             onBlur={this.onImageDimensionBlur('width')}
           />
         </div>
-        <div className="col-1 my-auto image-dimensions-x">
-          <Icon className={['fa', 'fa-times']} />
-        </div>
-        <div className="col">
+        <span className={styles['dimensions-separator']} aria-hidden="true">x</span>
+        <div className={styles['dimension-field']}>
           <InputText
             name={imageHeightID}
             label={
@@ -559,16 +575,16 @@ export default class EditImageModal extends React.Component {
 
   getModalHeader = () => {
     let header;
-    if (this.state.pageNumber === 1) {
+    if (this.state.pageNumber === 2 || this.state.editingExisting) {
       header = (
         <WrappedMessage
-          message={messages.editImageModalInsertTitle}
+          message={messages.editImageModalEditTitle}
         />
       );
-    } else if (this.state.pageNumber === 2) {
+    } else {
       header = (
         <WrappedMessage
-          message={messages.editImageModalEditTitle}
+          message={messages.editImageModalInsertTitle}
         />
       );
     }
@@ -594,11 +610,7 @@ export default class EditImageModal extends React.Component {
       case pageTypes.NORMAL:
         return (<WrappedAssetsList />);
       case pageTypes.NO_ASSETS:
-        return (
-          <div className="mt-3">
-            <WrappedMessage message={messages.editImageModalAssetsListNoAssetsMessage} tagName="h3" />
-          </div>
-        );
+        return null;
       case pageTypes.NO_RESULTS:
         return (
           <React.Fragment>
@@ -649,7 +661,7 @@ export default class EditImageModal extends React.Component {
           {this.getImageSelectionModalBodyAssetsList(this.state.assetsPageType)}
         </div>
       </div>
-      {this.isAssetSelected() && (
+      {(this.isAssetSelected() || this.state.imageSource) && (
         <div className="row mt-3">
           <div className="col">
             {/* Hidden image to load dimensions */}
@@ -663,7 +675,7 @@ export default class EditImageModal extends React.Component {
                 style={{ display: 'none' }}
               />
             )}
-            <form ref={this.setImageFormRef}>
+            <form className={styles['image-fields']} ref={this.setImageFormRef}>
               {this.getImageDescriptionInput()}
               {this.getImageDimensionsInput()}
             </form>
@@ -684,7 +696,7 @@ export default class EditImageModal extends React.Component {
           {this.getImagePreview()}
         </div>
         <div className="col">
-          <form ref={this.setImageFormRef}>
+          <form className={styles['image-fields']} ref={this.setImageFormRef}>
             {this.getImageDescriptionInput()}
             {this.getImageDimensionsInput()}
           </form>
@@ -696,12 +708,7 @@ export default class EditImageModal extends React.Component {
   getModalButtons = () => {
     let buttons;
     if (this.state.pageNumber === 1) {
-      // Show Save button if asset is selected, otherwise show Next button
-      if (this.isAssetSelected()) {
-        buttons = this.getInsertImageButton();
-      } else {
-        buttons = this.getNextPageButton();
-      }
+      buttons = this.getInsertImageButton();
     } else if (this.state.pageNumber === 2) {
       buttons = this.getInsertImageButton();
     }
@@ -742,6 +749,7 @@ export default class EditImageModal extends React.Component {
         />
       }
       buttonType="primary"
+      disabled={!this.isAssetSelected() && !this.state.imageSource}
       onClick={this.onInsertImageButtonClick}
     />
   );
@@ -785,16 +793,15 @@ export default class EditImageModal extends React.Component {
       } : {},
       imageSource: eventSource || '',
       imageStyle: event.detail.style || '',
+      editingExisting: !isEventSourceEmpty,
       // if existing img had a source, assume it could be loaded and show the image preview
       isImageLoaded: !!eventSource,
       isModalOpen: true,
-      pageNumber: isEventSourceEmpty ? 1 : 2,
-      shouldShowPreviousButton: isEventSourceEmpty,
+      pageNumber: 1,
+      shouldShowPreviousButton: false,
     }));
 
-    if (this.props.assetsList.length === 0) {
-      this.props.getAssets({ assetTypes: { Images: true }, pageSize: 1000 }, this.props.courseDetails);
-    }
+    this.props.getAssets({ assetTypes: { Images: true }, pageSize: 1000 }, this.props.courseDetails);
   }
 
   validateImageDescription = () => {

package/src/data/i18n/default/transifex_input.json

@@ -145,12 +145,13 @@
   "editImageModalFormValidImageDescription": "Add an image description or specify that the image is decorative only.",
   "editImageModalFormValidImageDimensions": "Image dimensions must be positive numbers.",
   "editImageModalImageDescriptionDescription": "Alternative text for users who cannot view the image, such as \"The sky with clouds\".",
-  "editImageModalImageDescriptionLabel": "Image Description (Alt Text)",
+  "editImageModalImageDescriptionLabel": "Image Description",
+  "editImageModalImageDecorativeDescription": "If this image is purely decorative, it does not require alternative text.",
   "editImageModalImageDescriptionLegend": "Image Description",
   "editImageModalDimensionsLegend": "Image Dimensions",
   "editImageModalImageHeight": "Height",
   "editImageModalImagePreviewText": "Image Preview",
-  "editImageModalInsertImageButton": "Insert Image",
+  "editImageModalInsertImageButton": "Save",
   "editImageModalLearnMore": "Learn more.",
   "editImageModalLockImageProportionsCheckboxLabel": "Lock proportions",
   "editImageModalImageWidth": "Width",