mirror/lowdefy
2
0
Fork 0
mirror of https://github.com/lowdefy/lowdefy.git synced 2025-01-30 13:50:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/develop' into move-to-pnpm

Browse Source
This commit is contained in:
Sam 2022-09-12 21:50:22 +02:00
commit fcdddb2e10
No known key found for this signature in database
GPG Key ID: D004126FCD1A6DF0
6 changed files with 85 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
packages/plugins/blocks/blocks-antd/src/blocks/PageHeaderMenu/PageHeaderMenu.js
View File

@ -45,6 +45,7 @@ const PageHeaderMenu = ({
display: 'flex',
alignItems: 'center',
padding: '0 46px',
xs: { padding: '0 10px' },
sm: { padding: '0 15px' },
md: { padding: '0 30px' },
lg: { padding: '0 46px' },
@ -58,11 +59,14 @@ const PageHeaderMenu = ({
logo: {
margin: '0px 30px',
flex: '0 1 auto',
sm: { margin: '0 10px' },
width: 130,
xs: { margin: '0 5px', width: 40 },
sm: { margin: '0 10px', width: 130 },
md: { margin: '0 15px' },
},
lgMenu: {
flex: '1 1 auto',
xs: { display: 'none' },
sm: { display: 'none' },
md: { display: 'none' },
lg: { display: 'flex' },
@ -70,6 +74,7 @@ const PageHeaderMenu = ({
mdMenu: {
flex: '0 1 auto',
paddingLeft: '1rem',
xs: { display: 'flex' },
sm: { display: 'flex' },
md: { display: 'flex' },
lg: { display: 'none' },
@ -84,12 +89,17 @@ const PageHeaderMenu = ({
},
body: {
padding: '0 40px 40px 40px',
xs: { padding: '0 5px 5px 5px' },
sm: { padding: '0 10px 10px 10px' },
md: { padding: '0 20px 20px 20px' },
lg: { padding: '0 40px 40px 40px' },
},
breadcrumb: {
margin: '16px 0',
},
noBreadcrumb: {
padding: '20px 0',
xs: { padding: '5px 0' },
sm: { padding: '5px 0' },
md: { padding: '10px 0' },
},
@ -98,7 +108,7 @@ const PageHeaderMenu = ({
<Layout
blockId={blockId}
events={events}
properties={{ style: mergeObjects([{ minHeight: '100vh' }, properties.style]) }}
properties={{ style: mergeObjects([styles.layout, properties.style]) }}
components={{ Icon, Link }}
content={{
content: () => (
@ -118,39 +128,26 @@ const PageHeaderMenu = ({
content: () => (
<>
<Link home={true}>
<img
src={
(properties.logo && properties.logo.src) ||
(get(properties, 'header.theme') === 'light'
? `${basePath}/logo-light-theme.png`
: `${basePath}/logo-dark-theme.png`)
}
srcSet={
(properties.logo && (properties.logo.srcSet || properties.logo.src)) ||
(get(properties, 'header.theme') === 'light'
? `${basePath}/logo-square-light-theme.png 40w, ${basePath}/logo-light-theme.png 577w`
: `${basePath}/logo-square-dark-theme.png 40w, ${basePath}/logo-dark-theme.png 577w`)
}
sizes={
(properties.logo && properties.logo.sizes) ||
'(max-width: 576px) 40px, 577px'
}
alt={(properties.logo && properties.logo.alt) || 'Lowdefy'}
className={methods.makeCssClass([
{
width: 130,
sm: {
width:
properties.logo && properties.logo.src && !properties.logo.srcSet
? 130
: 40,
},
md: { width: 130 },
},
styles.logo,
properties.logo && properties.logo.style,
])}
/>
<picture>
<source
media={`(min-width:${properties.logo?.breakpoint ?? 577}px)`}
srcSet={
properties.logo?.src ??
`${basePath}/logo-${properties.header?.theme ?? 'dark'}-theme.png`
}
/>
<img
src={
properties.logo?.srcMobile ??
properties.logo?.src ??
`${basePath}/logo-square-${
properties.header?.theme ?? 'dark'
}-theme.png`
}
alt={properties.logo?.alt ?? 'Lowdefy'}
className={methods.makeCssClass([styles.logo, properties.logo?.style])}
/>
</picture>
</Link>
<div className={methods.makeCssClass(styles.headerContent)}>
<div className={methods.makeCssClass([styles.desktop, styles.lgMenu])}>
@ -166,7 +163,7 @@ const PageHeaderMenu = ({
{
mode: 'horizontal',
collapsed: false,
theme: get(properties, 'header.theme') || 'dark',
theme: get(properties, 'header.theme') ?? 'dark',
},
properties.menu,
properties.menuLg,
@ -177,7 +174,7 @@ const PageHeaderMenu = ({
content.header(
mergeObjects([
{ width: 'auto', flex: '0 1 auto' },
properties.header && properties.header.contentStyle,
properties.header?.contentStyle,
])
)}
<div className={methods.makeCssClass([styles.mobile, styles.mdMenu])}>
@ -201,7 +198,7 @@ const PageHeaderMenu = ({
blockId={`${blockId}_content`}
components={{ Icon, Link }}
events={events}
properties={mergeObjects([properties.content, { style: styles.body }])}
properties={mergeObjects([{ style: styles.body }, properties.content])}
content={{
content: () => (
<>
@ -213,8 +210,8 @@ const PageHeaderMenu = ({
events={events}
methods={methods}
properties={mergeObjects([
{ style: styles.breadcrumb },
properties.breadcrumb,
{ style: { padding: '16px 0' } },
])}
rename={{
events: {

10
packages/plugins/blocks/blocks-antd/src/blocks/PageHeaderMenu/schema.json
View File

@ -13,13 +13,13 @@
"type": "string",
"description": "Header logo source url."
},
"srcSet": {
"srcMobile": {
"type": "string",
"description": "Header logo srcSet for logo img element."
"description": "Header logo img element for mobile."
},
"size": {
"type": "string",
"description": "Header logo size for logo img element."
"breakpoint": {
"type": "number",
"description": "Header logo breakpoint for switching between mobile and desktop logo."
},
"alt": {
"type": "string",

87
packages/plugins/blocks/blocks-antd/src/blocks/PageSiderMenu/PageSiderMenu.js
View File

@ -40,9 +40,7 @@ const PageSiderMenu = ({
pageId,
properties,
}) => {
const [openSiderState, setSiderOpen] = useState(
!(properties.sider && properties.sider.initialCollapsed)
);
const [openSiderState, setSiderOpen] = useState(!properties.sider?.initialCollapsed);
useEffect(() => {
methods.registerMethod('toggleSiderOpen', () => {
methods._toggleSiderOpen({ open: !openSiderState });
@ -59,6 +57,7 @@ const PageSiderMenu = ({
display: 'flex',
alignItems: 'center',
padding: '0 46px',
xs: { padding: '0 10px' },
sm: { padding: '0 15px' },
md: { padding: '0 30px' },
lg: { padding: '0 46px' },
@ -73,8 +72,10 @@ const PageSiderMenu = ({
logo: {
margin: '0 30px 0 0',
flex: '0 1 auto',
sm: { margin: '0 10px 0 0' },
md: { margin: '0 15px 0 0' },
width: 130,
xs: { margin: '0 5px', width: 40 },
sm: { margin: '0 10px', width: 130 },
md: { margin: '0 15px' },
},
desktop: {
display: 'none',
@ -89,6 +90,7 @@ const PageSiderMenu = ({
},
body: {
padding: '0 40px 40px 40px',
xs: { padding: '0 5px 5px 5px' },
sm: { padding: '0 10px 10px 10px' },
md: { padding: '0 20px 20px 20px' },
lg: { padding: '0 40px 40px 40px' },
@ -104,6 +106,7 @@ const PageSiderMenu = ({
},
noBreadcrumb: {
padding: '20px 0',
xs: { padding: '5px 0' },
sm: { padding: '5px 0' },
md: { padding: '10px 0' },
},
@ -113,7 +116,7 @@ const PageSiderMenu = ({
blockId={blockId}
components={{ Icon, Link }}
events={events}
properties={{ style: mergeObjects([{ minHeight: '100vh' }, properties.style]) }}
properties={{ style: mergeObjects([styles.layout, properties.style]) }}
content={{
// TODO: use next/image
content: () => (
@ -129,10 +132,7 @@ const PageSiderMenu = ({
<div className={methods.makeCssClass(styles.headerContent)}>
{content.header &&
content.header(
mergeObjects([
{ width: 'auto' },
properties.header && properties.header.contentStyle,
])
mergeObjects([{ width: 'auto' }, properties.header?.contentStyle])
)}
<div className={methods.makeCssClass([styles.mobile, styles.mdMenu])}>
<MobileMenu
@ -146,7 +146,7 @@ const PageSiderMenu = ({
properties={mergeObjects([
{
mode: 'inline',
theme: get(properties, 'sider.theme') || 'light',
theme: get(properties, 'sider.theme') ?? 'light',
},
properties.menu,
properties.menuMd,
@ -165,39 +165,26 @@ const PageSiderMenu = ({
</div>
</div>
<Link home={true}>
<img
src={
(properties.logo && properties.logo.src) ||
(get(properties, 'header.theme') === 'light'
? `${basePath}/logo-light-theme.png`
: `${basePath}/logo-dark-theme.png`)
}
srcSet={
(properties.logo && (properties.logo.srcSet || properties.logo.src)) ||
(get(properties, 'header.theme') === 'light'
? `${basePath}/logo-square-light-theme.png 40w, ${basePath}/logo-light-theme.png 577w`
: `${basePath}/logo-square-dark-theme.png 40w, ${basePath}/logo-dark-theme.png 577w`)
}
sizes={
(properties.logo && properties.logo.sizes) ||
'(max-width: 576px) 40px, 577px'
}
alt={(properties.logo && properties.logo.alt) || 'Lowdefy'}
className={methods.makeCssClass([
{
width: 130,
sm: {
width:
properties.logo && properties.logo.src && !properties.logo.srcSet
? 130
: 40,
},
md: { width: 130 },
},
styles.logo,
properties.logo && properties.logo.style,
])}
/>
<picture>
<source
media={`(min-width:${properties.logo?.breakpoint ?? 577}px)`}
srcSet={
properties.logo?.src ??
`${basePath}/logo-${properties.header?.theme ?? 'dark'}-theme.png`
}
/>
<img
src={
properties.logo?.srcMobile ??
properties.logo?.src ??
`${basePath}/logo-square-${
properties.header?.theme ?? 'dark'
}-theme.png`
}
alt={properties.logo?.alt ?? 'Lowdefy'}
className={methods.makeCssClass([styles.logo, properties.logo?.style])}
/>
</picture>
</Link>
</>
),
@ -218,7 +205,7 @@ const PageSiderMenu = ({
methods={methods}
properties={mergeObjects([
{
theme: get(properties, 'sider.theme') || 'light',
theme: get(properties, 'sider.theme') ?? 'light',
style: styles.desktop,
},
properties.sider,
@ -243,12 +230,12 @@ const PageSiderMenu = ({
properties={mergeObjects([
{
mode: 'inline',
theme: get(properties, 'sider.theme') || 'light',
theme: get(properties, 'sider.theme') ?? 'light',
// collapsed: !openSiderState,
},
{ style: styles.desktop },
properties.menu,
properties.menuLg,
{ style: styles.desktop },
])}
rename={{
methods: {
@ -265,7 +252,7 @@ const PageSiderMenu = ({
<div style={{ flex: '1 0 auto' }}>
{content.sider && content.sider()}
</div>
{!get(properties, 'sider.hideToggleButton') && (
{!get(properties, 'sider.hideToggleButton') ?? (
<Affix
blockId={`${blockId}_toggle_sider_affix`}
components={{ Icon, Link }}
@ -300,7 +287,7 @@ const PageSiderMenu = ({
? 'AiOutlineMenuFold'
: 'AiOutlineMenuUnfold',
},
...(properties.toggleSiderButton || {}),
...(properties.toggleSiderButton ?? {}),
}}
methods={methods}
onClick={() => methods.toggleSiderOpen()}
@ -335,7 +322,7 @@ const PageSiderMenu = ({
events={events}
methods={methods}
properties={mergeObjects([
{ style: { padding: '16px 0' } },
{ style: styles.breadcrumb },
properties.breadcrumb,
])}
rename={{

10
packages/plugins/blocks/blocks-antd/src/blocks/PageSiderMenu/schema.json
View File

@ -13,13 +13,13 @@
"type": "string",
"description": "Header logo source url."
},
"srcSet": {
"srcMobile": {
"type": "string",
"description": "Header logo srcSet for logo img element."
"description": "Header logo img element for mobile."
},
"size": {
"type": "string",
"description": "Header logo size for logo img element."
"breakpoint": {
"type": "number",
"description": "Header logo breakpoint for switching between mobile and desktop logo."
},
"alt": {
"type": "string",

1
packages/server-dev/pages/_document.js
View File

@ -26,6 +26,7 @@ class LowdefyDocument extends Document {
<link rel="manifest" href="/manifest.webmanifest" />
<link rel="icon" type="image/svg+xml" href="/icon.svg" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script
dangerouslySetInnerHTML={{
__html: `/* start of Lowdefy append head */</script>${appJson.html.appendHead}<script>/* end of Lowdefy append head */`,

1
packages/server/pages/_document.js
View File

@ -26,6 +26,7 @@ class LowdefyDocument extends Document {
<link rel="manifest" href="/manifest.webmanifest" />
<link rel="icon" type="image/svg+xml" href="/icon.svg" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script
dangerouslySetInnerHTML={{
__html: `/* start of Lowdefy append head */</script>${appJson.html.appendHead}<script>/* end of Lowdefy append head */`,