mirror of
https://github.com/chinchang/web-maker.git
synced 2025-07-27 16:50:11 +02:00
some pro improvements
This commit is contained in:
@@ -2,6 +2,8 @@ import { h } from 'preact';
|
|||||||
import { Button } from './common';
|
import { Button } from './common';
|
||||||
import { Trans, NumberFormat, t } from '@lingui/macro';
|
import { Trans, NumberFormat, t } from '@lingui/macro';
|
||||||
import { I18n } from '@lingui/react';
|
import { I18n } from '@lingui/react';
|
||||||
|
import { ProBadge } from './ProBadge';
|
||||||
|
import { Stack } from './Stack';
|
||||||
|
|
||||||
const DEFAULT_PROFILE_IMG =
|
const DEFAULT_PROFILE_IMG =
|
||||||
"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ccc' d='M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z'/%3E%3C/svg%3E";
|
"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ccc' d='M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z'/%3E%3C/svg%3E";
|
||||||
@@ -46,7 +48,9 @@ export function MainHeader(props) {
|
|||||||
class="btn btn--dark hint--rounded hint--bottom-left"
|
class="btn btn--dark hint--rounded hint--bottom-left"
|
||||||
aria-label={i18n._(t`Upload/Use assets`)}
|
aria-label={i18n._(t`Upload/Use assets`)}
|
||||||
>
|
>
|
||||||
<Trans>Assets</Trans>{' '}
|
<Stack gap={1}>
|
||||||
|
<Trans>Assets</Trans> <ProBadge />
|
||||||
|
</Stack>
|
||||||
</Button>
|
</Button>
|
||||||
|
|
||||||
{!props.isFileMode && (
|
{!props.isFileMode && (
|
||||||
|
3
src/components/ProBadge.jsx
Normal file
3
src/components/ProBadge.jsx
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
export const ProBadge = () => {
|
||||||
|
return <div className="pro-badge">PRO</div>;
|
||||||
|
};
|
@@ -1,4 +1,6 @@
|
|||||||
import { h } from 'preact';
|
import { h } from 'preact';
|
||||||
|
import { ProBadge } from './ProBadge';
|
||||||
|
import { HStack, Stack, VStack } from './Stack';
|
||||||
|
|
||||||
const DEFAULT_PROFILE_IMG =
|
const DEFAULT_PROFILE_IMG =
|
||||||
"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ccc' d='M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z'/%3E%3C/svg%3E";
|
"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ccc' d='M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z'/%3E%3C/svg%3E";
|
||||||
@@ -13,18 +15,29 @@ export function Profile({ user, logoutBtnHandler }) {
|
|||||||
id="profileAvatarImg"
|
id="profileAvatarImg"
|
||||||
alt="Profile image"
|
alt="Profile image"
|
||||||
/>
|
/>
|
||||||
<h3 id="profileUserName" class="mb-2">
|
|
||||||
{user && user.displayName ? user.displayName : 'Anonymous Creator'}
|
<VStack gap={4}>
|
||||||
</h3>
|
<VStack gap={1}>
|
||||||
<p>
|
<h3 id="profileUserName">
|
||||||
<button
|
{user && user.displayName ? user.displayName : 'Anonymous Creator'}
|
||||||
class="btn"
|
</h3>
|
||||||
aria-label="Logout from your account"
|
{user.isPro && (
|
||||||
onClick={logoutBtnHandler}
|
<Stack justify="center">
|
||||||
>
|
<ProBadge />
|
||||||
Logout
|
</Stack>
|
||||||
</button>
|
)}
|
||||||
</p>
|
</VStack>
|
||||||
|
|
||||||
|
<HStack>
|
||||||
|
<button
|
||||||
|
class="btn btn--primary"
|
||||||
|
aria-label="Logout from your account"
|
||||||
|
onClick={logoutBtnHandler}
|
||||||
|
>
|
||||||
|
Logout
|
||||||
|
</button>
|
||||||
|
</HStack>
|
||||||
|
</VStack>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@@ -1,9 +1,54 @@
|
|||||||
const gaps = [0, '0.5rem', '1rem', '1.5rem', '3rem', '5rem'];
|
const gaps = [0, '0.5rem', '1rem', '1.5rem', '3rem', '5rem'];
|
||||||
|
|
||||||
export const Stack = ({ gap = 0, children }) => {
|
const Stack = function ({
|
||||||
|
classes = '',
|
||||||
|
gap = 0,
|
||||||
|
align = 'center',
|
||||||
|
justify = 'flex-start',
|
||||||
|
direction = 'horizontal',
|
||||||
|
fullWidth = false,
|
||||||
|
fullHeight = false,
|
||||||
|
wrap,
|
||||||
|
children
|
||||||
|
}) {
|
||||||
return (
|
return (
|
||||||
<div class="stack" style={{ gap: gaps[gap] }}>
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
gap: gaps[gap] || gap,
|
||||||
|
alignItems: align,
|
||||||
|
justifyContent: justify,
|
||||||
|
flexDirection: direction === 'vertical' ? 'column' : 'row',
|
||||||
|
height: fullHeight ? '100%' : null,
|
||||||
|
width: fullWidth ? '100%' : null,
|
||||||
|
flexWrap: wrap ? 'wrap' : null
|
||||||
|
}}
|
||||||
|
class={`stack ${classes}`}
|
||||||
|
>
|
||||||
{children}
|
{children}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const VStack = props => {
|
||||||
|
return <Stack {...props} direction="vertical" />;
|
||||||
|
};
|
||||||
|
|
||||||
|
const HStack = props => {
|
||||||
|
return (
|
||||||
|
<Stack
|
||||||
|
classes={`hstack ${props.responsive ? 'hstack--responsive' : ''}`}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const Spacer = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div style={{ flexGrow: '1' }}></div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export { Stack, VStack, HStack, Spacer };
|
||||||
|
@@ -2112,11 +2112,22 @@ while the theme CSS file is loading */
|
|||||||
}
|
}
|
||||||
.stack {
|
.stack {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
.stack > * {
|
.stack > * {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pro-badge {
|
||||||
|
padding: 0.1rem 0.3rem;
|
||||||
|
background-color: #fff91f;
|
||||||
|
border-radius: 1rem;
|
||||||
|
font-size: 0.8em;
|
||||||
|
color: #222;
|
||||||
|
box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.3);
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
@media screen and (max-width: 600px) {
|
@media screen and (max-width: 600px) {
|
||||||
body {
|
body {
|
||||||
font-size: 70%;
|
font-size: 70%;
|
||||||
|
Reference in New Issue
Block a user