Skip to content

Commit

Permalink
Merge pull request #11 from ciaochaos/dev-redux
Browse files Browse the repository at this point in the history
QRBTF 1.3
  • Loading branch information
ciaochaos authored Sep 1, 2020
2 parents 7dbcff5 + 8c56cb3 commit 5f01a7f
Show file tree
Hide file tree
Showing 44 changed files with 2,239 additions and 117 deletions.
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@
"react-lazy-load": "^3.0.13",
"react-redux": "^7.2.0",
"react-scripts": "3.4.1",
"redux": "^4.0.5"
"redux": "^4.0.5",
"serialize-javascript": "^3.1.0"
},
"scripts": {
"start": "react-scripts start",
Expand Down
14 changes: 14 additions & 0 deletions src/actions/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -36,3 +36,17 @@ export const loadDownloadData = (data) => ({
type: actionTypes.LOAD_DOWNLOAD_DATA,
data
})

export const changeTitle = (title) => {
return {
type: actionTypes.CHANGE_TITLE,
title
}
}

export const changeIcon = (icon) => {
return {
type: actionTypes.CHANGE_ICON,
icon
}
}
21 changes: 17 additions & 4 deletions src/components/Qrcode.css
Original file line number Diff line number Diff line change
Expand Up @@ -176,6 +176,7 @@
border: rgba(0,0,0,0.12) solid 2px;
width: calc((100vw - 56px) / 2);
height: calc((100vw - 56px) / 2);
background: rgba(255,255,255,0.5);
}

@media (min-width: 500px) {
Expand Down Expand Up @@ -567,11 +568,15 @@ input[type="number"]{
}

.div-btn {
white-space: nowrap;
overflow-x: hidden;
display: flex;
justify-content: space-between;
margin-bottom: 10px;
width: calc((100vw - 46px) / 1);
display: flex;
display: -webkit-flex; /* Safari */
flex-wrap: wrap;
}

.div-btn .dl-btn {
margin: 0 0 10px!important;
}

.ul-btn {
Expand Down Expand Up @@ -603,6 +608,7 @@ input[type="number"]{
background: var(--bg-color);
font-family: 'Futura', sans-serif;
color: var(--input-font-color);
display: inline-block;
}

@media (min-width: 500px) {
Expand Down Expand Up @@ -640,6 +646,7 @@ input[type="number"]{
}

@media (min-width: 500px) {

.div-btn {
max-width: 410px;
}
Expand All @@ -649,6 +656,12 @@ input[type="number"]{
}
}

@media (min-width: 666px) {
.img-dl-btn {
max-width: 620px!important;
}
}

.Qr-footer {
color: var(--footer-font-color);
margin-bottom: -1em;
Expand Down
32 changes: 20 additions & 12 deletions src/components/app/PartDownload.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,20 @@ const WxMessage = () => {
return null
}

const PartDownload = ({ value, downloadCount, onSvgDownload, onJpgDownload }) => {
const ImgBox = ({ imgData }) => {
if (imgData.length > 0) {
return (
<div id="dl-image">
<div id="dl-image-inner">
<img id="dl-image-inner-jpg" src={imgData} alt="长按保存二维码" />
</div>
</div>
)
}
return null
}

const PartDownload = ({ value, downloadCount, onSvgDownload, onImgDownload }) => {
const [imgData, setImgData] = useState('');

return (
Expand All @@ -29,23 +42,17 @@ const PartDownload = ({ value, downloadCount, onSvgDownload, onJpgDownload }) =>
</div>
<div className="Qr-Centered">
<div className="btn-row">
<div className="div-btn">
<button className="dl-btn" onClick={() => {
onJpgDownload().then(res => setImgData(res));
}}>
JPG
</button>
<div className="div-btn img-dl-btn">
<button className="dl-btn" onClick={() => {onImgDownload("jpg").then(res => setImgData(res));}}>JPG</button>
<button className="dl-btn" onClick={() => {onImgDownload("png").then(res => setImgData(res));}}>PNG</button>
<button className="dl-btn" onClick={onSvgDownload}>SVG</button>
</div>
</div>

<div id="wx-message">
<WxMessage/>
</div>
<div>
{
imgData.length > 0 ? <div id="dl-image"><div id="dl-image-inner"><img id="dl-image-inner-jpg" src={imgData} alt="长按保存二维码" /></div></div> : null
}
<ImgBox imgData={imgData} />
</div>
</div>
</div>
Expand All @@ -54,8 +61,9 @@ const PartDownload = ({ value, downloadCount, onSvgDownload, onJpgDownload }) =>

PartDownload.propTypes = {
value: PropTypes.string.isRequired,
downloadCount: PropTypes.number,
onSvgDownload: PropTypes.func.isRequired,
onJpgDownload: PropTypes.func.isRequired,
onImgDownload: PropTypes.func.isRequired,
}

export default PartDownload;
4 changes: 3 additions & 1 deletion src/components/app/PartMore.js
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ const PartMore = () => {
</ScrollContainer>
<div className="Qr-Centered">
<h2>最新消息</h2>
<p><b>2020.9.1</b><br/>新增 C3 样式、图标插入、 PNG 下载。</p>
<p><b>2020.6.29</b><br/>新的反馈渠道!我们开始征集好玩的二维码设计啦,可以是推送尾图、海报等等,快来上传吧。<LinkTrace
href='https://qrbtf-com.mikecrm.com/J2wjEEq' rel="noopener noreferrer"
target="_blank">点击提交</LinkTrace></p>
Expand Down Expand Up @@ -80,9 +81,10 @@ const PartMore = () => {
<p>这个工具开发的初衷之一就是便利设计师将其纳入自己的工作流程中。SVG 是一个优秀的、标准的矢量图片格式,各大设计软件如 Adobe Illustrator、Sketch 等都对 SVG
有着很好的支持。用户可以在下载 SVG 后导入这些软件进行二次加工,如删除中央的信息点 <b>放入自己的 Logo</b> 等。如果需要直接分享二维码图像,请直接下载 JPG 格式。
</p>
<h2>二维码无法识别的原因是什么?</h2>
<p>二维码无法识别有很多原因。比如定位点不匹配识别模式、信息点颜色对比不够、遮挡部分太大。建议尝试调整容错率、颜色、图标大小等参数并在各种二维码扫描器中测试,以保证二维码被识别的成功率</p>
<h2>使用遇到了问题,怎么反馈?</h2>
<p>我们是两位大一的学生,忙于学业,可能在设计与开发的过程中有一些疏漏,敬请谅解。如果遇到浏览器兼容问题,请暂时选择更换软件或设备尝试。</p>
<p>请注意,应用并不能保证二维码时刻可被识别,需要多加测试。</p>
<p>编写二维码样式是一个锻炼设计与开发(JavaScript)能力的绝佳机会,如果你有兴趣和我们一起玩这个项目,欢迎添加我的微信(微信号:<span
style={{userSelect: "text"}}>nhciao</span>,请备注真实姓名)或发送邮件至 <LinkTrace
href='mailto:contact@qrbtf.com'>contact@qrbtf.com</LinkTrace> 联系我们!</p>
Expand Down
2 changes: 2 additions & 0 deletions src/components/app/PartParams.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React from 'react';
import './App.css';
import ParamListViewer from "../../containers/param/ParamListViewer";
import ParamCorrectLevelViewer from "../../containers/param/ParamCorrectLevelViewer";
import ParamIconViewer from "../../containers/param/disposable/ParamIconViewer";

const PartParams = () => (
<div className="Qr-titled-nobg">
Expand All @@ -12,6 +13,7 @@ const PartParams = () => (
<div className="Qr-Centered">
<div className="Qr-div-table">
<ParamCorrectLevelViewer/>
<ParamIconViewer/>
<ParamListViewer/>
</div>
</div>
Expand Down
18 changes: 18 additions & 0 deletions src/components/param/FrameworkParam.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import React from 'react';
import PropTypes from 'prop-types'
import '../Qrcode.css';

const FrameworkParam = ({ paramName, children, ...other }) => (
<table className="Qr-table" {...other}>
<tbody>
<tr>
<td>{ paramName }</td>
<td>
{ children }
</td>
</tr>
</tbody>
</table>
)

export default FrameworkParam;
2 changes: 1 addition & 1 deletion src/components/param/ParamColor.js
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ const ParamColor = ({ rendererIndex, paramIndex, value, onChange }) => {
<div style={styles.cover} onClick={() => setDisplay(false)} />
<TwitterPicker
key={"input_" + rendererIndex + "_" + paramIndex}
triangle="none"
triangle="hide"
color={value}
colors={['#FF6900', '#FCB900', '#7BDCB5', '#00D084', '#8ED1FC', '#0693E3', '#ABB8C3', '#EB144C', '#F78DA7', '#9900EF']}
onChangeComplete={onChange}
Expand Down
31 changes: 0 additions & 31 deletions src/components/param/ParamCorrectLevel.js

This file was deleted.

20 changes: 7 additions & 13 deletions src/components/param/ParamList.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import ParamSelectViewer from "../../containers/param/ParamSelectViewer";
import ParamColorViewer from "../../containers/param/ParamColorViewer";
import ParamUploadViewer from "../../containers/param/ParamUploadViewer";
import ParamCheckBoxViewer from "../../containers/param/ParamCheckBoxViewer";
import FrameworkParam from "./FrameworkParam";

const mapTypeToComponent = ({
[ParamTypes.TEXT_EDITOR]: ParamTextViewer,
Expand All @@ -18,19 +19,12 @@ const mapTypeToComponent = ({
const ParamList = ({ rendererIndex, paramInfo }) => (
paramInfo.map((item, paramIndex) => {
return (
<table className="Qr-table" key={"tr_" + rendererIndex + "_" + paramIndex}>
<tbody>
<tr>
<td>{item.key}</td>
<td>
{React.createElement(mapTypeToComponent[item.type], {
rendererIndex: rendererIndex,
paramIndex: paramIndex
})}
</td>
</tr>
</tbody>
</table>
<FrameworkParam key={"tr_" + rendererIndex + "_" + paramIndex} paramName={item.key}>
{React.createElement(mapTypeToComponent[item.type], {
rendererIndex: rendererIndex,
paramIndex: paramIndex
})}
</FrameworkParam>
);
})
)
Expand Down
25 changes: 25 additions & 0 deletions src/components/param/disposable/ParamCorrectLevel.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import React from 'react';
import PropTypes from 'prop-types'
import '../../Qrcode.css';
import FrameworkParam from "../FrameworkParam";

const ParamCorrectLevel = ({value, onChange}) => (
<FrameworkParam paramName={"容错率"}>
<select
className="Qr-select"
value={value}
onChange={onChange}>
<option value={1}>7%</option>
<option value={0}>15%</option>
<option value={3}>25%</option>
<option value={2}>30%</option>
</select>
</FrameworkParam>
)

ParamCorrectLevel.propTypes = {
value: PropTypes.number.isRequired,
onChange: PropTypes.func.isRequired
}

export default ParamCorrectLevel;
60 changes: 60 additions & 0 deletions src/components/param/disposable/ParamIcon.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
import React from 'react';
import PropTypes from 'prop-types'
import '../../Qrcode.css';
import FrameworkParam from "../FrameworkParam";
import {getExactValue} from "../../../utils/util";
import ParamIconSrcViewer from "../../../containers/param/disposable/ParamIconSrcViewer";

const IconParams = ({ icon, onBlur, onKeyPress }) => {
const { enabled, src, scale } = icon;
const components = [];

if (getExactValue(enabled, 0) == 1) {
components.push(
<FrameworkParam paramName={"图标源"}>
<ParamIconSrcViewer icon={icon} onChange={onBlur}/>
</FrameworkParam>
);
}

if (getExactValue(enabled, 0) != 0) {
components.push(
<FrameworkParam paramName={"图标缩放"}>
<input
type="number"
className="Qr-input small-input"
defaultValue={scale}
onBlur={(e) => onBlur({...icon, scale: e.target.value})}
onKeyPress={(e) => onKeyPress(e, {...icon, scale: e.target.value})}
/>
</FrameworkParam>
)
}
return components;
}

const ParamIcon = ({icon, onBlur, onKeyPress}) => (
<React.Fragment>
<FrameworkParam paramName={"图标"}>
<select
className="Qr-select"
defaultValue={icon.enabled}
onChange={(e) => onBlur({...icon, enabled: e.target.value})}>
<option value={0}></option>
<option value={1}>自定义</option>
<option value={2}>微信 — 小</option>
<option value={3}>微信</option>
<option value={4}>微信支付</option>
<option value={5}>支付宝</option>
</select>
</FrameworkParam>
<IconParams icon={icon} onBlur={onBlur} onKeyPress={onKeyPress}/>
</React.Fragment>
)

ParamIcon.propTypes = {
icon: PropTypes.object.isRequired,
onChange: PropTypes.func.isRequired
}

export default ParamIcon;
Loading

0 comments on commit 5f01a7f

Please sign in to comment.