style: adding more styles on the selection modal

2023-03-19 15:41:43 -05:00
parent 3b69958427
commit 71efe876d3
29 changed files with 233 additions and 85 deletions
--- a/src/editors/sharedComponents/SelectionModal/Gallery.jsx
+++ b/src/editors/sharedComponents/SelectionModal/Gallery.jsx
@@ -9,7 +9,6 @@ import {
  FormattedMessage,
  injectIntl,
  intlShape,
-  MessageDescriptor,
 } from '@edx/frontend-platform/i18n';

 import messages from './messages';
@@ -39,20 +38,20 @@ export const Gallery = ({
  }
  if (galleryIsEmpty) {
    return (
-      <div className="gallery p-4 bg-gray-100" style={{ height }}>
+      <div className="gallery p-4 bg-gray-100" style={{ height, margin: '0 -1.5rem' }}>
        <FormattedMessage {...emptyGalleryLabel} />
      </div>
    );
  }
  if (searchIsEmpty) {
    return (
-      <div className="gallery p-4 bg-gray-100" style={{ height }}>
+      <div className="gallery p-4 bg-gray-100" style={{ height, margin: '0 -1.5rem' }}>
        <FormattedMessage {...messages.emptySearchLabel} />
      </div>
    );
  }
  return (
-    <Scrollable className="gallery bg-gray-100" style={{ height }}>
+    <Scrollable className="gallery bg-gray-100" style={{ height, margin: '0 -1.5rem' }}>
      <div className="p-4">
        <SelectableBox.Set
          columns={1}
@@ -72,7 +71,6 @@ Gallery.defaultProps = {
  highlighted: '',
  showIdsOnCards: false,
  height: '375px',
-  emptyGalleryLabel: null,
 };
 Gallery.propTypes = {
  isLoaded: PropTypes.bool.isRequired,
@@ -81,7 +79,7 @@ Gallery.propTypes = {
  displayList: PropTypes.arrayOf(PropTypes.object).isRequired,
  highlighted: PropTypes.string,
  onHighlightChange: PropTypes.func.isRequired,
-  emptyGalleryLabel: MessageDescriptor,
+  emptyGalleryLabel: PropTypes.shape({}).isRequired,
  showIdsOnCards: PropTypes.bool,
  height: PropTypes.string,
  // injected
--- a/src/editors/sharedComponents/SelectionModal/GalleryCard.jsx
+++ b/src/editors/sharedComponents/SelectionModal/GalleryCard.jsx
@@ -2,36 +2,53 @@ import React from 'react';
 import PropTypes from 'prop-types';

 import {
-  Button,
-  Icon,
+  Badge,
  Image,
  SelectableBox,
 } from '@edx/paragon';
 import { FormattedMessage, FormattedDate, FormattedTime } from '@edx/frontend-platform/i18n';
-import { Link } from '@edx/paragon/icons';

 import messages from './messages';
+import { formatDuration } from '../../utils';
+import LanguageNamesWidget from '../../containers/VideoEditor/components/VideoSettingsModal/components/VideoPreviewWidget/LanguageNamesWidget';

 export const GalleryCard = ({
  asset,
-  showId,
 }) => (
-  <SelectableBox className="card bg-white" key={asset.externalUrl} type="radio" value={asset.id}>
+  <SelectableBox className="card bg-white" key={asset.externalUrl} type="radio" value={asset.id} style={{ padding: '10px 20px' }}>
    <div className="card-div d-flex flex-row flex-nowrap">
-      <Image
-        style={{ width: '100px', height: '100px' }}
-        src={asset.externalUrl}
-      />
-      <div className="img-text p-3">
-        <h3>{asset.displayName}</h3>
-        { showId && (
-          <p>
-            <Button variant="link" size="inline" onClick={() => { /* TODO */ }}>
-              <Icon src={Link} /> {asset.id}
-            </Button>
-          </p>
+      <div style={{
+        position: 'relative',
+        width: '200px',
+        height: '100px',
+        margin: '16px 0 0 0',
+      }}
+      >
+        <Image
+          style={{ width: '200px', height: '100px' }}
+          src={asset.externalUrl}
+        />
+        { asset.status && asset.statusBadgeVariant && (
+          <Badge variant={asset.statusBadgeVariant} style={{ position: 'absolute', left: '6px', top: '6px' }}>
+            {asset.status}
+          </Badge>
        )}
-        <p>
+        { asset.duration >= 0 && (
+          <Badge variant="dark" style={{ position: 'absolute', right: '6px', bottom: '6px' }}>
+            {formatDuration(asset.duration)}
+          </Badge>
+        )}
+      </div>
+      <div className="card-text p-3">
+        <h3>{asset.displayName}</h3>
+        { asset.transcripts && (
+          <div style={{ margin: '0 0 5px 0' }}>
+            <LanguageNamesWidget
+              transcripts={asset.transcripts}
+            />
+          </div>
+        )}
+        <p style={{ fontSize: '11px' }}>
          <FormattedMessage
            {...messages.addedDate}
            values={{
@@ -45,10 +62,6 @@ export const GalleryCard = ({
  </SelectableBox>
 );

-GalleryCard.defaultProps = {
-  showId: false,
-};
-
 GalleryCard.propTypes = {
  asset: PropTypes.shape({
    contentType: PropTypes.string,
@@ -62,8 +75,9 @@ GalleryCard.propTypes = {
    url: PropTypes.string,
    duration: PropTypes.number,
    status: PropTypes.string,
+    statusBadgeVariant: PropTypes.string,
+    transcripts: PropTypes.array,
  }).isRequired,
-  showId: PropTypes.bool,
 };

 export default GalleryCard;
--- a/src/editors/sharedComponents/SelectionModal/SearchSort.jsx
+++ b/src/editors/sharedComponents/SelectionModal/SearchSort.jsx
@@ -8,7 +8,6 @@ import { Close, Search } from '@edx/paragon/icons';
 import {
  FormattedMessage,
  injectIntl,
-  MessageDescriptor,
  intlShape,
 } from '@edx/frontend-platform/i18n';

@@ -109,7 +108,6 @@ SearchSort.defaultProps = {
  filterKeys: null,
  filterMessages: null,
  showSwitch: false,
-  switchMessage: null,
  onSwitchClick: null,
 };

@@ -126,7 +124,7 @@ SearchSort.propTypes = {
  filterKeys: PropTypes.shape({}),
  filterMessages: PropTypes.shape({}),
  showSwitch: PropTypes.bool,
-  switchMessage: MessageDescriptor,
+  switchMessage: PropTypes.shape({}).isRequired,
  onSwitchClick: PropTypes.func,
  // injected
  intl: intlShape.isRequired,
--- a/src/editors/sharedComponents/SelectionModal/snapshots/Gallery.test.jsx.snap
+++ b/src/editors/sharedComponents/SelectionModal/snapshots/Gallery.test.jsx.snap
@@ -6,6 +6,7 @@ exports[`TextEditor Image Gallery component component snapshot: loaded but no im
  style={
    Object {
      "height": "375px",
+      "margin": "0 -1.5rem",
    }
  }
 >
@@ -19,6 +20,7 @@ exports[`TextEditor Image Gallery component component snapshot: loaded but searc
  style={
    Object {
      "height": "375px",
+      "margin": "0 -1.5rem",
    }
  }
 >
@@ -36,6 +38,7 @@ exports[`TextEditor Image Gallery component component snapshot: loaded, show gal
  style={
    Object {
      "height": "375px",
+      "margin": "0 -1.5rem",
    }
  }
 >
--- a/src/editors/sharedComponents/SelectionModal/snapshots/GalleryCard.test.jsx.snap
+++ b/src/editors/sharedComponents/SelectionModal/snapshots/GalleryCard.test.jsx.snap
@@ -4,27 +4,49 @@ exports[`GalleryCard component snapshot: dateAdded=12345 1`] = `
 <SelectableBox
  className="card bg-white"
  key="props.img.externalUrl"
+  style={
+    Object {
+      "padding": "10px 20px",
+    }
+  }
  type="radio"
 >
  <div
    className="card-div d-flex flex-row flex-nowrap"
  >
-    <Image
-      src="props.img.externalUrl"
+    <div
      style={
        Object {
          "height": "100px",
-          "width": "100px",
+          "margin": "16px 0 0 0",
+          "position": "relative",
+          "width": "200px",
        }
      }
-    />
+    >
+      <Image
+        src="props.img.externalUrl"
+        style={
+          Object {
+            "height": "100px",
+            "width": "200px",
+          }
+        }
+      />
+    </div>
    <div
-      className="img-text p-3"
+      className="card-text p-3"
    >
      <h3>
        props.img.displayName
      </h3>
-      <p>
+      <p
+        style={
+          Object {
+            "fontSize": "11px",
+          }
+        }
+      >
        <FormattedMessage
          defaultMessage="Added {date} at {time}"
          description="File date-added string"
--- a/src/editors/sharedComponents/SelectionModal/index.jsx
+++ b/src/editors/sharedComponents/SelectionModal/index.jsx
@@ -6,7 +6,6 @@ import { Add } from '@edx/paragon/icons';
 import {
  FormattedMessage,
  injectIntl,
-  MessageDescriptor,
  intlShape,
 } from '@edx/frontend-platform/i18n';

@@ -65,6 +64,12 @@ export const SelectionModal = ({
        </Button>
      )}
      title={intl.formatMessage(titleMsg)}
+      bodyStyle={{ background: '#EBEBEB' }}
+      headerComponent={(
+        <div style={{ zIndex: 10000, margin: '18px 0' }}>
+          <SearchSort {...searchSortProps} />
+        </div>
+      )}
    >
      {/* Error Alerts */}
      <FetchErrorAlert isFetchError={isFetchError} message={fetchError} />
@@ -85,8 +90,7 @@ export const SelectionModal = ({
      >
        <FormattedMessage {...galleryError.message} />
      </ErrorAlert>
-      <Stack gap={3}>
-        <SearchSort {...searchSortProps} />
+      <Stack gap={2}>
        <Gallery {...galleryPropsValues} />
        <FileInput fileInput={fileInput} acceptedFiles={Object.values(acceptedFiles).join()} />
      </Stack>
@@ -108,13 +112,13 @@ SelectionModal.propTypes = {
    dismiss: PropTypes.func.isRequired,
    show: PropTypes.bool.isRequired,
    set: PropTypes.func.isRequired,
-    message: MessageDescriptor,
+    message: PropTypes.shape({}).isRequired,
  }).isRequired,
  inputError: PropTypes.shape({
    dismiss: PropTypes.func.isRequired,
    show: PropTypes.bool.isRequired,
    set: PropTypes.func.isRequired,
-    message: MessageDescriptor,
+    message: PropTypes.shape({}).isRequired,
  }).isRequired,
  fileInput: PropTypes.shape({
    click: PropTypes.func.isRequired,
@@ -125,11 +129,11 @@ SelectionModal.propTypes = {
  selectBtnProps: PropTypes.shape({}).isRequired,
  acceptedFiles: PropTypes.shape({}).isRequired,
  modalMessages: PropTypes.shape({
-    confirmMsg: MessageDescriptor,
-    uploadButtonMsg: MessageDescriptor,
-    titleMsg: MessageDescriptor,
-    fetchError: MessageDescriptor,
-    uploadError: MessageDescriptor,
+    confirmMsg: PropTypes.shape({}).isRequired,
+    uploadButtonMsg: PropTypes.shape({}).isRequired,
+    titleMsg: PropTypes.shape({}).isRequired,
+    fetchError: PropTypes.shape({}).isRequired,
+    uploadError: PropTypes.shape({}).isRequired,
  }).isRequired,
  isLoaded: PropTypes.bool.isRequired,
  isFetchError: PropTypes.bool.isRequired,