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 ( | 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=