Skip to content

Commit

Permalink
qr-generator: Group the advanced settings under collapsed stack
Browse files Browse the repository at this point in the history
  • Loading branch information
@eliandoran
eliandoran committed Jul 10, 2024
1 parent b440eac commit 8c8a00a
Show file tree
Hide file tree
Showing 3 changed files with 105 additions and 98 deletions.
36 changes: 16 additions & 20 deletions src/lib/components/stack-view.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
import ChevronUp from "svelte-material-icons/ChevronUp.svelte"
import ChevronDown from "svelte-material-icons/ChevronDown.svelte"
export let title;
export let title = null;
export let hasPadding = true;
export let isCollapsible = true;
export let isCompact = false;
Expand All @@ -16,18 +16,20 @@
}
</script>

<header class="app-header"
class:compact={isCompact}
class:collapsed={!isExpanded}>
<slot name="header-left" />
<h2>{title}</h2>
<slot name="header-right" />
{#if isCollapsible}
<HeaderButton on:click={toggleCollapse}>
<Icon icon={ isExpanded ? ChevronUp : ChevronDown } />
</HeaderButton>
{/if}
</header>
{#if title}
<header class="app-header"
class:compact={isCompact}
class:collapsed={!isExpanded}>
<slot name="header-left" />
<h2>{title}</h2>
<slot name="header-right" />
{#if isCollapsible}
<HeaderButton on:click={toggleCollapse}>
<Icon icon={ isExpanded ? ChevronUp : ChevronDown } />
</HeaderButton>
{/if}
</header>
{/if}

<div class="inner-wrapper"
class:padding={hasPadding}
Expand All @@ -50,24 +52,18 @@
.inner-wrapper {
position: relative;
max-height: none;
display: flex;
flex-direction: column;
overflow: auto;
flex-shrink: 0;
max-height: 100%;
transition: max-height 250ms ease-in-out;
}
.inner-wrapper.fill {
height: 100%;
flex-grow: 1;
flex-shrink: unset;
}
.inner-wrapper.collapsed {
max-height: 0;
overflow: hidden;
box-sizing: border-box;
display: none;
}
.inner-wrapper.padding {
Expand Down
7 changes: 5 additions & 2 deletions src/routes/json-schema/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,8 +117,11 @@

<style>
.textarea-wrapper {
position: relative;
flex-grow: 1;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.output p {
Expand Down
160 changes: 84 additions & 76 deletions src/routes/qr-generator/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
import FileCodeOutline from "svelte-material-icons/FileCodeOutline.svelte";
import FilePngBox from "svelte-material-icons/FilePngBox.svelte";
import FileJpgBox from "svelte-material-icons/FileJpgBox.svelte";
import StackView from "$lib/components/stack-view.svelte";
let errorMessage = "";
let data = "https://eliandoran.github.io/toolkit/";
Expand Down Expand Up @@ -78,80 +79,82 @@
</script>

<Tool>
<TwoColumnView leftTitle="QR code settings" rightTitle="QR code preview" hasRightPadding={false}>
<div slot="left">
<TwoColumnView leftTitle="QR code settings" rightTitle="QR code preview" hasPadding={false}>
<div slot="left" class="fill-to-parent">
<WarningBox message={errorMessage} />

<Card title="Data" noPadding>
<TextArea bind:value={data} borderless />
</Card>

<Card title="Size" thin>
<div class="columns size-options">
<InputField label="Width">
<input type="number" bind:value={width} />px
</InputField>

<InputField label="Height">
<input type="number" bind:value={height} />px
</InputField>

<InputField label="Padding">
<input type="number" bind:value={padding} min="1" /> module(s)
</InputField>
</div>
</Card>

<Card title="Shape" thin>
<div>
Shape:

<label>
<input type="radio" bind:group={shape} value="square" />
Square
</label>

<StackView fill>
<Card title="Data" noPadding>
<TextArea bind:value={data} borderless />
</Card>

<Card title="Size" thin>
<div class="columns size-options">
<InputField label="Width">
<input type="number" bind:value={width} />px
</InputField>

<InputField label="Height">
<input type="number" bind:value={height} />px
</InputField>

<InputField label="Padding">
<input type="number" bind:value={padding} min="1" /> module(s)
</InputField>
</div>
</Card>

<label>
<input type="radio" bind:group={shape} value="circle" />
Circle
</label>
</div>

<div>
<label>
<input type="checkbox" bind:checked={haveBackgroundRoundedEdges} />
Background with rounded edges
</label>

<label>
<input type="checkbox" bind:checked={haveGappedModules} />
Gapped modules
</label>
</div>
</Card>

<Card title="Colors" thin>
<div class="color-options">
<InputField label="Background">
<input type="color" bind:value={backgroundColor} />
</InputField>

<InputField label="Modules">
<input type="color" bind:value={modulesColor} />
</InputField>

<InputField label="Anchors outer">
<input type="color" bind:value={anchorsOuterColor} />
</InputField>

<InputField label="Anchors inner">
<input type="color" bind:value={anchorsInnerColor} />
</InputField>
</div>
</Card>

<Card title="Advanced settings" thin>
<InputField label="Error correction level" noLabelWrapping>
<Card title="Shape" thin>
<div>
Shape:

<label>
<input type="radio" bind:group={shape} value="square" />
Square
</label>

<label>
<input type="radio" bind:group={shape} value="circle" />
Circle
</label>
</div>

<div>
<label>
<input type="checkbox" bind:checked={haveBackgroundRoundedEdges} />
Background with rounded edges
</label>

<label>
<input type="checkbox" bind:checked={haveGappedModules} />
Gapped modules
</label>
</div>
</Card>

<Card title="Colors" thin>
<div class="color-options">
<InputField label="Background">
<input type="color" bind:value={backgroundColor} />
</InputField>

<InputField label="Modules">
<input type="color" bind:value={modulesColor} />
</InputField>

<InputField label="Anchors outer">
<input type="color" bind:value={anchorsOuterColor} />
</InputField>

<InputField label="Anchors inner">
<input type="color" bind:value={anchorsInnerColor} />
</InputField>
</div>
</Card>
</StackView>

<StackView title="Advanced settings" isExpanded={false} isCompact>
<Card title="Error correction level" thin>
<label>
<input type="radio" bind:group={errorCorrectionLevel} value="L" />
L (~7%)
Expand All @@ -171,12 +174,12 @@
<input type="radio" bind:group={errorCorrectionLevel} value="H" />
H (~30%)
</label>
</InputField>
</Card>

<InputField label="Type">
<Card title="Type" thin>
<input type="number" min="0" max="40" bind:value={typeNumber} />
</InputField>
</Card>
</Card>
</StackView>
</div>

<div slot="right">
Expand Down Expand Up @@ -258,6 +261,11 @@
</Tool>

<style>
[slot="left"] {
display: flex;
flex-direction: column;
}
.columns {
display: flex;
}
Expand Down

0 comments on commit 8c8a00a

Please sign in to comment.