Skip to content

Commit

Permalink
(bugfix): fix display of tiles when no image is present
Browse files Browse the repository at this point in the history
  • Loading branch information
@Jipperism
Jipperism committed Oct 11, 2024
1 parent 2c99e2f commit 992c0b4
Show file tree
Hide file tree
Showing 4 changed files with 146 additions and 153 deletions.
8 changes: 3 additions & 5 deletions components/forms/create-or-update-default-sponsor-metadata-form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,12 +30,10 @@ interface CreateOrUpdateDefaultSponsorMetadataFormValues {

const defaultPreviewValues: HyperboardEntry = {
id: "a",
value: 1n,
image: "https://via.placeholder.com/100",
companyName: "Company name",
value: 1,
avatar: "https://via.placeholder.com/100",
displayName: "Company name",
type: "Test",
firstName: "First",
lastName: "Last",
isBlueprint: true,
};

Expand Down
279 changes: 139 additions & 140 deletions components/hyperboard/Tile.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,14 @@ import { useEnsName } from "wagmi";
const borderRadius = "0px";
const logosAndText = "black";

const formatTooltipLabel = ({ companyName, id }: HyperboardEntry) => {
if (companyName === id) {
return `${companyName}`;
const formatTooltipLabel = ({ displayName, id }: HyperboardEntry) => {
if (displayName === id) {
return `${displayName}`;
}

const formattedId = isAddress(id) ? formatAddress(id) : id;

return `${companyName}, ${formattedId}`;
return `${displayName}, ${formattedId}`;
};

export const Tile = ({
Expand All @@ -38,8 +38,7 @@ export const Tile = ({
const opacity = entry.isBlueprint ? 0.5 : 1;
const toolTipLabel = formatTooltipLabel(entry);

const showBackupImage =
!entry.image && !entry.companyName && !entry.firstName && !entry.lastName;
const showBackupImage = !entry.avatar;

const layout = getTileLayout(wrapperProps.width, wrapperProps.height);

Expand All @@ -54,159 +53,159 @@ export const Tile = ({
alignItems="center"
justifyContent="center"
>
{showBackupImage ? (
<BackupForImage
id={entry.id}
fontSize={layout.font}
toolTipLabel={toolTipLabel}
/>
) : (
{entry?.avatar ? (
<Tooltip label={toolTipLabel} aria-label={toolTipLabel}>
<Image
opacity={opacity}
className={"company-logo"}
maxWidth={"60%"}
maxHeight={"80%"}
src={entry.image}
alt={entry.image}
src={entry.avatar}
alt={entry.avatar}
filter={grayScale ? `grayScale(${opacity})` : undefined}
/>
</Tooltip>
)}
</Flex>
</Wrapper>
);
}

if (entry.type === "person") {
const layout = getTileLayout(wrapperProps.width, wrapperProps.height);
return (
<Wrapper {...wrapperProps}>
{showBackupImage ? (
<BackupForImage
id={entry.id}
fontSize={layout.font}
toolTipLabel={toolTipLabel}
/>
) : (
<Flex
width={"100%"}
position={"relative"}
height={"100%"}
justifyContent={"space-between"}
>
<>
<Flex
flexDirection={"column"}
marginTop={"auto"}
padding={padding}
>
<Text
fontSize={`${layout.font}px`}
color={logosAndText}
fontFamily={"Switzer"}
opacity={opacity}
>
{entry.firstName}
</Text>
<Text
opacity={opacity}
fontSize={`${layout.font}px`}
color={logosAndText}
>
{entry.lastName}
</Text>
</Flex>
<Tooltip label={toolTipLabel} aria-label={toolTipLabel}>
<Image
opacity={opacity}
borderTopRightRadius={borderRadius}
borderBottomLeftRadius={borderRadius}
marginBottom={"auto"}
src={entry.image}
alt={"Test alt"}
height={`${layout.image}px`}
width={`${layout.image}px`}
maxWidth={`${layout.image}px`}
maxHeight={`${layout.image}px`}
objectFit={"cover"}
filter={grayScale ? `grayScale(${opacity})` : undefined}
/>
</Tooltip>
</>
</Flex>
)}
{entry.isBlueprint && (
<BlueprintTooltip
position={"absolute"}
top={padding}
left={padding}
/>
)}
</Wrapper>
);
}

if (entry.type === "speaker") {
const layout = getTileLayout(wrapperProps.width, wrapperProps.height);
return (
<Wrapper {...wrapperProps}>
<Flex
width={"100%"}
position={"relative"}
height={"100%"}
justifyContent={"space-between"}
>
<Flex flexDirection={"column"} marginTop={"auto"} padding={padding}>
<Text
fontSize={`${layout.font}px`}
color={logosAndText}
fontFamily={"Switzer"}
fontWeight={600}
>
{entry.firstName} {entry.lastName}
</Text>
{entry.companyName && (
<Text
fontSize={`${layout.font}px`}
color={logosAndText}
opacity={"50%"}
fontFamily={"Switzer"}
noOfLines={1}
>
{entry.companyName}
</Text>
)}
</Flex>
{showBackupImage ? (
) : (
<BackupForImage
id={entry.id}
fontSize={layout.font}
toolTipLabel={toolTipLabel}
/>
) : (
<Tooltip label={toolTipLabel} aria-label={toolTipLabel}>
<Image
position={"absolute"}
right={0}
top={0}
borderTopRightRadius={borderRadius}
borderBottomLeftRadius={borderRadius}
marginBottom={"auto"}
src={entry.image}
alt={"Test alt"}
height={`${layout.image}px`}
width={`${layout.image}px`}
maxWidth={`${layout.image}px`}
maxHeight={`${layout.image}px`}
filter={grayScale ? `grayScale(${opacity})` : undefined}
/>
</Tooltip>
)}
</Flex>
</Wrapper>
);
}
//
// if (entry.type === "person") {
// const layout = getTileLayout(wrapperProps.width, wrapperProps.height);
// return (
// <Wrapper {...wrapperProps}>
// {showBackupImage ? (
// <BackupForImage
// id={entry.id}
// fontSize={layout.font}
// toolTipLabel={toolTipLabel}
// />
// ) : (
// <Flex
// width={"100%"}
// position={"relative"}
// height={"100%"}
// justifyContent={"space-between"}
// >
// <>
// <Flex
// flexDirection={"column"}
// marginTop={"auto"}
// padding={padding}
// >
// <Text
// fontSize={`${layout.font}px`}
// color={logosAndText}
// fontFamily={"Switzer"}
// opacity={opacity}
// >
// {entry.firstName}
// </Text>
// <Text
// opacity={opacity}
// fontSize={`${layout.font}px`}
// color={logosAndText}
// >
// {entry.lastName}
// </Text>
// </Flex>
// <Tooltip label={toolTipLabel} aria-label={toolTipLabel}>
// <Image
// opacity={opacity}
// borderTopRightRadius={borderRadius}
// borderBottomLeftRadius={borderRadius}
// marginBottom={"auto"}
// src={entry.image}
// alt={"Test alt"}
// height={`${layout.image}px`}
// width={`${layout.image}px`}
// maxWidth={`${layout.image}px`}
// maxHeight={`${layout.image}px`}
// objectFit={"cover"}
// filter={grayScale ? `grayScale(${opacity})` : undefined}
// />
// </Tooltip>
// </>
// </Flex>
// )}
// {entry.isBlueprint && (
// <BlueprintTooltip
// position={"absolute"}
// top={padding}
// left={padding}
// />
// )}
// </Wrapper>
// );
// }
//
// if (entry.type === "speaker") {
// const layout = getTileLayout(wrapperProps.width, wrapperProps.height);
// return (
// <Wrapper {...wrapperProps}>
// <Flex
// width={"100%"}
// position={"relative"}
// height={"100%"}
// justifyContent={"space-between"}
// >
// <Flex flexDirection={"column"} marginTop={"auto"} padding={padding}>
// <Text
// fontSize={`${layout.font}px`}
// color={logosAndText}
// fontFamily={"Switzer"}
// fontWeight={600}
// >
// {entry.firstName} {entry.lastName}
// </Text>
// {entry.companyName && (
// <Text
// fontSize={`${layout.font}px`}
// color={logosAndText}
// opacity={"50%"}
// fontFamily={"Switzer"}
// noOfLines={1}
// >
// {entry.companyName}
// </Text>
// )}
// </Flex>
// {showBackupImage ? (
// <BackupForImage
// id={entry.id}
// fontSize={layout.font}
// toolTipLabel={toolTipLabel}
// />
// ) : (
// <Tooltip label={toolTipLabel} aria-label={toolTipLabel}>
// <Image
// position={"absolute"}
// right={0}
// top={0}
// borderTopRightRadius={borderRadius}
// borderBottomLeftRadius={borderRadius}
// marginBottom={"auto"}
// src={entry.image}
// alt={"Test alt"}
// height={`${layout.image}px`}
// width={`${layout.image}px`}
// maxWidth={`${layout.image}px`}
// maxHeight={`${layout.image}px`}
// filter={grayScale ? `grayScale(${opacity})` : undefined}
// />
// </Tooltip>
// )}
// </Flex>
// </Wrapper>
// );
// }

return (
<Wrapper {...wrapperProps}>
Expand Down
6 changes: 2 additions & 4 deletions hooks/useFetchHyperboardContents.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -413,10 +413,8 @@ export const registryContentItemToHyperboardEntry = ({
// }
return {
type: "company",
companyName: display_name,
lastName: display_name,
firstName: display_name,
image: avatar || "",
displayName: display_name,
avatar: avatar,
value: percentage_owned!,
id: address!,
isBlueprint: false,
Expand Down
6 changes: 2 additions & 4 deletions types/Hyperboard.ts
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
export interface HyperboardEntry {
type: string;
id: string;
companyName: string | null;
firstName: string | null;
lastName: string | null;
image: string;
avatar?: string | null;
displayName?: string | null;
value: number;
isBlueprint: boolean;
}

0 comments on commit 992c0b4

Please sign in to comment.