feat: video gallery sorting option names

openedx · Oct 10, 2023 · 38ef6ad · 38ef6ad
1 parent 564d724
commit 38ef6ad
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 7 deletions.
diff --git a/src/editors/containers/VideoGallery/messages.js b/src/editors/containers/VideoGallery/messages.js
@@ -25,32 +25,32 @@ export const messages = {
   // Sort Dropdown
   sortByDateNewest: {
     id: 'authoring.selectvideomodal.sort.datenewest.label',
-    defaultMessage: 'By date added (newest)',
+    defaultMessage: 'newest',
     description: 'Dropdown label for sorting by date (newest)',
   },
   sortByDateOldest: {
     id: 'authoring.selectvideomodal.sort.dateoldest.label',
-    defaultMessage: 'By date added (oldest)',
+    defaultMessage: 'oldest',
     description: 'Dropdown label for sorting by date (oldest)',
   },
   sortByNameAscending: {
     id: 'authoring.selectvideomodal.sort.nameascending.label',
-    defaultMessage: 'By name (ascending)',
+    defaultMessage: 'name A-Z',
     description: 'Dropdown label for sorting by name (ascending)',
   },
   sortByNameDescending: {
     id: 'authoring.selectvideomodal.sort.namedescending.label',
-    defaultMessage: 'By name (descending)',
+    defaultMessage: 'name Z-A',
     description: 'Dropdown label for sorting by name (descending)',
   },
   sortByDurationShortest: {
     id: 'authoring.selectvideomodal.sort.durationshortest.label',
-    defaultMessage: 'By duration (shortest)',
+    defaultMessage: 'shortest',
     description: 'Dropdown label for sorting by duration (shortest)',
   },
   sortByDurationLongest: {
     id: 'authoring.selectvideomodal.sort.durationlongest.label',
-    defaultMessage: 'By duration (longest)',
+    defaultMessage: 'longest',
     description: 'Dropdown label for sorting by duration (longest)',
   },
 

diff --git a/src/editors/sharedComponents/SelectionModal/SearchSort.jsx b/src/editors/sharedComponents/SelectionModal/SearchSort.jsx
@@ -11,6 +11,7 @@ import {
 } from '@edx/frontend-platform/i18n';
 
 import messages from './messages';
+import './index.scss';
 import MultiSelectFilterDropdown from './MultiSelectFilterDropdown';
 import { sortKeys, sortMessages } from '../../containers/VideoGallery/utils';
 
@@ -54,9 +55,13 @@ export const SearchSort = ({
       </Form.Group>
 
       { !showSwitch && <ActionRow.Spacer /> }
-      <SelectMenu variant="link">
+      <SelectMenu variant="link" className="search-sort-menu">
         {Object.keys(sortKeys).map(key => (
           <MenuItem key={key} onClick={onSortClick(key)} defaultSelected={key === sortBy}>
+            <span className="search-sort-menu-by">
+              <FormattedMessage {...messages.sortBy} />
+              &nbsp;
+            </span>
             <FormattedMessage {...sortMessages[key]} />
           </MenuItem>
         ))}

diff --git a/src/editors/sharedComponents/SelectionModal/index.scss b/src/editors/sharedComponents/SelectionModal/index.scss
@@ -0,0 +1,7 @@
+.search-sort-menu .pgn__menu-item-text {
+    text-transform: capitalize;
+}
+
+.search-sort-menu .pgn__menu .search-sort-menu-by {
+    display: none;
+}
diff --git a/src/editors/sharedComponents/SelectionModal/messages.js b/src/editors/sharedComponents/SelectionModal/messages.js
@@ -24,6 +24,11 @@ export const messages = {
     defaultMessage: 'Added {date} at {time}',
     description: 'File date-added string',
   },
+  sortBy: {
+    id: 'authoring.selectionmodal.sortBy',
+    defaultMessage: 'By',
+    description: '"By" before sort option',
+  },
 };
 
 export default messages;