conditional KModal / div display for categories selection modal & cle…

…an up
learningequality · Nov 11, 2024 · 0429eac · 0429eac
1 parent b1c4632
commit 0429eac
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 15 deletions.
diff --git a/packages/kolibri-common/components/SearchFiltersPanel/CategorySearchModal/index.vue b/packages/kolibri-common/components/SearchFiltersPanel/CategorySearchModal/index.vue
@@ -11,7 +11,6 @@
 
 <script>
 
-  import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   import CategorySearchOptions from './CategorySearchOptions';
 
@@ -20,7 +19,6 @@
     components: {
       CategorySearchOptions,
     },
-    mixins: [commonCoreStrings],
     setup() {
       const { windowIsLarge } = useKResponsiveWindow();
       return {
@@ -44,12 +42,6 @@
         this.$refs.searchOptions.$el.querySelector('.filter-list-title > h2 > a').focus();
       },
     },
-    $trs: {
-      title: {
-        message: 'Choose a category',
-        context: 'Title of the category selection window',
-      },
-    },
   };
 
 </script>
diff --git a/packages/kolibri-common/components/SearchFiltersPanel/index.vue b/packages/kolibri-common/components/SearchFiltersPanel/index.vue
@@ -139,14 +139,24 @@
         </div>
       </div>
     </div>
-    <CategorySearchModal
-      v-if="currentCategory"
-      ref="searchModal"
-      :class="windowIsLarge ? '' : 'drawer-panel'"
-      :selectedCategory="currentCategory"
+    <!-- When accordion mode is NOT activated, show as KModal, otherwise, just a div -->
+    <component
+      :is="accordion ? 'div' : 'KModal'"
+      v-if="windowIsLarge && currentCategory"
+      appendToOverlay
+      :title="$tr('chooseACategory')"
+      :cancelText="coreString('closeAction')"
+      size="large"
       @cancel="currentCategory = null"
-      @input="selectCategory"
-    />
+    >
+      <CategorySearchModal
+        v-if="currentCategory"
+        ref="searchModal"
+        :class="windowIsLarge ? '' : 'drawer-panel'"
+        :selectedCategory="currentCategory"
+        @input="selectCategory"
+      />
+    </component>
   </section>
 
 </template>
@@ -404,6 +414,10 @@
         message: 'Categories',
         context: 'Section header label in the Library page sidebar.',
       },
+      chooseACategory: {
+        message: 'Choose a category',
+        context: 'Title of the category selection window',
+      },
     },
   };