diff --git a/src/features/community/titleSearch/TitleSearch.tsx b/src/features/community/titleSearch/TitleSearch.tsx index 5b42ddf7cc..d84e37b449 100644 --- a/src/features/community/titleSearch/TitleSearch.tsx +++ b/src/features/community/titleSearch/TitleSearch.tsx @@ -1,10 +1,11 @@ -import { IonButton, IonButtons, IonIcon, IonTitle } from "@ionic/react"; +import { IonButton, IonButtons, IonIcon } from "@ionic/react"; import { chevronDown, close } from "ionicons/icons"; import React, { useContext, useEffect, useRef } from "react"; import { TitleSearchContext } from "./TitleSearchProvider"; import { styled } from "@linaria/react"; import { isIosTheme } from "../../../helpers/device"; import { findCurrentPage } from "../../../helpers/ionic"; +import AppTitle from "../../shared/AppTitle"; const TitleContents = styled.span` display: inline-flex; @@ -48,6 +49,10 @@ const StyledInput = styled.input` --background: none; `; +const DropdownIcon = styled(IonIcon)` + flex-shrink: 0; +`; + const TITLE_CLASS = "title-search-opener"; export function openTitleSearch() { @@ -88,7 +93,7 @@ export default function TitleSearch({ name, children }: TitleSearchProps) { if (searching) { return ( <> - + - + setSearching(false)}> @@ -119,11 +124,11 @@ export default function TitleSearch({ name, children }: TitleSearchProps) { return ( <> - + - {name} + {name} - + {children} ); diff --git a/src/features/shared/AppTitle.tsx b/src/features/shared/AppTitle.tsx new file mode 100644 index 0000000000..d5d2b81860 --- /dev/null +++ b/src/features/shared/AppTitle.tsx @@ -0,0 +1,41 @@ +import { IonTitle } from "@ionic/react"; +import { ComponentProps, useEffect, useRef, useState } from "react"; +import { isIosTheme } from "../../helpers/device"; + +interface AppTitleProps extends ComponentProps { + /** + * Padding applied to titles of normal headers with up to + * two icon buttons on right side of title + */ + fullPadding?: number; +} + +export default isIosTheme() ? IosAppTitle : IonTitle; + +function IosAppTitle({ fullPadding, ...props }: AppTitleProps) { + const ref = useRef(null); + const [smaller, setSmaller] = useState(false); + + useEffect(() => { + queueMicrotask(() => { + const buttons = ref.current + ?.closest("ion-header") + ?.querySelector('ion-buttons[slot="end"]')?.children.length; + + if (!buttons) { + setSmaller(false); + return; + } + + setSmaller(buttons >= 3); + }); + }); + + return ( + + ); +}