rappli
/
rappli
1
1
Fork 0
Code Issues 16 Pull Requests Releases Activity

feat: collapse overlay on small devices

Browse Source
master
Katja Lutz 2 years ago
parent d294c100c6
commit 994e5d8163
1 changed files with 615 additions and 567 deletions
Show Stats Download Patch File Download Diff File

76
src/components/Settings/Overlay.tsx
Unescape Escape View File

@ -224,9 +224,19 @@ const SettingsOverlay: Component = () => {
document.removeEventListener("keydown", saveOnCtrlS);
});
const AccordionItemLabel: FlowComponent = (props) => (
<span class="overflow-hidden whitespace-nowrap hidden xxl:inline-flex group-hover:inline-flex group-focus-within:inline-flex gap-2">
{props.children}
</span>
);
const AccordionContent: FlowComponent = (props) => (
<div class="min-w-[300px]">{props.children}</div>
);
return (
<>
<div class="print:hidden hidden lg:grid bg-white z-50 h-full fixed xxl:h-auto xxl:relative left-0 w-[480px] grid-rows-[1fr_auto] gap-4 p-3 transition-all shadow-none hover:shadow-2xl focus-within:shadow-2xl -translate-x-72 opacity-70 hover:opacity-100 focus-within:opacity-100 xxl:opacity-100 xxl:-translate-x-0 hover:translate-x-0 focus-within:translate-x-0 ">
<div class="group print:hidden hidden lg:grid bg-white z-50 h-full fixed xxl:h-auto xxl:relative left-0 xxl:w-[480px] grid-rows-[1fr_auto] gap-4 p-1 xxl:p-3 transition-all shadow hover:shadow-2xl focus-within:shadow-2xl outline outline-1 outline-slate-700/10 w-24 hover:w-[480px] focus-within:w-[480px]">
<div class="overflow-y-scroll">
<AccordionItem
item={0}
@ -234,14 +244,17 @@ const SettingsOverlay: Component = () => {
label={
<>
<ProjectIcon />
Dokument
<AccordionItemLabel>Dokument</AccordionItemLabel>
<Show when={!documentDataForm.valid}>
<AccordionItemLabel>
<WarningIcon class="text-error" />
</AccordionItemLabel>
</Show>
</>
}
>
{/* TODO: Add option for item price decimals */}
<AccordionContent>
<DocumentValidationContext>
<AccordionItemGrid>
<FullWidthAccordionInput
@ -259,7 +272,11 @@ const SettingsOverlay: Component = () => {
label="Bestellungs Nr."
value={state.project.orderNumber}
onInput={(evt) =>
setState("project", "orderNumber", evt.currentTarget.value)
setState(
"project",
"orderNumber",
evt.currentTarget.value
)
}
/>
<div class="col-span-2">
@ -288,7 +305,9 @@ const SettingsOverlay: Component = () => {
labelMinWidth={fullWidthLabelWidth}
label="Lieferdatum"
value={state.project.deliveryDate}
onInput={(v: any) => setState("project", "deliveryDate", v)}
onInput={(v: any) =>
setState("project", "deliveryDate", v)
}
/>
</div>
<div class="col-span-2">
@ -358,7 +377,11 @@ const SettingsOverlay: Component = () => {
labelSuffixJsx={<MarkdownHelpLabel />}
value={state.project.conclusion}
onInput={(evt) =>
setState("project", "conclusion", evt.currentTarget.value)
setState(
"project",
"conclusion",
evt.currentTarget.value
)
}
/>
</div>
@ -465,7 +488,9 @@ const SettingsOverlay: Component = () => {
<span>|</span>
<span>|</span>
<span>
<div class="absolute text-right right-0">Gross</div>
<div class="absolute text-right right-0">
Gross
</div>
&nbsp;
</span>
</div>
@ -475,6 +500,7 @@ const SettingsOverlay: Component = () => {
</div>
</AccordionItemGrid>
</DocumentValidationContext>
</AccordionContent>
</AccordionItem>
<AccordionItem
item={1}
@ -482,13 +508,16 @@ const SettingsOverlay: Component = () => {
label={
<>
<YouIcon />
Deine Angaben
<AccordionItemLabel>Deine Angaben</AccordionItemLabel>
<Show when={!yourDataForm.valid}>
<AccordionItemLabel>
<WarningIcon class="text-error" />
</AccordionItemLabel>
</Show>
</>
}
>
<AccordionContent>
<YourDataValidationContext>
<AccordionItemDivider>Bank Verbindung</AccordionItemDivider>
<AccordionItemGrid>
@ -520,7 +549,10 @@ const SettingsOverlay: Component = () => {
type="checkbox"
checked={localState.useCustomAddress}
onChange={(evt) =>
setLocalState("useCustomAddress", evt.currentTarget.checked)
setLocalState(
"useCustomAddress",
evt.currentTarget.checked
)
}
/>
</AccordionItemDivider>
@ -646,19 +678,24 @@ const SettingsOverlay: Component = () => {
</div>
</AccordionItemGrid>
</YourDataValidationContext>
</AccordionContent>
</AccordionItem>
<AccordionItem
item={2}
activeTitleColor="text-emerald-500"
label={
<>
<CustomerIcon /> Kunde
<CustomerIcon />
<AccordionItemLabel>Kunde</AccordionItemLabel>
<Show when={!customerDataForm.valid}>
<AccordionItemLabel>
<WarningIcon class="text-error" />
</AccordionItemLabel>
</Show>
</>
}
>
<AccordionContent>
<CustomerValidationContext>
<AccordionItemDivider>Bank Verbindung</AccordionItemDivider>
<AccordionItemGrid>
@ -717,6 +754,7 @@ const SettingsOverlay: Component = () => {
/>
</AccordionItemGrid>
</CustomerValidationContext>
</AccordionContent>
</AccordionItem>
<AccordionItem
item={3}
@ -724,23 +762,27 @@ const SettingsOverlay: Component = () => {
label={
<>
<PositionsIcon />
Positionen
<small>({state.positions.length})</small>
<AccordionItemLabel>
Positionen <small>({state.positions.length})</small>
</AccordionItemLabel>
</>
}
>
<AccordionContent>
<PositionsSettings />
</AccordionContent>
</AccordionItem>
<AccordionItem
activeTitleColor="text-blue-500"
label={
<>
<DesignIcon />
Design
<AccordionItemLabel>Design</AccordionItemLabel>
</>
}
item={4}
>
<AccordionContent>
<AccordionItemGrid>
<div class="col-span-2">
<Checkbox
@ -766,9 +808,11 @@ const SettingsOverlay: Component = () => {
</Checkbox>
</div>
</AccordionItemGrid>
</AccordionContent>
</AccordionItem>
</div>
<div>
<div class="overflow-hidden transition-opacity opacity-90 group-hover:opacity-100 group-focus-within:opacity-100 xxl:opacity-100">
<AccordionContent>
<div class="grid grid-cols-2 gap-2 mb-4">
<button
class="btn btn-sm btn-accent shadow-md gap-2"
@ -893,7 +937,10 @@ const SettingsOverlay: Component = () => {
}
>
{(type) => (
<option value={type} selected={type === uiState.printType}>
<option
value={type}
selected={type === uiState.printType}
>
{printTypeTitles[type]}
</option>
)}
@ -907,6 +954,7 @@ const SettingsOverlay: Component = () => {
</button>
</div>
</div>
</AccordionContent>
</div>
</div>
<Show when={true}>

Write Preview
Loading…
Cancel
Save