Empty Screen and sidebar design update.
This commit is contained in:
Pushkar Anand
parent
48b1e18da6
commit
580d17422b
22
src/components/CloudUpload.tsx
Normal file
22
src/components/CloudUpload.tsx
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
import React from 'react';
|
||||
|
||||
export default function CloudUpload(props) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
height={props.height}
|
||||
viewBox={props.viewBox}
|
||||
width={props.width}
|
||||
fill="currentColor"
|
||||
>
|
||||
<path d="M0 0h24v24H0V0z" fill="none"/>
|
||||
<path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM19 18H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95C8.08 7.14 9.94 6 12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11c1.56.1 2.78 1.41 2.78 2.96 0 1.65-1.35 3-3 3zM8 13h2.55v3h2.9v-3H16l-4-4z"/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
CloudUpload.defaultProps = {
|
||||
height: 24,
|
||||
width: 24,
|
||||
viewBox: '0 0 24 24',
|
||||
};
|
||||
|
|
@ -10,6 +10,7 @@ import constants from 'utils/strings/constants';
|
|||
import AutoSizer from 'react-virtualized-auto-sizer';
|
||||
import { VariableSizeList as List } from 'react-window';
|
||||
import PhotoSwipe from 'components/PhotoSwipe/PhotoSwipe';
|
||||
import CloudUpload from './CloudUpload';
|
||||
|
||||
const DATE_CONTAINER_HEIGHT = 45;
|
||||
const IMAGE_CONTAINER_HEIGHT = 200;
|
||||
|
|
@ -70,6 +71,19 @@ const DateContainer = styled.div`
|
|||
padding-top: 15px;
|
||||
`;
|
||||
|
||||
const EmptyScreen = styled.div`
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
color: #2dc262;
|
||||
|
||||
& > svg {
|
||||
filter: drop-shadow(3px 3px 5px rgba(45,194,98,0.5));
|
||||
}
|
||||
`;
|
||||
|
||||
enum ITEM_TYPE {
|
||||
TIME = 'TIME',
|
||||
TILE = 'TILE',
|
||||
|
|
@ -261,13 +275,8 @@ const PhotoFrame = ({
|
|||
return (
|
||||
<>
|
||||
{!isFirstLoad && files.length == 0 ? (
|
||||
<div
|
||||
style={{
|
||||
height: '60%',
|
||||
display: 'grid',
|
||||
placeItems: 'center',
|
||||
}}
|
||||
>
|
||||
<EmptyScreen>
|
||||
<CloudUpload width={150} height={150} />
|
||||
<Button
|
||||
variant="outline-success"
|
||||
onClick={openFileUploader}
|
||||
|
|
@ -280,7 +289,7 @@ const PhotoFrame = ({
|
|||
>
|
||||
{constants.UPLOAD_FIRST_PHOTO}
|
||||
</Button>
|
||||
</div>
|
||||
</EmptyScreen>
|
||||
) : filteredData.length ? (
|
||||
<Container>
|
||||
<AutoSizer>
|
||||
|
|
|
|||
|
|
@ -104,7 +104,7 @@ export default function Sidebar(props: Props) {
|
|||
>
|
||||
<div
|
||||
style={{
|
||||
marginBottom: '28px',
|
||||
marginBottom: '8px',
|
||||
outline: 'none',
|
||||
color: 'rgb(45, 194, 98)',
|
||||
fontSize: '16px',
|
||||
|
|
@ -112,147 +112,141 @@ export default function Sidebar(props: Props) {
|
|||
>
|
||||
{user?.email}
|
||||
</div>
|
||||
<div style={{ outline: 'none' }}>
|
||||
<div style={{ display: 'flex' }}>
|
||||
<h5 style={{ margin: '4px 0 12px 2px' }}>
|
||||
{constants.SUBSCRIPTION_PLAN}
|
||||
</h5>
|
||||
<div style={{ marginLeft: '10px' }}>
|
||||
{
|
||||
<Button
|
||||
variant={
|
||||
isSubscribed(subscription)
|
||||
? 'outline-secondary'
|
||||
: 'outline-success'
|
||||
}
|
||||
size="sm"
|
||||
onClick={onManageClick}
|
||||
>
|
||||
{isSubscribed(subscription)
|
||||
? constants.MANAGE
|
||||
: constants.SUBSCRIBE}
|
||||
</Button>
|
||||
}
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ outline: 'none' }}>
|
||||
<div style={{ display: 'flex' }}>
|
||||
<h5 style={{ margin: '4px 0 12px 2px' }}>
|
||||
{constants.SUBSCRIPTION_PLAN}
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ color: '#959595' }}>
|
||||
{isSubscriptionActive(subscription) ? (
|
||||
isOnFreePlan(subscription) ? (
|
||||
constants.FREE_SUBSCRIPTION_INFO(
|
||||
subscription?.expiryTime
|
||||
)
|
||||
) : isSubscriptionCancelled(subscription) ? (
|
||||
constants.RENEWAL_CANCELLED_SUBSCRIPTION_INFO(
|
||||
subscription?.expiryTime
|
||||
<div style={{ color: '#959595' }}>
|
||||
{isSubscriptionActive(subscription) ? (
|
||||
isOnFreePlan(subscription) ? (
|
||||
constants.FREE_SUBSCRIPTION_INFO(
|
||||
subscription?.expiryTime
|
||||
)
|
||||
) : isSubscriptionCancelled(subscription) ? (
|
||||
constants.RENEWAL_CANCELLED_SUBSCRIPTION_INFO(
|
||||
subscription?.expiryTime
|
||||
)
|
||||
) : (
|
||||
constants.RENEWAL_ACTIVE_SUBSCRIPTION_INFO(
|
||||
subscription?.expiryTime
|
||||
)
|
||||
)
|
||||
) : (
|
||||
constants.RENEWAL_ACTIVE_SUBSCRIPTION_INFO(
|
||||
subscription?.expiryTime
|
||||
)
|
||||
)
|
||||
) : (
|
||||
<p>{constants.SUBSCRIPTION_EXPIRED}</p>
|
||||
)}
|
||||
<p>{constants.SUBSCRIPTION_EXPIRED}</p>
|
||||
)}
|
||||
<Button
|
||||
variant="link"
|
||||
size="sm"
|
||||
onClick={onManageClick}
|
||||
style={{ paddingLeft: 0, color: '#2dc262' }}
|
||||
>
|
||||
{isSubscribed(subscription)
|
||||
? constants.MANAGE
|
||||
: constants.SUBSCRIBE}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ outline: 'none', marginTop: '30px' }}></div>
|
||||
<div>
|
||||
<h5 style={{ marginBottom: '12px' }}>
|
||||
{constants.USAGE_DETAILS}
|
||||
</h5>
|
||||
<div style={{ color: '#959595' }}>
|
||||
{usage ? (
|
||||
constants.USAGE_INFO(
|
||||
usage,
|
||||
Math.ceil(
|
||||
Number(convertBytesToGBs(subscription?.storage))
|
||||
<div style={{ outline: 'none', marginTop: '30px' }}></div>
|
||||
<div>
|
||||
<h5 style={{ marginBottom: '12px' }}>
|
||||
{constants.USAGE_DETAILS}
|
||||
</h5>
|
||||
<div style={{ color: '#959595' }}>
|
||||
{usage ? (
|
||||
constants.USAGE_INFO(
|
||||
usage,
|
||||
Math.ceil(
|
||||
Number(convertBytesToGBs(subscription?.storage))
|
||||
)
|
||||
)
|
||||
)
|
||||
) : (
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<EnteSpinner
|
||||
style={{
|
||||
borderWidth: '2px',
|
||||
width: '20px',
|
||||
height: '20px',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
) : (
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<EnteSpinner
|
||||
style={{
|
||||
borderWidth: '2px',
|
||||
width: '20px',
|
||||
height: '20px',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
height: '1px',
|
||||
marginTop: '40px',
|
||||
background: '#242424',
|
||||
width: '100%',
|
||||
}}
|
||||
></div>
|
||||
<LinkButton style={{ marginTop: '30px' }} onClick={openFeedbackURL}>
|
||||
{constants.REQUEST_FEATURE}
|
||||
</LinkButton>
|
||||
<LinkButton style={{ marginTop: '30px' }} onClick={openSupportMail}>
|
||||
{constants.SUPPORT}
|
||||
</LinkButton>
|
||||
<>
|
||||
<RecoveryKeyModal
|
||||
show={recoverModalView}
|
||||
onHide={() => setRecoveryModalView(false)}
|
||||
somethingWentWrong={() =>
|
||||
props.setDialogMessage({
|
||||
title: constants.RECOVER_KEY_GENERATION_FAILED,
|
||||
close: { variant: 'danger' },
|
||||
})
|
||||
}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
height: '1px',
|
||||
marginTop: '40px',
|
||||
background: '#242424',
|
||||
width: '100%',
|
||||
}}
|
||||
></div>
|
||||
<LinkButton style={{ marginTop: '30px' }} onClick={openFeedbackURL}>
|
||||
{constants.REQUEST_FEATURE}
|
||||
</LinkButton>
|
||||
<LinkButton style={{ marginTop: '30px' }} onClick={openSupportMail}>
|
||||
{constants.SUPPORT}
|
||||
</LinkButton>
|
||||
<>
|
||||
<RecoveryKeyModal
|
||||
show={recoverModalView}
|
||||
onHide={() => setRecoveryModalView(false)}
|
||||
somethingWentWrong={() =>
|
||||
props.setDialogMessage({
|
||||
title: constants.RECOVER_KEY_GENERATION_FAILED,
|
||||
close: { variant: 'danger' },
|
||||
})
|
||||
}
|
||||
/>
|
||||
<LinkButton
|
||||
style={{ marginTop: '30px' }}
|
||||
onClick={() => setRecoveryModalView(true)}
|
||||
>
|
||||
{constants.DOWNLOAD_RECOVERY_KEY}
|
||||
</LinkButton>
|
||||
</>
|
||||
<LinkButton
|
||||
style={{ marginTop: '30px' }}
|
||||
onClick={() => setRecoveryModalView(true)}
|
||||
onClick={() => {
|
||||
setData(LS_KEYS.SHOW_BACK_BUTTON, { value: true });
|
||||
router.push('changePassword');
|
||||
}}
|
||||
>
|
||||
{constants.DOWNLOAD_RECOVERY_KEY}
|
||||
{constants.CHANGE_PASSWORD}
|
||||
</LinkButton>
|
||||
</>
|
||||
<LinkButton
|
||||
style={{ marginTop: '30px' }}
|
||||
onClick={() => {
|
||||
setData(LS_KEYS.SHOW_BACK_BUTTON, { value: true });
|
||||
router.push('changePassword');
|
||||
}}
|
||||
>
|
||||
{constants.CHANGE_PASSWORD}
|
||||
</LinkButton>
|
||||
<LinkButton style={{ marginTop: '30px' }} onClick={exportFiles}>
|
||||
{constants.EXPORT}
|
||||
</LinkButton>
|
||||
<div
|
||||
style={{
|
||||
height: '1px',
|
||||
marginTop: '40px',
|
||||
background: '#242424',
|
||||
width: '100%',
|
||||
}}
|
||||
></div>
|
||||
<LinkButton
|
||||
variant="danger"
|
||||
style={{ marginTop: '30px' }}
|
||||
onClick={() =>
|
||||
props.setDialogMessage({
|
||||
title: `${constants.CONFIRM} ${constants.LOGOUT}`,
|
||||
content: constants.LOGOUT_MESSAGE,
|
||||
staticBackdrop: true,
|
||||
proceed: {
|
||||
text: constants.LOGOUT,
|
||||
action: logoutUser,
|
||||
variant: 'danger',
|
||||
},
|
||||
close: { text: constants.CANCEL },
|
||||
})
|
||||
}
|
||||
>
|
||||
logout
|
||||
</LinkButton>
|
||||
<div style={{ marginBottom: '50px' }} />
|
||||
<LinkButton style={{ marginTop: '30px' }} onClick={exportFiles}>
|
||||
{constants.EXPORT}
|
||||
</LinkButton>
|
||||
<div
|
||||
style={{
|
||||
height: '1px',
|
||||
marginTop: '40px',
|
||||
background: '#242424',
|
||||
width: '100%',
|
||||
}}
|
||||
></div>
|
||||
<LinkButton
|
||||
variant="danger"
|
||||
style={{ marginTop: '30px' }}
|
||||
onClick={() =>
|
||||
props.setDialogMessage({
|
||||
title: `${constants.CONFIRM} ${constants.LOGOUT}`,
|
||||
content: constants.LOGOUT_MESSAGE,
|
||||
staticBackdrop: true,
|
||||
proceed: {
|
||||
text: constants.LOGOUT,
|
||||
action: logoutUser,
|
||||
variant: 'danger',
|
||||
},
|
||||
close: { text: constants.CANCEL },
|
||||
})
|
||||
}
|
||||
>
|
||||
logout
|
||||
</LinkButton>
|
||||
</div>
|
||||
</Menu>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -195,13 +195,29 @@ const GlobalStyles = createGlobalStyle`
|
|||
}
|
||||
.bm-menu {
|
||||
background: #131313;
|
||||
padding: 2.5em 1.5em 0;
|
||||
font-size: 1.15em;
|
||||
color:#d1d1d1
|
||||
color:#d1d1d1;
|
||||
display: flex;
|
||||
}
|
||||
.bm-cross {
|
||||
background: #d1d1d1;
|
||||
}
|
||||
.bm-cross-button {
|
||||
top: 20px;
|
||||
}
|
||||
.bm-item-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 100%;
|
||||
flex: 1;
|
||||
}
|
||||
.bm-item {
|
||||
padding: 20px;
|
||||
}
|
||||
.bm-overlay {
|
||||
top: 0;
|
||||
background: rgba(0, 0, 0, 0.8) !important;
|
||||
}
|
||||
.bg-upload-progress-bar {
|
||||
background-color: #2dc262;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -109,7 +109,7 @@ export default function Collections(props: CollectionProps) {
|
|||
const user: User = getData(LS_KEYS.USER);
|
||||
|
||||
if (!collections || collections.length === 0) {
|
||||
return <Container />;
|
||||
return null;
|
||||
}
|
||||
|
||||
const collectionOptions = CollectionOptions({
|
||||
|
|
|
|||
Loading…
Reference in a new issue