ProductBarcode: improve readability on CreateModal

This commit is contained in:
Crumb Owl
2025-07-14 21:28:40 +00:00
parent aa7658b0d4
commit 895063fa36
3 changed files with 36 additions and 34 deletions

View File

@@ -2,7 +2,10 @@
<Dialog v-if="isDesktop" :dialog-id="dialogId"> <Dialog v-if="isDesktop" :dialog-id="dialogId">
<DialogScrollContent> <DialogScrollContent>
<DialogHeader> <DialogHeader>
<DialogTitle>{{ title }}</DialogTitle> <div class="flex items-center justify-items-center justify-between mr-4">
<DialogTitle>{{ title }}</DialogTitle>
<slot name="header-actions"/>
</div>
</DialogHeader> </DialogHeader>
<slot /> <slot />
@@ -29,6 +32,9 @@
<DrawerHeader> <DrawerHeader>
<DrawerTitle>{{ title }}</DrawerTitle> <DrawerTitle>{{ title }}</DrawerTitle>
</DrawerHeader> </DrawerHeader>
<div class="flex justify-center">
<slot name="header-actions" />
</div>
<div class="m-2 overflow-y-auto p-2"> <div class="m-2 overflow-y-auto p-2">
<slot /> <slot />

View File

@@ -1,36 +1,33 @@
<template> <template>
<BaseModal :dialog-id="DialogID.CreateItem" :title="$t('components.item.create_modal.title')"> <BaseModal :dialog-id="DialogID.CreateItem" :title="$t('components.item.create_modal.title')">
<div class="flex flex-row-reverse"> <template v-slot:header-actions>
<TooltipProvider :delay-duration="0"> <div class="flex flex-end">
<ButtonGroup> <TooltipProvider :delay-duration="0">
<Tooltip> <ButtonGroup>
<TooltipTrigger> <Tooltip>
<Button variant="outline" :disabled="loading" data-pos="start" @click="openBarcodeDialog()"> <TooltipTrigger>
<MdiBarcode class="size-5" /> <Button variant="outline" :disabled="loading" data-pos="start" @click="openQrScannerPage()">
</Button> <MdiBarcodeScan class="size-5" />
</TooltipTrigger> </Button>
<TooltipContent> </TooltipTrigger>
<p>{{ $t("components.item.create_modal.product_tooltip_input_barcode") }}</p> <TooltipContent>
</TooltipContent> <p>{{ $t("components.item.create_modal.product_tooltip_scan_barcode") }}</p>
</Tooltip> </TooltipContent>
<Tooltip> </Tooltip>
<TooltipTrigger> <Tooltip>
<Button variant="outline" :disabled="loading" data-pos="end" @click="openQrScannerPage()"> <TooltipTrigger>
<MdiBarcodeScan class="size-5" /> <Button variant="outline" :disabled="loading" data-pos="end" @click="openBarcodeDialog()">
</Button> <MdiBarcode class="size-5" />
</TooltipTrigger> </Button>
<TooltipContent> </TooltipTrigger>
<p>{{ $t("components.item.create_modal.product_tooltip_scan_barcode") }}</p> <TooltipContent>
</TooltipContent> <p>{{ $t("components.item.create_modal.product_tooltip_input_barcode") }}</p>
</Tooltip> </TooltipContent>
</ButtonGroup> </Tooltip>
</TooltipProvider> </ButtonGroup>
<div class="mx-2 flex items-center justify-center"> </TooltipProvider>
{{ $t("components.item.create_modal.product_autofill") }}
</div> </div>
</div> </template>
<div class="border-t" />
<form class="flex flex-col gap-2" @submit.prevent="create()"> <form class="flex flex-col gap-2" @submit.prevent="create()">
<LocationSelector v-model="form.location" /> <LocationSelector v-model="form.location" />

View File

@@ -100,9 +100,8 @@
"item_photo": "Item Photo 📷", "item_photo": "Item Photo 📷",
"item_quantity": "Item Quantity", "item_quantity": "Item Quantity",
"parent_item": "Parent Item", "parent_item": "Parent Item",
"product_autofill": "Product autofill:", "product_tooltip_input_barcode": "Autofill with a manually provided barcode",
"product_tooltip_input_barcode": "Manually input barcode", "product_tooltip_scan_barcode": "Autofill with a barcode from 📷",
"product_tooltip_scan_barcode": "Scan barcode with 📷",
"rotate_photo": "Rotate photo", "rotate_photo": "Rotate photo",
"set_as_primary_photo": "Set as { isPrimary, select, true {non-} false {} other {}}primary photo", "set_as_primary_photo": "Set as { isPrimary, select, true {non-} false {} other {}}primary photo",
"title": "Create Item", "title": "Create Item",