From 7ebef20b6214ec4214ad868e1af880deafe2853c Mon Sep 17 00:00:00 2001 From: EyalIlan Date: Sat, 24 Jun 2023 21:29:41 +0300 Subject: [PATCH 1/3] transaction dialog box --- public/locales/he/translation.json | 3 + src/components/molecules/card/AnyWayCard.tsx | 33 +++++++- src/components/organisms/CardEditorDialog.tsx | 1 + src/components/organisms/TextBox.tsx | 76 +++++++++++++++++++ src/components/organisms/WidgetsTemplate.tsx | 3 +- 5 files changed, 111 insertions(+), 5 deletions(-) create mode 100644 src/components/organisms/TextBox.tsx diff --git a/public/locales/he/translation.json b/public/locales/he/translation.json index 8dfc2f06..f8b5519c 100644 --- a/public/locales/he/translation.json +++ b/public/locales/he/translation.json @@ -108,6 +108,9 @@ "filterPanel": { "all": "הכל" }, + "infografic" :{ + "transaction":"תמלול אינפוגרפיקה" + }, "header": { "Search": "חיפוש", "User Greeting": "שלום", diff --git a/src/components/molecules/card/AnyWayCard.tsx b/src/components/molecules/card/AnyWayCard.tsx index d95a9f03..594ab25a 100644 --- a/src/components/molecules/card/AnyWayCard.tsx +++ b/src/components/molecules/card/AnyWayCard.tsx @@ -2,12 +2,14 @@ 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 { 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'; @@ -35,6 +37,7 @@ interface IProps { information?: string; organizationData?: OrgLogoData; subtitle?: string; + BoxText?:string; } const getSizeFactor = (options: CardSizeOptions | undefined): number => (options?.size ? options.size : DEFAULTE_SIZE); @@ -76,10 +79,17 @@ const AnyWayCard: FC = ({ information, organizationData, subtitle, + BoxText }) => { const [element, setElement] = useState({}); const [isOpen, setOpen] = useState(false); - const handleCardEditorOpen = () => setOpen(true); + const [widgateOpen,SetWidgetOpen] = useState('') + + const handleCardEditorOpen = (name:string) =>{ + SetWidgetOpen(name) + setOpen(true) + }; + const handleCardEditorClose = () => setOpen(false); const variant = getWidgetVariant(widgetName); const factor = getSizeFactor(sizeOptions); @@ -91,12 +101,24 @@ const AnyWayCard: FC = ({ widgetToImage(widgetName, element); } }; + + let Widget; + + switch(widgateOpen){ + + case 'TextBox': + Widget = + break + case 'CardEditor': + Widget = + } + const buttons = !actionButtons ? null : ( <> - + {handleCardEditorOpen('CardEditor')}}> {information && ( @@ -108,6 +130,9 @@ const AnyWayCard: FC = ({ )} + {handleCardEditorOpen('TextBox')}}> + + ); @@ -152,7 +177,7 @@ const AnyWayCard: FC = ({ /> )} - + {Widget} diff --git a/src/components/organisms/CardEditorDialog.tsx b/src/components/organisms/CardEditorDialog.tsx index 5382086d..2a06314d 100644 --- a/src/components/organisms/CardEditorDialog.tsx +++ b/src/components/organisms/CardEditorDialog.tsx @@ -8,6 +8,7 @@ import { MetaTag, ErrorBoundary, Typography, Button, Slider } from 'components/a import widgetToImage from 'services/to-image.service'; import { useTranslation } from 'react-i18next'; import { blueVioletColor } from 'style'; + import {initEditorBarOptions, barsWidgetsLabels, barsWidgetsTitle, NUM_OF_BARS} from 'utils/barChart.utils'; interface IProps { diff --git a/src/components/organisms/TextBox.tsx b/src/components/organisms/TextBox.tsx new file mode 100644 index 00000000..e74ec544 --- /dev/null +++ b/src/components/organisms/TextBox.tsx @@ -0,0 +1,76 @@ +import React from 'react' +import DialogWithHeader from '../molecules/DialogWithHeader'; +import { AnyWayButton } from 'components/atoms/AnyWayButton'; +import { Box, makeStyles} from '@material-ui/core' +import { useTranslation } from 'react-i18next'; +import { Typography } from 'components/atoms'; +import { transparent } from 'style'; + + +interface IProps { + isOpen: boolean; + onClose: () => void; + widgetName: string; + text: string | undefined; +} +const TextBox: React.FC = ({ isOpen,text,onClose}) => { + + console.log('transaction ',text); + + + const useStyles = makeStyles((theme) => ({ + text: { + position: 'relative', // for meta tags + boxSizing: 'border-box', + zIndex: 0, + margin: '20px 0', + textAlign: 'center', + lineHeight: 1.7 + }, + root: { + display: 'flex', + flexDirection:'column', + alignItems:'center', + boxSizing:'border-box', + padding:20 + }, + button: { + margin: '20px 0', + '&:hover': { + backgroundColor: transparent, + }, + }, + img:{ + height:'100px', + width:'100px' + } + + + })); + + const { t } = useTranslation(); + const onCloseInitValues = () => { + onClose(); + } + + const classes = useStyles(); + + return ( + + + + + {text} + + + + {navigator.clipboard.writeText(text?text:'asdsadasd')}} className={classes.button} > + + + + + + ) +} + +export default TextBox \ No newline at end of file diff --git a/src/components/organisms/WidgetsTemplate.tsx b/src/components/organisms/WidgetsTemplate.tsx index c1dafe9e..479dabbc 100644 --- a/src/components/organisms/WidgetsTemplate.tsx +++ b/src/components/organisms/WidgetsTemplate.tsx @@ -31,15 +31,16 @@ const WidgetsTemplate: FC = () => { isStreet={widgetsStore.isStreet} /> ); - console.log(widget.data?.text?.subtitle); if (!widgetComponent) { return null; } + return ( Date: Wed, 28 Jun 2023 23:52:25 +0300 Subject: [PATCH 2/3] show transaction icon only widgets that has transaction --- src/components/molecules/card/AnyWayCard.tsx | 13 +++++++------ src/components/organisms/WidgetsTemplate.tsx | 2 +- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/src/components/molecules/card/AnyWayCard.tsx b/src/components/molecules/card/AnyWayCard.tsx index 594ab25a..b0e72aeb 100644 --- a/src/components/molecules/card/AnyWayCard.tsx +++ b/src/components/molecules/card/AnyWayCard.tsx @@ -37,7 +37,7 @@ interface IProps { information?: string; organizationData?: OrgLogoData; subtitle?: string; - BoxText?:string; + transcription?:string; } const getSizeFactor = (options: CardSizeOptions | undefined): number => (options?.size ? options.size : DEFAULTE_SIZE); @@ -79,7 +79,7 @@ const AnyWayCard: FC = ({ information, organizationData, subtitle, - BoxText + transcription }) => { const [element, setElement] = useState({}); const [isOpen, setOpen] = useState(false); @@ -107,7 +107,7 @@ const AnyWayCard: FC = ({ switch(widgateOpen){ case 'TextBox': - Widget = + Widget = break case 'CardEditor': Widget = @@ -130,9 +130,10 @@ const AnyWayCard: FC = ({ )} - {handleCardEditorOpen('TextBox')}}> - - + {transcription?( + {handleCardEditorOpen('TextBox')}}> + + ):null} ); diff --git a/src/components/organisms/WidgetsTemplate.tsx b/src/components/organisms/WidgetsTemplate.tsx index 479dabbc..9dd4b9cb 100644 --- a/src/components/organisms/WidgetsTemplate.tsx +++ b/src/components/organisms/WidgetsTemplate.tsx @@ -40,7 +40,7 @@ const WidgetsTemplate: FC = () => { Date: Sat, 1 Jul 2023 23:27:42 +0300 Subject: [PATCH 3/3] add copy image to transaction box --- src/assets/copyImageGrey.jpeg | Bin 0 -> 1299 bytes src/assets/copyImageWhite.jpeg | Bin 0 -> 1294 bytes src/components/organisms/TextBox.tsx | 39 +++++++++++++++++++-------- 3 files changed, 28 insertions(+), 11 deletions(-) create mode 100644 src/assets/copyImageGrey.jpeg create mode 100644 src/assets/copyImageWhite.jpeg diff --git a/src/assets/copyImageGrey.jpeg b/src/assets/copyImageGrey.jpeg new file mode 100644 index 0000000000000000000000000000000000000000..a6f41ce0a7764b2156c81f1be0bffbe6fd3b927c GIT binary patch literal 1299 zcmex=+ z$QDV5ur)yJBnaCE#4ax>C;_So0I`cgf}DZu6d+q89f_TU#7-_K0;%r-s5rZ)ISRxP=f? zS-`-+-@?GK?L0yZ5hewRMTubJSb!u`S{ehxr{xR`ypaqH!WS4AxT3*wKmv!`6o67P zKzHQ>VLC$&Ln?y;gC|2CLo$ONkY&VRz+lK=_Ww46GXpad2!KdtAYfr*0Rav+HdZ!H z4lXWE4o*%k9)2D!Za!{KPF_J?K7IiKK>;ovAz>i_VIW%oWC$ZjCo>BNP@@1hCpS=( zMDYIrgCGZkI)f53qY?v?AS1INMNo|d=>~}kqF4kL zy~V)8%m{Q3vmk>#L;3dH)sn|%Cq?|7?5lcv!IPg$AKX$nzr$$x%(fP{D(`dOl3%Ye zIdmv!osj1%R~(at|Q<)C3R97x|{Zusm^7DI>8y*LxSS^<=JI|XP)vxNMvtW|{ zlF6=2pZD?GzF59b_&-C^j%(Rbb$=v6*UKI-l}pJy7rEig%$wW8m0Utv4NiZ185s0x zLjMwJult@s4S}*&r7u=iM!kK1O}U|? zKQ)AB*;i@R3ug~!$*`$xPdcx6<7~UsWW`qF$DVU(4~EwrCsTM^WzPwTcYbsS1Ic)_`WnVRiXK(K*oYurOW2$=Ipr@lY3;! zS}vJZ=6f8rkEZb^T+qD`yV+9QSNK|t+~Gb?uaNH0``k^x9_jaS1-wXDnW4Vo!>+!H zCl_5=l~10o|Ig6jtMSjZ^FM>B|I2qLKUZI?PrI`B@~hWX&Bo%z+cri#h`!8qk@tcl c-#1Q9PlbjGPKF7b&v$icNUzdZ)cpS@06+k2djJ3c literal 0 HcmV?d00001 diff --git a/src/assets/copyImageWhite.jpeg b/src/assets/copyImageWhite.jpeg new file mode 100644 index 0000000000000000000000000000000000000000..4c38615f74c1f775b1720f4cd8364fc9a6763b5b GIT binary patch literal 1294 zcmex=+ z$QDV5ur)yJBnaCE#4ax>C;_So0I`cgf}DZu6d+q89f_TU#7-_K0;%r-s5rZ)ISRxP=f? zS-`-+-@?GK?L0yZ5hewRMTubJSb!u`S{ehxr{xR`ypaqH!WS4AxT3*wKmv!`6o67P zKzHQ>VLC$&Ln?y;gC|2CLo$ONkY&VRz+lK=_Ww46GXpad2!KdtAYfr*0Rav+HdZ!H z4lXWE4o*%k9)2D!Za!{KPF_J?K7IiKK>;ovAz>i_VIW%oWC$ZjCo>BNP@@1hCpS=( zMDYIrgCGZkI)f53qY?v?AS1INbw&A&k$R#@~GDBu83sUF^e^xms<~=a#=0BDC5(nsmvR=wVyJ)F@MJJwQZkKxxH@g z;;41o7EN8WF;7=Zc4fdUN0v&*hHDy1`}^lrr5)O~OiebpZ@0(fsB4RN26bzwOn#_x zkYP=s@_RM;FWtW14)=4h3(ZQ6w77O`?~<3olfT@y`?CCM)_sBmI}fXw3JU|Opdj0VUCxyTp_>m+VQz-?|)e&?LU{@UB1Iq{-)aA6F!?# zulnydtXp1mRVuD@b+PK5FIur{{@mF$GuHRpJ?@BHu2&9Tp6Um8u&-fT^SFQW>G(67 z>@RdE-#Rj7#_}8AzO>wS-TriCP|vRBTT_=#Y2tt4*u<21ZC35pO`kIhw+jVr(a00w z&rtZ*5n;^6bd@#g(~MP#Hm8#>oFc<$m*y!U9r Zlt~=y2@^OO=KfY_V%*ilp = ({ isOpen,text,onClose}) => { - console.log('transaction ',text); - - const useStyles = makeStyles((theme) => ({ text: { position: 'relative', // for meta tags @@ -40,19 +39,32 @@ const TextBox: React.FC = ({ isOpen,text,onClose}) => { backgroundColor: transparent, }, }, - img:{ - height:'100px', - width:'100px' + copyImg:{ + height:'70px', + width:'70px', + }, + copyMessage:{ + color:'blue' } - - })); const { t } = useTranslation(); + + const [copyToClickBoard,SetCopyToClickBoard] = useState(false) + const [copyMessage,SetCopyMessage] = useState('') + const onCloseInitValues = () => { onClose(); + SetCopyMessage('') + SetCopyToClickBoard(false) } + const copyHandler = () =>{ + navigator.clipboard.writeText(text?text:'') + SetCopyToClickBoard(true) + SetCopyMessage('הטקסט העותק ללוח') + } + const classes = useStyles(); return ( @@ -64,8 +76,13 @@ const TextBox: React.FC = ({ isOpen,text,onClose}) => { - {navigator.clipboard.writeText(text?text:'asdsadasd')}} className={classes.button} > - + + + + + {copyMessage} + +