Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Making the info font bigger #1021

Merged
merged 4 commits into from
Feb 28, 2024
Merged

Making the info font bigger #1021

Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e9cbf16
Making the info font bigger
Jan 4, 2024
f5e1468
Implemented the changes in the useStyle
Jan 4, 2024
2fa00e0
Correct spacing issues
Jan 5, 2024
2a29e9b
Merge branch 'dev' into 1020-bug-the-text-in-info-button-is-very-small
atalyaalon Feb 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
227 changes: 215 additions & 12 deletions src/components/molecules/card/AnyWayCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,203 @@
// import React, { FC, useState } from 'react';
// import { Card, CardContent, Box } from '@material-ui/core';
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These comments shouldn't remain here

// import { makeStyles } from '@material-ui/core/styles';
// import widgetToImage from 'services/to-image.service';
// // TEXT BOX COMPONENT ADD FEATURE
// import TextBox from 'components/organisms/TextBox'
// import { AnyWayButton } from 'components/atoms/AnyWayButton';
// import Tooltip from '@material-ui/core/Tooltip';
// import GetAppOutlinedIcon from '@material-ui/icons/GetAppOutlined';
// import SettingsOverscanIcon from '@material-ui/icons/SettingsOverscan';
// import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined';
// import TitleIcon from '@material-ui/icons/Title';
// import { fontFamilyString } from 'style';
// import CardHeader from './CardHeader';
// import SocialShare from 'components/atoms/SocialShare';
// import { FooterVariant, getWidgetVariant, HeaderVariant } from 'services/widgets.style.service';
// import { getSizes } from './card.util';
// import CardBackgroundImage from './CardBackgroundImage';
// import CardFooter from './CardFooter';
// import CardEditor from 'components/organisms/CardEditorDialog';
// import { transparent } from 'style';
// import { IDateComments } from 'models/WidgetData';
// import { OrgLogoData } from 'const/cards.const';

// const DEFAULTE_SIZE = 1;
// export interface CardSizeOptions {
// size?: number;
// }
// interface IProps {
// widgetName: string;
// roadNumber: number;
// actionButtons?: boolean;
// sizeOptions?: CardSizeOptions;
// getCardRef?: (element: HTMLElement) => any;
// title: string | undefined;
// dateComment: IDateComments;
// information?: string;
// organizationData?: OrgLogoData;
// subtitle?: string;
// transcription?:string;
// }

// const getSizeFactor = (options: CardSizeOptions | undefined): number => (options?.size ? options.size : DEFAULTE_SIZE);

// const useStyles = makeStyles((theme) => ({
// root: {
// fontFamily: fontFamilyString,
// position: 'relative', // for meta tags
// boxSizing: 'border-box',
// zIndex: 0,
// },
// content: {
// height: '100%',
// boxSizing: 'border-box',
// padding: 0,
// },
// button: {
// '&:hover': {
// backgroundColor: transparent,
// },
// },
// information: {
// minWidth: theme.spacing(8),
// textAlign: 'center',
// lineHeight: '0.75',
// cursor: 'pointer',
// },
// }));

// const AnyWayCard: FC<IProps> = ({
// widgetName,
// roadNumber,
// children,
// sizeOptions,
// getCardRef,
// actionButtons = true,
// title,
// dateComment,
// information,
// organizationData,
// subtitle,
// transcription
// }) => {
// const [element, setElement] = useState({});
// const [isOpen, setOpen] = useState(false);
// const [widgateOpen,SetWidgetOpen] = useState('')

// const handleCardEditorOpen = (name:string) =>{
// SetWidgetOpen(name)
// setOpen(true)
// };

// const handleCardEditorClose = () => setOpen(false);
// const variant = getWidgetVariant(widgetName);
// const factor = getSizeFactor(sizeOptions);
// const sizes = getSizes(variant, factor);

// const classes = useStyles();
// const imgDownloadHandler = () => {
// if (element && element instanceof HTMLElement) {
// widgetToImage(widgetName, element);
// }
// };

// let Widget;

// switch(widgateOpen){

// case 'TextBox':
// Widget = <TextBox isOpen={isOpen} onClose={handleCardEditorClose} widgetName={widgetName} text={transcription} />
// break
// case 'CardEditor':
// Widget = <CardEditor isOpen={isOpen} onClose={handleCardEditorClose} widgetName={widgetName} text={title} />
// }

// const buttons = !actionButtons ? null : (
// <>
// <AnyWayButton className={classes.button} disableRipple={true} onClick={imgDownloadHandler}>
// <GetAppOutlinedIcon />
// </AnyWayButton>
// <AnyWayButton className={classes.button} disableRipple={true} onClick={() =>{handleCardEditorOpen('CardEditor')}}>
// <SettingsOverscanIcon />
// </AnyWayButton>
// {information && (
// <Box className={classes.information}>
// <Tooltip title={information} placement="top" aria-label="info">
// <span>
// <InfoOutlinedIcon />
// </span>
// </Tooltip>
// </Box>
// )}
// {transcription?(
// <AnyWayButton className={classes.button} disableRipple={true} onClick={() =>{handleCardEditorOpen('TextBox')}}>
// <TitleIcon />
// </AnyWayButton>):null}
// </>
// );
// const refFn = (element: HTMLDivElement) => {
// setElement(element);
// if (getCardRef) {
// getCardRef(element);
// }
// };

// return (
// <>
// <Card ref={refFn} className={classes.root} variant="outlined">
// <Box height={sizes.height} width={sizes.width} position="relative" padding={3}>
// {/* BACKGROUND IMAGE */}
// <CardBackgroundImage variant={variant.header} />

// {/* HEADER */}
// {variant.header !== HeaderVariant.None && (
// <Box height={sizes.headerHeight} width="100%">
// <CardHeader
// orgIconPath={organizationData?.path}
// variant={variant.header}
// text={subtitle ? `${title} ${subtitle}` : title}
// road={roadNumber}
// />
// </Box>
// )}

// {/* CONTENT */}
// <Box height={sizes.contentHeight} width="100%">
// <CardContent className={classes.content}>{children}</CardContent>
// </Box>

// {/* FOOTER */}
// {variant.footer !== FooterVariant.None && (
// <Box height={sizes.footerHeight} width="100%">
// <CardFooter
// orgIconPath={organizationData?.path}
// dateComment={dateComment}
// showRange={variant.footer === FooterVariant.LogoWithRange}
// />
// </Box>
// )}
// {Widget}
// </Box>
// </Card>
// <Box display="flex" justifyContent="space-between">
// <Box display="flex" alignItems="center">
// {buttons}
// </Box>
// <SocialShare />
// </Box>
// </>
// );
// };
// export default AnyWayCard;


import React, { FC, useState } from 'react';
import { Card, CardContent, Box } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
import widgetToImage from 'services/to-image.service';
// TEXT BOX COMPONENT ADD FEATURE
import TextBox from 'components/organisms/TextBox'
import TextBox from 'components/organisms/TextBox'
import { AnyWayButton } from 'components/atoms/AnyWayButton';
import Tooltip from '@material-ui/core/Tooltip';
import GetAppOutlinedIcon from '@material-ui/icons/GetAppOutlined';
Expand Down Expand Up @@ -37,7 +231,7 @@ interface IProps {
information?: string;
organizationData?: OrgLogoData;
subtitle?: string;
transcription?:string;
transcription?: string;
}

const getSizeFactor = (options: CardSizeOptions | undefined): number => (options?.size ? options.size : DEFAULTE_SIZE);
Expand All @@ -53,6 +247,7 @@ const useStyles = makeStyles((theme) => ({
height: '100%',
boxSizing: 'border-box',
padding: 0,

},
button: {
'&:hover': {
Expand All @@ -64,6 +259,7 @@ const useStyles = makeStyles((theme) => ({
textAlign: 'center',
lineHeight: '0.75',
cursor: 'pointer',

},
}));

Expand All @@ -83,9 +279,9 @@ const AnyWayCard: FC<IProps> = ({
}) => {
const [element, setElement] = useState({});
const [isOpen, setOpen] = useState(false);
const [widgateOpen,SetWidgetOpen] = useState('')
const [widgateOpen, SetWidgetOpen] = useState('')

const handleCardEditorOpen = (name:string) =>{
const handleCardEditorOpen = (name: string) => {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All these space changes are things that happen automatically sometimes by VScode, but you usually don't want to push them because, even though they are good changes, are not related to the issue

SetWidgetOpen(name)
setOpen(true)
};
Expand All @@ -96,6 +292,13 @@ const AnyWayCard: FC<IProps> = ({
const sizes = getSizes(variant, factor);

const classes = useStyles();

const tooltipClasses = makeStyles(() => ({
tooltip: {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

there already a var of makeStyles in this file, it is called useStyles. you should use it instead of creating a new one. Try to copy the way it is already done, and talk to me if you need help

fontSize: '13px',
},
}))();

const imgDownloadHandler = () => {
if (element && element instanceof HTMLElement) {
widgetToImage(widgetName, element);
Expand All @@ -104,11 +307,11 @@ const AnyWayCard: FC<IProps> = ({

let Widget;

switch(widgateOpen){
switch (widgateOpen) {

case 'TextBox':
Widget = <TextBox isOpen={isOpen} onClose={handleCardEditorClose} widgetName={widgetName} text={transcription} />
break
break
case 'CardEditor':
Widget = <CardEditor isOpen={isOpen} onClose={handleCardEditorClose} widgetName={widgetName} text={title} />
}
Expand All @@ -118,22 +321,22 @@ const AnyWayCard: FC<IProps> = ({
<AnyWayButton className={classes.button} disableRipple={true} onClick={imgDownloadHandler}>
<GetAppOutlinedIcon />
</AnyWayButton>
<AnyWayButton className={classes.button} disableRipple={true} onClick={() =>{handleCardEditorOpen('CardEditor')}}>
<AnyWayButton className={classes.button} disableRipple={true} onClick={() => { handleCardEditorOpen('CardEditor') }}>
<SettingsOverscanIcon />
</AnyWayButton>
{information && (
<Box className={classes.information}>
<Tooltip title={information} placement="top" aria-label="info">
<Tooltip title={information} placement="top" aria-label="info" classes={{ tooltip: tooltipClasses.tooltip }}>
<span>
<InfoOutlinedIcon />
</span>
</Tooltip>
</Box>
)}
{transcription?(
<AnyWayButton className={classes.button} disableRipple={true} onClick={() =>{handleCardEditorOpen('TextBox')}}>
<TitleIcon />
</AnyWayButton>):null}
{transcription ? (
<AnyWayButton className={classes.button} disableRipple={true} onClick={() => { handleCardEditorOpen('TextBox') }}>
<TitleIcon />
</AnyWayButton>) : null}
</>
);
const refFn = (element: HTMLDivElement) => {
Expand Down
Loading