Skip to content

Commit

Permalink
minor ui changes to options buttons
Browse files Browse the repository at this point in the history
  • Loading branch information
@prtkjakhar @amit-s19
prtkjakhar authored and amit-s19 committed Feb 27, 2024
1 parent 0fd4879 commit 5e73240
Show file tree
Hide file tree
Showing 4 changed files with 107 additions and 65 deletions.
1 change: 1 addition & 0 deletions apps/amakrushi/lang/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@
"table.header_cloudcover": "Cloudcover",
"table.header_conditions": "Conditions",
"message.speaker": "Click to hear",
"message.options":"To know the advisory for your crop, please click on the relevant button below:",
"message.no_signal":"No signal. \nPlease check your internet connection",
"message.click_to_type": "Click here to type",
"message.downloading": "Downloading...",
Expand Down
1 change: 1 addition & 0 deletions apps/amakrushi/lang/or.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@
"table.header_cloudcover": "ମେଘ ଆବରଣ",
"table.header_conditions": "ସର୍ତ୍ତ",
"message.speaker": "ଶୁଣିବାକୁ କ୍ଲିକ୍ କରନ୍ତୁ",
"message.options":"ତୁମର ଫସଲ ପାଇଁ ଉପଦେଷ୍ଟା ଜାଣିବା ପାଇଁ, ଦୟାକରି ନିମ୍ନରେ ସମ୍ପୃକ୍ତ ବଟନ୍ ଉପରେ କ୍ଲିକ୍ କର:",
"message.no_signal":"ସିଗ୍ନାଲ ନାହିଁ। \nଦୟାକରି ଆପଣଙ୍କ ଇଣ୍ଟରନେଟ ସଂଯୋଗ କୁ ଚେକ୍ କରନ୍ତ",
"message.click_to_type": "ଟାଇପ୍ କରିବାକୁ ଏଠାରେ କ୍ଲିକ୍ କରନ୍ତୁ",
"message.downloading": "ଡାଉନଲୋଡ୍ ହେଉଛି ....",
Expand Down
5 changes: 3 additions & 2 deletions apps/amakrushi/src/components/chat-message-item/index.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
}

.onHover:hover {
background: var(--grey);
background: var(--lightgrey);
}

.msgFeedback {
Expand Down Expand Up @@ -89,14 +89,15 @@
}

.listItem {
font-size: 16px;
border: 2px solid var(--lightgrey) !important;
border-radius: 0px 25px;
margin-bottom: 10px;
background-color: white;
height: fit-content;
width: 100%;
box-shadow: 0px 4px 10px 5px rgba(0, 0, 0, 0.25);
padding: 0 10px !important;
padding: 2px 10px !important;
}

.offlineBtns {
Expand Down
165 changes: 102 additions & 63 deletions apps/amakrushi/src/components/chat-message-item/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,10 +55,7 @@ const getToastMessage = (t: any, reaction: number): string => {
if (reaction === 1) return t('toast.reaction_like');
return t('toast.reaction_reset');
};
const ChatMessageItem: FC<ChatMessageItemPropType> = ({
message,
onSend,
}) => {
const ChatMessageItem: FC<ChatMessageItemPropType> = ({ message, onSend }) => {
const flags = useFlags(['show_msg_id', 'dialer_number']);
const intl = useIntl();
const t = useLocalization();
Expand Down Expand Up @@ -132,7 +129,9 @@ const ChatMessageItem: FC<ChatMessageItemPropType> = ({
},
[onLikeDislike, reaction]
);
const [optionDisabled, setOptionDisabled] = useState(message?.content?.data?.optionClicked || false);
const [optionDisabled, setOptionDisabled] = useState(
message?.content?.data?.optionClicked || false
);
const getLists = useCallback(
({ choices }: { choices: any }) => {
console.log('qwer12:', { choices, optionDisabled });
Expand All @@ -143,7 +142,15 @@ const [optionDisabled, setOptionDisabled] = useState(message?.content?.data?.opt
<ListItem
key={`${index}_${choice?.key}`}
className={`${styles.onHover} ${styles.listItem}`}
style={optionDisabled ? {background: 'var(--grey)'} : null}
style={
optionDisabled
? {
background: 'var(--lightgrey)',
color: 'var(--font)',
boxShadow: 'none',
}
: null
}
onClick={(e: any): void => {
e.preventDefault();
if (optionDisabled) {
Expand All @@ -157,11 +164,26 @@ const [optionDisabled, setOptionDisabled] = useState(message?.content?.data?.opt
setOptionDisabled(true);
}
}}>
<div className="onHover" style={{ display: 'flex', alignItems: 'center', color:
content?.data?.position === 'right' ? 'white' : 'var(--font)' }}>
<div
className="onHover"
style={{
display: 'flex',
alignItems: 'center',
color:
content?.data?.position === 'right'
? 'white'
: optionDisabled
? 'var(--font)'
: 'var(--secondarygreen)',
}}>
<div>{choice}</div>
<div style={{ marginLeft: 'auto' }}>
<RightIcon width="40px" color="var(--font)" />
<RightIcon
width="30px"
color={
optionDisabled ? 'var(--font)' : 'var(--secondarygreen)'
}
/>
</div>
</div>
</ListItem>
Expand Down Expand Up @@ -342,7 +364,7 @@ const [optionDisabled, setOptionDisabled] = useState(message?.content?.data?.opt
}}>
{getFormatedTime(
content?.data?.sentTimestamp ||
content?.data?.repliedTimestamp
content?.data?.repliedTimestamp
)}
</span>
</div>
Expand Down Expand Up @@ -370,19 +392,19 @@ const [optionDisabled, setOptionDisabled] = useState(message?.content?.data?.opt
<div style={{ display: 'flex' }}>
<div
className={styles.msgSpeaker}
onClick={!ttsLoader ? downloadAudio : () => { }}
onClick={!ttsLoader ? downloadAudio : () => {}}
style={
!content?.data?.isEnd
? {
pointerEvents: 'none',
filter: 'grayscale(100%)',
opacity: '0.5',
}
pointerEvents: 'none',
filter: 'grayscale(100%)',
opacity: '0.5',
}
: {
pointerEvents: 'auto',
opacity: '1',
filter: 'grayscale(0%)',
}
pointerEvents: 'auto',
opacity: '1',
filter: 'grayscale(0%)',
}
}>
{context?.clickedAudioUrl === content?.data?.audio_url ? (
<Image
Expand All @@ -409,7 +431,7 @@ const [optionDisabled, setOptionDisabled] = useState(message?.content?.data?.opt
alignItems: 'flex-end',
marginRight: '1px',
padding: '0 5px',
marginTop: !context?.audioPlaying ? 0 : '-14px'
marginTop: !context?.audioPlaying ? 0 : '-14px',
}}>
{t('message.speaker')}
</p>
Expand Down Expand Up @@ -502,7 +524,7 @@ const [optionDisabled, setOptionDisabled] = useState(message?.content?.data?.opt
<span style={{ color: 'var(--font)', fontSize: '10px' }}>
{getFormatedTime(
content?.data?.sentTimestamp ||
content?.data?.repliedTimestamp
content?.data?.repliedTimestamp
)}
</span>
</div>
Expand Down Expand Up @@ -536,7 +558,7 @@ const [optionDisabled, setOptionDisabled] = useState(message?.content?.data?.opt
<span style={{ color: 'var(--font)', fontSize: '10px' }}>
{getFormatedTime(
content?.data?.sentTimestamp ||
content?.data?.repliedTimestamp
content?.data?.repliedTimestamp
)}
</span>
</div>
Expand Down Expand Up @@ -574,7 +596,7 @@ const [optionDisabled, setOptionDisabled] = useState(message?.content?.data?.opt
<span style={{ color: 'var(--font)', fontSize: '10px' }}>
{getFormatedTime(
content?.data?.sentTimestamp ||
content?.data?.repliedTimestamp
content?.data?.repliedTimestamp
)}
</span>
</div>
Expand All @@ -598,7 +620,7 @@ const [optionDisabled, setOptionDisabled] = useState(message?.content?.data?.opt
</div>
{getLists({
choices:
content?.data?.payload?.buttonChoices ?? content?.data?.choices
content?.data?.payload?.buttonChoices ?? content?.data?.choices,
})}
</Bubble>
</>
Expand All @@ -620,56 +642,73 @@ const [optionDisabled, setOptionDisabled] = useState(message?.content?.data?.opt
? styles.messageTriangleRight
: styles.messageTriangleLeft
}></div>
<Bubble type="text">
<div className={styles.tableContainer}>
<div className={styles.tableHeader}>
<div>
<b>{t('table.header_date')}</b>
</div>
<div>{t('table.header_temp_max')}</div>
<div>{t('table.header_temp_min')}</div>
<div>{t('table.header_temp')}</div>
<div>{t('table.header_humidity')}</div>
<div>{t('table.header_precip')}</div>
<div>{t('table.header_precip_prob')}</div>
<div>{t('table.header_windspeed')}</div>
<div>{t('table.header_cloudcover')}</div>
<div>{t('table.header_conditions')}</div>
</div>
<div className={styles.tableData}>
{JSON.parse(content?.text)?.weatherData?.map((el: any, idx: any) => (
<div key={el.datetime + idx} className={styles.tableDataCol}>
<div>
<b> {getFormattedDate(el.datetime)}</b>
</div>
<div>{el.tempmax} °C </div>
<div>{el.tempmin} °C </div>
<div>{el.temp} °C </div>
<div>{el.humidity} %</div>
<div>{el.precip} mm</div>
<div>{el.precipprob} % </div>
<div>{el.windspeed} m/s</div>
<div>{el.cloudcover} %</div>
<div> {intl.locale == 'or' ? oriaWeatherTranslates[el?.conditions?.trim()?.split(" ")?.join("")?.toLowerCase()] : el.conditions}</div>
<Bubble type="text">
<div className={styles.tableContainer}>
<div className={styles.tableHeader}>
<div>
<b>{t('table.header_date')}</b>
</div>
))}
<div>{t('table.header_temp_max')}</div>
<div>{t('table.header_temp_min')}</div>
<div>{t('table.header_temp')}</div>
<div>{t('table.header_humidity')}</div>
<div>{t('table.header_precip')}</div>
<div>{t('table.header_precip_prob')}</div>
<div>{t('table.header_windspeed')}</div>
<div>{t('table.header_cloudcover')}</div>
<div>{t('table.header_conditions')}</div>
</div>
<div className={styles.tableData}>
{JSON.parse(content?.text)?.weatherData?.map(
(el: any, idx: any) => (
<div
key={el.datetime + idx}
className={styles.tableDataCol}>
<div>
<b> {getFormattedDate(el.datetime)}</b>
</div>
<div>{el.tempmax} °C </div>
<div>{el.tempmin} °C </div>
<div>{el.temp} °C </div>
<div>{el.humidity} %</div>
<div>{el.precip} mm</div>
<div>{el.precipprob} % </div>
<div>{el.windspeed} m/s</div>
<div>{el.cloudcover} %</div>
<div>
{' '}
{intl.locale == 'or'
? oriaWeatherTranslates[
el?.conditions
?.trim()
?.split(' ')
?.join('')
?.toLowerCase()
]
: el.conditions}
</div>
</div>
)
)}
</div>
</div>
</div>
<span
<span
className="onHover"
style={{
fontWeight: 600,
fontSize: '1rem',
color:
content?.data?.position === 'right' ? 'white' : 'var(--font)',
}}>
{`\n` + JSON.parse(content?.text)?.generalAdvice}{' '}
{`\n` +
JSON.parse(content?.text)?.generalAdvice +
`\n\n` +
t('message.options')}
{getLists({
choices: JSON.parse(content?.text)?.crops
})}
choices: JSON.parse(content?.text)?.crops,
})}
</span>

</Bubble>
</Bubble>
</div>
);
}
Expand Down

0 comments on commit 5e73240

Please sign in to comment.