From 8bb8cf6cbabcc5629382b0989f512414857a78ec Mon Sep 17 00:00:00 2001 From: Enzuo Date: Sun, 16 Oct 2016 18:20:15 +0200 Subject: [PATCH 1/8] Add wechat share button --- css/modules/_share-buttons.css | 10 +++++++++- js/stores/AppStore.js | 16 +++++++++++++++- 2 files changed, 24 insertions(+), 2 deletions(-) diff --git a/css/modules/_share-buttons.css b/css/modules/_share-buttons.css index 181dd67..81991a7 100644 --- a/css/modules/_share-buttons.css +++ b/css/modules/_share-buttons.css @@ -117,4 +117,12 @@ .resp-sharing-button--whatsapp:hover { background-color: #1da851 -} \ No newline at end of file +} + +.resp-sharing-button--wechat { + background-color: #37c700 +} + +.resp-sharing-button--wechat:hover { + background-color: #30af00 +} diff --git a/js/stores/AppStore.js b/js/stores/AppStore.js index b1232fc..37508c8 100644 --- a/js/stores/AppStore.js +++ b/js/stores/AppStore.js @@ -152,6 +152,19 @@ var _data = { 'scriptSize': 15.1, 'requests': 1 }, + 'wechat': { + 'visible': false, + 'name': 'Wechat', + 'icons': { + 'normal': '', + 'solid': '', + 'circle': ' ', + 'solidcircle': '', + }, + 'style':'.resp-sharing-button--whechat {\n background-color: #37c700;\n border-color: #37c700;\n}\n\n.resp-sharing-button--wechat:hover,\n.resp-sharing-button--wechat:active {\n background-color: #30af00;\n border-color: #30af00;\n}', + 'scriptSize': 0, + 'requests': 1 + } } } @@ -223,7 +236,8 @@ var AppStore = assign({}, EventEmitter.prototype, { 'reddit': 'https://reddit.com/submit/?url=' + url, 'email': 'mailto:?subject=' + text + '&body=' + url, 'xing': 'https://www.xing.com/app/user?op=share;url=' + url + ';title=' + text, - 'whatsapp': 'whatsapp://send?text=' + text + '%20' + url + 'whatsapp': 'whatsapp://send?text=' + text + '%20' + url, + 'wechat': 'https://api.qrserver.com/v1/create-qr-code/?size=110x110&data=' + url, } for (var network in _data.networks) { From 9ac9dfb384aae31386955aa376407e699daa7e5e Mon Sep 17 00:00:00 2001 From: Enzuo Date: Sun, 16 Oct 2016 19:00:58 +0200 Subject: [PATCH 2/8] Update Wechat share button to display the qrcode as a popover --- css/modules/_share-buttons.css | 14 +++++++++++++- js/components/PreviewButton.react.js | 6 ++++++ js/stores/AppStore.js | 3 ++- 3 files changed, 21 insertions(+), 2 deletions(-) diff --git a/css/modules/_share-buttons.css b/css/modules/_share-buttons.css index 81991a7..5ff464b 100644 --- a/css/modules/_share-buttons.css +++ b/css/modules/_share-buttons.css @@ -39,6 +39,17 @@ stroke: none } +/* Qrcode popover */ +.resp-sharing-button__qrcode { + display: none; + position:absolute; + top:-120px; + left:0 +} +.resp-sharing-button:hover .resp-sharing-button__qrcode { + display: block +} + .resp-sharing-button--twitter { background-color: #55acee } @@ -120,7 +131,8 @@ } .resp-sharing-button--wechat { - background-color: #37c700 + background-color: #37c700; + position:relative } .resp-sharing-button--wechat:hover { diff --git a/js/components/PreviewButton.react.js b/js/components/PreviewButton.react.js index 91f1992..b85972a 100644 --- a/js/components/PreviewButton.react.js +++ b/js/components/PreviewButton.react.js @@ -7,6 +7,7 @@ var PreviewButton = React.createClass({ var id = this.props.id; var icon = ; var shareText = ""; + var qrcode = ""; // Change the button text based on size if (this.props.size === "medium") { @@ -15,6 +16,10 @@ var PreviewButton = React.createClass({ shareText = "Share " + (this.props.network.name.toLowerCase() === "e-mail" ? "by " : "on ") + name; } + if (network.qrcode) { + qrcode = ; + } + // Render preview button return ( { icon } { shareText } + { qrcode } ); diff --git a/js/stores/AppStore.js b/js/stores/AppStore.js index 37508c8..9c2fd56 100644 --- a/js/stores/AppStore.js +++ b/js/stores/AppStore.js @@ -163,7 +163,8 @@ var _data = { }, 'style':'.resp-sharing-button--whechat {\n background-color: #37c700;\n border-color: #37c700;\n}\n\n.resp-sharing-button--wechat:hover,\n.resp-sharing-button--wechat:active {\n background-color: #30af00;\n border-color: #30af00;\n}', 'scriptSize': 0, - 'requests': 1 + 'requests': 0, + 'qrcode': true } } } From c105576542851e05dca2ba6da71246e9b71ba353 Mon Sep 17 00:00:00 2001 From: Enzuo Date: Sun, 16 Oct 2016 19:13:50 +0200 Subject: [PATCH 3/8] Fix Wechat button to be the same size as the others icons The empty string was translating as an empty span making other buttons larger than the wechat one --- js/components/PreviewButton.react.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/components/PreviewButton.react.js b/js/components/PreviewButton.react.js index b85972a..c30a0df 100644 --- a/js/components/PreviewButton.react.js +++ b/js/components/PreviewButton.react.js @@ -7,7 +7,7 @@ var PreviewButton = React.createClass({ var id = this.props.id; var icon = ; var shareText = ""; - var qrcode = ""; + var qrcode = undefined; // Change the button text based on size if (this.props.size === "medium") { From 81219dfe2a1481ece941078d4fa7d67170ea0055 Mon Sep 17 00:00:00 2001 From: Enzuo Date: Mon, 17 Oct 2016 22:09:51 +0200 Subject: [PATCH 4/8] Optimize Svg --- js/stores/AppStore.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/js/stores/AppStore.js b/js/stores/AppStore.js index 9c2fd56..9727f8b 100644 --- a/js/stores/AppStore.js +++ b/js/stores/AppStore.js @@ -156,10 +156,10 @@ var _data = { 'visible': false, 'name': 'Wechat', 'icons': { - 'normal': '', - 'solid': '', - 'circle': ' ', - 'solidcircle': '', + 'normal': ' ', + 'solid': '', + 'circle': '', + 'solidcircle': '', }, 'style':'.resp-sharing-button--whechat {\n background-color: #37c700;\n border-color: #37c700;\n}\n\n.resp-sharing-button--wechat:hover,\n.resp-sharing-button--wechat:active {\n background-color: #30af00;\n border-color: #30af00;\n}', 'scriptSize': 0, From 83f36faa3c2be5d917c2c1681b228ed35e99ee7d Mon Sep 17 00:00:00 2001 From: Enzuo Date: Mon, 17 Oct 2016 22:53:16 +0200 Subject: [PATCH 5/8] Use checkbox trick to display Qrcode on click --- css/modules/_share-buttons.css | 8 +++++++- js/components/PreviewButton.react.js | 14 +++++++++++--- 2 files changed, 18 insertions(+), 4 deletions(-) diff --git a/css/modules/_share-buttons.css b/css/modules/_share-buttons.css index 5ff464b..4c26541 100644 --- a/css/modules/_share-buttons.css +++ b/css/modules/_share-buttons.css @@ -11,6 +11,7 @@ } .resp-sharing-button { + cursor: pointer; border-radius: 5px; transition: 25ms ease-out; padding: 0.5em 0.75em; @@ -46,10 +47,15 @@ top:-120px; left:0 } -.resp-sharing-button:hover .resp-sharing-button__qrcode { +.resp-sharing-button__checkbox:checked ~ .resp-sharing-button__qrcode { display: block } +.resp-sharing-button__checkbox { + position: absolute; + left: -9999px +} + .resp-sharing-button--twitter { background-color: #55acee } diff --git a/js/components/PreviewButton.react.js b/js/components/PreviewButton.react.js index c30a0df..3ce2960 100644 --- a/js/components/PreviewButton.react.js +++ b/js/components/PreviewButton.react.js @@ -8,6 +8,7 @@ var PreviewButton = React.createClass({ var icon = ; var shareText = ""; var qrcode = undefined; + var ShareButton = "a"; // Change the button text based on size if (this.props.size === "medium") { @@ -17,14 +18,21 @@ var PreviewButton = React.createClass({ } if (network.qrcode) { - qrcode = ; + ShareButton = "label"; + qrcode = ( +
+ + +
+ ); } // Render preview button return ( -
@@ -32,7 +40,7 @@ var PreviewButton = React.createClass({ { shareText } { qrcode }
- + ); }, _makeIcon: function(string) { From 9ea79d9dc7be02a6afb705db67deb1a99342b6ae Mon Sep 17 00:00:00 2001 From: Enzuo Date: Wed, 19 Oct 2016 22:41:30 +0200 Subject: [PATCH 6/8] Create react component for the QR code popup --- css/app.css | 1 + css/modules/_qrcode-popup.css | 15 +++++++++++++++ css/modules/_share-buttons.css | 16 ---------------- js/components/PreviewButton.react.js | 14 ++++++-------- js/components/QrcodePopup.react.js | 17 +++++++++++++++++ js/stores/AppStore.js | 2 +- 6 files changed, 40 insertions(+), 25 deletions(-) create mode 100644 css/modules/_qrcode-popup.css create mode 100644 js/components/QrcodePopup.react.js diff --git a/css/app.css b/css/app.css index 16082b4..f420bbe 100644 --- a/css/app.css +++ b/css/app.css @@ -7,6 +7,7 @@ @import 'modules/_header.css'; @import 'modules/_generator.css'; @import 'modules/_share-buttons.css'; +@import 'modules/_qrcode-popup.css'; @import 'modules/_footer.css'; @import 'modules/_media-queries.css'; diff --git a/css/modules/_qrcode-popup.css b/css/modules/_qrcode-popup.css new file mode 100644 index 0000000..cb33b69 --- /dev/null +++ b/css/modules/_qrcode-popup.css @@ -0,0 +1,15 @@ +/* Qrcode popover */ +.qrcode-popup__qrcode { + display: none; + position:absolute; + top:-120px; + left:0 +} +.qrcode-popup__checkbox:checked ~ .qrcode-popup__qrcode { + display: block +} + +.qrcode-popup__checkbox { + position: absolute; + left: -9999px +} diff --git a/css/modules/_share-buttons.css b/css/modules/_share-buttons.css index 4c26541..60579bf 100644 --- a/css/modules/_share-buttons.css +++ b/css/modules/_share-buttons.css @@ -40,22 +40,6 @@ stroke: none } -/* Qrcode popover */ -.resp-sharing-button__qrcode { - display: none; - position:absolute; - top:-120px; - left:0 -} -.resp-sharing-button__checkbox:checked ~ .resp-sharing-button__qrcode { - display: block -} - -.resp-sharing-button__checkbox { - position: absolute; - left: -9999px -} - .resp-sharing-button--twitter { background-color: #55acee } diff --git a/js/components/PreviewButton.react.js b/js/components/PreviewButton.react.js index 3ce2960..58ed6d8 100644 --- a/js/components/PreviewButton.react.js +++ b/js/components/PreviewButton.react.js @@ -1,3 +1,5 @@ +var QrcodePopup = require('./QrcodePopup.react'); + var PreviewButton = React.createClass({ render: function() { var network = this.props.network; @@ -7,8 +9,9 @@ var PreviewButton = React.createClass({ var id = this.props.id; var icon = ; var shareText = ""; - var qrcode = undefined; var ShareButton = "a"; + var qrcode = undefined; + var qrcodeId = name + "__qrcode"; // Change the button text based on size if (this.props.size === "medium") { @@ -19,12 +22,7 @@ var PreviewButton = React.createClass({ if (network.qrcode) { ShareButton = "label"; - qrcode = ( -
- - -
- ); + qrcode = ; } // Render preview button @@ -32,7 +30,7 @@ var PreviewButton = React.createClass({
diff --git a/js/components/QrcodePopup.react.js b/js/components/QrcodePopup.react.js new file mode 100644 index 0000000..eb252d3 --- /dev/null +++ b/js/components/QrcodePopup.react.js @@ -0,0 +1,17 @@ +var QrcodePopup = React.createClass({ + render: function() { + var id = this.props.idPopup; + var content = this.props.content; + + return ( +
+ + +
+ ); + } +}); + +module.exports = QrcodePopup; diff --git a/js/stores/AppStore.js b/js/stores/AppStore.js index 9727f8b..b824bcf 100644 --- a/js/stores/AppStore.js +++ b/js/stores/AppStore.js @@ -238,7 +238,7 @@ var AppStore = assign({}, EventEmitter.prototype, { 'email': 'mailto:?subject=' + text + '&body=' + url, 'xing': 'https://www.xing.com/app/user?op=share;url=' + url + ';title=' + text, 'whatsapp': 'whatsapp://send?text=' + text + '%20' + url, - 'wechat': 'https://api.qrserver.com/v1/create-qr-code/?size=110x110&data=' + url, + 'wechat': url, } for (var network in _data.networks) { From 8a7f497665f55276708075e8f9342a3db7983fad Mon Sep 17 00:00:00 2001 From: Enzuo Date: Wed, 19 Oct 2016 23:26:01 +0200 Subject: [PATCH 7/8] Add QR code style got help from http://www.cssarrowplease.com/ --- css/modules/_qrcode-popup.css | 35 ++++++++++++++++++++++++++++-- js/components/QrcodePopup.react.js | 8 ++++--- 2 files changed, 38 insertions(+), 5 deletions(-) diff --git a/css/modules/_qrcode-popup.css b/css/modules/_qrcode-popup.css index cb33b69..ead392b 100644 --- a/css/modules/_qrcode-popup.css +++ b/css/modules/_qrcode-popup.css @@ -2,14 +2,45 @@ .qrcode-popup__qrcode { display: none; position:absolute; - top:-120px; - left:0 + top:-150px; + left:-13px } .qrcode-popup__checkbox:checked ~ .qrcode-popup__qrcode { display: block } +.qrcode-popup__qrcode-wrapper { + padding: 10px; + background: #fff; + border: 2px solid #efefef; + border-radius: 5px +} + .qrcode-popup__checkbox { position: absolute; left: -9999px } + +.qrcode-popup__qrcode-wrapper:after, .qrcode-popup__qrcode-wrapper:before { + top: 98%; + left: 20%; + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; +} + +.qrcode-popup__qrcode-wrapper:after { + border-color: rgba(255, 255, 255, 0); + border-top-color: #ffffff; + border-width: 13px; + margin-left: -13px; +} +.qrcode-popup__qrcode-wrapper:before { + border-color: rgba(239, 239, 239, 0); + border-top-color: #efefef; + border-width: 16px; + margin-left: -16px; +} diff --git a/js/components/QrcodePopup.react.js b/js/components/QrcodePopup.react.js index eb252d3..60dd50a 100644 --- a/js/components/QrcodePopup.react.js +++ b/js/components/QrcodePopup.react.js @@ -6,9 +6,11 @@ var QrcodePopup = React.createClass({ return (
- +
+
+ +
+
); } From 01ca16b9bf852e2aee1e41b73f21052d7f6784dc Mon Sep 17 00:00:00 2001 From: Enzuo Date: Thu, 20 Oct 2016 00:13:27 +0200 Subject: [PATCH 8/8] Reorganize code --- css/modules/_qrcode-popup.css | 16 ++++++++-------- js/components/PreviewButton.react.js | 15 ++++++++------- 2 files changed, 16 insertions(+), 15 deletions(-) diff --git a/css/modules/_qrcode-popup.css b/css/modules/_qrcode-popup.css index ead392b..9d2f05b 100644 --- a/css/modules/_qrcode-popup.css +++ b/css/modules/_qrcode-popup.css @@ -9,6 +9,11 @@ display: block } +.qrcode-popup__checkbox { + position: absolute; + left: -9999px +} + .qrcode-popup__qrcode-wrapper { padding: 10px; background: #fff; @@ -16,11 +21,6 @@ border-radius: 5px } -.qrcode-popup__checkbox { - position: absolute; - left: -9999px -} - .qrcode-popup__qrcode-wrapper:after, .qrcode-popup__qrcode-wrapper:before { top: 98%; left: 20%; @@ -29,18 +29,18 @@ height: 0; width: 0; position: absolute; - pointer-events: none; + pointer-events: none } .qrcode-popup__qrcode-wrapper:after { border-color: rgba(255, 255, 255, 0); border-top-color: #ffffff; border-width: 13px; - margin-left: -13px; + margin-left: -13px } .qrcode-popup__qrcode-wrapper:before { border-color: rgba(239, 239, 239, 0); border-top-color: #efefef; border-width: 16px; - margin-left: -16px; + margin-left: -16px } diff --git a/js/components/PreviewButton.react.js b/js/components/PreviewButton.react.js index 58ed6d8..251297e 100644 --- a/js/components/PreviewButton.react.js +++ b/js/components/PreviewButton.react.js @@ -2,6 +2,8 @@ var QrcodePopup = require('./QrcodePopup.react'); var PreviewButton = React.createClass({ render: function() { + var ShareButton = "a"; + var ShareBProps = {}; var network = this.props.network; var name = network.name; var text = this.props.text; @@ -9,9 +11,7 @@ var PreviewButton = React.createClass({ var id = this.props.id; var icon = ; var shareText = ""; - var ShareButton = "a"; - var qrcode = undefined; - var qrcodeId = name + "__qrcode"; + var qrcode; // Change the button text based on size if (this.props.size === "medium") { @@ -22,17 +22,18 @@ var PreviewButton = React.createClass({ if (network.qrcode) { ShareButton = "label"; - qrcode = ; + ShareBProps.htmlFor = name + "__qrcode"; + qrcode = ; } // Render preview button return ( - + aria-label={ shareText }>
{ icon } { shareText }