feat: Adjust library home filter styles

open-craft · Jun 28, 2024 · b4374e9 · b4374e9
1 parent 3a67927
commit b4374e9
Show file tree

Hide file tree

Showing 8 changed files with 28 additions and 21 deletions.
diff --git a/src/index.scss b/src/index.scss
@@ -26,7 +26,7 @@
 @import "textbooks/Textbooks";
 @import "content-tags-drawer/ContentTagsDropDownSelector";
 @import "content-tags-drawer/ContentTagsCollapsible";
-@import "search-modal/SearchModal";
+@import "search-modal";
 @import "certificates/scss/Certificates";
 @import "group-configurations/GroupConfigurations";
 @import "library-authoring";

diff --git a/src/library-authoring/LibraryAuthoringPage.jsx b/src/library-authoring/LibraryAuthoringPage.jsx
@@ -102,8 +102,8 @@ const LibraryAuthoringPage = () => {
           />
           <SearchKeywordsField className="w-50" />
           <div className="d-flex mt-3 align-items-center">
-            <FilterByBlockType />
             <FilterByTags />
+            <FilterByBlockType />
             <ClearFiltersButton />
             <div className="flex-grow-1" />
             <div className="text-muted x-small align-middle"><Stats /></div>

diff --git a/src/search-modal/FilterBy.scss b/src/search-modal/FilterBy.scss
@@ -0,0 +1,7 @@
+// Options for the "filter by tag/block type" menu
+.pgn__menu.filter-by-refinement-menu {
+  .pgn__menu-item {
+    // Make the "filter by tag/block type" menu expand to fit the tags hierarchy and longer block type names
+    width: 100%;
+  }
+}
diff --git a/src/search-modal/FilterByBlockType.jsx b/src/search-modal/FilterByBlockType.jsx
@@ -8,6 +8,7 @@ import {
   Menu,
   MenuItem,
 } from '@openedx/paragon';
+import { FilterList } from '@openedx/paragon/icons';
 import SearchFilterWidget from './SearchFilterWidget';
 import messages from './messages';
 import BlockTypeLabel from './BlockTypeLabel';
@@ -72,6 +73,7 @@ const FilterByBlockType = () => {
     <SearchFilterWidget
       appliedFilters={blockTypesFilter.map(blockType => ({ label: <BlockTypeLabel type={blockType} /> }))}
       label={<FormattedMessage {...messages.blockTypeFilter} />}
+      icon={FilterList}
     >
       <Form.Group>
         <Form.CheckboxSet

diff --git a/src/search-modal/FilterByTags.jsx b/src/search-modal/FilterByTags.jsx
@@ -11,7 +11,12 @@ import {
   MenuItem,
   SearchField,
 } from '@openedx/paragon';
-import { ArrowDropDown, ArrowDropUp, Warning } from '@openedx/paragon/icons';
+import {
+  ArrowDropDown,
+  ArrowDropUp,
+  Warning,
+  Tag,
+} from '@openedx/paragon/icons';
 import SearchFilterWidget from './SearchFilterWidget';
 import messages from './messages';
 import { useSearchContext } from './manager/SearchManager';
@@ -185,6 +190,7 @@ const FilterByTags = () => {
     <SearchFilterWidget
       appliedFilters={tagsFilter.map(tf => ({ label: tf.split(TAG_SEP).pop() }))}
       label={<FormattedMessage {...messages.blockTagsFilter} />}
+      icon={Tag}
     >
       <Form.Group className="pt-3">
         <SearchField
@@ -199,7 +205,7 @@ const FilterByTags = () => {
           placeholder={intl.formatMessage(messages.searchTagsByKeywordPlaceholder)}
           className="mx-3 mb-1"
         />
-        <Menu className="tags-refinement-menu" style={{ boxShadow: 'none' }}>
+        <Menu className="filter-by-refinement-menu" style={{ boxShadow: 'none' }}>
           <TagOptions
             tagSearchKeywords={tagSearchKeywords}
             toggleTagChildren={toggleTagChildren}

diff --git a/src/search-modal/SearchFilterWidget.jsx b/src/search-modal/SearchFilterWidget.jsx
@@ -20,7 +20,12 @@ import {
  * When clicked, the button will display a dropdown menu containing this
  * element's `children`. So use this to wrap a <RefinementList> etc.
  *
- * @type {React.FC<{appliedFilters: {label: React.ReactNode}[], label: React.ReactNode, children: React.ReactNode}>}
+ * @type {React.FC<{
+ *   appliedFilters: {label: React.ReactNode}[],
+ *   label: React.ReactNode,
+ *   children: React.ReactNode,
+ *   icon?: React.ReactNode,
+ * }>}
  */
 const SearchFilterWidget = ({ appliedFilters, ...props }) => {
   const [isOpen, open, close] = useToggle(false);
@@ -34,6 +39,7 @@ const SearchFilterWidget = ({ appliedFilters, ...props }) => {
           variant={appliedFilters.length ? 'light' : 'outline-primary'}
           size="sm"
           onClick={open}
+          iconBefore={props.icon}
           iconAfter={ArrowDropDown}
         >
           {props.label}

diff --git a/src/search-modal/SearchModal.scss b/src/search-modal/SearchModal.scss
@@ -39,22 +39,6 @@
     }
   }
 
-  // Options for the "filter by tag" menu
-  .pgn__menu.tags-refinement-menu {
-    .pgn__menu-item {
-      // Make the "filter by tag" menu much wider than normal, because we need the space to display the tags hierarchy
-      width: 100%;
-    }
-  }
-
-  // Options for the "filter by block type" menu
-  .pgn__menu.block-type-refinement-menu {
-    .pgn__menu-item {
-      // Make the "filter by block type" menu expand to fit longer block types names
-      width: 100%;
-    }
-  }
-
   .pgn__menu-item {
     // Fix a bug in Paragon menu dropdowns: the checkbox currently shrinks if the text is too long.
     // https://github.com/openedx/paragon/pull/3019

diff --git a/src/search-modal/index.scss b/src/search-modal/index.scss
@@ -0,0 +1,2 @@
+@import "search-modal/SearchModal";
+@import "search-modal/FilterBy";