learningtribes-studio-frontend 1.4.1 → 1.4.2-alpha.0

package/package.json

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

package/src/components/AssetsDropZone/AssetsDropZone.scss

@@ -5,25 +5,42 @@
 }
 
 .drop-zone-compact {
-  border: $dark dashed 1px;
-  padding: 0;
+  border: 1px dashed #d0d0d0;
+  border-radius: 8px;
+  padding: 24px 20px;
+  background-color: #fafafa;
+  transition: all 0.2s ease;
+  cursor: pointer;
+
+  &:hover {
+    border-color: #4a90d9;
+    background-color: #fff;
+  }
 
-  button {
-    white-space: normal;
-    margin-top: $spacer;
-    margin-bottom: $spacer;
+  [data-identifier="asset-drop-zone-icon"] {
+    color: #4a90d9;
+    margin-bottom: 12px;
+    
+    span {
+      font-size: 32px;
+    }
   }
 
   h2 {
-    @extend .center-text;
-    font-weight: $font-weight-bold;
-    font-size: $font-size-lg;
-    margin-bottom: 0;
+    display: none;
+  }
+
+  .label-or {
+    display: none;
+  }
+
+  button.btn {
+    display: none;
   }
 
   p {
-    font-size: $font-size-sm;
-    margin-bottom: $spacer * 0.5;
+    font-size: 12px;
+    margin-bottom: 0;
   }
 }
 
@@ -31,16 +48,53 @@
   @extend .drop-zone-compact;
 
   @media (min-width: map-get($grid-breakpoints, 'md')) {
-    padding: $spacer;
-    h2 {
-      margin-bottom: inherit;
-    }
+    padding: 30px 20px;
   }
 }
 
 .drop-active {
-  outline: $dark dashed 2px;
-  background-color: rgba($primary, 0.2);
+  outline: none;
+  border: 2px dashed #4a90d9;
+  background-color: rgba(74, 144, 217, 0.05);
+}
+
+.upload-prompt {
+  text-align: center;
+  margin-bottom: 6px;
+}
+
+.upload-link {
+  background: none;
+  border: none;
+  color: #4a90d9;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  padding: 0;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+    color: darken(#4a90d9, 10%);
+  }
+
+  &:focus {
+    outline: 2px solid rgba(74, 144, 217, 0.5);
+    outline-offset: 2px;
+  }
+}
+
+.upload-text {
+  color: #333;
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.size-limit {
+  text-align: center;
+  color: #4a90d9;
+  font-size: 12px;
+  margin-bottom: 0;
 }
 
 .supported-files-types {
@@ -54,3 +108,19 @@
   font-size: 12px !important;
   font-weight: 400;
 }
+
+// Collapsed zone in image modal
+.collapsedZoneStyle {
+  .drop-zone-compact,
+  .drop-zone {
+    padding: 20px 16px;
+    
+    [data-identifier="asset-drop-zone-icon"] {
+      margin-bottom: 8px;
+      
+      span {
+        font-size: 28px;
+      }
+    }
+  }
+}

package/src/components/AssetsDropZone/displayMessages.jsx

@@ -8,12 +8,12 @@ const messages = defineMessages({
   },
   assetsDropZoneBrowseLabel: {
     id: 'assetsDropZoneBrowseLabel',
-    defaultMessage: 'Select from your computer',
+    defaultMessage: 'Click to upload',
     description: 'Upload label for the "Browse" button',
   },
   assetsDropZoneHeader: {
     id: 'assetsDropZoneHeader',
-    defaultMessage: 'Drag & Drop',
+    defaultMessage: 'or drag and drop',
     description: 'Upload with dropzone section heading',
   },
   assetsDropZoneMaxFileSizeLabel: {

package/src/components/AssetsDropZone/index.jsx

@@ -37,7 +37,9 @@ export default class AssetsDropZone extends React.Component {
   };
 
   setUploadButtonRef = (ref) => {
-    this.props.buttonRef(ref);
+    if (this.props.buttonRef) {
+      this.props.buttonRef(ref);
+    }
   };
 
   handleClick = () => {
@@ -66,30 +68,29 @@ export default class AssetsDropZone extends React.Component {
                 <div className={styles['center-text']} data-identifier="asset-drop-zone-icon">
                   <span
                     aria-hidden
-                    className={'fad fa-cloud-upload-alt '+classNames(
+                    className={'far fa-image '+classNames(
                       styles['center-text'],
-                      //FontAwesomeStyles.fa,
-                      //FontAwesomeStyles['fa-cloud-upload'],
                       FontAwesomeStyles['fa-3x'])}
                   />
                 </div>
-                <WrappedMessage message={messages.assetsDropZoneHeader}>
-                  { displayText => (
-                    <h2 data-identifier="asset-drop-zone-header">{displayText}</h2>
-                  )}
-                </WrappedMessage>
-                <span className="label-or">or</span>
-                <div className={styles['center-text']}>
+                <div className={styles['upload-prompt']}>
                   <WrappedMessage message={messages.assetsDropZoneBrowseLabel} >
                     { displayText => (
-                      <Button
+                      <button
+                        type="button"
                         aria-describedby="asset-drop-zone-max-file-size-label"
-                        className={['btn', 'btn-outline-primary']}
+                        className={styles['upload-link']}
                         data-identifier="asset-drop-zone-browse-button"
-                        label={displayText}
                         onClick={this.handleClick}
-                        inputRef={this.setUploadButtonRef}
-                      />
+                        ref={this.setUploadButtonRef}
+                      >
+                        {displayText}
+                      </button>
+                    )}
+                  </WrappedMessage>
+                  <WrappedMessage message={messages.assetsDropZoneHeader}>
+                    { displayText => (
+                      <span className={styles['upload-text']} data-identifier="asset-drop-zone-header"> {displayText}</span>
                     )}
                   </WrappedMessage>
                 </div>
@@ -102,7 +103,7 @@ export default class AssetsDropZone extends React.Component {
                   { displayText => (
                     <p
                       aria-hidden
-                      className={styles['center-text']}
+                      className={styles['size-limit']}
                       data-identifier="asset-drop-zone-max-file-size-label"
                       id="asset-drop-zone-max-file-size-label"
                     >

package/src/components/AssetsList/AssetsList.scss

@@ -1,6 +1,138 @@
 @import 'edx-bootstrap';
 @import 'utils/scss/focus';
 
+// Horizontal scrollable grid
+.assets-grid {
+  display: flex;
+  gap: 10px;
+  overflow-x: auto;
+  padding: 8px 0;
+  margin-bottom: 10px;
+
+  &:focus {
+    @include focus();
+  }
+
+  // Custom scrollbar
+  &::-webkit-scrollbar {
+    height: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: #f0f0f0;
+    border-radius: 3px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #c0c0c0;
+    border-radius: 3px;
+
+    &:hover {
+      background: #a0a0a0;
+    }
+  }
+}
+
+.asset-grid-item {
+  flex-shrink: 0;
+  width: 100px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover {
+    .asset-preview {
+      border-color: #c0c0c0;
+    }
+  }
+
+  &.selected {
+    .asset-preview {
+      border-color: #4a90d9;
+      border-width: 2px;
+    }
+
+    .asset-name {
+      color: #4a90d9;
+      background-color: rgba(74, 144, 217, 0.1);
+      padding: 2px 4px;
+      border-radius: 4px;
+    }
+  }
+}
+
+.asset-preview {
+  width: 100px;
+  height: 100px;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  margin-bottom: 8px;
+  transition: border-color 0.2s ease;
+  overflow: hidden;
+}
+
+.file-type-badge {
+  position: absolute;
+  top: 6px;
+  left: 6px;
+  background-color: #e8f4fd;
+  color: #1976d2;
+  font-size: 10px;
+  font-weight: 700;
+  padding: 2px 6px;
+  border-radius: 4px;
+  text-transform: lowercase;
+  z-index: 1;
+}
+
+.asset-thumbnail {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.asset-icon {
+  font-size: 36px;
+  color: #9e9e9e;
+
+  i {
+    display: block;
+  }
+}
+
+.asset-info {
+  text-align: center;
+}
+
+.asset-name {
+  font-size: 12px;
+  font-weight: 500;
+  color: #333;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100px;
+  margin-bottom: 2px;
+
+  &.selected {
+    color: #4a90d9;
+    background-color: rgba(74, 144, 217, 0.1);
+    padding: 2px 4px;
+    border-radius: 4px;
+  }
+}
+
+.asset-size {
+  font-size: 11px;
+  color: #666;
+}
+
+// Old styles
 .assets-list-image-preview-container {
   background-color: theme-color('light');
   color: theme-color('dark');

package/src/components/AssetsList/index.jsx

@@ -72,57 +72,64 @@ export default class AssetsList extends React.Component {
     }
   }
 
-  getAssetsListHeader = () => (
-    <div className={classNames(styles['list-header'], 'row')}>
-      <span className="col-6 offset-3" data-identifier="asset-file-name" id="name-header"><WrappedMessage message={messages.assetsListNameLabel} /></span>
-      <span className="col-3" data-identifier="asset-date-added" id="date-added-header"><WrappedMessage message={messages.assetsListDateLabel} /></span>
-    </div>
-  )
-
-  getAssetListItem = (asset, index) => {
+  getFileExtension = (displayName) => {
+    if (!displayName) return '';
+    const lastDot = displayName.lastIndexOf('.');
+    if (lastDot === -1 || lastDot === displayName.length - 1) {
+      return 'file';
+    }
+    return displayName.substring(lastDot + 1).toLowerCase();
+  }
+
+  formatFileSize = (bytes) => {
+    if (!bytes || bytes === 0) return '';
+    const units = ['B', 'KB', 'MB', 'GB'];
+    const k = 1024;
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    const size = (bytes / Math.pow(k, i)).toFixed(i === 0 ? 0 : 1);
+    return `${size} ${units[i]}`;
+  }
+
+  getAssetGridItem = (asset, index) => {
     const isSelected = this.props.selectedAsset.id === asset.id;
+    const baseUrl = this.props.courseDetails.base_url || '';
+    const fileExt = this.getFileExtension(asset.display_name);
+    const fileSize = this.formatFileSize(asset.file_size);
 
     return (
-      <li
-        // prevent clicking on list item from triggering parent's focus
+      <div
         onMouseDown={(e) => { e.preventDefault(); this.onAssetClick(asset, index); }}
-        className={classNames('list-group-item list-group-item-action', { active: isSelected })}
+        className={classNames(styles['asset-grid-item'], { [styles.selected]: isSelected })}
         id={`asset-list-option-${index}`}
         aria-selected={isSelected}
         role="option"
-        key={asset.display_name}
+        key={asset.id || asset.display_name}
         tabIndex="-1"
-        aria-labelledby={`name-header asset-name-${index} date-added-header asset-date-${index}`}
       >
-        <div className="row">
-          {this.getThumbnailElement(asset.thumbnail)}
-          {this.getDisplayNameElement(asset.display_name, index)}
-          {this.getDateAddedElement(asset.date_added, index)}
+        <div className={styles['asset-preview']}>
+          <span className={styles['file-type-badge']}>{fileExt}</span>
+          {asset.thumbnail ? (
+            <img
+              className={styles['asset-thumbnail']}
+              src={`${baseUrl}${asset.thumbnail}`}
+              alt=""
+            />
+          ) : (
+            <div className={styles['asset-icon']}>
+              <i className="far fa-image" />
+            </div>
+          )}
+        </div>
+        <div className={styles['asset-info']}>
+          <div className={classNames(styles['asset-name'], { [styles.selected]: isSelected })} title={asset.display_name}>
+            {asset.display_name}
+          </div>
+          {fileSize && (
+            <div className={styles['asset-size']}>
+              {fileSize}
+            </div>
+          )}
         </div>
-      </li>
-    );
-  }
-
-  getDateAddedElement = (dateAdded, index) => (
-    <span id={`asset-date-${index}`} className="col-3" data-identifier="asset-date-added">{dateAdded}</span>
-  );
-
-  getDisplayNameElement = (displayName, index) => (
-    <span id={`asset-name-${index}`} className="col-6" data-identifier="asset-file-name">{displayName}</span>
-  );
-
-  getImageThumbnail(thumbnail) {
-    const baseUrl = this.props.courseDetails.base_url || '';
-
-    return (
-      <div className={styles['assets-list-image-preview-container']}>
-        {
-          thumbnail ?
-            <img className={styles['assets-list-image-preview-image']} src={`${baseUrl}${thumbnail}`} alt="" data-identifier="asset-image-thumbnail" /> :
-            <WrappedMessage message={messages.assetsListNoPreview} >
-              {displayText => <span className={classNames('text-center')} data-identifier="asset-image-thumbnail">{displayText}</span>}
-            </WrappedMessage>
-        }
       </div>
     );
   }
@@ -130,17 +137,11 @@ export default class AssetsList extends React.Component {
   getSelectedAssetIndex = (assetsList, selectedAsset) => (assetsList.findIndex(
     asset => asset.id === selectedAsset.id));
 
-  getThumbnailElement = thumbnail => (
-    <span aria-hidden className="col">{this.getImageThumbnail(thumbnail)}</span>
-  );
-
   handleKeyDown = (e) => {
     switch (e.key) {
-      case 'ArrowDown': {
-        // prevent scrolling entire modal body with arrow keys
+      case 'ArrowRight': {
         e.preventDefault();
-
-        if (this.state.selectedAssetIndex < this.props.paginationMetadata.pageSize - 1) {
+        if (this.state.selectedAssetIndex < this.props.assetsList.length - 1) {
           this.setState(
             (state, props) => ({
               selectedAssetIndex: this.state.selectedAssetIndex + 1,
@@ -151,10 +152,8 @@ export default class AssetsList extends React.Component {
         }
         break;
       }
-      case 'ArrowUp': {
-        // prevent scrolling entire modal body with arrow keys
+      case 'ArrowLeft': {
         e.preventDefault();
-
         if (this.state.selectedAssetIndex > 0) {
           this.setState(
             (state, props) => ({
@@ -171,29 +170,36 @@ export default class AssetsList extends React.Component {
   }
 
   render = () => {
-    const assetsListItems = this.props.assetsList.map((asset, index) =>
-      this.getAssetListItem(asset, index));
+    const assetsGridItems = this.props.assetsList.map((asset, index) =>
+      this.getAssetGridItem(asset, index));
 
     return (
-      <React.Fragment>
-        {this.getAssetsListHeader()}
-        <ol
-          aria-activedescendant={this.state.selectedAssetIndex > -1 ? `asset-list-option-${this.state.selectedAssetIndex}` : null}
-          className="list-group"
-          onFocus={this.onListBoxFocus}
-          onKeyDown={this.handleKeyDown}
-          role="listbox"
-          tabIndex="0"
-        >
-          {assetsListItems}
-        </ol>
-      </React.Fragment>
+      <div
+        aria-activedescendant={this.state.selectedAssetIndex > -1 ? `asset-list-option-${this.state.selectedAssetIndex}` : null}
+        className={styles['assets-grid']}
+        onFocus={this.onListBoxFocus}
+        onKeyDown={this.handleKeyDown}
+        role="listbox"
+        tabIndex="0"
+      >
+        {assetsGridItems}
+      </div>
     );
   };
 }
 
 AssetsList.propTypes = {
-  assetsList: PropTypes.arrayOf(PropTypes.object).isRequired,
+  assetsList: PropTypes.arrayOf(PropTypes.shape({
+    display_name: PropTypes.string,
+    content_type: PropTypes.string,
+    url: PropTypes.string,
+    date_added: PropTypes.string,
+    id: PropTypes.string,
+    portable_url: PropTypes.string,
+    thumbnail: PropTypes.string,
+    external_url: PropTypes.string,
+    file_size: PropTypes.number,
+  })).isRequired,
   courseDetails: PropTypes.shape({
     lang: PropTypes.string,
     url_name: PropTypes.string,
@@ -222,5 +228,6 @@ AssetsList.propTypes = {
     portable_url: PropTypes.string,
     thumbnail: PropTypes.string,
     external_url: PropTypes.string,
+    file_size: PropTypes.number,
   }).isRequired,
 };

package/src/components/EditImageModal/EditImageModal.scss

@@ -76,3 +76,73 @@
 .invalid-feedback {
   font-size: $font-size-base;
 }
+
+.modal-body {
+  // Form fields
+  form {
+    .paragon-fieldset {
+      margin-bottom: 1.5rem;
+      
+      fieldset {
+        legend {
+          font-size: 14px;
+          font-weight: 500;
+          color: #333;
+          margin-bottom: 0.5rem;
+        }
+      }
+    }
+
+    .form-group {
+      margin-bottom: 1rem;
+
+      label {
+        font-size: 14px;
+        font-weight: 500;
+        color: #333;
+      }
+
+      .form-control {
+        border-radius: 8px;
+        border: 1px solid #e0e0e0;
+        padding: 10px 14px;
+        font-size: 14px;
+
+        &:focus {
+          border-color: #4a90d9;
+          box-shadow: 0 0 0 2px rgba(74, 144, 217, 0.1);
+        }
+      }
+
+      .form-text {
+        font-size: 12px;
+        color: #666;
+        margin-top: 4px;
+      }
+    }
+  }
+
+  // Dimensions row
+  .form-row {
+    .col {
+      .form-group {
+        label {
+          font-size: 14px;
+          font-weight: 500;
+        }
+      }
+    }
+  }
+}
+
+// Checkbox
+.form-check {
+  .form-check-input {
+    margin-top: 0.25rem;
+  }
+
+  .form-check-label {
+    font-size: 14px;
+    color: #333;
+  }
+}

package/src/components/EditImageModal/displayMessages.jsx

@@ -83,8 +83,8 @@ const messages = defineMessages({
   },
   editImageModalInsertImageButton: {
     id: 'editImageModalInsertImageButton',
-    defaultMessage: 'Insert Image',
-    description: 'Text inside the Insert Image button at the bottom of the modal',
+    defaultMessage: 'Save',
+    description: 'Text inside the Save button at the bottom of the modal',
   },
   editImageModalLearnMore: {
     id: 'editImageModalLearnMore',