Improve color selector

This commit is contained in:
Marvin Sextro 2021-07-29 00:02:51 +02:00
parent 11d739b473
commit 4b65d82f74
6 changed files with 71 additions and 82 deletions

View File

@ -1,34 +0,0 @@
import React, {useState} from 'react'
import {RadioGroup} from '@headlessui/react'
import ColorOption from "./color_selector/ColorOption";
import {COLORS} from "../src/colors";
interface ColorSelectorProps {
initialValue: COLORS,
onChange(value: COLORS): void;
}
function ColorSelector(props: ColorSelectorProps): JSX.Element {
let [color, setColor] = useState(props.initialValue)
return (
<RadioGroup<"div", COLORS> className="flex items-center flex-wrap" value={color}
onChange={function (value) {
setColor(value);
props.onChange(value);
}}>
<ColorOption color={COLORS.WHITE}/>
<ColorOption color={COLORS.BLACK}/>
<ColorOption color={COLORS.GREY}/>
<ColorOption color={COLORS.GREEN}/>
<ColorOption color={COLORS.INDIGO}/>
<ColorOption color={COLORS.BLUE}/>
<ColorOption color={COLORS.PURPLE}/>
<ColorOption color={COLORS.TEAL}/>
</RadioGroup>
)
}
export default ColorSelector

45
components/Colors.tsx Normal file
View File

@ -0,0 +1,45 @@
import React, {useState} from 'react'
import {RadioGroup} from '@headlessui/react'
import {COLORS, rgbToHex} from "../src/colors";
interface ColorsProps {
initialValue: COLORS,
onChange(value: COLORS): void;
}
function Colors(props: ColorsProps): JSX.Element {
let [color, setColor] = useState(props.initialValue)
return (
<RadioGroup<"div", COLORS>
className="flex flex-wrap" value={color}
onChange={function (value) {
setColor(value);
props.onChange(value);
}
}>
{Object.values(COLORS).map((color) => {
return (
<RadioGroup.Option value={color} key={color} className="outline-none">
{({checked}) => (
<div
key={color}
className={`${color !== COLORS.WHITE ? 'ring-white' : 'ring-black'} ring-2 shadow-xl cursor-pointer rounded-md w-10 h-10 flex items-center justify-center m-2`}
style={{backgroundColor: rgbToHex(color), WebkitAppearance: 'none'}}
>
{checked &&
<svg className={`${color !== COLORS.WHITE ? 'text-white' : 'text-black'} h-6 w-6`} fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M5 13l4 4L19 7"/>
</svg>
}
</div>
)}
</RadioGroup.Option>
)
})}
</RadioGroup>
)
}
export default Colors;

View File

@ -11,8 +11,8 @@ import Check from './Check';
import {PayloadBody} from "../src/payload"; import {PayloadBody} from "../src/payload";
import {getPayloadBodyFromFile, getPayloadBodyFromQR} from "../src/process"; import {getPayloadBodyFromFile, getPayloadBodyFromQR} from "../src/process";
import {PassData} from "../src/pass"; import {PassData} from "../src/pass";
import ColorSelector from "./ColorSelector";
import {COLORS} from "../src/colors"; import {COLORS} from "../src/colors";
import Colors from './Colors';
function Form(): JSX.Element { function Form(): JSX.Element {
const {t} = useTranslation(['index', 'errors', 'common']); const {t} = useTranslation(['index', 'errors', 'common']);
@ -213,7 +213,7 @@ function Form(): JSX.Element {
<div className="space-y-5"> <div className="space-y-5">
<p>{t('index:pickColorDescription')}</p> <p>{t('index:pickColorDescription')}</p>
<div className="relative inline-block w-full"> <div className="relative inline-block w-full">
<ColorSelector onChange={setSelectedColor} initialValue={selectedColor}/> <Colors onChange={setSelectedColor} initialValue={selectedColor}/>
</div> </div>
</div> </div>
}/> }/>
@ -235,7 +235,7 @@ function Form(): JSX.Element {
</ul> </ul>
</div> </div>
<label htmlFor="privacy" className="flex flex-row space-x-4 items-center"> <label htmlFor="privacy" className="flex flex-row space-x-4 items-center">
<input type="checkbox" id="privacy" value="privacy" required className="h-4 w-4"/> <input type="checkbox" id="privacy" value="privacy" required className="h-5 w-5 outline-none"/>
<p> <p>
{t('index:iAcceptThe')}&nbsp; {t('index:iAcceptThe')}&nbsp;
<Link href="/privacy"> <Link href="/privacy">
@ -247,11 +247,11 @@ function Form(): JSX.Element {
</label> </label>
<div className="flex flex-row items-center justify-start"> <div className="flex flex-row items-center justify-start">
<button id="download" type="submit" <button id="download" type="submit"
className="focus:outline-none bg-green-600 py-2 px-3 text-white font-semibold rounded-md disabled:bg-gray-400"> className="focus:outline-none bg-green-600 py-2 px-3 mt-2 text-white font-semibold rounded-md disabled:bg-gray-400">
{t('index:addToWallet')} {t('index:addToWallet')}
</button> </button>
<div id="spin" className={loading ? undefined : "hidden"}> <div id="spin" className={loading ? undefined : "hidden"}>
<svg className="animate-spin h-5 w-5 ml-3" viewBox="0 0 24 24"> <svg className="animate-spin h-5 w-5 ml-4" viewBox="0 0 24 24">
<circle className="opacity-0" cx="12" cy="12" r="10" stroke="currentColor" <circle className="opacity-0" cx="12" cy="12" r="10" stroke="currentColor"
strokeWidth="4"/> strokeWidth="4"/>
<path className="opacity-75" fill="currentColor" <path className="opacity-75" fill="currentColor"

View File

@ -1,31 +0,0 @@
import {RadioGroup} from '@headlessui/react'
import {COLORS, rgbToHex} from "../../src/colors";
interface ColorOptionProps {
color: COLORS,
}
function ColorOption(props: ColorOptionProps): JSX.Element {
let colorIsDark = props.color != COLORS.WHITE;
return (
<RadioGroup.Option
value={props.color}>
{({checked}) => (
<div
className={`${colorIsDark ? 'border-white' : 'border-black'} border-2 cursor-pointer rounded-full w-9 h-9 flex items-center justify-center m-1`}
style={{backgroundColor: rgbToHex(props.color)}}>
{checked &&
<svg className={`${colorIsDark ? 'text-white' : 'text-black'} h-5 w-5`} fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"/>
</svg>
}
</div>
)}
</RadioGroup.Option>
)
}
export default ColorOption

View File

@ -1,12 +1,21 @@
// Accessible colors from https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color
export enum COLORS { export enum COLORS {
WHITE = 'rgb(255, 255, 255)', WHITE = 'rgb(255, 255, 255)',
BLACK = 'rgb(0, 0, 0)', BLACK = 'rgb(0, 0, 0)',
GREY = 'rgb(33, 33, 33)', GREY = 'rgb(36, 36, 38)',
GREEN = 'rgb(27, 94, 32)', BLUE = 'rgb(0, 64, 221)',
INDIGO = 'rgb(26, 35, 126)', BROWN = 'rgb(127, 101, 69)',
BLUE = 'rgb(1, 87, 155)', CYAN = 'rgb(0, 113, 164)',
PURPLE = 'rgb(74, 20, 140)', GREEN = 'rgb(36, 138, 61)',
TEAL = 'rgb(0, 77, 64)', INDIGO = 'rgb(54, 52, 163)',
MINT = 'rgb(12, 129, 123)',
ORANGE = 'rgb(201, 52, 0)',
PINK = 'rgb(211, 15, 69)',
PURPLE = 'rgb(137, 68, 171)',
RED = 'rgb(215, 0, 21)',
TEAL = 'rgb(0, 130, 153)',
YELLOW = 'rgb(178, 80, 0)'
} }
export function rgbToHex(rgbString: string) { export function rgbToHex(rgbString: string) {

View File

@ -3,9 +3,9 @@ import {Constants} from "./constants";
import {COLORS} from "./colors"; import {COLORS} from "./colors";
enum CertificateType { enum CertificateType {
Vaccine = 'Vaccine', Vaccination = 'Vaccination Card',
Test = 'Test', Test = 'Test Certificate',
Recovery = 'Recovery', Recovery = 'Recovery Certificate',
} }
enum TextAlignment { enum TextAlignment {
@ -90,7 +90,7 @@ export class Payload {
// Set certificate type and properties // Set certificate type and properties
if (covidCertificate['v'] !== undefined) { if (covidCertificate['v'] !== undefined) {
this.certificateType = CertificateType.Vaccine; this.certificateType = CertificateType.Vaccination;
properties = covidCertificate['v'][0]; properties = covidCertificate['v'][0];
} }
if (covidCertificate['t'] !== undefined) { if (covidCertificate['t'] !== undefined) {
@ -121,7 +121,7 @@ export class Payload {
{ {
key: "type", key: "type",
label: "EU Digital COVID", label: "EU Digital COVID",
value: this.certificateType + " Certificate" value: this.certificateType
} }
], ],
primaryFields: [ primaryFields: [
@ -162,7 +162,7 @@ export class Payload {
static fillPassData(type: CertificateType, data: PassDictionary, properties: Object, valueSets: ValueSets, country: string, dateOfBirth: string): PassDictionary { static fillPassData(type: CertificateType, data: PassDictionary, properties: Object, valueSets: ValueSets, country: string, dateOfBirth: string): PassDictionary {
switch (type) { switch (type) {
case CertificateType.Vaccine: case CertificateType.Vaccination:
const dose = `${properties['dn']}/${properties['sd']}`; const dose = `${properties['dn']}/${properties['sd']}`;
const dateOfVaccination = properties['dt']; const dateOfVaccination = properties['dt'];
const medialProductKey = properties['mp']; const medialProductKey = properties['mp'];