forked from mirror/chinese-colors
feat: download color title card
This commit is contained in:
Tristan Yang
parent
710a3dd8e1
commit
683f5832e1
20
package.json
20
package.json
@ -38,21 +38,21 @@
|
||||
"react-copy-to-clipboard": "^5.1.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-github-btn": "^1.4.0",
|
||||
"react-router-dom": "^6.4.3",
|
||||
"react-router-dom": "^6.8.1",
|
||||
"smooth-scroll-into-view-if-needed": "^1.1.33",
|
||||
"styled-components": "^5.3.6",
|
||||
"styled-reset": "^4.4.2"
|
||||
"styled-reset": "^4.4.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-react": "^2.2.0",
|
||||
"eslint": "^8.26.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"eslint-plugin-react": "^7.31.10",
|
||||
"@vitejs/plugin-react": "^3.1.0",
|
||||
"eslint": "^8.34.0",
|
||||
"eslint-config-prettier": "^8.6.0",
|
||||
"eslint-plugin-react": "^7.32.2",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"husky": "^8.0.1",
|
||||
"lint-staged": "^13.0.3",
|
||||
"prettier": "^2.7.1",
|
||||
"vite": "^3.2.2"
|
||||
"husky": "^8.0.3",
|
||||
"lint-staged": "^13.1.1",
|
||||
"prettier": "^2.8.4",
|
||||
"vite": "^4.1.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=16.0.0",
|
||||
|
||||
48
src/components/ColorTitle/IconDownload.jsx
Normal file
48
src/components/ColorTitle/IconDownload.jsx
Normal file
@ -0,0 +1,48 @@
|
||||
// import React from 'react';
|
||||
|
||||
import styled from 'styled-components';
|
||||
|
||||
const Wrapper = styled.div`
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
right: 8px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
visibility: hidden;
|
||||
.icon {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
`;
|
||||
|
||||
const IconDownload = ({ handleDownload }) => {
|
||||
return (
|
||||
<Wrapper className="download" onClick={handleDownload}>
|
||||
<svg
|
||||
t="1568731641905"
|
||||
className="icon"
|
||||
viewBox="0 0 1047 1024"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="1446"
|
||||
width="32"
|
||||
height="32"
|
||||
>
|
||||
<path
|
||||
d="M523.987449 0a42.759353 42.759353 0 0 0-42.759353 42.759353v498.158822L301.663529 361.353608a43.500845 43.500845 0 0 0-60.555153 0 42.759353 42.759353 0 0 0 0 60.431572l227.020033 227.267198a79.092445 79.092445 0 0 0 111.223751 0l227.514362-227.143616a42.635771 42.635771 0 0 0 0-60.555154 42.882935 42.882935 0 0 0-60.555153 0L566.870384 540.918175V42.759353A42.882935 42.882935 0 0 0 523.987449 0z"
|
||||
fill="#ffffff"
|
||||
p-id="1447"
|
||||
></path>
|
||||
<path
|
||||
d="M860.871832 120.245233a42.882935 42.882935 0 1 0 0 85.642288 101.584359 101.584359 0 0 1 101.460777 101.584359v529.301473a101.584359 101.584359 0 0 1-101.460777 101.584359H187.226647a101.707941 101.707941 0 0 1-101.584359-101.584359V307.47188a101.707941 101.707941 0 0 1 101.584359-101.584359 42.882935 42.882935 0 0 0 0-85.642288A187.473811 187.473811 0 0 0 0 307.47188v529.301473a187.473811 187.473811 0 0 0 187.226647 187.226647h673.645185A187.350229 187.350229 0 0 0 1047.974897 836.773353V307.47188A187.350229 187.350229 0 0 0 860.871832 120.245233z"
|
||||
fill="#ffffff"
|
||||
p-id="1448"
|
||||
></path>
|
||||
</svg>
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export default IconDownload;
|
||||
@ -11,8 +11,8 @@ const Wrapper = styled.div`
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
width: 1.4rem;
|
||||
height: 1.4rem;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
path {
|
||||
transition: all 0.5s ease-in;
|
||||
}
|
||||
@ -26,7 +26,7 @@ const IconFav = ({ currColor }) => {
|
||||
const favs = JSON.parse(localStorage.getItem(FavStoreKey) || '[]');
|
||||
console.log('favs e', favs);
|
||||
|
||||
if (favs.some(f => f.name == currColor.name)) {
|
||||
if (favs.some((f) => f.name == currColor.name)) {
|
||||
setIsFav(true);
|
||||
} else {
|
||||
setIsFav(false);
|
||||
@ -37,17 +37,17 @@ const IconFav = ({ currColor }) => {
|
||||
console.log('favs t', favs);
|
||||
|
||||
if (isFav) {
|
||||
favs = favs.filter(color => {
|
||||
favs = favs.filter((color) => {
|
||||
return color.name != currColor.name;
|
||||
});
|
||||
} else {
|
||||
favs.push(currColor);
|
||||
}
|
||||
setIsFav(prev => !prev);
|
||||
setIsFav((prev) => !prev);
|
||||
localStorage.setItem(FavStoreKey, JSON.stringify(favs));
|
||||
};
|
||||
return (
|
||||
<Wrapper onClick={toggleFav}>
|
||||
<Wrapper className="fav" onClick={toggleFav}>
|
||||
<svg
|
||||
t="1568172188297"
|
||||
className="icon"
|
||||
|
||||
@ -1,11 +1,15 @@
|
||||
import React from 'react';
|
||||
import React, { useRef } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import html2canvas from 'html2canvas';
|
||||
import { saveAs } from 'file-saver';
|
||||
import IconFav from './IconFav';
|
||||
import IconDownload from './IconDownload';
|
||||
import { useMobile, usePoetry } from '../../hooks';
|
||||
|
||||
import { getCorrectTextColor } from '../../utils';
|
||||
import Poetry from './Poetry';
|
||||
import FadeIn from '../animates/FadeIn';
|
||||
import BodyBg from '../../assets/img/bg.texture.png';
|
||||
|
||||
const Wrapper = styled.hgroup`
|
||||
color: #333;
|
||||
@ -32,7 +36,22 @@ const Wrapper = styled.hgroup`
|
||||
&:hover > h1 {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
&:hover .download {
|
||||
visibility: visible;
|
||||
}
|
||||
&.download {
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
background-color: ${({ bgColor }) => bgColor};
|
||||
background-image: url(${BodyBg});
|
||||
background-repeat: repeat;
|
||||
.fav {
|
||||
display: none;
|
||||
}
|
||||
> h2 {
|
||||
writing-mode: initial;
|
||||
}
|
||||
}
|
||||
> h1 {
|
||||
color: inherit;
|
||||
font-size: 3.2rem;
|
||||
@ -71,16 +90,47 @@ const Wrapper = styled.hgroup`
|
||||
`;
|
||||
|
||||
const ColorTitle = ({ name, pinyin, hex, RGB, CMYK, figure }) => {
|
||||
const cardRef = useRef(null);
|
||||
const { isMobile } = useMobile();
|
||||
const { poetry, fetchPoetry } = usePoetry(name);
|
||||
const oppoColor = getCorrectTextColor(RGB);
|
||||
|
||||
console.log('color title');
|
||||
const handleDownload = () => {
|
||||
if (!cardRef.current) return;
|
||||
cardRef.current.classList.add('download');
|
||||
|
||||
html2canvas(cardRef.current, {
|
||||
debug: process.env.NODE_ENV !== 'production',
|
||||
// onclone: document => {
|
||||
// let tmp = document.querySelector(query);
|
||||
// tmp.classList.add('starting');
|
||||
// if (isWebview) {
|
||||
// tmp.style.boxShadow = 'none';
|
||||
// }
|
||||
// if (full) {
|
||||
// tmp.style.height = window.innerHeight + 'px';
|
||||
// }
|
||||
// console.log('dommmm', tmp.innerHTML);
|
||||
// },
|
||||
scale: window.devicePixelRatio * 2,
|
||||
}).then(function (canvas) {
|
||||
canvas.toBlob((blob) => {
|
||||
saveAs(blob, `card-${name}-${new Date().getTime()}.png`);
|
||||
cardRef.current.classList.remove('download');
|
||||
}, 'image/png');
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Wrapper className={isMobile ? 'mobile' : ''} style={{ color: oppoColor }}>
|
||||
<Wrapper
|
||||
bgColor={`rgba(${RGB.join(',')})`}
|
||||
ref={cardRef}
|
||||
className={isMobile ? 'mobile' : ''}
|
||||
style={{ color: oppoColor }}
|
||||
>
|
||||
<h1>{name}</h1>
|
||||
<IconFav currColor={{ hex, name, pinyin, RGB, CMYK }} />
|
||||
<IconDownload handleDownload={handleDownload} />
|
||||
<h2>{pinyin}</h2>
|
||||
{poetry && (
|
||||
<Poetry
|
||||
|
||||
Loading…
Reference in New Issue
Block a user