zhangyuheng/chinese-colors
1
0
Fork 0
forked from mirror/chinese-colors
Code Pull Requests Activity

feat: modal & texture & style

Browse Source
This commit is contained in:
Tristan 2019-09-07 11:16:49 +08:00
parent 089694e2fd
commit 5bc5969259
10 changed files with 240 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -29,6 +29,8 @@
"dependencies": {
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-github-btn": "^1.0.6",
"smooth-scroll-into-view-if-needed": "^1.1.23",
"styled-components": "^4.3.2",
"styled-reset": "^4.0.0"
},

9
src/App.js
View File

@ -3,8 +3,10 @@ import ColorTitle from './components/ColorTitle';
import Color from './components/Color';
import ColorParam from './components/ColorParam';
import InfoModal from './components/InfoModal';
import IconInfo from './components/IconInfo';
import Header from './components/Header';
import styled from 'styled-components';
import useModal from './hooks';
import colors from './assets/colors.json';
import allColors from './assets/colors.full.json';
const Wrapper = styled.section`
@ -34,6 +36,7 @@ const SelectedColor = JSON.parse(localStorage.getItem('SELECTED_COLOR') || 'null
};
const TheColors = process.env.NODE_ENV === 'production' ? allColors : colors;
const App = () => {
const { visible: modalVisible, showModal, closeModal } = useModal();
const [currColor, setCurrColor] = useState(SelectedColor);
useEffect(() => {
document.body.style.backgroundColor = currColor.hex;
@ -50,9 +53,10 @@ const App = () => {
<Wrapper>
<nav>
<ul className="colors">
{TheColors.map(color => {
{TheColors.map((color, idx) => {
return (
<Color
seq={idx + 1}
isCurr={currColor.name == color.name}
setCurrColor={handleColorClick}
{...color}
@ -66,7 +70,8 @@ const App = () => {
<ColorTitle {...currColor}></ColorTitle>
<Header />
</Wrapper>
<InfoModal />
<IconInfo showInfoModal={showModal} />
<InfoModal visible={modalVisible} bgColor={currColor.hex} closeModal={closeModal} />
</>
);
};

10
src/Global.style.js
View File

@ -27,17 +27,13 @@ const GlobalStyle = createGlobalStyle`
}
body{
-webkit-overflow-scrolling: touch;
overflow:scroll;
overflow:hidden;
margin:0 auto;
min-height:100vh;
position: relative;
background-image: url(${BodyBg});
transition:background-color .8s ease-in;
transition:background-color 1.6s;
}
#root{
min-height:100vh;
}
@media screen and (min-width: 320px){
html {

BIN
src/assets/img/bg.texture.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.1 KiB

After

Width:  |  Height:  |  Size: 142 KiB

40
src/components/Color.js
View File

@ -1,5 +1,7 @@
import React from 'react';
import styled from 'styled-components';
import scrollIntoView from 'scroll-into-view-if-needed';
import CirclePercent from './CirclePercent';
const Wrapper = styled.li.attrs(({ color }) => ({
style: { borderTopColor: color }
@ -13,11 +15,11 @@ const Wrapper = styled.li.attrs(({ color }) => ({
margin: 0.4rem;
cursor: pointer;
transition: all 0.5s;
&:hover,
&.curr {
box-shadow: 0 0 4px black;
&:hover {
box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
}
&.curr {
box-shadow: 0 0 4px black;
text-shadow: 0 0 10px black;
}
.line1 {
@ -29,6 +31,16 @@ const Wrapper = styled.li.attrs(({ color }) => ({
.name {
color: ${({ color }) => color};
writing-mode: vertical-lr;
align-self: flex-end;
font-size: 0.8rem;
margin-left: 0.2rem;
font-weight: 800;
display: flex;
justify-content: space-between;
height: 100%;
.seq {
opacity: 0.5;
}
}
.cmyk {
display: flex;
@ -86,16 +98,19 @@ const Wrapper = styled.li.attrs(({ color }) => ({
}
`;
const Color = ({ setCurrColor, isCurr, hex, name, pinyin, CMYK, RGB }) => {
const Color = ({ setCurrColor, seq = 1, isCurr, hex, name, pinyin, CMYK, RGB }) => {
const [r, g, b] = RGB;
const [c, m, y, k] = CMYK;
const handleColorClick = ({ target }) => {
scrollIntoView(target, {
behavior: 'smooth',
block: 'center',
scrollMode: 'if-needed'
});
setCurrColor(hex);
};
return (
<Wrapper
rgb={RGB}
className={isCurr && 'curr'}
onClick={setCurrColor.bind(null, hex)}
color={hex}
>
<Wrapper rgb={RGB} className={isCurr && 'curr'} onClick={handleColorClick} color={hex}>
<div className="line1">
<div className="cmyk">
<i className="circle c">
@ -111,7 +126,10 @@ const Color = ({ setCurrColor, isCurr, hex, name, pinyin, CMYK, RGB }) => {
<CirclePercent progress={k} />
</i>
</div>
<h2 className="name">{name}</h2>
<h2 className="name">
<span className="seq">{seq}</span>
<span className="txt">{name}</span>
</h2>
</div>
<div className="line2">
<p className="hex">{hex}</p>

9
src/components/ColorParam.js
View File

@ -13,6 +13,15 @@ const Wrapper = styled.section`
&.rgb {
color: #fff;
text-align: right;
&.r {
color: rgb(255, 0, 0, 0.8);
}
&.g {
color: rgb(0, 255, 0, 0.8);
}
&.b {
color: rgb(0, 0, 255, 0.8);
}
}
&:before {
content: attr(data-id);

39
src/components/IconInfo.js Normal file
View File

@ -0,0 +1,39 @@
import React from 'react';
import styled from 'styled-components';
const Wrapper = styled.aside`
position: fixed;
bottom: 1rem;
right: 1rem;
cursor: pointer;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.62);
`;
const IconInfo = ({ showInfoModal }) => {
return (
<Wrapper onClick={showInfoModal}>
<svg
t="1567818024968"
className="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="2007"
width="30"
height="30"
>
<path
d="M512 0C229.226667 0 0 229.226667 0 512s229.226667 512 512 512 512-229.226667 512-512S794.773333 0 512 0z m0 938.666667C276.736 938.666667 85.333333 747.264 85.333333 512S276.736 85.333333 512 85.333333s426.666667 191.402667 426.666667 426.666667-191.402667 426.666667-426.666667 426.666667z m0-725.333334c-37.546667 0-64 31.573333-64 64s26.453333 64 64 64c37.525333 0 64-29.034667 64-64 0-34.986667-26.474667-64-64-64z m-42.666667 597.333334h85.333334V426.666667h-85.333334v384z"
p-id="2008"
fill="#eee"
></path>
</svg>
</Wrapper>
);
};
export default IconInfo;

112
src/components/InfoModal.js
View File

@ -1,12 +1,112 @@
/* eslint-disable react/jsx-no-target-blank */
import React from 'react';
import styled from 'styled-components';
import GitHubButton from 'react-github-btn';
const Wrapper = styled.section`
height: 20vh;
background: #333;
color: #fff;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: none;
z-index: 999;
&.visible {
display: block;
}
.mask {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.4);
}
.info {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
padding: 0.8rem 1rem;
width: 80vw;
box-shadow: 0 0 9px black;
border-radius: 8px;
text-shadow: 0 0 8px black;
background-color: ${({ bgColor }) => {
return bgColor;
}};
> h2 {
text-transform: uppercase;
font-size: 1.4rem;
margin-bottom: 1rem;
font-weight: 800;
}
> p {
font-size: 0.6rem;
line-height: 1.4;
margin-bottom: 0.5rem;
display: flex;
flex-direction: column;
a {
padding: 0 0.4rem;
}
&.btns {
margin-top: 2rem;
flex-direction: row;
justify-content: space-between;
width: 44%;
text-shadow: none;
}
}
}
`;
export default function InfoModal() {
return <Wrapper>Info</Wrapper>;
export default function InfoModal({ visible, closeModal, bgColor }) {
console.log('bgcolor', bgColor);
return (
<Wrapper bgColor={bgColor} className={visible && 'visible'}>
<div className="mask" onClick={closeModal}></div>
<div className="info">
<h2>chinese colors</h2>
<p>
<span>
Inspired by
<a href="http://nipponcolors.com" target="_blank">
Nipponcolors
</a>
&
<a href="http://zhongguose.com" target="_blank">
http://zhongguose.com
</a>
</span>
<span>
Copyright © 2019 by
<a href="//yangerxiao.com" target="_blank">
Tristan
</a>
</span>
</p>
<p>
<span>参看: 色谱 中科院科技情报编委会名词室.科学出版社,1957.</span>
<span>Adobe RGB / CMYK FORGA39, Dot Gain 15% Screenshot</span>
</p>
<p className="btns">
<GitHubButton
href="https://github.com/zerosoul/chinese-colors"
data-show-count="true"
aria-label="Star zerosoul/chinese-colors on GitHub"
>
Star
</GitHubButton>
<GitHubButton
href="https://github.com/zerosoul/chinese-colors/fork"
data-show-count="true"
aria-label="Fork zerosoul/chinese-colors on GitHub"
>
Fork
</GitHubButton>
</p>
</div>
</Wrapper>
);
}

14
src/hooks.js Normal file
View File

@ -0,0 +1,14 @@
import { useState } from 'react';
const useModal = () => {
const [visible, setVisible] = useState(false);
const closeModal = () => {
setVisible(false);
};
const showModal = () => {
setVisible(true);
};
return { visible, closeModal, showModal };
};
export default useModal;

31
yarn.lock
View File

@ -2201,6 +2201,11 @@ compression@^1.7.4:
safe-buffer "5.1.2"
vary "~1.1.2"
compute-scroll-into-view@1.0.11:
version "1.0.11"
resolved "https://registry.npm.taobao.org/compute-scroll-into-view/download/compute-scroll-into-view-1.0.11.tgz#7ff0a57f9aeda6314132d8994cce7aeca794fecf"
integrity sha1-f/Clf5rtpjFBMtiZTM567KeU/s8=
concat-map@0.0.1:
version "0.0.1"
resolved "https://registry.npm.taobao.org/concat-map/download/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
@ -3674,6 +3679,11 @@ git-raw-commits@^1.3.0:
split2 "^2.0.0"
through2 "^2.0.0"
github-buttons@^2.2.10:
version "2.2.10"
resolved "https://registry.npm.taobao.org/github-buttons/download/github-buttons-2.2.10.tgz#7ddf66679b4c23e4c4558fedbba6d8aa48241cd6"
integrity sha1-fd9mZ5tMI+TEVY/tu6bYqkgkHNY=
glob-parent@^3.1.0:
version "3.1.0"
resolved "https://registry.npm.taobao.org/glob-parent/download/glob-parent-3.1.0.tgz#9e6af6299d8d3bd2bd40430832bd113df906c5ae"
@ -6492,6 +6502,13 @@ react-error-overlay@^6.0.1:
resolved "https://registry.npm.taobao.org/react-error-overlay/download/react-error-overlay-6.0.1.tgz#b8d3cf9bb991c02883225c48044cb3ee20413e0f"
integrity sha1-uNPPm7mRwCiDIlxIBEyz7iBBPg8=
react-github-btn@^1.0.6:
version "1.0.6"
resolved "https://registry.npm.taobao.org/react-github-btn/download/react-github-btn-1.0.6.tgz#4b5d2de86b2ca791ae113ab424321149966895d8"
integrity sha1-S10t6Gssp5GuETq0JDIRSZZoldg=
dependencies:
github-buttons "^2.2.10"
react-is@^16.6.0, react-is@^16.8.1:
version "16.9.0"
resolved "https://registry.npm.taobao.org/react-is/download/react-is-16.9.0.tgz#21ca9561399aad0ff1a7701c01683e8ca981edcb"
@ -6947,6 +6964,13 @@ schema-utils@^2.0.0, schema-utils@^2.0.1, schema-utils@^2.2.0:
ajv "^6.10.2"
ajv-keywords "^3.4.1"
scroll-into-view-if-needed@2.2.20:
version "2.2.20"
resolved "https://registry.npm.taobao.org/scroll-into-view-if-needed/download/scroll-into-view-if-needed-2.2.20.tgz#3a46847a72233a3af9770e55df450f2a7f2e2a0e"
integrity sha1-OkaEenIjOjr5dw5V30UPKn8uKg4=
dependencies:
compute-scroll-into-view "1.0.11"
select-hose@^2.0.0:
version "2.0.0"
resolved "https://registry.npm.taobao.org/select-hose/download/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
@ -7135,6 +7159,13 @@ slide@~1.1.3:
resolved "https://registry.npm.taobao.org/slide/download/slide-1.1.6.tgz#56eb027d65b4d2dce6cb2e2d32c4d4afc9e1d707"
integrity sha1-VusCfWW00tzmyy4tMsTUr8nh1wc=
smooth-scroll-into-view-if-needed@^1.1.23:
version "1.1.23"
resolved "https://registry.npm.taobao.org/smooth-scroll-into-view-if-needed/download/smooth-scroll-into-view-if-needed-1.1.23.tgz#e2a3073e5f90deab0aca23f9316beb41230371a4"
integrity sha1-4qMHPl+Q3qsKyiP5MWvrQSMDcaQ=
dependencies:
scroll-into-view-if-needed "2.2.20"
snapdragon-node@^2.0.1:
version "2.1.1"
resolved "https://registry.npm.taobao.org/snapdragon-node/download/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"