diff --git a/package.json b/package.json
index 7e4feef..80927b1 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
"color-convert": "^2.0.1",
"pinyin": "^2.9.0",
"react": "^16.9.0",
+ "react-copy-to-clipboard": "^5.0.1",
"react-dom": "^16.9.0",
"react-github-btn": "^1.0.6",
"react-redux": "^7.1.1",
diff --git a/src/App.js b/src/App.js
index d9dfb9a..86b4fe6 100644
--- a/src/App.js
+++ b/src/App.js
@@ -12,8 +12,10 @@ import ColorSet from './components/ColorSet';
import { useModal, useColor } from './hooks';
import colors from './assets/colors.json';
-window.wtf = colors;
-
+colors.push({
+ name: '',
+ colors: JSON.parse(localStorage.getItem('FAV_COLORS') || '[]')
+});
const Colors = colors.map(set => {
set.RGB = convert.hex.rgb(set.hex);
set.colors = set.colors.map(c => {
diff --git a/src/components/ColorSet/IconCollection.js b/src/components/ColorSet/IconCollection.js
new file mode 100644
index 0000000..3ee83cf
--- /dev/null
+++ b/src/components/ColorSet/IconCollection.js
@@ -0,0 +1,44 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Wrapper = styled.li`
+ cursor: pointer;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background: #ef7a82;
+ .icon {
+ width: 1.4rem;
+ path {
+ transition: all 0.5s ease-in;
+ }
+ }
+`;
+const IconCollection = ({ currColorHex, showCollection, ...rest }) => {
+ const handleCollectClick = () => {
+ console.log('collect t');
+ showCollection();
+ };
+ return (
+
+
+
+ );
+};
+
+export default IconCollection;
diff --git a/src/components/ColorSet.js b/src/components/ColorSet/index.js
similarity index 74%
rename from src/components/ColorSet.js
rename to src/components/ColorSet/index.js
index 7502a2c..73f7084 100644
--- a/src/components/ColorSet.js
+++ b/src/components/ColorSet/index.js
@@ -1,7 +1,7 @@
import React, { useState } from 'react';
import styled from 'styled-components';
-
+import IconCollection from './IconCollection';
const Wrapper = styled.div`
ul {
display: flex;
@@ -19,7 +19,9 @@ const Wrapper = styled.div`
align-items: center;
font-size: 0.8rem;
font-weight: 800;
- margin-right: -1rem;
+ &:not(:first-child) {
+ margin-right: -1rem;
+ }
&.selected {
transform: translateY(-1.6rem);
}
@@ -83,19 +85,27 @@ const ColorSet = ({ currSetName, setCurrSet, sets }) => {
return (
+
+
{sets.map(({ name, RGB }) => {
- return (
- -
- {name}
-
- );
+ if (name) {
+ return (
+ -
+ {name}
+
+ );
+ }
+ return null;
})}
|
diff --git a/src/components/ColorTitle/IconCopy.js b/src/components/ColorTitle/IconCopy.js
new file mode 100644
index 0000000..4a9a72d
--- /dev/null
+++ b/src/components/ColorTitle/IconCopy.js
@@ -0,0 +1,73 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+
+const Wrapper = styled.div`
+ cursor: pointer;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+ > .hex {
+ font-size: 0.6rem;
+ padding: 0.2rem;
+ background: rgba(51, 51, 51, 0.5);
+ border-radius: 0.2rem;
+ text-transform: uppercase;
+ }
+ .copyTip {
+ position: absolute;
+ left: 0.3rem;
+ top: 2rem;
+ font-size: 0.6rem;
+ padding: 0.3rem 0.4rem;
+ background: rgba(0, 0, 0, 0.6);
+ border-radius: 0.2rem;
+ }
+`;
+const IconFav = ({ currColorHex }) => {
+ const [copied, setCopied] = useState(false);
+
+ const handleCopyClick = () => {
+ console.log('copy click');
+ };
+ return (
+ {
+ setCopied(true);
+ setTimeout(() => {
+ setCopied(false);
+ }, 1800);
+ }}
+ >
+
+
+ {currColorHex}
+ {copied ? 已复制! : null}
+
+
+ );
+};
+
+export default IconFav;
diff --git a/src/components/ColorTitle/IconFav.js b/src/components/ColorTitle/IconFav.js
new file mode 100644
index 0000000..49487a8
--- /dev/null
+++ b/src/components/ColorTitle/IconFav.js
@@ -0,0 +1,66 @@
+import React, { useState, useEffect } from 'react';
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+ position: absolute;
+ top: 0.2rem;
+ right: 0.2rem;
+ cursor: pointer;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ .icon path {
+ transition: all 0.5s ease-in;
+ }
+`;
+const FavStoreKey = 'FAV_COLORS';
+const IconFav = ({ currColor }) => {
+ const [isFav, setIsFav] = useState(false);
+
+ useEffect(() => {
+ const favs = JSON.parse(localStorage.getItem(FavStoreKey) || '[]');
+ console.log('favs e', favs);
+
+ if (favs.some(f => f.name == currColor.name)) {
+ setIsFav(true);
+ } else {
+ setIsFav(false);
+ }
+ }, [currColor]);
+ const toggleFav = () => {
+ let favs = JSON.parse(localStorage.getItem(FavStoreKey) || '[]');
+ console.log('favs t', favs);
+
+ if (isFav) {
+ favs = favs.filter(color => {
+ return color.name != currColor.name;
+ });
+ } else {
+ favs.push(currColor);
+ }
+ setIsFav(prev => !prev);
+ localStorage.setItem(FavStoreKey, JSON.stringify(favs));
+ };
+ return (
+
+
+
+ );
+};
+
+export default IconFav;
diff --git a/src/components/ColorTitle.js b/src/components/ColorTitle/index.js
similarity index 65%
rename from src/components/ColorTitle.js
rename to src/components/ColorTitle/index.js
index 1197eb5..568312d 100644
--- a/src/components/ColorTitle.js
+++ b/src/components/ColorTitle/index.js
@@ -1,5 +1,7 @@
import React from 'react';
import styled from 'styled-components';
+import IconFav from './IconFav';
+import IconCopy from './IconCopy';
const Wrapper = styled.hgroup`
color: #333;
@@ -10,31 +12,22 @@ const Wrapper = styled.hgroup`
align-self: center;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.7);
border-radius: 6px;
- padding: 0.6rem 0.8rem;
- padding-top: 1rem;
+ padding: 1rem 0.8rem;
position: relative;
- transition: transform 0.4s ease-in;
width: 4.6rem;
cursor: pointer;
margin-top: -6rem;
- &:hover {
- transform: rotate(3deg) scale(1.1);
- }
- &:before {
- content: '';
- position: absolute;
- top: 0.4rem;
- right: 0.4rem;
- width: 0.6rem;
- height: 0.6rem;
- border-radius: 50%;
- background: rgba(255, 255, 200, 0.4);
- box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
+ &:hover > h1 {
+ transform: scale(1.1);
}
+
> h1 {
font-size: 3.2rem;
+ letter-spacing: -0.8rem;
writing-mode: vertical-lr;
+ transition: transform 0.4s ease-in;
+
font-family: 'TChinese', 'SimSun', 'FangSong', 'STSong', 'STZhongsong', 'LiSu', 'KaiTi',
'Microsoft YaHei';
}
@@ -47,13 +40,24 @@ const Wrapper = styled.hgroup`
bottom: 0.4rem;
color: rgba(255, 255, 255, 0.66);
}
+ > h3 {
+ width: 100%;
+ position: absolute;
+ left: -0.4rem;
+ bottom: -2.8rem;
+ display: flex;
+ }
`;
-const ColorTitle = ({ name, pinyin }) => {
+const ColorTitle = ({ name, pinyin, hex, RGB, CMYK }) => {
return (
{name}
+
{pinyin}
+
+
+
);
};
diff --git a/src/hooks.js b/src/hooks.js
index 47cc7db..5f27d17 100644
--- a/src/hooks.js
+++ b/src/hooks.js
@@ -25,7 +25,9 @@ const useColor = initialValue => {
case 'UPDATE_COLOR_SET': {
let cs = sets.find(cs => cs.name === payload.name);
localStorage.setItem('SELECTED_COLOR_SET', JSON.stringify(cs));
-
+ if (payload.name == '') {
+ cs.colors = JSON.parse(localStorage.getItem('FAV_COLORS') || '[]');
+ }
return { ...state, currSet: cs };
}
default:
diff --git a/yarn.lock b/yarn.lock
index 42c009b..c4097ed 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,7 +2,7 @@
# yarn lockfile v1
-"@babel/cli@^7.5.5":
+"@babel/cli@^7.6.0":
version "7.6.0"
resolved "https://registry.npm.taobao.org/@babel/cli/download/@babel/cli-7.6.0.tgz#1470a04394eaf37862989ea4912adf440fa6ff8d"
integrity sha1-FHCgQ5Tq83himJ6kkSrfRA+m/40=
@@ -26,7 +26,7 @@
dependencies:
"@babel/highlight" "^7.0.0"
-"@babel/core@^7.5.5":
+"@babel/core@^7.6.0":
version "7.6.0"
resolved "https://registry.npm.taobao.org/@babel/core/download/@babel/core-7.6.0.tgz#9b00f73554edd67bebc86df8303ef678be3d7b48"
integrity sha1-mwD3NVTt1nvryG34MD72eL49e0g=
@@ -638,7 +638,7 @@
"@babel/helper-regex" "^7.4.4"
regexpu-core "^4.5.4"
-"@babel/preset-env@^7.5.5":
+"@babel/preset-env@^7.6.0":
version "7.6.0"
resolved "https://registry.npm.taobao.org/@babel/preset-env/download/@babel/preset-env-7.6.0.tgz#aae4141c506100bb2bfaa4ac2a5c12b395619e50"
integrity sha1-quQUHFBhALsr+qSsKlwSs5VhnlA=
@@ -1481,7 +1481,7 @@ atob@^2.1.1:
resolved "https://registry.npm.taobao.org/atob/download/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
integrity sha1-bZUX654DDSQ2ZmZR6GvZ9vE1M8k=
-auto-changelog@^1.15.0:
+auto-changelog@^1.16.1:
version "1.16.1"
resolved "https://registry.npm.taobao.org/auto-changelog/download/auto-changelog-1.16.1.tgz#8d62a1d3afd72ba848452f9ec9adbb6cb0fd2808"
integrity sha1-jWKh06/XK6hIRS+eya27bLD9KAg=
@@ -1520,7 +1520,7 @@ babel-code-frame@^6.22.0:
esutils "^2.0.2"
js-tokens "^3.0.2"
-babel-eslint@^10.0.2:
+babel-eslint@^10.0.3:
version "10.0.3"
resolved "https://registry.npm.taobao.org/babel-eslint/download/babel-eslint-10.0.3.tgz#81a2c669be0f205e19462fed2482d33e4687a88a"
integrity sha1-gaLGab4PIF4ZRi/tJILTPkaHqIo=
@@ -2334,6 +2334,13 @@ copy-descriptor@^0.1.0:
resolved "https://registry.npm.taobao.org/copy-descriptor/download/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
+copy-to-clipboard@^3:
+ version "3.2.0"
+ resolved "https://registry.npm.taobao.org/copy-to-clipboard/download/copy-to-clipboard-3.2.0.tgz#d2724a3ccbfed89706fac8a894872c979ac74467"
+ integrity sha1-0nJKPMv+2JcG+siolIcsl5rHRGc=
+ dependencies:
+ toggle-selection "^1.0.6"
+
core-js-compat@^3.1.1:
version "3.2.1"
resolved "https://registry.npm.taobao.org/core-js-compat/download/core-js-compat-3.2.1.tgz?cache=0&sync_timestamp=1565612740757&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcore-js-compat%2Fdownload%2Fcore-js-compat-3.2.1.tgz#0cbdbc2e386e8e00d3b85dc81c848effec5b8150"
@@ -2976,10 +2983,10 @@ escape-string-regexp@1.0.5, escape-string-regexp@^1.0.2, escape-string-regexp@^1
resolved "https://registry.npm.taobao.org/escape-string-regexp/download/escape-string-regexp-1.0.5.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fescape-string-regexp%2Fdownload%2Fescape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
-eslint-config-prettier@^6.1.0:
- version "6.2.0"
- resolved "https://registry.npm.taobao.org/eslint-config-prettier/download/eslint-config-prettier-6.2.0.tgz#80e0b8714e3f6868c4ac2a25fbf39c02e73527a7"
- integrity sha1-gOC4cU4/aGjErCol+/OcAuc1J6c=
+eslint-config-prettier@^6.2.0:
+ version "6.3.0"
+ resolved "https://registry.npm.taobao.org/eslint-config-prettier/download/eslint-config-prettier-6.3.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Feslint-config-prettier%2Fdownload%2Feslint-config-prettier-6.3.0.tgz#e73b48e59dc49d950843f3eb96d519e2248286a3"
+ integrity sha1-5ztI5Z3EnZUIQ/PrltUZ4iSChqM=
dependencies:
get-stdin "^6.0.0"
@@ -3031,7 +3038,7 @@ eslint-visitor-keys@^1.0.0, eslint-visitor-keys@^1.1.0:
resolved "https://registry.npm.taobao.org/eslint-visitor-keys/download/eslint-visitor-keys-1.1.0.tgz?cache=0&sync_timestamp=1565705511122&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Feslint-visitor-keys%2Fdownload%2Feslint-visitor-keys-1.1.0.tgz#e2a82cea84ff246ad6fb57f9bde5b46621459ec2"
integrity sha1-4qgs6oT/JGrW+1f5veW0ZiFFnsI=
-eslint@^6.2.1:
+eslint@^6.3.0:
version "6.3.0"
resolved "https://registry.npm.taobao.org/eslint/download/eslint-6.3.0.tgz#1f1a902f67bfd4c354e7288b81e40654d927eb6a"
integrity sha1-HxqQL2e/1MNU5yiLgeQGVNkn62o=
@@ -4106,7 +4113,7 @@ humanize-url@^1.0.0:
normalize-url "^1.0.0"
strip-url-auth "^1.0.0"
-husky@^3.0.4:
+husky@^3.0.5:
version "3.0.5"
resolved "https://registry.npm.taobao.org/husky/download/husky-3.0.5.tgz?cache=0&sync_timestamp=1567354771612&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fhusky%2Fdownload%2Fhusky-3.0.5.tgz#d7db27c346645a8dc52df02aa534a377ad7925e0"
integrity sha1-19snw0ZkWo3FLfAqpTSjd615JeA=
@@ -4836,7 +4843,7 @@ lines-and-columns@^1.1.6:
resolved "https://registry.npm.taobao.org/lines-and-columns/download/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=
-lint-staged@^9.2.3:
+lint-staged@^9.2.5:
version "9.2.5"
resolved "https://registry.npm.taobao.org/lint-staged/download/lint-staged-9.2.5.tgz#5a3e1e0a539a403bd7f88542bc3d34ce52efdbb3"
integrity sha1-Wj4eClOaQDvX+IVCvD00zlLv27M=
@@ -6357,7 +6364,7 @@ promise-inflight@^1.0.1:
resolved "https://registry.npm.taobao.org/promise-inflight/download/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
integrity sha1-mEcocL8igTL8vdhoEputEsPAKeM=
-prop-types@^15.5.4, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.2, prop-types@^15.7.2:
version "15.7.2"
resolved "https://registry.npm.taobao.org/prop-types/download/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
integrity sha1-UsQedbjIfnK52TYOAga5ncv/psU=
@@ -6509,6 +6516,14 @@ rc@^1.2.7:
minimist "^1.2.0"
strip-json-comments "~2.0.1"
+react-copy-to-clipboard@^5.0.1:
+ version "5.0.1"
+ resolved "https://registry.npm.taobao.org/react-copy-to-clipboard/download/react-copy-to-clipboard-5.0.1.tgz#8eae107bb400be73132ed3b6a7b4fb156090208e"
+ integrity sha1-jq4Qe7QAvnMTLtO2p7T7FWCQII4=
+ dependencies:
+ copy-to-clipboard "^3"
+ prop-types "^15.5.8"
+
react-dev-utils@^9.0.3:
version "9.0.3"
resolved "https://registry.npm.taobao.org/react-dev-utils/download/react-dev-utils-9.0.3.tgz#7607455587abb84599451460eb37cef0b684131a"
@@ -7820,6 +7835,11 @@ to-regex@^3.0.1, to-regex@^3.0.2:
regex-not "^1.0.2"
safe-regex "^1.1.0"
+toggle-selection@^1.0.6:
+ version "1.0.6"
+ resolved "https://registry.npm.taobao.org/toggle-selection/download/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
+ integrity sha1-bkWxJj8gF/oKzH2J14sVuL932jI=
+
toidentifier@1.0.0:
version "1.0.0"
resolved "https://registry.npm.taobao.org/toidentifier/download/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"
@@ -8140,7 +8160,7 @@ webpack-bundle-analyzer@^3.4.1:
opener "^1.5.1"
ws "^6.0.0"
-webpack-cli@^3.3.7:
+webpack-cli@^3.3.8:
version "3.3.8"
resolved "https://registry.npm.taobao.org/webpack-cli/download/webpack-cli-3.3.8.tgz?cache=0&sync_timestamp=1567703706685&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fwebpack-cli%2Fdownload%2Fwebpack-cli-3.3.8.tgz#caeaebcc26f685db1736e5decd3f01aac30123ec"
integrity sha1-yurrzCb2hdsXNuXezT8BqsMBI+w=
@@ -8224,7 +8244,7 @@ webpack-manifest-plugin@^2.0.4:
lodash ">=3.5 <5"
tapable "^1.0.0"
-webpack-merge@^4.1.0, webpack-merge@^4.2.1:
+webpack-merge@^4.1.0, webpack-merge@^4.2.2:
version "4.2.2"
resolved "https://registry.npm.taobao.org/webpack-merge/download/webpack-merge-4.2.2.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fwebpack-merge%2Fdownload%2Fwebpack-merge-4.2.2.tgz#a27c52ea783d1398afd2087f547d7b9d2f43634d"
integrity sha1-onxS6ng9E5iv0gh/VH17nS9DY00=
@@ -8239,7 +8259,7 @@ webpack-sources@^1.0.1, webpack-sources@^1.1.0, webpack-sources@^1.4.0, webpack-
source-list-map "^2.0.0"
source-map "~0.6.1"
-webpack@^4.39.2:
+webpack@^4.39.3:
version "4.39.3"
resolved "https://registry.npm.taobao.org/webpack/download/webpack-4.39.3.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fwebpack%2Fdownload%2Fwebpack-4.39.3.tgz#a02179d1032156b713b6ec2da7e0df9d037def50"
integrity sha1-oCF50QMhVrcTtuwtp+DfnQN971A=