From f1d79a17f615a9cd34b15dd7b96764e4bb99486a Mon Sep 17 00:00:00 2001 From: guicamest Date: Tue, 15 Aug 2023 17:32:18 +0200 Subject: Allow setting additional cards to print (#275) * Add setting for additional cards to print * Render additional cards to print * Do not render additional cards if amount is less than 1 * Render additional cards when printing * Improve layout for portrait printing * Render eap and identity textfields conditionally so that they dont use space * Use all width in print-area * Change additionalCards setting to Input and react to changes * Allow hiding tip (legend) on card * Print only full cards * Move print-area - not-displayed - to the bottom of the page * Set default ssid back to empty, additional cards to 0 * Lower marginBottom of password field to 5 instead of 24 (default) * Use conditional rendering instead of class to hide password * Set marginBottom to QR code only on portrait mode * Set row-gap to 0 to allow up to 6 cards to fit in portrait mode in A4 * Move hideTip setting right after hiddenSSID --- src/App.js | 48 +++++++++--- src/components/Settings.js | 21 +++++- src/components/WifiCard.js | 181 ++++++++++++++++++++++----------------------- src/components/style.css | 24 ++++-- src/translations.js | 2 + 5 files changed, 168 insertions(+), 108 deletions(-) (limited to 'src') diff --git a/src/App.js b/src/App.js index ccfa9b6..6eb712a 100644 --- a/src/App.js +++ b/src/App.js @@ -28,6 +28,10 @@ function App() { hiddenSSID: false, // Settings: Portrait orientation portrait: false, + // Settings: Additional cards + additionalCards: 0, + // Settings: Show tip (legend) on card + hideTip: false, }); const [errors, setErrors] = useState({ ssidError: '', @@ -120,6 +124,13 @@ function App() { const onHiddenSSIDChange = (hiddenSSID) => { setSettings({ ...settings, hiddenSSID }); }; + const onAdditionalCardsChange = (additionalCardsStr) => { + const amount = parseInt(additionalCardsStr); + amount >= 0 && setSettings({ ...settings, additionalCards: amount }); + }; + const onHideTipChange = (hideTip) => { + setSettings({ ...settings, hideTip }); + }; const onFirstLoad = () => { html.style.direction = htmlDirection(); firstLoad.current = false; @@ -153,15 +164,17 @@ function App() { - + + + + + {settings.additionalCards >= 0 && + [...Array(settings.additionalCards + 1)].map((el, idx) => ( + + ))} + ); } diff --git a/src/components/Settings.js b/src/components/Settings.js index a0dbab5..837b4f0 100644 --- a/src/components/Settings.js +++ b/src/components/Settings.js @@ -1,4 +1,10 @@ -import { Checkbox, Pane, RadioGroup, SelectField } from 'evergreen-ui'; +import { + Checkbox, + Pane, + RadioGroup, + SelectField, + TextInputField, +} from 'evergreen-ui'; import { useEffect } from 'react'; import { useTranslation } from 'react-i18next'; import i18n from '../i18n'; @@ -62,6 +68,19 @@ export const Settings = (props) => { checked={props.settings.hiddenSSID} onChange={() => props.onHiddenSSIDChange(!props.settings.hiddenSSID)} /> + + props.onHideTipChange(!props.settings.hideTip)} + /> + props.onAdditionalCardsChange(e.target.value)} + /> { }; return ( - - + + icon + + {t('wifi.login')} + + + + - - icon - - {t('wifi.login')} - - + - - + props.onSSIDChange(e.target.value)} + isInvalid={!!props.ssidError} + validationMessage={!!props.ssidError && props.ssidError} /> + {props.settings.encryptionMode === 'WPA2-EAP' && ( + <> + - - props.onSSIDChange(e.target.value)} - isInvalid={!!props.ssidError} - validationMessage={!!props.ssidError && props.ssidError} - /> - - props.onEapIdentityChange(e.target.value)} - isInvalid={!!props.eapIdentityError} - validationMessage={ - !!props.eapIdentityError && props.eapIdentityError - } - /> + props.onEapIdentityChange(e.target.value)} + isInvalid={!!props.eapIdentityError} + validationMessage={ + !!props.eapIdentityError && props.eapIdentityError + } + /> + + )} + {!(props.settings.hidePassword || !props.settings.encryptionMode) && ( { autoCorrect="off" autoCapitalize="none" spellCheck={false} - className={` - ${ - (props.settings.hidePassword || - !props.settings.encryptionMode) && - 'hidden' - } - `} height={ props.settings.portrait && props.settings.password.length > 40 ? '5em' : 'auto' } + marginBottom={5} label={passwordFieldLabel()} placeholder={t('wifi.password.placeholder')} value={props.settings.password} @@ -177,17 +170,21 @@ export const WifiCard = (props) => { isInvalid={!!props.passwordError} validationMessage={!!props.passwordError && props.passwordError} /> - + )} -
- - - - - {t('wifi.tip')} - - - - + + {!props.settings.hideTip && ( + <> +
+ + + + + {t('wifi.tip')} + + + + )} + ); }; diff --git a/src/components/style.css b/src/components/style.css index 5275770..10eac9b 100644 --- a/src/components/style.css +++ b/src/components/style.css @@ -3,21 +3,25 @@ src: url(./SourceSerif4-Semibold.otf); } -#print-area { +.card-print { border-color: #aaa; margin-bottom: 1em; margin-top: 2em; padding: 1em; } +#print-area { + display: none; +} + .details { display: flex; align-items: center; } .qrcode { - margin-bottom: 1em; max-width: 175px; + padding: 1em; } .hidden { @@ -64,13 +68,21 @@ button { #print-area * { visibility: visible; } - #print-area { - border-style: dashed; - box-shadow: none; - } #print-area { position: absolute; left: 0; top: 0; + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + row-gap: 0em; + } + .card-print { + border-style: dashed; + box-shadow: none; + margin-bottom: 0; + margin-top: 0; + break-inside: avoid; + page-break-inside: avoid; } } diff --git a/src/translations.js b/src/translations.js index d2c0a89..d3dd9af 100644 --- a/src/translations.js +++ b/src/translations.js @@ -14,6 +14,8 @@ export const Translations = [ 'wifi.login': 'WiFi Login', 'wifi.name': 'Network name', 'wifi.name.hiddenSSID': 'Hidden SSID', + 'cards.additional': 'Additional cards to print', + 'cards.tip.hide': 'Hide tip (legend)', 'wifi.name.placeholder': 'WiFi Network name', 'wifi.password': 'Password', 'wifi.password.placeholder': 'Password', -- cgit v1.2.3