Discover apps app modal opening fixes
This commit is contained in:
monilprajapati
@@ -86,7 +86,7 @@ const AppModal = ({ open, onClose, app, userdata }) => {
|
|||||||
<div style={{ display: "flex", flexDirection: "row", gap: 10, fontFamily: "Inter" }}>
|
<div style={{ display: "flex", flexDirection: "row", gap: 10, fontFamily: "Inter" }}>
|
||||||
<img
|
<img
|
||||||
alt={app?.name}
|
alt={app?.name}
|
||||||
src={app?.large_image}
|
src={app?.large_image || app?.image_url}
|
||||||
style={{
|
style={{
|
||||||
borderRadius: 4,
|
borderRadius: 4,
|
||||||
maxWidth: 100,
|
maxWidth: 100,
|
||||||
@@ -201,7 +201,7 @@ const AppModal = ({ open, onClose, app, userdata }) => {
|
|||||||
mb: 0.3,
|
mb: 0.3,
|
||||||
color: '#fff'
|
color: '#fff'
|
||||||
}}>
|
}}>
|
||||||
{app?.actions?.length}
|
{Array.isArray(app?.actions) ? app.actions.length : app?.actions}
|
||||||
</Typography>
|
</Typography>
|
||||||
<Typography variant="body2" sx={{ color: 'rgba(255, 255, 255, 0.7)' }}>
|
<Typography variant="body2" sx={{ color: 'rgba(255, 255, 255, 0.7)' }}>
|
||||||
Actions
|
Actions
|
||||||
|
|||||||
+180
-181
@@ -67,11 +67,7 @@ const AppCard = ({ data, index, mouseHoverIndex, setMouseHoverIndex, globalUrl,
|
|||||||
width: '100%',
|
width: '100%',
|
||||||
backgroundColor: mouseHoverIndex === index ? "#2F2F2F" : "#212121"
|
backgroundColor: mouseHoverIndex === index ? "#2F2F2F" : "#212121"
|
||||||
}}
|
}}
|
||||||
onClick={(event) => {
|
onClick={() => {
|
||||||
// if (!event.target.closest('.deactivate-button')) {
|
|
||||||
// window.location.href = appUrl;
|
|
||||||
// }
|
|
||||||
|
|
||||||
handleAppClick(data);
|
handleAppClick(data);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
@@ -190,6 +186,7 @@ const AppCard = ({ data, index, mouseHoverIndex, setMouseHoverIndex, globalUrl,
|
|||||||
const Hits = ({
|
const Hits = ({
|
||||||
userdata,
|
userdata,
|
||||||
hits,
|
hits,
|
||||||
|
handleAppClick,
|
||||||
setIsAnyAppActivated,
|
setIsAnyAppActivated,
|
||||||
searchQuery,
|
searchQuery,
|
||||||
globalUrl,
|
globalUrl,
|
||||||
@@ -316,193 +313,192 @@ const Hits = ({
|
|||||||
transitionDelay: `${workflowDelay}ms`,
|
transitionDelay: `${workflowDelay}ms`,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Grid>
|
<div
|
||||||
<a
|
onClick={
|
||||||
href={appUrl}
|
() => {
|
||||||
rel="noopener noreferrer"
|
handleAppClick(data);
|
||||||
target="_blank"
|
}
|
||||||
|
}
|
||||||
|
style={{
|
||||||
|
color: "#f85a3e",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Paper
|
||||||
|
elevation={0}
|
||||||
style={{
|
style={{
|
||||||
textDecoration: "none",
|
backgroundColor: hoverEffect === index ? "rgba(26, 26, 26, 1)" : "#1A1A1A",
|
||||||
color: "#f85a3e",
|
color: "rgba(241, 241, 241, 1)",
|
||||||
|
cursor: "pointer",
|
||||||
|
position: "relative",
|
||||||
|
width: 365,
|
||||||
|
height: 96,
|
||||||
|
borderRadius: 8,
|
||||||
|
boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.1)",
|
||||||
|
marginBottom: 20,
|
||||||
|
}}
|
||||||
|
onMouseEnter={() => {
|
||||||
|
setHoverEffect(index);
|
||||||
|
}}
|
||||||
|
onMouseLeave={() => {
|
||||||
|
setHoverEffect(-1);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Paper
|
<ButtonBase style={{
|
||||||
elevation={0}
|
borderRadius: 6,
|
||||||
style={{
|
fontSize: 16,
|
||||||
backgroundColor: hoverEffect === index ? "rgba(26, 26, 26, 1)" : "#1A1A1A",
|
overflow: "hidden",
|
||||||
color: "rgba(241, 241, 241, 1)",
|
display: "flex",
|
||||||
cursor: "pointer",
|
alignItems: "flex-start",
|
||||||
position: "relative",
|
width: '100%',
|
||||||
width: 365,
|
backgroundColor: hoverEffect === index ? "#2F2F2F" : "#212121"
|
||||||
height: 96,
|
}}>
|
||||||
borderRadius: 8,
|
<img
|
||||||
boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.1)",
|
alt={data.name}
|
||||||
marginBottom: 20,
|
src={data.image_url ? data.image_url : "/images/no_image.png"}
|
||||||
}}
|
style={{
|
||||||
onMouseEnter={() => {
|
width: 100,
|
||||||
setHoverEffect(index);
|
height: 100,
|
||||||
}}
|
borderRadius: 6,
|
||||||
onMouseLeave={() => {
|
margin: 10,
|
||||||
setHoverEffect(-1);
|
border: "1px solid #212122",
|
||||||
}}
|
boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.1)"
|
||||||
>
|
}}
|
||||||
<ButtonBase style={{
|
/>
|
||||||
borderRadius: 6,
|
<div
|
||||||
fontSize: 16,
|
style={{
|
||||||
overflow: "hidden",
|
display: "flex",
|
||||||
display: "flex",
|
flexDirection: "column",
|
||||||
alignItems: "flex-start",
|
alignItems: "flex-start",
|
||||||
width: '100%',
|
width: 339,
|
||||||
backgroundColor: hoverEffect === index ? "#2F2F2F" : "#212121"
|
gap: 8,
|
||||||
}}>
|
fontWeight: '400',
|
||||||
<img
|
overflow: "hidden",
|
||||||
alt={data.name}
|
margin: "12px 0",
|
||||||
src={data.image_url ? data.image_url : "/images/no_image.png"}
|
fontFamily: "var(--zds-typography-base,Inter,Helvetica,arial,sans-serif)"
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
style={{
|
style={{
|
||||||
width: 100,
|
display: 'flex',
|
||||||
height: 100,
|
flexDirection: "row",
|
||||||
borderRadius: 6,
|
overflow: "hidden",
|
||||||
margin: 10,
|
gap: 8,
|
||||||
border: "1px solid #212122",
|
textOverflow: "ellipsis",
|
||||||
boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.1)"
|
whiteSpace: "nowrap",
|
||||||
|
color: '#F1F1F1'
|
||||||
}}
|
}}
|
||||||
/>
|
>
|
||||||
|
{(allActivatedAppIds && allActivatedAppIds.includes(data.objectID)) && <Box sx={{ width: 8, height: 8, backgroundColor: "#02CB70", borderRadius: '50%' }} />}
|
||||||
|
{normalizedString(data.name)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
overflow: "hidden",
|
||||||
|
textOverflow: "ellipsis",
|
||||||
|
whiteSpace: "nowrap",
|
||||||
|
color: "rgba(158, 158, 158, 1)",
|
||||||
|
marginTop: 5
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{data.categories !== null
|
||||||
|
? normalizedString(data.categories).join(", ")
|
||||||
|
: "NA"}
|
||||||
|
</div>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
display: "flex",
|
display: "flex",
|
||||||
flexDirection: "column",
|
justifyContent: 'space-between',
|
||||||
alignItems: "flex-start",
|
width: 230,
|
||||||
width: 339,
|
textAlign: 'start',
|
||||||
gap: 8,
|
color: "rgba(158, 158, 158, 1)",
|
||||||
fontWeight: '400',
|
|
||||||
overflow: "hidden",
|
|
||||||
margin: "12px 0",
|
|
||||||
fontFamily: "var(--zds-typography-base,Inter,Helvetica,arial,sans-serif)"
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div
|
<div style={{ marginBottom: 15, }}>
|
||||||
style={{
|
{hoverEffect === index && isCloud ? (
|
||||||
display: 'flex',
|
<div>
|
||||||
flexDirection: "row",
|
{data.tags && (
|
||||||
overflow: "hidden",
|
<Tooltip
|
||||||
gap: 8,
|
title={data.tags.join(", ")}
|
||||||
textOverflow: "ellipsis",
|
placement="bottom"
|
||||||
whiteSpace: "nowrap",
|
componentsProps={{
|
||||||
color: '#F1F1F1'
|
tooltip: {
|
||||||
}}
|
sx: {
|
||||||
>
|
backgroundColor: "rgba(33, 33, 33, 1)",
|
||||||
{(allActivatedAppIds && allActivatedAppIds.includes(data.objectID)) && <Box sx={{ width: 8, height: 8, backgroundColor: "#02CB70", borderRadius: '50%' }} />}
|
color: "rgba(241, 241, 241, 1)",
|
||||||
{normalizedString(data.name)}
|
width: "auto",
|
||||||
</div>
|
height: "auto",
|
||||||
|
fontSize: 16,
|
||||||
<div
|
border: "1px solid rgba(73, 73, 73, 1)",
|
||||||
style={{
|
|
||||||
overflow: "hidden",
|
|
||||||
textOverflow: "ellipsis",
|
|
||||||
whiteSpace: "nowrap",
|
|
||||||
color: "rgba(158, 158, 158, 1)",
|
|
||||||
marginTop: 5
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{data.categories !== null
|
|
||||||
? normalizedString(data.categories).join(", ")
|
|
||||||
: "NA"}
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
display: "flex",
|
|
||||||
justifyContent: 'space-between',
|
|
||||||
width: 230,
|
|
||||||
textAlign: 'start',
|
|
||||||
color: "rgba(158, 158, 158, 1)",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div style={{ marginBottom: 15, }}>
|
|
||||||
{hoverEffect === index && isCloud ? (
|
|
||||||
<div>
|
|
||||||
{data.tags && (
|
|
||||||
<Tooltip
|
|
||||||
title={data.tags.join(", ")}
|
|
||||||
placement="bottom"
|
|
||||||
componentsProps={{
|
|
||||||
tooltip: {
|
|
||||||
sx: {
|
|
||||||
backgroundColor: "rgba(33, 33, 33, 1)",
|
|
||||||
color: "rgba(241, 241, 241, 1)",
|
|
||||||
width: "auto",
|
|
||||||
height: "auto",
|
|
||||||
fontSize: 16,
|
|
||||||
border: "1px solid rgba(73, 73, 73, 1)",
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}}
|
}
|
||||||
>
|
}}
|
||||||
<span>
|
>
|
||||||
{data.tags.slice(0, 1).map((tag, tagIndex) => (
|
<span>
|
||||||
<span key={tagIndex}>
|
{data.tags.slice(0, 1).map((tag, tagIndex) => (
|
||||||
{normalizedString(tag)}
|
<span key={tagIndex}>
|
||||||
{tagIndex < 1 ? ", " : ""}
|
{normalizedString(tag)}
|
||||||
</span>
|
{tagIndex < 1 ? ", " : ""}
|
||||||
))}
|
</span>
|
||||||
</span>
|
))}
|
||||||
</Tooltip>
|
</span>
|
||||||
)}
|
</Tooltip>
|
||||||
</div>
|
)}
|
||||||
) : (
|
</div>
|
||||||
<div style={{ width: 230, textOverflow: "ellipsis", overflow: 'hidden', whiteSpace: 'nowrap', }}>
|
) : (
|
||||||
{data.tags &&
|
<div style={{ width: 230, textOverflow: "ellipsis", overflow: 'hidden', whiteSpace: 'nowrap', }}>
|
||||||
data.tags.map((tag, tagIndex) => (
|
{data.tags &&
|
||||||
<span key={tagIndex}>
|
data.tags.map((tag, tagIndex) => (
|
||||||
{normalizedString(tag)}
|
<span key={tagIndex}>
|
||||||
{tagIndex < data.tags.length - 1 ? ", " : ""}
|
{normalizedString(tag)}
|
||||||
</span>
|
{tagIndex < data.tags.length - 1 ? ", " : ""}
|
||||||
))}
|
</span>
|
||||||
</div>
|
))}
|
||||||
)}
|
</div>
|
||||||
</div>
|
)}
|
||||||
<div style={{ position: 'relative', bottom: 5 }}>
|
</div>
|
||||||
{hoverEffect === index && isCloud && (
|
<div style={{ position: 'relative', bottom: 5 }}>
|
||||||
<div>
|
{hoverEffect === index && isCloud && (
|
||||||
{allActivatedAppIds && allActivatedAppIds.includes(data.objectID) ? (
|
<div>
|
||||||
<Button style={{
|
{allActivatedAppIds && allActivatedAppIds.includes(data.objectID) ? (
|
||||||
|
<Button style={{
|
||||||
|
width: 102,
|
||||||
|
height: 35,
|
||||||
|
borderRadius: 200,
|
||||||
|
backgroundColor: "rgba(73, 73, 73, 1)",
|
||||||
|
color: "rgba(241, 241, 241, 1)",
|
||||||
|
textTransform: "none",
|
||||||
|
}}
|
||||||
|
onClick={(event) => {
|
||||||
|
handleActivateButton(event, data, "deactivate");
|
||||||
|
}}>
|
||||||
|
Deactivate
|
||||||
|
</Button>
|
||||||
|
) : (
|
||||||
|
<Button
|
||||||
|
style={{
|
||||||
width: 102,
|
width: 102,
|
||||||
height: 35,
|
height: 35,
|
||||||
borderRadius: 200,
|
borderRadius: 200,
|
||||||
backgroundColor: "rgba(73, 73, 73, 1)",
|
backgroundColor: "rgba(242, 101, 59, 1)",
|
||||||
color: "rgba(241, 241, 241, 1)",
|
color: "rgba(255, 255, 255, 1)",
|
||||||
textTransform: "none",
|
textTransform: "none",
|
||||||
}}
|
}}
|
||||||
onClick={(event) => {
|
onClick={(event) => {
|
||||||
handleActivateButton(event, data, "deactivate");
|
handleActivateButton(event, data, "activate");
|
||||||
}}>
|
}}
|
||||||
Deactivate
|
>
|
||||||
</Button>
|
Activate
|
||||||
) : (
|
</Button>
|
||||||
<Button
|
)}
|
||||||
style={{
|
</div>
|
||||||
width: 102,
|
)}
|
||||||
height: 35,
|
|
||||||
borderRadius: 200,
|
|
||||||
backgroundColor: "rgba(242, 101, 59, 1)",
|
|
||||||
color: "rgba(255, 255, 255, 1)",
|
|
||||||
textTransform: "none",
|
|
||||||
}}
|
|
||||||
onClick={(event) => {
|
|
||||||
handleActivateButton(event, data, "activate");
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Activate
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</ButtonBase>
|
</div>
|
||||||
</Paper>
|
</ButtonBase>
|
||||||
</a>
|
</Paper>
|
||||||
</Grid>
|
</div>
|
||||||
</Zoom>
|
</Zoom>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
@@ -981,12 +977,12 @@ const Apps2 = (props) => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<InstantSearch searchClient={searchClient} indexName="appsearch">
|
<InstantSearch searchClient={searchClient} indexName="appsearch">
|
||||||
<AppModal
|
<AppModal
|
||||||
open={openModal}
|
open={openModal}
|
||||||
onClose={handleAppModalClose}
|
onClose={handleAppModalClose}
|
||||||
app={selectedApp}
|
app={selectedApp}
|
||||||
userdata={userdata}
|
userdata={userdata}
|
||||||
/>
|
/>
|
||||||
<div style={boxStyle}>
|
<div style={boxStyle}>
|
||||||
<Typography variant="h4" style={{ marginBottom: 20, paddingLeft: 15, textTransform: 'none' }}>
|
<Typography variant="h4" style={{ marginBottom: 20, paddingLeft: 15, textTransform: 'none' }}>
|
||||||
Apps
|
Apps
|
||||||
@@ -1153,7 +1149,9 @@ const Apps2 = (props) => {
|
|||||||
{appsToShow?.length > 0 && appsToShow !== undefined ? (
|
{appsToShow?.length > 0 && appsToShow !== undefined ? (
|
||||||
<div style={{ rowGap: 16, columnGap: 16, marginTop: 16, display: "flex", flexWrap: "wrap", justifyContent: "flex-start", maxHeight: 570, scrollbarWidth: "thin", scrollbarColor: "#494949 #2f2f2f" }}>
|
<div style={{ rowGap: 16, columnGap: 16, marginTop: 16, display: "flex", flexWrap: "wrap", justifyContent: "flex-start", maxHeight: 570, scrollbarWidth: "thin", scrollbarColor: "#494949 #2f2f2f" }}>
|
||||||
{appsToShow.map((data, index) => (
|
{appsToShow.map((data, index) => (
|
||||||
<AppCard key={index} data={data} index={index} mouseHoverIndex={mouseHoverIndex} setMouseHoverIndex={setMouseHoverIndex} globalUrl={globalUrl} deactivatedIndexes={deactivatedIndexes} currTab={currTab}/>
|
<AppCard key={index} data={data} index={index} mouseHoverIndex={mouseHoverIndex} setMouseHoverIndex={setMouseHoverIndex} globalUrl={globalUrl} deactivatedIndexes={deactivatedIndexes} currTab={currTab}
|
||||||
|
handleAppClick={handleAppClick}
|
||||||
|
/>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
@@ -1172,6 +1170,7 @@ const Apps2 = (props) => {
|
|||||||
<CustomHits
|
<CustomHits
|
||||||
isLoggedIn={isLoggedIn}
|
isLoggedIn={isLoggedIn}
|
||||||
userdata={userdata}
|
userdata={userdata}
|
||||||
|
handleAppClick={handleAppClick}
|
||||||
setIsAnyAppActivated={setIsAnyAppActivated}
|
setIsAnyAppActivated={setIsAnyAppActivated}
|
||||||
hitsPerPage={5}
|
hitsPerPage={5}
|
||||||
globalUrl={globalUrl}
|
globalUrl={globalUrl}
|
||||||
|
|||||||
Reference in New Issue
Block a user