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
This repository was archived by the owner on Nov 8, 2022. It is now read-only.

Commit0ec04af

Browse files
committed
[new svg loader] load svg from dir && refactor file/code structures
1 parent6ddb5e0 commit0ec04af

File tree

112 files changed

+229
-364
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

112 files changed

+229
-364
lines changed

‎containers/Body/index.js‎

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,7 @@ import keydown from 'react-keydown'
1111
// import Link from 'next/link'
1212
import{Button}from'../../components'
1313

14-
import{storeSelector}from'../../utils/functions'
15-
16-
import*asSuggestionIconsfrom'../Doraemon/styles/suggestionIcons'
14+
import{storeSelector,getSVGIconPath}from'../../utils/functions'
1715
import*aslogicfrom'./logic'
1816

1917
import{
@@ -28,11 +26,9 @@ import {
2826
NotificationIcon,
2927
User,
3028
UserIcon,
31-
AddonSVGIconWrapper,
29+
BannerLogo,
3230
}from'./styles'
3331

34-
constIcons={ ...SuggestionIcons}
35-
3632
constAppHeader=()=>{
3733
return(
3834
<Header>
@@ -56,16 +52,12 @@ const AppHeader = () => {
5652
constAppBanner=({ curUrlPath})=>{
5753
constdefaultIcon='js'
5854
consticonKey=curUrlPath==='/' ?defaultIcon :curUrlPath
59-
6055
// debug('AppBanner curUrlPath: ', curUrlPath)
6156
// debug('iconKey: ', iconKey)
6257

63-
constIcon=Icons[iconKey]
6458
return(
6559
<Banner>
66-
<AddonSVGIconWrapper>
67-
<Icon/>
68-
</AddonSVGIconWrapper>
60+
<BannerLogopath={getSVGIconPath(iconKey)}/>
6961
</Banner>
7062
)
7163
}

‎containers/Body/styles/index.js‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
importstyledfrom'styled-components'
2+
importReactSVGfrom'react-svg'
23

34
import{theme}from'../../../utils/themes'
45

@@ -71,7 +72,6 @@ export const Banner = styled.div`
7172
height: 15vh;
7273
border-bottom: 1px solid tomato;
7374
`
74-
7575
exportconstButton=styled.button`
7676
font-size: 1em;
7777
margin: 1em;
@@ -87,11 +87,8 @@ export const Button = styled.button`
8787
outline: 0;
8888
}
8989
`
90-
91-
exportconstAddonSVGIconWrapper=styled.div`
92-
> svg {
93-
width: 80px;
94-
height: 80px;
95-
margin-top: 20px;
96-
}
90+
exportconstBannerLogo=styled(ReactSVG)`
91+
margin-top: 2em;
92+
width: 100px;
93+
height: 100px;
9794
`

‎containers/Doraemon/InputEditor.js‎

Lines changed: 14 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -7,38 +7,33 @@
77
importReactfrom'react'
88
importkeydownfrom'react-keydown'
99

10-
//import {makeDebugger } from '../../utils/functions'
10+
import{getSVGIconPath}from'../../utils/functions'
1111
import*aslogicfrom'./logic'
1212

1313
import{
1414
EditorBar,
1515
InputBar,
1616
AddOn,
1717
LoadingIcon,
18-
AddonSVGIconWrapper,
18+
PrefixSVGIcon,
19+
PrefixSearchIcon,
20+
PrefixMagicIcon,
1921
}from'./styles'
2022

21-
import*asSuggestionIconsfrom'./styles/suggestionIcons'
22-
23-
constallIcons={ ...SuggestionIcons}
24-
constdefaultIcon=SuggestionIcons.search
25-
26-
// import { theme, magic, search } from './styles/suggestionIcons'
2723
// const debug = makeDebugger('C:Doraemon:InputEditor')
2824

2925
constPrefixIcon=({ prefix})=>{
30-
letIcon
31-
if(prefix==='/'){
32-
Icon=SuggestionIcons.magic
33-
}else{
34-
Icon=allIcons[prefix] ?allIcons[prefix] :defaultIcon
26+
switch(prefix){
27+
case'':{
28+
return<PrefixSearchIconpath={getSVGIconPath('search')}/>
29+
}
30+
case'/':{
31+
return<PrefixMagicIconpath={getSVGIconPath('magic')}/>
32+
}
33+
default:{
34+
return<PrefixSVGIconpath={getSVGIconPath(prefix)}/>
35+
}
3536
}
36-
37-
return(
38-
<AddonSVGIconWrapper>
39-
<Icon/>
40-
</AddonSVGIconWrapper>
41-
)
4237
}
4338

4439
exportdefaultclassInputEditorextendsReact.Component{

‎containers/Doraemon/NodeIcon.js‎

Lines changed: 12 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -6,39 +6,31 @@
66
importReactfrom'react'
77
importRfrom'ramda'
88

9-
import{SVGIconWrapper}from'./styles'
10-
import*asSuggestionIconsfrom'./styles/suggestionIcons'
11-
// import { makeDebugger } from '../../utils/functions'
12-
9+
import{getSVGIconPath}from'../../utils/functions'
10+
import{NodeSVGIcon,ThemeDot}from'./styles'
1311
import{themeColorMap}from'../../utils/themes/'
1412

15-
constIcons={ ...SuggestionIcons}
16-
constDefaultIcon=SuggestionIcons.javascript
17-
1813
// const debug = makeDebugger('C:Doraemon:NodeIcon')
1914

2015
constgetIconKey=R.compose(R.last,R.split('--'),R.toLower)
2116

2217
// sucks need refactor
2318
constNodeIcon=({ raw})=>{
2419
constlowerRaw=R.toLower(raw)
25-
2620
consticonKey=getIconKey(lowerRaw)
21+
letspecialStyle={}
22+
2723
if(R.startsWith('themes--',lowerRaw)){
28-
return<Icons.themeDotbg={themeColorMap[iconKey]}/>
29-
}elseif(iconKey==='hforward'){
30-
return<Icons.forward/>
24+
return<ThemeDotbg={themeColorMap[iconKey]}/>
3125
}elseif(iconKey==='hbackward'){
32-
return<Icons.backward/>
33-
}elseif(iconKey==='question'){
34-
return<Icons.question/>
26+
return<NodeSVGIconreversepath={getSVGIconPath('forward')}/>
27+
}elseif(iconKey==='write'){
28+
specialStyle={width:'70%',marginLeft:5}
29+
}elseif(iconKey==='login'){
30+
specialStyle={width:'70%',marginLeft:5}
3531
}
36-
constIcon=Icons[iconKey] ?Icons[iconKey] :DefaultIcon
37-
return(
38-
<SVGIconWrapper>
39-
<Icon/>
40-
</SVGIconWrapper>
41-
)
32+
33+
return<NodeSVGIconpath={getSVGIconPath(iconKey)}style={specialStyle}/>
4234
}
4335

4436
exportdefaultNodeIcon

‎containers/Doraemon/index.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,16 @@ import { inject, observer } from 'mobx-react'
1010
// import Link from 'next/link'
1111
// import styled from 'styled-components'
1212

13-
import{makeDebugger,storeSelector}from'../../utils/functions'
13+
import{
14+
makeDebugger,
15+
storeSelector,
16+
getSVGIconPath,
17+
}from'../../utils/functions'
1418

1519
importInputEditorfrom'./InputEditor'
1620
importNodeIconfrom'./NodeIcon'
1721
import*aslogicfrom'./logic'
1822

19-
import*asSuggestionIconsfrom'./styles/suggestionIcons'
20-
2123
import{
2224
PageOverlay,
2325
PanelContainer,
@@ -37,9 +39,7 @@ const debug = makeDebugger('C:Doraemon')
3739

3840
constHintIcon=({ index, active, cur})=>{
3941
returnactive===cur ?(
40-
<HintEnter>
41-
<SuggestionIcons.enter/>
42-
</HintEnter>
42+
<HintEnterpath={getSVGIconPath('enter')}/>
4343
) :(
4444
<Hint>^{index}</Hint>
4545
)

‎containers/Doraemon/logic.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,7 @@ const initCmdResolver = () => {
9292
debug('communityLinker: ',cmdpath)
9393

9494
// Router.push(url, as)
95+
// TODO: use route store method
9596
Router.push(
9697
{
9798
pathname:'/',
@@ -113,8 +114,7 @@ const initCmdResolver = () => {
113114

114115
constdoCmd=()=>{
115116
constcmd=clearfyCmd(doraemon.activeRaw)
116-
// debug('clearfyCmd: ', cmd)
117-
// Do not use forEach, cause forEach will not break
117+
/* Do not use forEach, cause forEach will not break */
118118
for(leti=0;i<cmdResolver.length;i+=1){
119119
if(cmdResolver[i].match(cmd)){
120120
returncmdResolver[i].action(cmd)

‎containers/Doraemon/styles/index.js‎

Lines changed: 38 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,10 @@
11
importstyled,{keyframes}from'styled-components'
2-
import{theme}from'../../../utils/themes'
2+
importReactSVGfrom'react-svg'
33

4+
import{theme}from'../../../utils/themes'
45
import{Img}from'../../../components'
5-
66
importloadingIconfrom'../../../static/searchLoading.svg'
77

8-
// import javascriptIcon from '../../../static/nodeIcons/javascript.svg'
9-
10-
// import * as SuggestionIcons from './suggestionIcons'
11-
export*from'./suggestionIcons'
12-
138
constrotate360=keyframes`
149
from {
1510
transform: rotate(0deg);
@@ -155,11 +150,16 @@ export const Hint = styled.div`
155150
margin-top: 10px;
156151
margin-right: 15px;
157152
width: 30px;
153+
font-size: 1.1rem;
158154
`
159-
exportconstHintEnter=styled.div`
155+
exportconstHintEnter=styled(ReactSVG)`
160156
color:${theme('u_panel.text')};
161157
margin-top: 10px;
162-
margin-right: 10px;
158+
margin-right: 1.5em;
159+
width: 30px;
160+
height: 30px;
161+
transform: rotateX(180deg);
162+
fill:${theme('u_panel.text')};
163163
`
164164

165165
exportconstSubInfoWraper=styled.div`
@@ -178,22 +178,38 @@ export const RepoStar = styled.div`
178178
margin-right: 10px;
179179
`
180180

181-
exportconstImgIconWrapper=styled(Img)`
181+
exportconstNodeSVGIcon=styled(ReactSVG)`
182182
width: 40px;
183183
height: 40px;
184+
margin-top: 3px;
185+
transform:${props=>(props.reverse ?'rotate(180deg)' :'')};
184186
`
185187

186-
exportconstSVGIconWrapper=styled.div`
187-
> svg {
188-
width: 40px;
189-
height: 40px;
190-
margin-top: 3px;
191-
}
188+
exportconstThemeDot=styled.div`
189+
width: 35px;
190+
height: 35px;
191+
margin-top: 5px;
192+
background:${props=>props.bg};
193+
border-radius: 50%;
192194
`
193-
exportconstAddonSVGIconWrapper=styled.div`
194-
> svg {
195-
width: 30px;
196-
height: 30px;
197-
margin-top: 20px;
198-
}
195+
196+
// TODO: rename -> PrefixIcon
197+
exportconstPrefixSVGIcon=styled(ReactSVG)`
198+
width: 30px;
199+
height: 30px;
200+
margin-top: 20px;
201+
`
202+
203+
exportconstPrefixSearchIcon=styled(ReactSVG)`
204+
width: 30px;
205+
height: 30px;
206+
margin-top: 20px;
207+
fill:${theme('u_panel.search_icon')};
208+
`
209+
210+
exportconstPrefixMagicIcon=styled(ReactSVG)`
211+
width: 30px;
212+
height: 25px;
213+
margin-top: 20px;
214+
transform: rotate(-30deg);
199215
`

0 commit comments

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