Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit0da7fe4

Browse files
committed
feat: styling and add template creation options
1 parent77cfb7c commit0da7fe4

File tree

2 files changed

+128
-66
lines changed

2 files changed

+128
-66
lines changed
Lines changed: 125 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,110 +1,171 @@
11
importtype{Interpolation,Theme}from"@emotion/react";
2+
importCardfrom"@mui/material/Card";
3+
importCardActionAreafrom"@mui/material/CardActionArea";
4+
importCardContentfrom"@mui/material/CardContent";
5+
importStackfrom"@mui/material/Stack";
26
import{useState,typeFC}from"react";
3-
import{useQuery}from"react-query";
4-
import{Link,useSearchParams}from"react-router-dom";
5-
import{templateExamples}from"api/queries/templates";
6-
importtype{Organization,TemplateExample}from"api/typesGenerated";
7+
import{LinkasRouterLink}from"react-router-dom";
8+
importtype{Organization}from"api/typesGenerated";
79
import{ErrorAlert}from"components/Alert/ErrorAlert";
10+
import{ExternalImage}from"components/ExternalImage/ExternalImage";
811
import{Loader}from"components/Loader/Loader";
912
import{Margins}from"components/Margins/Margins";
1013
import{OrganizationAutocomplete}from"components/OrganizationAutocomplete/OrganizationAutocomplete";
1114
import{PageHeader,PageHeaderTitle}from"components/PageHeader/PageHeader";
12-
import{Stack}from"components/Stack/Stack";
13-
import{useDashboard}from"modules/dashboard/useDashboard";
14-
import{TemplateExampleCard}from"modules/templates/TemplateExampleCard/TemplateExampleCard";
15-
import{
16-
getTemplatesByTag,
17-
typeStarterTemplatesByTag,
18-
}from"utils/starterTemplates";
15+
// import { useDashboard } from "modules/dashboard/useDashboard";
16+
importtype{StarterTemplatesByTag}from"utils/starterTemplates";
1917
import{StarterTemplates}from"./StarterTemplates";
2018

21-
// const getTagLabel = (tag: string) => {
22-
// const labelByTag: Record<string, string> = {
23-
// all: "All templates",
24-
// digitalocean: "DigitalOcean",
25-
// aws: "AWS",
26-
// google: "Google Cloud",
27-
// };
28-
// // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- this can be undefined
29-
// return labelByTag[tag] ?? tag;
30-
// };
31-
32-
// const selectTags = (starterTemplatesByTag: StarterTemplatesByTag) => {
33-
// return starterTemplatesByTag
34-
// ? Object.keys(starterTemplatesByTag).sort((a, b) => a.localeCompare(b))
35-
// : undefined;
36-
// };
37-
3819
exportinterfaceCreateTemplatePageViewProps{
3920
starterTemplatesByTag?:StarterTemplatesByTag;
4021
error?:unknown;
4122
}
4223

43-
// const removeScratchExample = (data: TemplateExample[]) => {
44-
// return data.filter((example) => example.id !== "scratch");
45-
// };
46-
4724
exportconstCreateTemplatesPageView:FC<CreateTemplatePageViewProps>=({
4825
starterTemplatesByTag,
4926
error,
5027
})=>{
5128
const[selectedOrg,setSelectedOrg]=useState<Organization|null>(null);
5229
// const { organizationId } = useDashboard();
53-
// const templateExamplesQuery = useQuery(templateExamples(organizationId));
54-
// const starterTemplatesByTag = templateExamplesQuery.data
55-
// ? // Currently, the scratch template should not be displayed on the starter templates page.
56-
// getTemplatesByTag(removeScratchExample(templateExamplesQuery.data))
57-
// : undefined;
30+
// TODO: if there is only 1 organization, set the dropdown to the default organizationId
5831

5932
return(
6033
<Margins>
6134
<PageHeader>
6235
<PageHeaderTitle>Create a Template</PageHeaderTitle>
6336
</PageHeader>
37+
<Stackspacing={8}>
38+
<Stackdirection="row"spacing={7}>
39+
<h2css={styles.sectionTitle}>Choose an Organization</h2>
40+
<OrganizationAutocomplete
41+
css={styles.autoComplete}
42+
value={selectedOrg}
43+
onChange={(newValue)=>{
44+
setSelectedOrg(newValue);
45+
}}
46+
/>
47+
</Stack>
6448

65-
<OrganizationAutocomplete
66-
css={styles.autoComplete}
67-
value={selectedOrg}
68-
onChange={(newValue)=>{
69-
setSelectedOrg(newValue);
70-
}}
71-
/>
49+
<Stackdirection="row"spacing={7}>
50+
<h2css={styles.sectionTitle}>Choose a starting point</h2>
51+
<div
52+
css={{
53+
display:"flex",
54+
flexWrap:"wrap",
55+
gap:32,
56+
height:"max-content",
57+
}}
58+
>
59+
<Cardvariant="outlined"sx={{width:320}}>
60+
<CardActionArea
61+
component={RouterLink}
62+
to="../templates/new?exampleId=scratch"
63+
sx={{height:115,padding:1}}
64+
>
65+
<CardContent>
66+
<Stack
67+
direction="row"
68+
spacing={3}
69+
css={{alignItems:"center"}}
70+
>
71+
<divcss={styles.icon}>
72+
<ExternalImage
73+
src="/emojis/1f4c4.png"
74+
css={{
75+
width:"100%",
76+
height:"100%",
77+
}}
78+
/>
79+
</div>
80+
<div>
81+
<h4css={styles.cardTitle}>Scratch Template</h4>
82+
<spancss={styles.cardDescription}>
83+
Create a minimal starter template that you can customize
84+
</span>
85+
</div>
86+
</Stack>
87+
</CardContent>
88+
</CardActionArea>
89+
</Card>
90+
<Cardvariant="outlined"sx={{width:320}}>
91+
<CardActionArea
92+
component={RouterLink}
93+
to="../templates/new"
94+
sx={{height:115,padding:1}}
95+
>
96+
<CardContent>
97+
<Stack
98+
direction="row"
99+
spacing={3}
100+
css={{alignItems:"center"}}
101+
>
102+
<divcss={styles.icon}>
103+
<ExternalImage
104+
src="/emojis/1f4e1.png"
105+
css={{
106+
width:"100%",
107+
height:"100%",
108+
}}
109+
/>
110+
</div>
111+
<div>
112+
<h4css={styles.cardTitle}>Upload Template</h4>
113+
<spancss={styles.cardDescription}>
114+
Get started by uploading an existing template
115+
</span>
116+
</div>
117+
</Stack>
118+
</CardContent>
119+
</CardActionArea>
120+
</Card>
121+
</div>
122+
</Stack>
72123

73-
{Boolean(error)&&<ErrorAlerterror={error}/>}
124+
{Boolean(error)&&<ErrorAlerterror={error}/>}
74125

75-
{Boolean(!starterTemplatesByTag)&&<Loader/>}
126+
{Boolean(!starterTemplatesByTag)&&<Loader/>}
76127

77-
<StarterTemplatesstarterTemplatesByTag={starterTemplatesByTag}/>
128+
<StarterTemplatesstarterTemplatesByTag={starterTemplatesByTag}/>
129+
</Stack>
78130
</Margins>
79131
);
80132
};
81133

82134
conststyles={
83135
autoComplete:{
84-
width:300,
136+
width:415,
85137
},
86138

87-
filterCaption:(theme)=>({
88-
textTransform:"uppercase",
89-
fontWeight:600,
90-
fontSize:12,
91-
color:theme.palette.text.secondary,
92-
letterSpacing:"0.1em",
139+
sectionTitle:(theme)=>({
140+
color:theme.palette.text.primary,
141+
fontSize:16,
142+
fontWeight:400,
143+
margin:0,
93144
}),
94145

95-
tagLink:(theme)=>({
96-
color:theme.palette.text.secondary,
97-
textDecoration:"none",
146+
cardTitle:(theme)=>({
98147
fontSize:14,
99-
textTransform:"capitalize",
148+
fontWeight:600,
149+
margin:0,
150+
marginBottom:4,
151+
}),
100152

101-
"&:hover":{
102-
color:theme.palette.text.primary,
103-
},
153+
cardDescription:(theme)=>({
154+
fontSize:13,
155+
color:theme.palette.text.secondary,
156+
lineHeight:"1.6",
157+
display:"block",
104158
}),
105159

106-
tagLinkActive:(theme)=>({
107-
color:theme.palette.text.primary,
108-
fontWeight:600,
160+
icon:{
161+
flexShrink:0,
162+
width:32,
163+
height:32,
164+
},
165+
166+
menuItemIcon:(theme)=>({
167+
color:theme.palette.text.secondary,
168+
width:20,
169+
height:20,
109170
}),
110171
}satisfiesRecord<string,Interpolation<Theme>>;

‎site/src/pages/CreateTemplatesGalleryPage/StarterTemplates.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ export const StarterTemplates: FC<StarterTemplatesProps> = ({
4141
return(
4242
<Stackdirection="row"spacing={4}alignItems="flex-start">
4343
{starterTemplatesByTag&&tags&&(
44-
<Stackcss={{width:208,flexShrink:0,position:"sticky",top:48}}>
44+
<Stackcss={{width:202,flexShrink:0,position:"sticky"}}>
4545
<h2css={styles.sectionTitle}>Choose a starter template</h2>
4646
<spancss={styles.filterCaption}>Filter</span>
4747
{tags.map((tag)=>(
@@ -106,8 +106,9 @@ const styles = {
106106
}),
107107

108108
sectionTitle:(theme)=>({
109+
color:theme.palette.text.primary,
109110
fontSize:16,
110-
fontWeight:500,
111+
fontWeight:400,
111112
margin:0,
112113
}),
113114
}satisfiesRecord<string,Interpolation<Theme>>;

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp