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">
<DialogScrollContent>
<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>
<slot />
@@ -29,6 +32,9 @@
<DrawerHeader>
<DrawerTitle>{{ title }}</DrawerTitle>
</DrawerHeader>
<div class="flex justify-center">
<slot name="header-actions" />
</div>
<div class="m-2 overflow-y-auto p-2">
<slot />

View File

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

View File

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