learningtribes-studio-frontend 1.2.0 → 1.4.0-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "learningtribes-studio-frontend",
-  "version": "1.2.0",
+  "version": "1.4.0-alpha.0",
   "description": "The frontend for the Open edX platform",
   "repository": "Learningtribes/studio-frontend",
   "scripts": {

package/src/components/AssetsDropZone/AssetsDropZone.scss

@@ -1,7 +1,7 @@
 @import 'edx-bootstrap';
 
 .center-text {
-  text-align: center;
+  text-align: center !important;
 }
 
 .drop-zone-compact {
@@ -42,3 +42,9 @@
   outline: $dark dashed 2px;
   background-color: rgba($primary, 0.2);
 }
+
+.supported-files-types {
+  color: #727272;
+  font-size: 12px !important;
+  font-weight: 400;
+}

package/src/components/AssetsDropZone/container.jsx

@@ -6,6 +6,8 @@ import { uploadAssets, uploadExceedMaxSize, uploadExceedMaxCount, uploadInvalidF
 
 const mapStateToProps = state => ({
   courseDetails: state.studioDetails.course,
+  collapseBorder: (state.studioDetails.collapseBorder !== undefined) ? state.studioDetails.collapseBorder : false,
+  supportedFileTypes: state.studioDetails.supportedFileTypes
 });
 
 const mapDispatchToProps = dispatch => ({

package/src/components/AssetsDropZone/displayMessages.jsx

@@ -21,6 +21,11 @@ const messages = defineMessages({
     defaultMessage: 'Size limit: {maxFileSizeMB} MB',
     description: 'Upload label for maximum file size',
   },
+  assetsDropZoneSupportedFileTypesLabel: {
+    id: 'assetsDropZoneSupportedFileTypesLabel',
+    defaultMessage: 'Supported file types: {filesTypesList}',
+    description: 'Supported file types information',
+  }
 });
 
 export default messages;

package/src/components/AssetsDropZone/index.jsx

@@ -46,10 +46,10 @@ export default class AssetsDropZone extends React.Component {
 
   render() {
     return (
-      <WrappedMessage message={messages.assetsDropZoneAriaLabel}>
+      <WrappedMessage message={messages.assetsDropZoneAriaLabel} collapseBorder={this.props.collapseBorder}>
         { regionLabel =>
           (
-            <div role="region" aria-label={regionLabel}>
+            <div role="region" aria-label={regionLabel} className={this.props.collapseBorder ? "collapsedZoneStyle": ""}>
               <Dropzone
                 accept={this.props.acceptedFileTypes}
                 activeClassName={styles['drop-active']}
@@ -110,6 +110,20 @@ export default class AssetsDropZone extends React.Component {
                     </p>
                   )}
                 </WrappedMessage>
+                {this.props.supportedFileTypes !== undefined &&
+                    <WrappedMessage message={messages.assetsDropZoneSupportedFileTypesLabel} values={{filesTypesList: this.props.supportedFileTypes}}>
+                    { displayText => (
+                      <p
+                        aria-hidden
+                        className={styles['center-text'] + " supported-files-types"}
+                        data-identifier="asset-drop-zone-supported-file-types-label"
+                        id="asset-drop-zone-supported-file-types-label"
+                      >
+                        {displayText}
+                      </p>
+                    )}
+                    </WrappedMessage>
+                }
               </Dropzone>
             </div>
           )

package/src/components/AssetsPage/AssetsPage.scss

@@ -4,3 +4,15 @@
     top: -2em;
   }
 }
+
+.collapsedBorderStyle {
+  padding: 0px !important;
+  background-color: white !important;
+}
+
+.collapsedZoneStyle {
+  margin: 0px !important;
+  padding: 20px 3px 20px 3px !important;
+  width: 940px !important;
+  max-width: 100% !important;
+}

package/src/components/AssetsPage/container.jsx

@@ -15,6 +15,7 @@ const mapStateToProps = state => ({
   uploadSettings: state.studioDetails.upload_settings,
   searchMetadata: state.metadata.search,
   status: state.metadata.status,
+  showFilterAndList: (state.studioDetails.showFilterAndList !== undefined) ? state.studioDetails.showFilterAndList : true
 });
 
 const mapDispatchToProps = dispatch => ({

package/src/components/AssetsPage/index.jsx

@@ -25,6 +25,8 @@ export default class AssetsPage extends React.Component {
 
     this.state = {
       pageType: pageTypes.SKELETON,
+      showFilterAndList: props.showFilterAndList,
+      collapseBorder: props.collapseBorder
     };
 
     this.statusAlertRef = null;
@@ -122,24 +124,29 @@ export default class AssetsPage extends React.Component {
           <div className="page-header">
             <WrappedAssetsImagePreviewFilter />
           </div>
-          {this.renderAssetsFilters()}
+          {this.state.showFilterAndList && this.renderAssetsFilters()}
         </div>
-        <div className="col-10 table-list" id={TABLE_CONTENTS_ID} tabIndex="-1">
+        {this.state.showFilterAndList && <div className="col-10 table-list" id={TABLE_CONTENTS_ID} tabIndex="-1">
           <div className="row">
             <WrappedAssetsTable
               deleteButtonRefs={(button, asset) => { this.deleteButtonRefs[asset.id] = button; }}
             />
           </div>
-        </div>
-      </div>
-      <div className="row">
-        <WrappedAssetsResultsCount />
+        </div>}
       </div>
+      {this.state.showFilterAndList &&
+        <div className="row">
+          <WrappedAssetsResultsCount/>
+        </div>
+      }
+      {this.state.showFilterAndList &&
       <div className="row">
+
         <div className="col-10 offset-2">
-          <WrappedPagination />
+          <WrappedPagination/>
         </div>
       </div>
+      }
     </React.Fragment>
   );
 
@@ -169,7 +176,7 @@ export default class AssetsPage extends React.Component {
     <div className="row file-upload-main">
       <div className="col">
         {this.renderAssetsDropZone()}
-        {this.renderAssetsFilters()}
+        {this.state.showFilterAndList && this.renderAssetsFilters()}
       </div>
       <div className="col-10 no-result-body">
         {this.renderNoResultsBody()}
@@ -181,7 +188,7 @@ export default class AssetsPage extends React.Component {
     <div className="row">
       <div className="col-2">
         {this.renderAssetsDropZone()}
-        {this.renderAssetsFilters()}
+        {this.state.showFilterAndList && this.renderAssetsFilters()}
       </div>
     </div>
   );

package/src/data/actions/assets.js

@@ -67,6 +67,12 @@ export const getAssets = (parameters, courseDetails) =>
       })
       .then((json) => {
         if (isLastRequestMade(getState().metadata.request, requestParameters)) {
+
+          // dispatch get assets success event to the root div
+          const rootDiv = document.getElementById('root');
+          const event = new CustomEvent('getAssetsSuccessEvent', {"detail": json});
+          rootDiv.dispatchEvent(event);
+
           return dispatch(requestAssetsSuccess(json));
         }
         return Promise.resolve();
@@ -296,6 +302,12 @@ export const uploadAssets = (assets, courseDetails) =>
           if (response.ok) {
             return response.json().then((json) => {
               dispatch(uploadAssetSuccess(json));
+
+              // dispatch upload assets success event to the root div
+              const rootDiv = document.getElementById('root');
+              const event = new CustomEvent('uploadAssetsSuccessEvent', {"detail": json});
+              rootDiv.dispatchEvent(event);
+
               // dispatch(getAssets(..)) returns a promise, so we return it
               return dispatch(getAssets({}, courseDetails));
             });

package/src/data/i18n/locales/currentlySupportedLangs.jsx

@@ -29,14 +29,14 @@ import './zh_CN.json';
 
 const localeDataMap = {
   'ar': arData,
-  'de_DE': deData,
+  'de-de': deData,
   'el': elData,
   'en': enData,
   'es-419': esData,
   'fr': frData,
-  'it_IT': itData,
-  'pt_BR': ptData,
-  'tr_TR': trData,
+  'it-it': itData,
+  'pt-br': ptData,
+  'tr-tr': trData,
   'zh-cn': zhData,
 };
 

package/src/utils/i18n/formattedMessageWrapper.jsx

@@ -3,16 +3,18 @@ import PropTypes from 'prop-types';
 import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
 
 const WrappedMessage = (props) => {
-  const { message, intl, ...other } = props;
+  const { message, intl, collapseBorder, ...other } = props;
 
+  var collapseBorderFlag = (collapseBorder !== undefined) ? collapseBorder : false;
   // manually check if a translation exists for this message in the current (non-default) locale
   // this allows us to match the containing "lang" span when we fallback to the default locale
   let locale = intl.defaultLocale;
   if (message.id in intl.messages) {
     locale = intl.locale;
   }
+
   return (
-    <span lang={locale}>
+    <span lang={locale} className={collapseBorderFlag ? "collapsedBorderStyle" : ""}>
       <FormattedMessage
         {...message}
         {...other}