Issue #612: fix is collapsable mobile filters

smclab · Sep 28, 2023 · 00e3a77 · 00e3a77
1 parent 298ae9e
commit 00e3a77
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 5 deletions.
diff --git a/js-packages/search-frontend/src/components/CalendarModal.tsx b/js-packages/search-frontend/src/components/CalendarModal.tsx
@@ -149,7 +149,7 @@ export function CalendarMobile({
           </div>
         </div>
         <button
-        className="openk9-calendar-modal-button-close"
+          className="openk9-calendar-modal-button-close"
           css={css`
             color: var(--openk9-grey-stone-600);
             font-size: 16px;
@@ -295,6 +295,7 @@ export function CalendarMobile({
         <div>
           <input
             readOnly
+            className="openk9-input-data openk9-first-input-for-data"
             css={css`
               border-radius: 50px;
               height: 28px;
@@ -313,6 +314,7 @@ export function CalendarMobile({
         <div>
           <input
             readOnly
+            className="openk9-input-data openk9-second-input-for-data"
             css={css`
               border-radius: 50px;
               height: 28px;
@@ -347,7 +349,7 @@ export function CalendarMobile({
         `}
       >
         <button
-          className="openk9-filter-horizontal-submit"
+          className="openk9-filter-horizontal-submit remove-filter remove-filter-data"
           aria-label="rimuovi filtri"
           css={css`
             font-size: smaller;
@@ -399,7 +401,7 @@ export function CalendarMobile({
           </div>
         </button>
         <button
-          className="openk9-filter-horizontal-submit"
+          className="openk9-filter-horizontal-submit filter-for-data"
           aria-label={t("filter-for-data") || "filter for data"}
           css={css`
             font-size: smaller;

diff --git a/js-packages/search-frontend/src/components/FiltersMobile.tsx b/js-packages/search-frontend/src/components/FiltersMobile.tsx
@@ -90,6 +90,7 @@ function FiltersMobile<E>({
           </div>
         </div>
         <button
+          className="openk9-button-close"
           css={css`
             color: var(--openk9-grey-stone-600);
             font-size: 10px;

diff --git a/js-packages/search-frontend/src/components/FiltersMobileLiveChange.tsx b/js-packages/search-frontend/src/components/FiltersMobileLiveChange.tsx
@@ -46,6 +46,7 @@ export type FiltersMobileProps<E> = {
   viewTabs?: boolean;
   language: string;
   sortAfterKey: string;
+  isCollapsable?: boolean;
 };
 function FiltersMobileLiveChange<E>({
   dynamicFilters,
@@ -63,6 +64,7 @@ function FiltersMobileLiveChange<E>({
   language,
   viewTabs = false,
   sortAfterKey,
+  isCollapsable = true,
 }: FiltersMobileProps<E>) {
   const results = useInfiniteResults<any>(
     searchQuery,
@@ -123,7 +125,7 @@ function FiltersMobileLiveChange<E>({
           </div>
         </div>
         <button
-        className="openk9-filters-list-button-close"
+          className="openk9-filters-list-button-close"
           css={css`
             color: var(--openk9-grey-stone-600);
             font-size: 15px;
@@ -162,6 +164,7 @@ function FiltersMobileLiveChange<E>({
           dynamicFilters={dynamicFilters}
           language={language}
           sortAfterKey={sortAfterKey}
+          isCollapsable={isCollapsable}
           preFilters={
             viewTabs ? (
               <ViewAllTabs
@@ -297,13 +300,14 @@ function ViewAllTabs({
   tabs,
   onSelectedTabIndexChange,
   selectedTabIndex,
+  isCollapsable = true,
 }: {
   tabs: Array<Tab>;
   onSelectedTabIndexChange(index: number): void;
   selectedTabIndex: number;
+  isCollapsable?: boolean;
 }) {
   const [isOpen, setIsOpen] = React.useState(true);
-  const isCollapsable = true;
   const { t } = useTranslation();
 
   return (

diff --git a/js-packages/search-frontend/src/embeddable/Main.tsx b/js-packages/search-frontend/src/embeddable/Main.tsx
@@ -454,6 +454,9 @@ export function Main({
             selectedTabIndex={selectedTabIndex}
             viewTabs={configuration.filtersMobileLiveChange?.viewTabs ?? false}
             language={languageSelect}
+            isCollapsable={
+              configuration.filtersMobileLiveChange?.isCollapsable ?? true
+            }
           />
         </I18nextProvider>,
         configuration.filtersMobileLiveChange?.element !== undefined

diff --git a/js-packages/search-frontend/src/embeddable/entry.tsx b/js-packages/search-frontend/src/embeddable/entry.tsx
@@ -170,6 +170,7 @@ type FiltersLiveMobileConfiguration = {
   isVisible: boolean;
   setIsVisible: React.Dispatch<React.SetStateAction<boolean>>;
   viewTabs?: boolean | null;
+  isCollapsable?: boolean | null;
 };
 
 type SearchMobileConfiguration = {