From a6632f06c3f9ee8c61876219222d93347890fd46 Mon Sep 17 00:00:00 2001 From: Amruth Pillai Date: Thu, 16 Apr 2020 13:43:20 +0530 Subject: [PATCH] bring back browser print method, parse-able resumes --- src/components/App/App.js | 6 ++++- src/i18n/source/app/app.json | 4 +++ src/index.css | 17 +++++++------ src/shared/PageController.js | 4 +++ src/shared/PrintDialog.js | 9 ++++--- src/templates/castform/Castform.js | 38 ++++++++++++++-------------- src/templates/celebi/Celebi.js | 8 +++--- src/templates/gengar/Gengar.js | 38 ++++++++++++++-------------- src/templates/glalie/Glalie.js | 40 ++++++++++++++---------------- src/templates/onyx/Onyx.js | 40 ++++++++++++++---------------- src/templates/pikachu/Pikachu.js | 38 ++++++++++++++-------------- src/utils/index.js | 14 +++++------ 12 files changed, 135 insertions(+), 121 deletions(-) diff --git a/src/components/App/App.js b/src/components/App/App.js index 5bc8d41a..9e781959 100644 --- a/src/components/App/App.js +++ b/src/components/App/App.js @@ -51,13 +51,17 @@ const App = () => { style={{ outline: 'none' }} >
- {templates.find((x) => theme.layout.toLowerCase() === x.key).component()} + {templates.find(x => theme.layout.toLowerCase() === x.key).component()}
+
+ {templates.find(x => theme.layout.toLowerCase() === x.key).component()} +
+ diff --git a/src/i18n/source/app/app.json b/src/i18n/source/app/app.json index 5c331825..634cecc0 100644 --- a/src/i18n/source/app/app.json +++ b/src/i18n/source/app/app.json @@ -29,6 +29,10 @@ "multiPageA4": "Multi-Page A4" } }, + "helpText": [ + "This export method makes use of HTML canvas to convert the resume to an image and print it on a PDF, which means it will lose all selecting/parsing capabilities.", + "If that is important to you, please try printing the resume instead using Cmd/Ctrl + P or the print button below. The result may vary as the output is browser dependent, but it is known to work best on the latest version of Google Chrome." + ], "buttons": { "cancel": "Cancel", "saveAsPdf": "Save as PDF" diff --git a/src/index.css b/src/index.css index 13cfebd1..e2cf3404 100644 --- a/src/index.css +++ b/src/index.css @@ -99,6 +99,10 @@ input[type='range']::-webkit-slider-thumb { background-color: white; } + #printPage { + display: none; + } + #pageController { bottom: 25px; } @@ -110,7 +114,7 @@ input[type='range']::-webkit-slider-thumb { @page { size: A4; - margin: 2.5em; + margin: 0; } @media print { @@ -122,18 +126,17 @@ input[type='range']::-webkit-slider-thumb { visibility: hidden; } - #page, - #page * { + #printPage, + #printPage * { visibility: visible; } - #page { + #printPage { width: 21cm; height: 29.7cm; - background-color: white; - box-shadow: none; position: absolute; - left: 0; top: 0; + left: 0; + right: 0; } } diff --git a/src/shared/PageController.js b/src/shared/PageController.js index 6fb030de..3b7e3584 100644 --- a/src/shared/PageController.js +++ b/src/shared/PageController.js @@ -33,6 +33,10 @@ const PageController = () => {
|
+
window.print()}> + print +
+
setPrintDialogOpen(true)} diff --git a/src/shared/PrintDialog.js b/src/shared/PrintDialog.js index b4d5cb74..1be046be 100644 --- a/src/shared/PrintDialog.js +++ b/src/shared/PrintDialog.js @@ -31,7 +31,7 @@ const PrintDialog = () => { >
{ + onClick={e => { e.stopPropagation(); e.preventDefault(); }} @@ -44,7 +44,7 @@ const PrintDialog = () => { type="range" className="w-full h-4 my-2 rounded-full overflow-hidden appearance-none focus:outline-none bg-gray-400" value={quality} - onChange={(e) => setQuality(e.target.value)} + onChange={e => setQuality(e.target.value)} min="40" max="100" step="5" @@ -58,13 +58,16 @@ const PrintDialog = () => { value={type} options={printTypes} onChange={setType} - optionItem={(x) => ( + optionItem={x => ( )} /> +

{t('printDialog.helpText.0')}

+

{t('printDialog.helpText.1')}

+
); - const SkillItem = (x) => ( + const SkillItem = x => (
  • {x}
    • @@ -96,8 +96,8 @@ const Castform = () => { const Objective = () => data.objective && data.objective.enable &&

    {data.objective.body}

    ; - const WorkItem = (x) => ( -
    + const WorkItem = x => ( +
    {x.title}
    @@ -116,11 +116,11 @@ const Castform = () => { data.work.enable && (
    - {data.work.items.filter((x) => x.enable).map(WorkItem)} + {data.work.items.filter(x => x.enable).map(WorkItem)}
    ); - const ReferenceItem = (x) => ( + const ReferenceItem = x => (
    {x.name}
    {x.position} @@ -136,12 +136,12 @@ const Castform = () => {
    - {data.references.items.filter((x) => x.enable).map(ReferenceItem)} + {data.references.items.filter(x => x.enable).map(ReferenceItem)}
    ); - const LanguageItem = (x) => ( + const LanguageItem = x => (
    {x.key}
    @@ -168,13 +168,13 @@ const Castform = () => {
    - {data.languages.items.filter((x) => x.enable).map(LanguageItem)} + {data.languages.items.filter(x => x.enable).map(LanguageItem)}
    ); - const EducationItem = (x) => ( -
    + const EducationItem = x => ( +
    {x.name}
    @@ -196,12 +196,12 @@ const Castform = () => { data.education.enable && (
    - {data.education.items.filter((x) => x.enable).map(EducationItem)} + {data.education.items.filter(x => x.enable).map(EducationItem)}
    ); - const AwardItem = (x) => ( -
    + const AwardItem = x => ( +
    {x.title}

    {x.subtitle}

    @@ -213,12 +213,12 @@ const Castform = () => { data.awards.enable && (
    - {data.awards.items.filter((x) => x.enable).map(AwardItem)} + {data.awards.items.filter(x => x.enable).map(AwardItem)}
    ); - const CertificationItem = (x) => ( -
    + const CertificationItem = x => ( +
    {x.title}

    {x.subtitle}

    @@ -230,11 +230,11 @@ const Castform = () => { data.certifications.enable && (
    - {data.certifications.items.filter((x) => x.enable).map(CertificationItem)} + {data.certifications.items.filter(x => x.enable).map(CertificationItem)}
    ); - const ExtraItem = (x) => ( + const ExtraItem = x => (
    {x.key}
    {x.value}
    @@ -246,7 +246,7 @@ const Castform = () => { data.extras.enable && (
    - {data.extras.items.filter((x) => x.enable).map(ExtraItem)} + {data.extras.items.filter(x => x.enable).map(ExtraItem)}
    ); diff --git a/src/templates/celebi/Celebi.js b/src/templates/celebi/Celebi.js index cc039de7..2e548a52 100644 --- a/src/templates/celebi/Celebi.js +++ b/src/templates/celebi/Celebi.js @@ -98,7 +98,7 @@ const Celebi = () => { ); const WorkItem = x => ( -
    +
    {x.title}

    @@ -119,7 +119,7 @@ const Celebi = () => { ); const EducationItem = x => ( -

    +
    {x.name}

    {x.major}

    @@ -196,7 +196,7 @@ const Celebi = () => { ); const AwardItem = x => ( -
    +
    {x.title}

    {x.subtitle}

    @@ -213,7 +213,7 @@ const Celebi = () => { ); const CertificationItem = x => ( -
    +
    {x.title}

    {x.subtitle}

    diff --git a/src/templates/gengar/Gengar.js b/src/templates/gengar/Gengar.js index 6628af1f..c271d26a 100644 --- a/src/templates/gengar/Gengar.js +++ b/src/templates/gengar/Gengar.js @@ -63,7 +63,7 @@ const Gengar = () => {
    ); - const SkillItem = (x) => ( + const SkillItem = x => (
  • {x}
    • @@ -78,8 +78,8 @@ const Gengar = () => {
    ); - const EducationItem = (x) => ( -
    + const EducationItem = x => ( +
    @@ -109,12 +109,12 @@ const Gengar = () => { data.education.enable && (
    - {data.education.items.filter((x) => x.enable).map(EducationItem)} + {data.education.items.filter(x => x.enable).map(EducationItem)}
    ); - const CertificationItem = (x) => ( -
    + const CertificationItem = x => ( +
    {x.title}

    {x.subtitle}

    @@ -126,12 +126,12 @@ const Gengar = () => { data.certifications.enable && (
    - {data.certifications.items.filter((x) => x.enable).map(CertificationItem)} + {data.certifications.items.filter(x => x.enable).map(CertificationItem)}
    ); - const AwardItem = (x) => ( -
    + const AwardItem = x => ( +
    {x.title}

    {x.subtitle}

    @@ -143,11 +143,11 @@ const Gengar = () => { data.awards.enable && (
    - {data.awards.items.filter((x) => x.enable).map(AwardItem)} + {data.awards.items.filter(x => x.enable).map(AwardItem)}
    ); - const ReferenceItem = (x) => ( + const ReferenceItem = x => (
    {x.name}
    {x.position} @@ -163,13 +163,13 @@ const Gengar = () => {
    - {data.references.items.filter((x) => x.enable).map(ReferenceItem)} + {data.references.items.filter(x => x.enable).map(ReferenceItem)}
    ); - const WorkItem = (x) => ( -
    + const WorkItem = x => ( +
    {x.title}
    @@ -188,11 +188,11 @@ const Gengar = () => { data.work.enable && (
    - {data.work.items.filter((x) => x.enable).map(WorkItem)} + {data.work.items.filter(x => x.enable).map(WorkItem)}
    ); - const LanguageItem = (x) => ( + const LanguageItem = x => (
    {x.key}
    @@ -210,11 +210,11 @@ const Gengar = () => { data.languages.enable && (
    -
    {data.languages.items.filter((x) => x.enable).map(LanguageItem)}
    +
    {data.languages.items.filter(x => x.enable).map(LanguageItem)}
    ); - const ExtraItem = (x) => ( + const ExtraItem = x => (
    {x.key}
    {x.value}
    @@ -227,7 +227,7 @@ const Gengar = () => {
    - {data.extras.items.filter((x) => x.enable).map(ExtraItem)} + {data.extras.items.filter(x => x.enable).map(ExtraItem)}
    ); diff --git a/src/templates/glalie/Glalie.js b/src/templates/glalie/Glalie.js index 07966428..300a408f 100644 --- a/src/templates/glalie/Glalie.js +++ b/src/templates/glalie/Glalie.js @@ -95,8 +95,8 @@ const Glalie = () => {
    ); - const WorkItem = (x) => ( -
    + const WorkItem = x => ( +
    {x.title}
    @@ -114,12 +114,12 @@ const Glalie = () => { data.work.enable && (
    - {data.work.items.filter((x) => x.enable).map(WorkItem)} + {data.work.items.filter(x => x.enable).map(WorkItem)}
    ); - const EducationItem = (x) => ( -
    + const EducationItem = x => ( +
    {x.name}

    {x.major}

    @@ -137,13 +137,13 @@ const Glalie = () => {
    - {data.education.items.filter((x) => x.enable).map(EducationItem)} + {data.education.items.filter(x => x.enable).map(EducationItem)}
    ); - const AwardItem = (x) => ( -
    + const AwardItem = x => ( +
    {x.title}

    {x.subtitle}

    @@ -155,12 +155,12 @@ const Glalie = () => { data.awards.enable && (
    - {data.awards.items.filter((x) => x.enable).map(AwardItem)} + {data.awards.items.filter(x => x.enable).map(AwardItem)}
    ); - const CertificationItem = (x) => ( -
    + const CertificationItem = x => ( +
    {x.title}

    {x.subtitle}

    @@ -172,11 +172,11 @@ const Glalie = () => { data.certifications.enable && (
    - {data.certifications.items.filter((x) => x.enable).map(CertificationItem)} + {data.certifications.items.filter(x => x.enable).map(CertificationItem)}
    ); - const SkillItem = (x) => ( + const SkillItem = x => (
  • {x}
    • @@ -191,7 +191,7 @@ const Glalie = () => {
    ); - const LanguageItem = (x) => ( + const LanguageItem = x => (
    {x.key}
    @@ -209,13 +209,11 @@ const Glalie = () => { data.languages.enable && (
    -
    - {data.languages.items.filter((x) => x.enable).map(LanguageItem)} -
    +
    {data.languages.items.filter(x => x.enable).map(LanguageItem)}
    ); - const ReferenceItem = (x) => ( + const ReferenceItem = x => (
    {x.name}
    {x.position} @@ -231,12 +229,12 @@ const Glalie = () => {
    - {data.references.items.filter((x) => x.enable).map(ReferenceItem)} + {data.references.items.filter(x => x.enable).map(ReferenceItem)}
    ); - const ExtraItem = (x) => ( + const ExtraItem = x => ( {x.key} {x.value} @@ -249,7 +247,7 @@ const Glalie = () => {
    - {data.extras.items.filter((x) => x.enable).map(ExtraItem)} + {data.extras.items.filter(x => x.enable).map(ExtraItem)}
    ); diff --git a/src/templates/onyx/Onyx.js b/src/templates/onyx/Onyx.js index e8eeef7b..69134e09 100644 --- a/src/templates/onyx/Onyx.js +++ b/src/templates/onyx/Onyx.js @@ -60,8 +60,8 @@ const Onyx = () => {
    ); - const WorkItem = (x) => ( -
    + const WorkItem = x => ( +
    {x.title}
    @@ -80,12 +80,12 @@ const Onyx = () => { data.work.enable && (
    - {data.work.items.filter((x) => x.enable).map(WorkItem)} + {data.work.items.filter(x => x.enable).map(WorkItem)}
    ); - const EducationItem = (x) => ( -
    + const EducationItem = x => ( +
    {x.name}
    @@ -107,12 +107,12 @@ const Onyx = () => { data.education.enable && (
    - {data.education.items.filter((x) => x.enable).map(EducationItem)} + {data.education.items.filter(x => x.enable).map(EducationItem)}
    ); - const AwardItem = (x) => ( -
    + const AwardItem = x => ( +
    {x.title}

    {x.subtitle}

    @@ -124,12 +124,12 @@ const Onyx = () => { data.awards.enable && (
    - {data.awards.items.filter((x) => x.enable).map(AwardItem)} + {data.awards.items.filter(x => x.enable).map(AwardItem)}
    ); - const CertificationItem = (x) => ( -
    + const CertificationItem = x => ( +
    {x.title}

    {x.subtitle}

    @@ -141,11 +141,11 @@ const Onyx = () => { data.certifications.enable && (
    - {data.certifications.items.filter((x) => x.enable).map(CertificationItem)} + {data.certifications.items.filter(x => x.enable).map(CertificationItem)}
    ); - const SkillItem = (x) => ( + const SkillItem = x => ( {
    ); - const LanguageItem = (x) => ( + const LanguageItem = x => (
    {x.key}
    @@ -185,13 +185,11 @@ const Onyx = () => { data.languages.enable && (
    -
    - {data.languages.items.filter((x) => x.enable).map(LanguageItem)} -
    +
    {data.languages.items.filter(x => x.enable).map(LanguageItem)}
    ); - const ReferenceItem = (x) => ( + const ReferenceItem = x => (
    {x.name}
    {x.position} @@ -207,12 +205,12 @@ const Onyx = () => {
    - {data.references.items.filter((x) => x.enable).map(ReferenceItem)} + {data.references.items.filter(x => x.enable).map(ReferenceItem)}
    ); - const ExtraItem = (x) => ( + const ExtraItem = x => ( {x.key} {x.value} @@ -225,7 +223,7 @@ const Onyx = () => {
    - {data.extras.items.filter((x) => x.enable).map(ExtraItem)} + {data.extras.items.filter(x => x.enable).map(ExtraItem)}
    ); diff --git a/src/templates/pikachu/Pikachu.js b/src/templates/pikachu/Pikachu.js index 40a8c741..cb498ae3 100644 --- a/src/templates/pikachu/Pikachu.js +++ b/src/templates/pikachu/Pikachu.js @@ -58,7 +58,7 @@ const Pikachu = () => {
    ); - const SkillItem = (x) => ( + const SkillItem = x => ( {
    ); - const ReferenceItem = (x) => ( + const ReferenceItem = x => (
    {x.name}
    {x.position} @@ -92,12 +92,12 @@ const Pikachu = () => {
    - {data.references.items.filter((x) => x.enable).map(ReferenceItem)} + {data.references.items.filter(x => x.enable).map(ReferenceItem)}
    ); - const LanguageItem = (x) => ( + const LanguageItem = x => (
    {x.key}
    @@ -115,11 +115,11 @@ const Pikachu = () => { data.languages.enable && (
    -
    {data.languages.items.filter((x) => x.enable).map(LanguageItem)}
    +
    {data.languages.items.filter(x => x.enable).map(LanguageItem)}
    ); - const ExtraItem = (x) => ( + const ExtraItem = x => (
    {x.key}
    {x.value}
    @@ -132,13 +132,13 @@ const Pikachu = () => {
    - {data.extras.items.filter((x) => x.enable).map(ExtraItem)} + {data.extras.items.filter(x => x.enable).map(ExtraItem)}
    ); - const WorkItem = (x) => ( -
    + const WorkItem = x => ( +
    {x.title}
    @@ -158,13 +158,13 @@ const Pikachu = () => {
    - {data.work.items.filter((x) => x.enable).map(WorkItem)} + {data.work.items.filter(x => x.enable).map(WorkItem)}
    ); - const EducationItem = (x) => ( -
    + const EducationItem = x => ( +
    {x.name}
    @@ -189,13 +189,13 @@ const Pikachu = () => {
    - {data.education.items.filter((x) => x.enable).map(EducationItem)} + {data.education.items.filter(x => x.enable).map(EducationItem)}
    ); - const AwardItem = (x) => ( -
    + const AwardItem = x => ( +
    {x.title}

    {x.subtitle}

    @@ -208,13 +208,13 @@ const Pikachu = () => {
    - {data.awards.items.filter((x) => x.enable).map(AwardItem)} + {data.awards.items.filter(x => x.enable).map(AwardItem)}
    ); - const CertificationItem = (x) => ( -
    + const CertificationItem = x => ( +
    {x.title}

    {x.subtitle}

    @@ -227,7 +227,7 @@ const Pikachu = () => {
    - {data.certifications.items.filter((x) => x.enable).map(CertificationItem)} + {data.certifications.items.filter(x => x.enable).map(CertificationItem)}
    ); diff --git a/src/utils/index.js b/src/utils/index.js index f9cf775a..0fab0818 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -10,7 +10,7 @@ const move = (array, element, delta) => { array.splice(indexes[0], 2, array[indexes[1]], array[indexes[0]]); }; -const hexToRgb = (hex) => { +const hexToRgb = hex => { const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; hex = hex.replace(shorthandRegex, (m, r, g, b) => r + r + g + g + b + b); const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); @@ -23,7 +23,7 @@ const hexToRgb = (hex) => { : null; }; -const copyToClipboard = (text) => { +const copyToClipboard = text => { const textArea = document.createElement('textarea'); textArea.style.position = 'fixed'; textArea.style.top = 0; @@ -44,7 +44,7 @@ const copyToClipboard = (text) => { return successful; }; -const saveData = (dispatch) => dispatch({ type: 'save_data' }); +const saveData = dispatch => dispatch({ type: 'save_data' }); const addItem = (dispatch, key, value) => { dispatch({ @@ -105,7 +105,7 @@ const importJson = (event, dispatch) => { }; const saveAsPdf = (pageRef, panZoomRef, quality, type) => - new Promise((resolve) => { + new Promise(resolve => { panZoomRef.current.autoCenter(1); panZoomRef.current.reset(); @@ -114,7 +114,7 @@ const saveAsPdf = (pageRef, panZoomRef, quality, type) => scale: 5, useCORS: true, allowTaint: true, - }).then((canvas) => { + }).then(canvas => { const image = canvas.toDataURL('image/jpeg', quality / 100); const doc = new jsPDF({ orientation: 'portrait', @@ -148,7 +148,7 @@ const saveAsPdf = (pageRef, panZoomRef, quality, type) => }); const saveAsMultiPagePdf = (pageRef, panZoomRef, quality) => - new Promise((resolve) => { + new Promise(resolve => { panZoomRef.current.autoCenter(1); panZoomRef.current.reset(); @@ -157,7 +157,7 @@ const saveAsMultiPagePdf = (pageRef, panZoomRef, quality) => scale: 5, useCORS: true, allowTaint: true, - }).then((canvas) => { + }).then(canvas => { const image = canvas.toDataURL('image/jpeg', quality / 100); const doc = new jsPDF({ orientation: 'portrait',