Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit b21fee3

Browse files
jmikrutjmikrut
committed
feat: improves dashboard, implements tabs field in pages
1 parent 6f7dd81 commit b21fee3

File tree

9 files changed

+147
-62
lines changed

9 files changed

+147
-62
lines changed

‎src/collections/Pages/index.ts‎

Lines changed: 31 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -45,22 +45,37 @@ export const Pages: CollectionConfig = {
4545
required: true,
4646
localized: true,
4747
},
48-
hero,
49-
{
50-
name: 'layout',
51-
label: 'Page Layout',
52-
type: 'blocks',
53-
minRows: 1,
54-
localized: true,
55-
blocks: [
56-
Accordion,
57-
Content,
58-
Form,
59-
Media,
60-
MediaContent,
61-
MediaSlider,
62-
],
63-
},
48+
{
49+
type: 'tabs',
50+
tabs: [
51+
{
52+
label: 'Hero',
53+
fields: [
54+
hero,
55+
],
56+
},
57+
{
58+
label: 'Page Layout',
59+
fields: [
60+
{
61+
name: 'layout',
62+
label: false,
63+
type: 'blocks',
64+
minRows: 1,
65+
localized: true,
66+
blocks: [
67+
Accordion,
68+
Content,
69+
Form,
70+
Media,
71+
MediaContent,
72+
MediaSlider,
73+
],
74+
},
75+
]
76+
}
77+
]
78+
},
6479
{
6580
name: 'fullTitle',
6681
type: 'text',

‎src/components/AfterDashboard/index.scss‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
@import '~payload/scss';
2+
3+
.after-dashboard {
4+
margin: base(2) calc(var(--gutter-h) * -1) 0;
5+
padding: base(2) var(--gutter-h) 0;
6+
border-top: 1px solid var(--theme-elevation-100);
7+
8+
h4 {
9+
margin-bottom: base(.5);
10+
}
11+
}

‎src/components/AfterDashboard/index.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,20 @@
11
import React from 'react';
22

3+
import './index.scss';
4+
5+
const baseClass = 'after-dashboard';
6+
37
const AfterDashboard: React.FC = () => {
48
return (
5-
<div>
9+
<div className={baseClass}>
10+
<h4>Join our Discord</h4>
11+
<p>Every day, developers are actively talking about Payload and helping each other build awesome things in our Discord community. It can be a great resource to learn about what's happening with Payload before anyone else and get quick help straight from the Payload team as well as our community. <a href="https://discord.com/invite/r6sCXqVk3v" target="_blank">Click here to join!</a></p>
12+
<h4>GraphQL Playground</h4>
613
<p>
714
Did you know that Payload gives you a complete GraphQL server too? Try the <a
815
href="/api/graphql-playground" target="_blank">GraphQL playground</a> for this demo.
916
</p>
17+
<h4>Talk with us</h4>
1018
<p>
1119
We're here to help! You can <a href="mailto:[email protected]?subject=Payload Demo" target="_blank">email
1220
us</a> with any questions.

‎src/components/BeforeDashboard/index.scss‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
@import '~payload/scss';
2+
3+
.before-dashboard {
4+
margin-bottom: base(1.5);
5+
6+
.banner {
7+
color: var(--color-base-800);
8+
9+
svg {
10+
background-color: var(--color-base-800);
11+
border-radius: 100px;
12+
margin-right: base(.5);
13+
14+
path {
15+
stroke: var(--color-base-0);
16+
}
17+
}
18+
}
19+
}

‎src/components/BeforeDashboard/index.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React from 'react';
2+
import { Banner, Check } from 'payload/components';
3+
4+
import './index.scss';
5+
6+
const baseClass = 'before-dashboard';
7+
8+
const BeforeDashboard: React.FC = () => {
9+
return (
10+
<div className={baseClass}>
11+
<Banner type="success">
12+
<Check />
13+
<strong>Payload is completely free and open-source.</strong> If you like what we're doing, <a href="https://github.com/payloadcms/payload" target="_blank">leave us a star on GitHub!</a>
14+
</Banner>
15+
</div>
16+
);
17+
};
18+
19+
export default BeforeDashboard;

‎src/fields/link.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,6 @@ const link: LinkType = ({
4848
defaultValue: 'reference',
4949
admin: {
5050
layout: 'horizontal',
51-
width: '50%',
5251
},
5352
},
5453
],
@@ -95,6 +94,7 @@ const link: LinkType = ({
9594

9695
linkOptions.fields[1].admin.width = '50%';
9796
linkOptions.fields[2].admin.width = '50%';
97+
generatedLink.fields[0].admin.width = '50%';
9898
generatedLink.fields.push(linkOptions);
9999
} else {
100100
generatedLink.fields.push(linkOptions);

‎src/fields/richText/video/Element/index.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,15 @@
1515
}
1616

1717
&__label {
18+
@extend %body;
19+
font-family: var(--font-body);
1820
padding-top: base(0.25);
1921
line-height: base(0.75);
22+
display: flex;
23+
24+
svg {
25+
flex-shrink: 0;
26+
}
2027
}
2128

2229
&--selected {

‎src/fields/richText/video/Element/index.tsx‎

Lines changed: 46 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -10,53 +10,55 @@ const baseClass = 'rich-text-video';
1010
type Source = 'youtube' | 'vimeo'
1111

1212
const sourceLabels: Record<Source, string> = {
13-
youtube: 'YouTube',
14-
vimeo: 'Vimeo',
13+
youtube: 'YouTube',
14+
vimeo: 'Vimeo',
1515
};
1616

1717
const Element = props => {
18-
const { attributes, children, element } = props;
19-
const { source, id } = element;
20-
const selected = useSelected();
21-
const focused = useFocused();
22-
const [title, setTitle] = useState('');
23-
24-
useEffect(() => {
25-
const fetchData = async () => {
26-
if (source !== 'youtube') {
27-
setTitle(`${sourceLabels[source]} Video: ${id}`);
28-
return;
29-
}
30-
const data = await fetch(
31-
`https://www.youtube.com/oembed?url=https://www.youtube.com/watch?v=${id}&format=json`,
32-
);
33-
const json = await data.json();
34-
setTitle(json.title)
35-
};
36-
fetchData()
37-
}, [id, title]);
38-
39-
return (
40-
<div
41-
className={[baseClass, selected && focused && `${baseClass}--selected`]
42-
.filter(Boolean)
43-
.join(' ')}
44-
contentEditable={false}
45-
{...attributes}
46-
>
47-
{source === 'youtube' && (<img
48-
src={`https://img.youtube.com/vi/${id}/hqdefault.jpg`}
49-
style={{ maxWidth: '100%' }}
50-
/>)}
51-
<div className={`${baseClass}__wrap`}>
52-
<div className={`${baseClass}__label`}>
53-
<VideoIcon />
54-
{title}
55-
</div>
56-
</div>
57-
{children}
58-
</div>
59-
);
18+
const { attributes, children, element } = props;
19+
const { source, id } = element;
20+
const selected = useSelected();
21+
const focused = useFocused();
22+
const [title, setTitle] = useState('');
23+
24+
useEffect(() => {
25+
const fetchData = async () => {
26+
if (source !== 'youtube') {
27+
setTitle(`${sourceLabels[source]} Video: ${id}`);
28+
return;
29+
}
30+
const data = await fetch(
31+
`https://www.youtube.com/oembed?url=https://www.youtube.com/watch?v=${id}&format=json`,
32+
);
33+
const json = await data.json();
34+
setTitle(json.title)
35+
};
36+
fetchData()
37+
}, [id, title]);
38+
39+
return (
40+
<div
41+
className={[baseClass, selected && focused && `${baseClass}--selected`]
42+
.filter(Boolean)
43+
.join(' ')}
44+
contentEditable={false}
45+
{...attributes}
46+
>
47+
{source === 'youtube' && (<img
48+
src={`https://img.youtube.com/vi/${id}/hqdefault.jpg`}
49+
style={{ maxWidth: '100%' }}
50+
/>)}
51+
<div className={`${baseClass}__wrap`}>
52+
<div className={`${baseClass}__label`}>
53+
<VideoIcon />
54+
<div className={`${baseClass}__title`}>
55+
{title}
56+
</div>
57+
</div>
58+
</div>
59+
{children}
60+
</div>
61+
);
6062
};
6163

6264
export default Element;

‎src/payload.config.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import MainMenu from './globals/MainMenu';
1313
import BeforeLogin from './components/BeforeLogin';
1414
import AfterDashboard from "./components/AfterDashboard";
1515
import { Alerts } from './collections/Alerts'
16+
import BeforeDashboard from './components/BeforeDashboard';
1617

1718
dotenv.config({
1819
path: path.resolve(__dirname, '../.env'),
@@ -35,6 +36,9 @@ export default buildConfig({
3536
beforeLogin: [
3637
BeforeLogin,
3738
],
39+
beforeDashboard: [
40+
BeforeDashboard,
41+
],
3842
afterDashboard: [
3943
AfterDashboard,
4044
],

0 commit comments

Comments
 (0)