From 77f58580012f51ebcd7975e28b051ffcd285122f Mon Sep 17 00:00:00 2001
From: CPunisher <1343316114@qq.com>
Date: Sat, 15 Aug 2020 14:37:55 +0800
Subject: [PATCH 01/19] [title & icon]
---
src/actions/index.js | 14 ++++
src/components/app/PartParams.js | 4 ++
src/components/param/FrameworkParam.js | 18 +++++
src/components/param/ParamColor.js | 2 +-
src/components/param/ParamCorrectLevel.js | 31 ---------
src/components/param/ParamList.js | 20 ++----
.../param/disposable/ParamCorrectLevel.js | 25 +++++++
src/components/param/disposable/ParamIcon.js | 50 ++++++++++++++
src/components/param/disposable/ParamTitle.js | 67 +++++++++++++++++++
src/components/renderer/RendererFunc.js | 1 -
src/components/style/Renderer.js | 66 +++++++++++++++---
src/constant/ActionTypes.js | 2 +
.../param/ParamCorrectLevelViewer.js | 2 +-
.../param/disposable/ParamIconSrcViewer.js | 23 +++++++
.../param/disposable/ParamIconViewer.js | 15 +++++
.../param/disposable/ParamTitleColorViewer.js | 16 +++++
.../param/disposable/ParamTitleViewer.js | 15 +++++
src/containers/style/RendererViewer.js | 2 +
src/reducers/index.js | 12 ++++
19 files changed, 329 insertions(+), 56 deletions(-)
create mode 100644 src/components/param/FrameworkParam.js
delete mode 100644 src/components/param/ParamCorrectLevel.js
create mode 100644 src/components/param/disposable/ParamCorrectLevel.js
create mode 100644 src/components/param/disposable/ParamIcon.js
create mode 100644 src/components/param/disposable/ParamTitle.js
create mode 100644 src/containers/param/disposable/ParamIconSrcViewer.js
create mode 100644 src/containers/param/disposable/ParamIconViewer.js
create mode 100644 src/containers/param/disposable/ParamTitleColorViewer.js
create mode 100644 src/containers/param/disposable/ParamTitleViewer.js
diff --git a/src/actions/index.js b/src/actions/index.js
index a7e3ef6..ad09615 100644
--- a/src/actions/index.js
+++ b/src/actions/index.js
@@ -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
+ }
+}
diff --git a/src/components/app/PartParams.js b/src/components/app/PartParams.js
index 968ecda..51bfde0 100644
--- a/src/components/app/PartParams.js
+++ b/src/components/app/PartParams.js
@@ -2,6 +2,8 @@ import React from 'react';
import './App.css';
import ParamListViewer from "../../containers/param/ParamListViewer";
import ParamCorrectLevelViewer from "../../containers/param/ParamCorrectLevelViewer";
+import ParamTitleViewer from "../../containers/param/disposable/ParamTitleViewer";
+import ParamIconViewer from "../../containers/param/disposable/ParamIconViewer";
const PartParams = () => (
@@ -12,6 +14,8 @@ const PartParams = () => (
diff --git a/src/components/param/FrameworkParam.js b/src/components/param/FrameworkParam.js
new file mode 100644
index 0000000..a0d0337
--- /dev/null
+++ b/src/components/param/FrameworkParam.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import PropTypes from 'prop-types'
+import '../Qrcode.css';
+
+const FrameworkParam = ({ paramName, children, ...other }) => (
+
+
+
+ { paramName } |
+
+ { children }
+ |
+
+
+
+)
+
+export default FrameworkParam;
diff --git a/src/components/param/ParamColor.js b/src/components/param/ParamColor.js
index e8ecd08..3c83c84 100644
--- a/src/components/param/ParamColor.js
+++ b/src/components/param/ParamColor.js
@@ -42,7 +42,7 @@ const ParamColor = ({ rendererIndex, paramIndex, value, onChange }) => {
setDisplay(false)} />
(
-
-
-
- 容错率 |
-
-
- |
-
-
-
-)
-
-ParamCorrectLevel.propTypes = {
- value: PropTypes.number.isRequired,
- onChange: PropTypes.func.isRequired
-}
-
-export default ParamCorrectLevel;
diff --git a/src/components/param/ParamList.js b/src/components/param/ParamList.js
index fdb52da..6662755 100644
--- a/src/components/param/ParamList.js
+++ b/src/components/param/ParamList.js
@@ -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,
@@ -18,19 +19,12 @@ const mapTypeToComponent = ({
const ParamList = ({ rendererIndex, paramInfo }) => (
paramInfo.map((item, paramIndex) => {
return (
-
-
-
- {item.key} |
-
- {React.createElement(mapTypeToComponent[item.type], {
- rendererIndex: rendererIndex,
- paramIndex: paramIndex
- })}
- |
-
-
-
+
+ {React.createElement(mapTypeToComponent[item.type], {
+ rendererIndex: rendererIndex,
+ paramIndex: paramIndex
+ })}
+
);
})
)
diff --git a/src/components/param/disposable/ParamCorrectLevel.js b/src/components/param/disposable/ParamCorrectLevel.js
new file mode 100644
index 0000000..b6c3540
--- /dev/null
+++ b/src/components/param/disposable/ParamCorrectLevel.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types'
+import '../../Qrcode.css';
+import FrameworkParam from "../FrameworkParam";
+
+const ParamCorrectLevel = ({value, onChange}) => (
+
+
+
+)
+
+ParamCorrectLevel.propTypes = {
+ value: PropTypes.number.isRequired,
+ onChange: PropTypes.func.isRequired
+}
+
+export default ParamCorrectLevel;
diff --git a/src/components/param/disposable/ParamIcon.js b/src/components/param/disposable/ParamIcon.js
new file mode 100644
index 0000000..9180c10
--- /dev/null
+++ b/src/components/param/disposable/ParamIcon.js
@@ -0,0 +1,50 @@
+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, onChange }) => {
+ const { enabled, src, scale } = icon;
+ if (getExactValue(enabled, 0)) {
+ return (
+
+
+
+
+
+ onChange({...icon, scale: e.target.value})}
+ />
+
+
+ )
+ }
+ return null;
+}
+
+const ParamIcon = ({icon, onChange}) => (
+
+
+
+
+
+
+)
+
+ParamIcon.propTypes = {
+ icon: PropTypes.object.isRequired,
+ onChange: PropTypes.func.isRequired
+}
+
+export default ParamIcon;
diff --git a/src/components/param/disposable/ParamTitle.js b/src/components/param/disposable/ParamTitle.js
new file mode 100644
index 0000000..206c73b
--- /dev/null
+++ b/src/components/param/disposable/ParamTitle.js
@@ -0,0 +1,67 @@
+import React from 'react';
+import PropTypes from 'prop-types'
+import '../../Qrcode.css';
+import FrameworkParam from "../FrameworkParam";
+import {getExactValue} from "../../../utils/util";
+import ParamTitleColorViewer from "../../../containers/param/disposable/ParamTitleColorViewer";
+
+const TitleParams = ({ title, onChange }) => {
+ const { enabled, text, color, size, align } = title;
+ if (getExactValue(enabled, 0)) {
+ return (
+
+
+ onChange({...title, text: e.target.value})}
+ />
+
+
+
+
+
+ onChange({...title, size: e.target.value})}
+ />
+
+
+
+
+
+ )
+ }
+ return null;
+}
+
+const ParamTitle = ({title, onChange}) => (
+
+
+
+
+
+
+)
+
+ParamTitle.propTypes = {
+ title: PropTypes.object.isRequired,
+ onChange: PropTypes.func.isRequired
+}
+
+export default ParamTitle;
diff --git a/src/components/renderer/RendererFunc.js b/src/components/renderer/RendererFunc.js
index 82ba1b2..7bd2b46 100644
--- a/src/components/renderer/RendererFunc.js
+++ b/src/components/renderer/RendererFunc.js
@@ -13,7 +13,6 @@ function listPoints(qrcode, params) {
let type = params[0];
let size = params[1] / 100;
let funcType = params[1];
- let opacity = params[2] / 100;
let posType = params[3];
let id = 0;
let otherColor = params[4];
diff --git a/src/components/style/Renderer.js b/src/components/style/Renderer.js
index 8a64af6..4c9fa9e 100644
--- a/src/components/style/Renderer.js
+++ b/src/components/style/Renderer.js
@@ -1,5 +1,5 @@
import React, {useEffect} from "react";
-import {extend} from "../../utils/util";
+import {extend, getExactValue} from "../../utils/util";
const Renderer = ({ rendererType, ...other }) => (
React.createElement(rendererType, other)
@@ -9,24 +9,72 @@ function areEqual(prevProps, nextProps) {
return !(prevProps.selected === true || nextProps.selected === true)
}
-export function createRenderer(renderer) {
- let defaultViewBox = function (qrcode) {
- if (!qrcode) return '0 0 0 0';
+let defaultViewBox = function (qrcode) {
+ if (!qrcode) return '0 0 0 0';
- const nCount = qrcode.getModuleCount();
- return String(-nCount / 5) + ' ' + String(-nCount / 5) + ' ' + String(nCount + nCount / 5 * 2) + ' ' + String(nCount + nCount / 5 * 2);
+ const nCount = qrcode.getModuleCount();
+ return String(-nCount / 5) + ' ' + String(-nCount / 5) + ' ' + String(nCount + nCount / 5 * 2) + ' ' + String(nCount + nCount / 5 * 2);
+}
+
+let drawIcon = function (qrcode, title, icon) {
+ if (!qrcode) return []
+ if (!title && !icon) return null;
+
+ let id = 0;
+ const titleEnabled = getExactValue(title.enabled, 0);
+ const iconEnabled = getExactValue(icon.enabled, 0);
+ const {text, color, size, align} = title;
+ const {src, scale} = icon;
+
+ const nCount = qrcode.getModuleCount();
+ // const { fontSize, color, verticalAlign, ...titleStyle } = styles.title || {};
+ // const titleVerticalAlign = titleAlign || verticalAlign || (icon ? "bottom" : "middle");
+ // iconScale = iconScale > .33 ? .33 : iconScale;
+ const titleStyle = {};
+ const titleVerticalAlign = align;
+
+ const iconSize = Number(nCount * (scale > .33 ? .33 : scale));
+ const iconXY = (nCount - iconSize) / 2;
+
+ const pointList = [];
+ if ((titleEnabled && align === "middle") || iconEnabled) {
+ pointList.push();
}
+ if (icon && iconEnabled) {
+ pointList.push();
+ }
+
+ if (title && titleEnabled) {
+ // const svgWidth = styles.svg && styles.svg.width ? styles.svg.width.replace("px", "") : 300;
+ // const titleFontSize = Number(nCount + nCount / 5 * 2) * (titleSize || fontSize || 12) / svgWidth;
+ // const titleFontColor = titleColor || color || "#000000";
+ const svgWidth = 300;
+ const titleFontSize = Number(nCount + nCount / 5 * 2) * size / svgWidth;
+ const titleFontColor = color;
+
+ const fontY = titleVerticalAlign === "middle"
+ ? (icon ? (iconXY + iconSize) : (nCount / 2 + titleFontSize * .5))
+ : Number(nCount + nCount / 5) - titleFontSize * .5;
+
+ pointList.push({text})
+ }
+
+ return pointList;
+}
+
+export function createRenderer(renderer) {
+
+
renderer = extend({
getViewBox: defaultViewBox,
listPoints: (qrcode, params) => { return []; },
getParamInfo: () => {return []; },
beginRendering: ({ qrcode, params, setParamInfo }) => {},
beforeListing: ({ qrcode, params, setParamInfo }) => {},
- afterListing: ({ qrcode, params, setParamInfo }) => {},
}, renderer);
- return ({ qrcode, params, setParamInfo}) => {
+ return ({ qrcode, params, title, icon, setParamInfo}) => {
useEffect(() => {
setParamInfo(renderer.getParamInfo());
}, [setParamInfo]);
@@ -37,7 +85,7 @@ export function createRenderer(renderer) {
xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
{renderer.beforeListing({ qrcode, params, setParamInfo })}
{renderer.listPoints(qrcode, params)}
- {renderer.afterListing({ qrcode, params, setParamInfo })}
+ {drawIcon(qrcode, title, icon)}
);
}
diff --git a/src/constant/ActionTypes.js b/src/constant/ActionTypes.js
index 12a5c88..b2a11df 100644
--- a/src/constant/ActionTypes.js
+++ b/src/constant/ActionTypes.js
@@ -5,4 +5,6 @@ export const actionTypes = {
CREATE_PARAM: 'CREATE_PARAM',
CHANGE_PARAM: 'CHANGE_PARAM',
LOAD_DOWNLOAD_DATA: 'LOAD_DOWNLOAD_DATA',
+ CHANGE_TITLE: 'CHANGE_TITLE',
+ CHANGE_ICON: 'CHANGE_ICON'
}
diff --git a/src/containers/param/ParamCorrectLevelViewer.js b/src/containers/param/ParamCorrectLevelViewer.js
index aa872ae..db00b3b 100644
--- a/src/containers/param/ParamCorrectLevelViewer.js
+++ b/src/containers/param/ParamCorrectLevelViewer.js
@@ -1,5 +1,5 @@
import {changeCorrectLevel} from "../../actions";
-import ParamCorrectLevel from "../../components/param/ParamCorrectLevel";
+import ParamCorrectLevel from "../../components/param/disposable/ParamCorrectLevel";
import {connect} from "react-redux";
const mapStateToProps = (state) => ({
diff --git a/src/containers/param/disposable/ParamIconSrcViewer.js b/src/containers/param/disposable/ParamIconSrcViewer.js
new file mode 100644
index 0000000..3c859b7
--- /dev/null
+++ b/src/containers/param/disposable/ParamIconSrcViewer.js
@@ -0,0 +1,23 @@
+import { connect } from 'react-redux';
+import {isPicture, toBase64} from "../../../utils/imageUtils";
+import ParamUpload from "../../../components/param/ParamUpload";
+
+const mapStateToProps = (state, ownProps) => ({
+ rendererIndex: -1,
+ paramIndex: -1,
+})
+
+const mapDispatchToProps = (dispatch, ownProps) => ({
+ onChange: (e) => {
+ if (e.target.files.length > 0) {
+ const file = e.target.files[0];
+ if (isPicture(file)) {
+ toBase64(file, 1.0).then(res => {
+ ownProps.onChange({ ...ownProps.icon, src: res})
+ })
+ }
+ }
+ }
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(ParamUpload);
diff --git a/src/containers/param/disposable/ParamIconViewer.js b/src/containers/param/disposable/ParamIconViewer.js
new file mode 100644
index 0000000..83b9304
--- /dev/null
+++ b/src/containers/param/disposable/ParamIconViewer.js
@@ -0,0 +1,15 @@
+import { connect } from 'react-redux';
+import ParamIcon from "../../../components/param/disposable/ParamIcon";
+import {changeIcon} from "../../../actions";
+
+const mapStateToProps = (state, ownProps) => ({
+ icon: state.icon
+})
+
+const mapDispatchToProps = (dispatch, ownProps) => ({
+ onChange: (icon) => {
+ dispatch(changeIcon(icon))
+ }
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(ParamIcon);
diff --git a/src/containers/param/disposable/ParamTitleColorViewer.js b/src/containers/param/disposable/ParamTitleColorViewer.js
new file mode 100644
index 0000000..3f8f930
--- /dev/null
+++ b/src/containers/param/disposable/ParamTitleColorViewer.js
@@ -0,0 +1,16 @@
+import { connect } from 'react-redux';
+import ParamColor from "../../../components/param/ParamColor";
+
+const mapStateToProps = (state, ownProps) => ({
+ rendererIndex: -1,
+ paramIndex: -1,
+ value: state.title.color
+})
+
+const mapDispatchToProps = (dispatch, ownProps) => ({
+ onChange: (color) => {
+ ownProps.onChange({ ...ownProps.title, color: color.hex })
+ }
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(ParamColor);
diff --git a/src/containers/param/disposable/ParamTitleViewer.js b/src/containers/param/disposable/ParamTitleViewer.js
new file mode 100644
index 0000000..dc50fe4
--- /dev/null
+++ b/src/containers/param/disposable/ParamTitleViewer.js
@@ -0,0 +1,15 @@
+import { connect } from 'react-redux';
+import ParamTitle from "../../../components/param/disposable/ParamTitle";
+import {changeTitle} from "../../../actions";
+
+const mapStateToProps = (state, ownProps) => ({
+ title: state.title
+})
+
+const mapDispatchToProps = (dispatch, ownProps) => ({
+ onChange: (title) => {
+ dispatch(changeTitle(title))
+ }
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(ParamTitle);
diff --git a/src/containers/style/RendererViewer.js b/src/containers/style/RendererViewer.js
index 6553625..b28787b 100644
--- a/src/containers/style/RendererViewer.js
+++ b/src/containers/style/RendererViewer.js
@@ -7,6 +7,8 @@ const mapStateToProps = (state, ownProps) => ({
rendererIndex: ownProps.index,
qrcode: state.qrcode,
params: fillEmptyWith(state.paramValue[ownProps.index].slice(), 0),
+ title: state.title,
+ icon: state.icon,
selected: state.selectedIndex === ownProps.index,
})
diff --git a/src/reducers/index.js b/src/reducers/index.js
index 417abf0..30fba13 100644
--- a/src/reducers/index.js
+++ b/src/reducers/index.js
@@ -13,6 +13,8 @@ const initialState = {
history: [],
downloadData: [],
qrcode: encodeData({text: QRBTF_URL, correctLevel: 0}),
+ icon: { enabled: 0, src: '', scale: 0.33 },
+ title: { enabled: 0, text: '', color: 'black', size: 20, align: 'middle'},
paramInfo: new Array(16).fill(new Array(16)),
paramValue: new Array(16).fill(new Array(16))
}
@@ -65,6 +67,16 @@ export default function appReducer(state = initialState, action) {
downloadData: action.data
});
}
+ case actionTypes.CHANGE_TITLE: {
+ return Object.assign({}, state, {
+ title: Object.assign({}, state.title, action.title)
+ });
+ }
+ case actionTypes.CHANGE_ICON: {
+ return Object.assign({}, state, {
+ icon: Object.assign({}, state.icon, action.icon)
+ });
+ }
default: return state
}
}
From 2dc57dcbcd8e86c50e47e60a06103adc6f7902fa Mon Sep 17 00:00:00 2001
From: CPunisher <1343316114@qq.com>
Date: Mon, 17 Aug 2020 15:20:23 +0800
Subject: [PATCH 02/19] [png download]
---
src/components/app/PartDownload.js | 30 +++++++++++++++---------
src/containers/app/PartDownloadViewer.js | 10 ++++----
src/utils/downloader.js | 10 +++++---
src/utils/gaHelper.js | 4 ++--
4 files changed, 33 insertions(+), 21 deletions(-)
diff --git a/src/components/app/PartDownload.js b/src/components/app/PartDownload.js
index 1abef19..1c34176 100644
--- a/src/components/app/PartDownload.js
+++ b/src/components/app/PartDownload.js
@@ -15,7 +15,20 @@ const WxMessage = () => {
return null
}
-const PartDownload = ({ value, downloadCount, onSvgDownload, onJpgDownload }) => {
+const ImgBox = ({ imgData }) => {
+ if (imgData.length > 0) {
+ return (
+
+
+
+
+
+ )
+ }
+ return null
+}
+
+const PartDownload = ({ value, downloadCount, onSvgDownload, onImgDownload }) => {
const [imgData, setImgData] = useState('');
return (
@@ -30,22 +43,16 @@ const PartDownload = ({ value, downloadCount, onSvgDownload, onJpgDownload }) =>
-
+
+
-
- {
- imgData.length > 0 ?
: null
- }
+
@@ -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;
diff --git a/src/containers/app/PartDownloadViewer.js b/src/containers/app/PartDownloadViewer.js
index 35f6c62..0d07225 100644
--- a/src/containers/app/PartDownloadViewer.js
+++ b/src/containers/app/PartDownloadViewer.js
@@ -3,7 +3,7 @@ import PartDownload from "../../components/app/PartDownload";
import {saveImg, saveSvg} from "../../utils/downloader";
import {getDownloadCount, increaseDownloadData, recordDownloadDetail} from "../../api/TcbHandler";
import {getParamDetailedValue, outerHtml} from "../../utils/util";
-import {handleDownloadJpg, handleDownloadSvg} from "../../utils/gaHelper";
+import {handleDownloadImg, handleDownloadSvg} from "../../utils/gaHelper";
function saveDB(state, type, updateDownloadData) {
return new Promise(resolve => {
@@ -45,11 +45,11 @@ const mapStateToProps = (state, ownProps) => ({
saveDB(state, 'svg', ownProps.updateDownloadData);
handleDownloadSvg(state.value);
},
- onJpgDownload: () => {
+ onImgDownload: (type) => {
return new Promise(resolve => {
- saveImg(state.value, outerHtml(state.selectedIndex), 1500, 1500).then((res) => {
- saveDB(state, 'jpg', ownProps.updateDownloadData).then(() => {
- handleDownloadJpg(state.value);
+ saveImg(state.value, outerHtml(state.selectedIndex), 1500, 1500, type).then((res) => {
+ saveDB(state, type, ownProps.updateDownloadData).then(() => {
+ handleDownloadImg(state.value, type);
resolve(res)
});
});
diff --git a/src/utils/downloader.js b/src/utils/downloader.js
index 67a5fec..b19da31 100644
--- a/src/utils/downloader.js
+++ b/src/utils/downloader.js
@@ -1,6 +1,8 @@
const svgHead = "\n " +
"\n"
+const MIME = { "jpg": "image/jpeg", "png": "image/png" };
+
export function saveSvg(value, content) {
let htmlContent = [svgHead + content]
let bl = new Blob(htmlContent, {type: "image/svg+xml"})
@@ -13,9 +15,11 @@ export function saveSvg(value, content) {
a.click()
}
-export function saveImg(value, content, width, height) {
+export function saveImg(value, content, width, height, type) {
+ if (!MIME[type]) throw "Error image type";
+
// Finish creating downloadable data
- let filename = "QRcode_" + value + ".jpg";
+ let filename = "QRcode_" + value + "." + type;
const wrap = document.createElement('div');
wrap.innerHTML = content;
@@ -48,7 +52,7 @@ export function saveImg(value, content, width, height) {
// image opening in a new tab for others.
let a = document.createElement('a');
- let data = canvas.toDataURL('image/jpeg', 0.8);
+ let data = canvas.toDataURL(MIME[type], 0.8);
a.setAttribute('href', data)
a.setAttribute('target', 'download')
a.setAttribute('download', filename);
diff --git a/src/utils/gaHelper.js b/src/utils/gaHelper.js
index 8716ca5..c9eb730 100644
--- a/src/utils/gaHelper.js
+++ b/src/utils/gaHelper.js
@@ -16,10 +16,10 @@ export function handleDownloadSvg(rendererName) {
});
}
-export function handleDownloadJpg(rendererName) {
+export function handleDownloadImg(rendererName, type) {
ReactGA.event({
category: 'Style',
- action: 'DownloadJpg',
+ action: 'Download' + type.charAt(0).toUpperCase() + type.slice(1),
label: rendererName,
});
}
From d44f8144fbcc5d2ad9ceeb510c4c8e7ad5925366 Mon Sep 17 00:00:00 2001
From: ciaochaos <1272777550@qq.com>
Date: Mon, 31 Aug 2020 19:40:40 +0800
Subject: [PATCH 03/19] =?UTF-8?q?PNG=20=E6=8C=89=E9=92=AE=E6=A0=B7?=
=?UTF-8?q?=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/Qrcode.css | 18 +++++++++++++-----
1 file changed, 13 insertions(+), 5 deletions(-)
diff --git a/src/components/Qrcode.css b/src/components/Qrcode.css
index 77a1826..a1e9f19 100644
--- a/src/components/Qrcode.css
+++ b/src/components/Qrcode.css
@@ -567,11 +567,11 @@ 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;
}
.ul-btn {
@@ -582,7 +582,7 @@ input[type="number"]{
cursor: pointer;
font-size: 0.9em;
line-height: 2em;
- margin: 0;
+ margin: 0 0 10px;
width: calc((100vw - 56px) / 2);
border-radius: 3em;
outline: none;
@@ -603,6 +603,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) {
@@ -640,6 +641,7 @@ input[type="number"]{
}
@media (min-width: 500px) {
+
.div-btn {
max-width: 410px;
}
@@ -649,6 +651,12 @@ input[type="number"]{
}
}
+@media (min-width: 666px) {
+ .div-btn {
+ max-width: 620px;
+ }
+}
+
.Qr-footer {
color: var(--footer-font-color);
margin-bottom: -1em;
From c5bcfacd756d3de38721c6986bfeda11bb6226b7 Mon Sep 17 00:00:00 2001
From: ciaochaos <1272777550@qq.com>
Date: Mon, 31 Aug 2020 19:44:58 +0800
Subject: [PATCH 04/19] =?UTF-8?q?PNG=20=E6=8C=89=E9=92=AE=E6=A0=B7?=
=?UTF-8?q?=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/Qrcode.css | 6 +++++-
1 file changed, 5 insertions(+), 1 deletion(-)
diff --git a/src/components/Qrcode.css b/src/components/Qrcode.css
index a1e9f19..ad2edc9 100644
--- a/src/components/Qrcode.css
+++ b/src/components/Qrcode.css
@@ -574,6 +574,10 @@ input[type="number"]{
flex-wrap: wrap;
}
+.div-btn > .dl-btn {
+ margin: 0 0 10px!important;
+}
+
.ul-btn {
float: left;
}
@@ -582,7 +586,7 @@ input[type="number"]{
cursor: pointer;
font-size: 0.9em;
line-height: 2em;
- margin: 0 0 10px;
+ margin: 0;
width: calc((100vw - 56px) / 2);
border-radius: 3em;
outline: none;
From 4bfa834bd786a14e65994e334f35600953211f68 Mon Sep 17 00:00:00 2001
From: ciaochaos <1272777550@qq.com>
Date: Mon, 31 Aug 2020 19:53:24 +0800
Subject: [PATCH 05/19] =?UTF-8?q?PNG=20=E6=8C=89=E9=92=AE=E6=A0=B7?=
=?UTF-8?q?=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/Qrcode.css | 6 +++---
src/components/app/PartDownload.js | 2 +-
2 files changed, 4 insertions(+), 4 deletions(-)
diff --git a/src/components/Qrcode.css b/src/components/Qrcode.css
index ad2edc9..33cd67e 100644
--- a/src/components/Qrcode.css
+++ b/src/components/Qrcode.css
@@ -574,7 +574,7 @@ input[type="number"]{
flex-wrap: wrap;
}
-.div-btn > .dl-btn {
+.div-btn .dl-btn {
margin: 0 0 10px!important;
}
@@ -656,8 +656,8 @@ input[type="number"]{
}
@media (min-width: 666px) {
- .div-btn {
- max-width: 620px;
+ .img-dl-btn {
+ max-width: 620px!important;
}
}
diff --git a/src/components/app/PartDownload.js b/src/components/app/PartDownload.js
index 1c34176..916d02d 100644
--- a/src/components/app/PartDownload.js
+++ b/src/components/app/PartDownload.js
@@ -42,7 +42,7 @@ const PartDownload = ({ value, downloadCount, onSvgDownload, onImgDownload }) =>