diff --git a/src/components/dealers/DealerContent.tsx b/src/components/dealers/DealerContent.tsx index 81bef7af..fe7c0dda 100644 --- a/src/components/dealers/DealerContent.tsx +++ b/src/components/dealers/DealerContent.tsx @@ -25,6 +25,7 @@ import { Button } from "../generic/containers/Button"; import { ImageExButton } from "../generic/containers/ImageButton"; import { LinkItem } from "../maps/LinkItem"; import { conTimeZone } from "../../configuration"; +import { platformShareIcon } from "../generic/atoms/Icon"; const DealerCategories = ({ t, dealer }: { t: TFunction; dealer: DealerDetails }) => { // Nothing to display for no categories. @@ -142,7 +143,7 @@ export const DealerContent: FC = ({ dealer, parentPad = 0, u {!shareButton ? null : ( - )} diff --git a/src/components/events/EventContent.tsx b/src/components/events/EventContent.tsx index e1977cf2..2504b11a 100644 --- a/src/components/events/EventContent.tsx +++ b/src/components/events/EventContent.tsx @@ -24,6 +24,7 @@ import { Button } from "../generic/containers/Button"; import { ImageExButton } from "../generic/containers/ImageButton"; import { Row } from "../generic/containers/Row"; import { conTimeZone } from "../../configuration"; +import { platformShareIcon } from "../generic/atoms/Icon"; /** * Props to the content. @@ -139,7 +140,7 @@ export const EventContent: FC = ({ event, parentPad = 0, upda )} {!shareButton ? null : ( - )} diff --git a/src/components/generic/atoms/Icon.tsx b/src/components/generic/atoms/Icon.tsx index 5fe8c3e6..d234a6ae 100644 --- a/src/components/generic/atoms/Icon.tsx +++ b/src/components/generic/atoms/Icon.tsx @@ -1,5 +1,8 @@ import MaterialCommunityIcon from "@expo/vector-icons/MaterialCommunityIcons"; +import { Platform } from "react-native"; export type IconNames = keyof typeof MaterialCommunityIcon.glyphMap; export const Icon = MaterialCommunityIcon; + +export const platformShareIcon: IconNames = Platform.OS === "ios" ? "export-variant" : "share"; diff --git a/src/components/generic/atoms/TabLabel.tsx b/src/components/generic/atoms/TabLabel.tsx new file mode 100644 index 00000000..f33ec85c --- /dev/null +++ b/src/components/generic/atoms/TabLabel.tsx @@ -0,0 +1,33 @@ +import { StyleSheet } from "react-native"; +import { Label } from "./Label"; + +export const tabLabelMaxWidth = 110; + +export type TabLabelProps = { + focused: boolean; + children: string; + wide: boolean; +}; + +export const TabLabel = ({ focused, children, wide }: TabLabelProps) => { + return ( + + ); +}; + +const styles = StyleSheet.create({ + wide: { + maxWidth: tabLabelMaxWidth, + paddingHorizontal: 5, + }, + unfocused: { + maxWidth: tabLabelMaxWidth, + opacity: 0.5, + }, + focused: { + maxWidth: tabLabelMaxWidth, + opacity: 1, + }, +}); diff --git a/src/components/viewer/ViewerImageRecord.tsx b/src/components/viewer/ViewerImageRecord.tsx index f9f84f11..f48ed078 100644 --- a/src/components/viewer/ViewerImageRecord.tsx +++ b/src/components/viewer/ViewerImageRecord.tsx @@ -9,9 +9,10 @@ import { imagesSelectors } from "../../store/eurofurence/selectors/records"; import { RecordId } from "../../store/eurofurence/types"; import { Image } from "../generic/atoms/Image"; import { Header } from "../generic/containers/Header"; +import { platformShareIcon } from "../generic/atoms/Icon"; import { minZoomFor, shareImage } from "./Viewer.common"; -const viewerPadding = 40; +const viewerPadding = 20; export type ViewerImageRecordProps = { id: RecordId; @@ -32,7 +33,7 @@ export const ViewerImageRecord: FC = ({ id }) => { return ( -
image && title && shareImage(image.Url, title)}> +
image && title && shareImage(image.Url, title)}> {title}
{!image ? null : ( @@ -42,7 +43,7 @@ export const ViewerImageRecord: FC = ({ id }) => { contentHeight={image.Height + viewerPadding * 2} minZoom={minZoom} maxZoom={maxZoom} - initialZoom={minZoom} + initialZoom={minZoom * 1.2} bindToBorders={true} > diff --git a/src/components/viewer/ViewerUrl.tsx b/src/components/viewer/ViewerUrl.tsx index 52c1a5c1..6969e4d4 100644 --- a/src/components/viewer/ViewerUrl.tsx +++ b/src/components/viewer/ViewerUrl.tsx @@ -5,9 +5,10 @@ import { StyleSheet, View, Image as ReactImage } from "react-native"; import { Image } from "../generic/atoms/Image"; import { Header } from "../generic/containers/Header"; +import { platformShareIcon } from "../generic/atoms/Icon"; import { minZoomFor, shareImage } from "./Viewer.common"; -const viewerPadding = 40; +const viewerPadding = 20; export type ViewerUrlProps = { url: string; @@ -24,13 +25,11 @@ export const ViewerUrl: FC = ({ url, title }) => { ReactImage.getSize( url, (width, height) => { - console.log("GOT SIZE", width, height); // Gotten successfully. setWidth(width); setHeight(height); }, () => { - console.log("SIZE FAIL"); // Failed, set to 0 so that expo image starts loading. setWidth(0); setHeight(0); @@ -44,7 +43,7 @@ export const ViewerUrl: FC = ({ url, title }) => { return ( -
title && shareImage(url, title)}> +
title && shareImage(url, title)}> {title ?? t("unspecified")}
@@ -57,7 +56,7 @@ export const ViewerUrl: FC = ({ url, title }) => { contentHeight={height + viewerPadding * 2} minZoom={minZoom} maxZoom={maxZoom} - initialZoom={minZoom} + initialZoom={minZoom * 1.2} bindToBorders={true} > @@ -68,7 +67,6 @@ export const ViewerUrl: FC = ({ url, title }) => { source={url} priority="high" onLoad={(event) => { - console.log("EXPO GOT SIZE", event.source.width, event.source.height); setWidth(event.source.width); setHeight(event.source.height); }} diff --git a/src/hooks/searching/useFuseIntegration.ts b/src/hooks/searching/useFuseIntegration.ts index 60c39b0c..ea3ed6f3 100644 --- a/src/hooks/searching/useFuseIntegration.ts +++ b/src/hooks/searching/useFuseIntegration.ts @@ -8,7 +8,7 @@ import { RootState, useAppSelector } from "../../store"; * @param selector The selector from the app state. * @param limit Maximum results. */ -export const useFuseIntegration = (selector: (state: RootState) => Fuse, limit = 30): [string, Dispatch>, T[] | null] => { +export const useFuseIntegration = (selector: (state: RootState) => Fuse, limit = 100): [string, Dispatch>, T[] | null] => { // Search state. const fuse = useAppSelector(selector); const [filter, setFilter] = useState(""); diff --git a/src/routes/dealers/DealerItem.tsx b/src/routes/dealers/DealerItem.tsx index d54773cc..daf564a5 100644 --- a/src/routes/dealers/DealerItem.tsx +++ b/src/routes/dealers/DealerItem.tsx @@ -11,6 +11,7 @@ import { useUpdateSinceNote } from "../../hooks/records/useUpdateSinceNote"; import { useLatchTrue } from "../../hooks/util/useLatchTrue"; import { useAppSelector } from "../../store"; import { dealersSelectors } from "../../store/eurofurence/selectors/records"; +import { platformShareIcon } from "../../components/generic/atoms/Icon"; import { shareDealer } from "./Dealers.common"; /** @@ -34,7 +35,7 @@ export const DealerItem = () => { return ( -
dealer && shareDealer(dealer)}> +
dealer && shareDealer(dealer)}> {dealer?.DisplayNameOrAttendeeNickname ?? t("viewing_dealer")}
{!dealer ? null : } diff --git a/src/routes/dealers/Dealers.common.ts b/src/routes/dealers/Dealers.common.ts index a1e91848..d5f406e0 100644 --- a/src/routes/dealers/Dealers.common.ts +++ b/src/routes/dealers/Dealers.common.ts @@ -177,6 +177,7 @@ export const useDealerAlphabeticalGroups = (t: TFunction, now: Moment, results: return result; }, [t, now, results, all]); }; + export const shareDealer = (dealer: DealerDetails) => Share.share( { diff --git a/src/routes/dealers/DealersRouter.tsx b/src/routes/dealers/DealersRouter.tsx index 35905498..3a8dc74b 100644 --- a/src/routes/dealers/DealersRouter.tsx +++ b/src/routes/dealers/DealersRouter.tsx @@ -11,6 +11,7 @@ import { Icon } from "../../components/generic/atoms/Icon"; import { useTabStyles } from "../../components/generic/nav/useTabStyles"; import { AreasRouterParamsList } from "../AreasRouter"; import { IndexRouterParamsList } from "../IndexRouter"; +import { TabLabel } from "../../components/generic/atoms/TabLabel"; import { DealersAd, DealersAdParams } from "./DealersAd"; import { DealersAll, DealersAllParams } from "./DealersAll"; import { DealersAlpha, DealersAlphaParams } from "./DealersAlpha"; @@ -88,7 +89,18 @@ export const DealersRouter: FC = () => { // If the screens require too much performance we should set detach to true again. return ( - + ( + + {children} + + ), + }} + > {defaultScreens} diff --git a/src/routes/events/EventItem.tsx b/src/routes/events/EventItem.tsx index f1c7166f..a38acc32 100644 --- a/src/routes/events/EventItem.tsx +++ b/src/routes/events/EventItem.tsx @@ -10,6 +10,7 @@ import { useUpdateSinceNote } from "../../hooks/records/useUpdateSinceNote"; import { useLatchTrue } from "../../hooks/util/useLatchTrue"; import { useAppSelector } from "../../store"; import { eventsSelector } from "../../store/eurofurence/selectors/records"; +import { platformShareIcon } from "../../components/generic/atoms/Icon"; import { shareEvent } from "./Events.common"; /** @@ -32,7 +33,7 @@ export const EventItem = () => { return ( -
event && shareEvent(event)}> +
event && shareEvent(event)}> {event?.Title ?? "Viewing event"}
{!event ? null : } diff --git a/src/routes/events/EventsRouter.tsx b/src/routes/events/EventsRouter.tsx index 874cdb60..022f7e2f 100644 --- a/src/routes/events/EventsRouter.tsx +++ b/src/routes/events/EventsRouter.tsx @@ -17,6 +17,7 @@ import { EventDayRecord } from "../../store/eurofurence/types"; import { AreasRouterParamsList } from "../AreasRouter"; import { IndexRouterParamsList } from "../IndexRouter"; import { conTimeZone } from "../../configuration"; +import { TabLabel } from "../../components/generic/atoms/TabLabel"; import { PersonalSchedule, PersonalScheduleParams } from "./PersonalSchedule"; import { EventsSearch, EventsSearchParams } from "./EventsSearch"; import { EventsRouterContextProvider, useEventsRouterContext } from "./EventsRouterContext"; @@ -196,6 +197,11 @@ const EventsRouterContent: FC = ({ route }) => { screenOptions={{ tabBarScrollEnabled: scroll, tabBarItemStyle: scroll ? { width: 110 } : undefined, + tabBarLabel: ({ focused, children }) => ( + + {children} + + ), lazy: true, lazyPreloadDistance: 3, }} diff --git a/src/store/eurofurence/selectors/search.ts b/src/store/eurofurence/selectors/search.ts index 73ac23e4..74573480 100644 --- a/src/store/eurofurence/selectors/search.ts +++ b/src/store/eurofurence/selectors/search.ts @@ -25,7 +25,7 @@ const searchOptions: IFuseOptions = { */ const dealerSearchProperties: FuseOptionKey[] = [ { - name: "FullName", + name: "DisplayNameOrAttendeeNickname", weight: 2, }, {