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

Commite4c58ac

Browse files
committed
add emotion to styles
1 parent76aadee commite4c58ac

File tree

22 files changed

+185
-118
lines changed

22 files changed

+185
-118
lines changed

‎web-app/package-lock.json

Lines changed: 116 additions & 70 deletions
Some generated files are not rendered by default. Learn more aboutcustomizing how changed files appear on GitHub.

‎web-app/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
"@alifd/next":"^1.19.8",
3030
"@alifd/theme-4":"^0.2.3",
3131
"@apollo/react-hooks":"^3.1.3",
32+
"@emotion/core":"^10.0.27",
3233
"apollo-boost":"^0.4.7",
3334
"graphql":"^14.5.8",
3435
"markdown-it":"^10.0.0",

‎web-app/src/components/Button/index.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import{ButtonasAlifdButton}from'@alifd/next'
22
import*asReactfrom'react'
3+
import{css,jsx}from'@emotion/core'
34

45
interfaceProps{
56
style?:React.CSSProperties
@@ -10,7 +11,7 @@ interface Props {
1011
}
1112

1213
constButton=(props:Props)=>(
13-
<AlifdButtononClick={props.onClick}type={props.type}disabled={props.disabled}style={props.style}>
14+
<AlifdButtononClick={props.onClick}type={props.type}disabled={props.disabled}css={props.style}>
1415
{props.children}
1516
</AlifdButton>
1617
)

‎web-app/src/components/Card/index.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import{CardasAlifdCard}from'@alifd/next'
22
import*asReactfrom'react'
3+
import{css,jsx}from'@emotion/core'
34

45
conststyles={
56
card:{
@@ -19,7 +20,7 @@ const Card = (props: Props) => (
1920
showTitleBullet={false}
2021
contentHeight="auto"
2122
onClick={props.onClick}
22-
style={{ ...styles.card, ...props.style}}
23+
css={{ ...styles.card, ...props.style}}
2324
>
2425
{props.children}
2526
</AlifdCard>

‎web-app/src/components/Checkbox/index.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import*asReactfrom'react'
2+
import{css,jsx}from'@emotion/core'
23

34
conststyles={
45
box:{
@@ -26,9 +27,9 @@ const Checkbox = (props: Props) => {
2627
constchecked=props.status==='COMPLETE'
2728

2829
return(
29-
<divstyle={styles.box}>
30+
<divcss={styles.box}>
3031
<label>
31-
<inputstyle={styles.input}type="checkbox"checked={checked}onChange={onChange}/>
32+
<inputcss={styles.input}type="checkbox"checked={checked}onChange={onChange}/>
3233
</label>
3334
</div>
3435
)

‎web-app/src/components/Debugger/index.tsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,21 @@
11
import*asReactfrom'react'
22
import*asTfrom'typings'
3+
import{css,jsx}from'@emotion/core'
34

45
interfacePropsextendsT.MachineContext{
56
state:string
67
children:React.ReactElement
78
}
89

910
constDebugger=({ state, children, env, position, progress, processes, tutorial}:Props)=>(
10-
<divstyle={{backgroundColor:'#FFFF99',color:'black',padding:'.5rem'}}>
11+
<divcss={{backgroundColor:'#FFFF99',color:'black',padding:'.5rem'}}>
1112
<h4>state:{state}</h4>
1213
<p>MachineId:{env.machineId}</p>
1314
<p>SessionId:{env.sessionId}</p>
1415
<p>tutorial:{tutorial ?tutorial.id :'none'}</p>
15-
<pstyle={{backgroundColor:'khaki',padding:'.5rem'}}>position:{JSON.stringify(position)}</p>
16-
<pstyle={{backgroundColor:'moccasin',padding:'.5rem'}}>progress:{JSON.stringify(progress)}</p>
17-
<pstyle={{backgroundColor:'beige',padding:'.5rem'}}>processes:{JSON.stringify(processes)}</p>
16+
<pcss={{backgroundColor:'khaki',padding:'.5rem'}}>position:{JSON.stringify(position)}</p>
17+
<pcss={{backgroundColor:'moccasin',padding:'.5rem'}}>progress:{JSON.stringify(progress)}</p>
18+
<pcss={{backgroundColor:'beige',padding:'.5rem'}}>processes:{JSON.stringify(processes)}</p>
1819
{children}
1920
</div>
2021
)

‎web-app/src/components/Divider.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import*asReactfrom'react'
2+
import{css,jsx}from'@emotion/core'
23

34
conststyles={
45
divider:{
@@ -7,6 +8,6 @@ const styles = {
78
},
89
}
910

10-
constDivider=()=><divstyle={styles.divider}/>
11+
constDivider=()=><divcss={styles.divider}/>
1112

1213
exportdefaultDivider

‎web-app/src/components/Error/index.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import{ApolloError}from'apollo-boost'
22
import{GraphQLError}from'graphql'
33
import*asReactfrom'react'
4+
import{css,jsx}from'@emotion/core'
45

56
conststyles={
67
container:{
@@ -17,7 +18,7 @@ interface Props {
1718
constErrorView=({ error}:Props)=>{
1819
console.log(error)
1920
return(
20-
<divstyle={styles.container}>
21+
<divcss={styles.container}>
2122
<h1>Error</h1>
2223
{error.graphQLErrors&&(
2324
<div>

‎web-app/src/components/Icon/index.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import{IconasAlifdIcon}from'@alifd/next'
22
import*asReactfrom'react'
3+
import{css,jsx}from'@emotion/core'
34

45
interfaceProps{
56
type:string
@@ -9,7 +10,7 @@ interface Props {
910
}
1011

1112
constIcon=(props:Props)=>{
12-
return<AlifdIcontype={props.type}role={props.role}size={props.size}style={props.style}/>
13+
return<AlifdIcontype={props.type}role={props.role}size={props.size}css={props.style}/>
1314
}
1415

1516
exportdefaultIcon

‎web-app/src/components/ProcessEvents/index.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import{MessageasAlifdMessage}from'@alifd/next'
22
import*asReactfrom'react'
33
import*asTfrom'typings'
4+
import{css,jsx}from'@emotion/core'
45

56
interfaceProps{
67
processes:T.ProcessEvent[]
@@ -19,7 +20,7 @@ const ProcessEvents = ({ processes }: Props) => {
1920
returnnull
2021
}
2122
return(
22-
<divstyle={styles.container}>
23+
<divcss={styles.container}>
2324
{processes.map(process=>(
2425
<AlifdMessagekey={process.title}type="loading"size="medium"title={process.title}>
2526
{process.description}

‎web-app/src/components/StepHelp/index.tsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import{Balloon}from'@alifd/next'
22
import*asReactfrom'react'
3+
import{css,jsx}from'@emotion/core'
34
importButtonfrom'../Button'
45

56
conststyles={
@@ -35,12 +36,12 @@ const StepHelp = (props: Props) => {
3536
props.onLoadSolution()
3637
}
3738
}
38-
constpromptLeft=<Buttonstyle={styles.iconButton}>i</Button>
39+
constpromptLeft=<Buttoncss={styles.iconButton}>i</Button>
3940
return(
40-
<Balloontrigger={promptLeft}align="l"alignEdgetriggerType="click"style={{width:150}}closable={false}>
41+
<Balloontrigger={promptLeft}align="l"alignEdgetriggerType="click"css={{width:150}}closable={false}>
4142
<div>
42-
<h4style={styles.balloonTitle}>Stuck?</h4>
43-
<divstyle={styles.balloonOptions}>
43+
<h4css={styles.balloonTitle}>Stuck?</h4>
44+
<divcss={styles.balloonOptions}>
4445
<Buttontype="secondary"onClick={onClickHandler}disabled={loadedSolution}>
4546
Load Solution
4647
</Button>

‎web-app/src/components/Workspace/index.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import*asReactfrom'react'
2+
import{css,jsx}from'@emotion/core'
23

34
interfaceProps{
45
children:React.ReactElement
@@ -26,7 +27,7 @@ const Workspace = ({ children }: Props) => {
2627
},
2728
}
2829

29-
return<divstyle={{ ...styles.page, ...dimensions}}>{children}</div>
30+
return<divcss={{ ...styles.page, ...dimensions}}>{children}</div>
3031
}
3132

3233
exportdefaultWorkspace

‎web-app/src/containers/Continue/index.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import*asReactfrom'react'
22
import*asCRfrom'typings'
33
import*asGfrom'typings/graphql'
4+
import{css,jsx}from'@emotion/core'
45
importButtonfrom'../../components/Button'
56
importCardfrom'../../components/Card'
67

@@ -25,8 +26,8 @@ interface Props {
2526
}
2627

2728
exportconstContinuePage=(props:Props)=>(
28-
<divstyle={styles.page}>
29-
<divstyle={styles.header}>
29+
<divcss={styles.page}>
30+
<divcss={styles.header}>
3031
<span>CodeRoad</span>
3132
</div>
3233
<Card>

‎web-app/src/containers/LoadingPage.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import*asReactfrom'react'
22
import*asTfrom'typings'
3+
import{css,jsx}from'@emotion/core'
34
importLoadingfrom'../components/Loading'
45
importMessagefrom'../components/Message'
56

@@ -23,13 +24,13 @@ const LoadingPage = ({ text, context }: Props) => {
2324
const{ error}=context
2425
if(error){
2526
return(
26-
<divstyle={styles.page}>
27+
<divcss={styles.page}>
2728
<Messagetype="error"title={error.title}description={error.description}/>
2829
</div>
2930
)
3031
}
3132
return(
32-
<divstyle={styles.page}>
33+
<divcss={styles.page}>
3334
<Loadingtext={text}/>
3435
</div>
3536
)

‎web-app/src/containers/New/NewPage.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import*asReactfrom'react'
22
import*asGfrom'typings/graphql'
3+
import{css,jsx}from'@emotion/core'
34
importTutorialListfrom'./TutorialList'
45

56
conststyles={
@@ -26,11 +27,11 @@ interface Props {
2627
}
2728

2829
constNewPage=(props:Props)=>(
29-
<divstyle={styles.page}>
30-
<divstyle={styles.header}>
30+
<divcss={styles.page}>
31+
<divcss={styles.header}>
3132
<span>CodeRoad</span>
3233
</div>
33-
<divstyle={styles.banner}>
34+
<divcss={styles.banner}>
3435
<span>Select a Tutorial to Start</span>
3536
</div>
3637
<TutorialListtutorialList={props.tutorialList}/>

‎web-app/src/containers/New/TutorialList/TutorialItem.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import*asReactfrom'react'
2+
import{css,jsx}from'@emotion/core'
23
importCardfrom'../../../components/Card'
34

45
conststyles={
@@ -26,7 +27,7 @@ interface Props {
2627

2728
// icons from https://konpa.github.io/devicon/
2829
constLanguageIcon=()=>(
29-
<svgviewBox="0 0 128 128"style={styles.languageIcon}>
30+
<svgviewBox="0 0 128 128"css={styles.languageIcon}>
3031
<pathfill="#F0DB4F"d="M1.408 1.408h125.184v125.185h-125.184z"></path>
3132
<path
3233
fill="#323330"
@@ -36,10 +37,10 @@ const LanguageIcon = () => (
3637
)
3738

3839
constTutorialItem=(props:Props)=>(
39-
<CardonClick={props.onSelect}style={styles.card}>
40+
<CardonClick={props.onSelect}css={styles.card}>
4041
<h3>{props.title||'Title'}</h3>
4142
<p>{props.description||'Description'}</p>
42-
<divstyle={styles.languages}>
43+
<divcss={styles.languages}>
4344
<LanguageIcon/>
4445
</div>
4546
</Card>

‎web-app/src/containers/Overview/OverviewPage.tsx

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import*asReactfrom'react'
22
import*asGfrom'typings/graphql'
3+
import{css,jsx}from'@emotion/core'
34
importButtonfrom'../../components/Button'
45
importMarkdownfrom'../../components/Markdown'
56

@@ -52,20 +53,20 @@ interface Props {
5253
}
5354

5455
constSummary=({ title, description, levels, onNext}:Props)=>(
55-
<divstyle={styles.page}>
56+
<divcss={styles.page}>
5657
<div>
57-
<divstyle={styles.header}>
58+
<divcss={styles.header}>
5859
<span>CodeRoad</span>
5960
</div>
60-
<divstyle={styles.summary}>
61-
<h2style={styles.title}>{title}</h2>
61+
<divcss={styles.summary}>
62+
<h2css={styles.title}>{title}</h2>
6263
<Markdown>{description}</Markdown>
6364
</div>
6465
<div>
65-
<divstyle={styles.header}>
66+
<divcss={styles.header}>
6667
<span>Levels</span>
6768
</div>
68-
<divstyle={styles.levelList}>
69+
<divcss={styles.levelList}>
6970
{levels.map((level:G.Level,index:number)=>(
7071
<divkey={index}>
7172
<h4>
@@ -78,7 +79,7 @@ const Summary = ({ title, description, levels, onNext }: Props) => (
7879
</div>
7980
</div>
8081

81-
<divstyle={styles.options}>
82+
<divcss={styles.options}>
8283
{/* TODO Add back button */}
8384
<Buttontype="primary"onClick={()=>onNext()}>
8485
Start

‎web-app/src/containers/Tutorial/CompletedPage.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import*asReactfrom'react'
22
import*asCRfrom'typings'
3+
import{css,jsx}from'@emotion/core'
34
importButtonfrom'../../components/Button'
45

56
conststyles={
@@ -20,7 +21,7 @@ const CompletedPage = (props: Props) => {
2021
return(
2122
<div>
2223
<h3>Tutorial Complete</h3>
23-
<divstyle={styles.options}>
24+
<divcss={styles.options}>
2425
<ButtononClick={selectNewTutorial}>Continue</Button>
2526
</div>
2627
</div>

‎web-app/src/containers/Tutorial/LevelPage/Level.tsx

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import*asReactfrom'react'
22
import*asTfrom'typings'
33
import*asGfrom'typings/graphql'
4+
import{css,jsx}from'@emotion/core'
45
importButtonfrom'../../../components/Button'
56
importMarkdownfrom'../../../components/Markdown'
67
importProcessEventsfrom'../../../components/ProcessEvents'
@@ -75,18 +76,18 @@ const Level = ({ level, onContinue, onLoadSolution, processes }: Props) => {
7576
}
7677

7778
return(
78-
<divstyle={styles.page}>
79-
<divstyle={styles.header}>
79+
<divcss={styles.page}>
80+
<divcss={styles.header}>
8081
<span>Learn</span>
8182
</div>
82-
<divstyle={styles.content}>
83-
<h2style={styles.title}>{level.title}</h2>
83+
<divcss={styles.content}>
84+
<h2css={styles.title}>{level.title}</h2>
8485
<Markdown>{level.content||''}</Markdown>
8586
</div>
8687

87-
<divstyle={styles.tasks}>
88-
<divstyle={styles.header}>Tasks</div>
89-
<divstyle={styles.steps}>
88+
<divcss={styles.tasks}>
89+
<divcss={styles.header}>Tasks</div>
90+
<divcss={styles.steps}>
9091
{level.steps.map((step:(G.Step&{status:T.ProgressStatus})|null,index:number)=>{
9192
if(!step){
9293
returnnull
@@ -105,12 +106,12 @@ const Level = ({ level, onContinue, onLoadSolution, processes }: Props) => {
105106
</div>
106107

107108
{processes.length>0&&(
108-
<divstyle={styles.processes}>
109+
<divcss={styles.processes}>
109110
<ProcessEventsprocesses={processes}/>
110111
</div>
111112
)}
112113

113-
<divstyle={styles.footer}>
114+
<divcss={styles.footer}>
114115
<span>
115116
{typeoflevel.index==='number' ?`${level.index+1}. ` :''}
116117
{level.title}

0 commit comments

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