optovia/webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make pins explicit and selection open info
All checks were successful
Build Docker Image / build (push) Successful in 5m24s
Details

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-02-07 13:56:36 +07:00
parent 2d54dc3283
commit a73a801a1d
4 changed files with 72 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
app/components/catalog/InfoPanel.vue
View File

@@ -12,9 +12,20 @@
</div>
<h3 class="font-semibold text-base text-white">{{ entityName }}</h3>
</div>
<button class="btn btn-ghost btn-xs btn-circle text-white/60 hover:text-white" @click="emit('close')">
<Icon name="lucide:x" size="16" />
</button>
<div class="flex items-center gap-2">
<button
v-if="(entityType === 'hub' || entityType === 'supplier') && entity?.uuid"
class="rounded-full glass-bright border border-white/30 shadow-lg p-1.5 transition-transform hover:scale-105"
@click="emit('pin', entityType, { uuid: entity?.uuid, name: entity?.name })"
aria-label="Pin"
title="Pin"
>
<Icon name="lucide:pin" size="16" class="text-white" />
</button>
<button class="btn btn-ghost btn-xs btn-circle text-white/60 hover:text-white" @click="emit('close')">
<Icon name="lucide:x" size="16" />
</button>
</div>
</div>
</div>
@@ -123,11 +134,12 @@
@select="onProductSelect(product)"
/>
<button
class="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity rounded-full bg-white/10 hover:bg-white/20 p-1"
class="absolute -top-2 -right-2 rounded-full glass-bright border border-white/30 shadow-lg p-1.5 transition-transform hover:scale-105"
@click.stop="emit('pin', 'product', product)"
aria-label="Pin product"
title="Pin"
>
<Icon name="lucide:pin" size="14" class="text-white/80" />
<Icon name="lucide:pin" size="16" class="text-white" />
</button>
</div>
</div>
@@ -197,11 +209,12 @@
@select="onSupplierSelect(supplier)"
/>
<button
class="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity rounded-full bg-white/10 hover:bg-white/20 p-1"
class="absolute -top-2 -right-2 rounded-full glass-bright border border-white/30 shadow-lg p-1.5 transition-transform hover:scale-105"
@click.stop="emit('pin', 'supplier', supplier)"
aria-label="Pin supplier"
title="Pin"
>
<Icon name="lucide:pin" size="14" class="text-white/80" />
<Icon name="lucide:pin" size="16" class="text-white" />
</button>
</div>
</div>
@@ -242,11 +255,12 @@
@select="onHubSelect(hub)"
/>
<button
class="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity rounded-full bg-white/10 hover:bg-white/20 p-1"
class="absolute -top-2 -right-2 rounded-full glass-bright border border-white/30 shadow-lg p-1.5 transition-transform hover:scale-105"
@click.stop="emit('pin', 'hub', hub)"
aria-label="Pin hub"
title="Pin"
>
<Icon name="lucide:pin" size="14" class="text-white/80" />
<Icon name="lucide:pin" size="16" class="text-white" />
</button>
</div>
</div>
@@ -274,11 +288,12 @@
@select="onHubSelect(hub)"
/>
<button
class="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity rounded-full bg-white/10 hover:bg-white/20 p-1"
class="absolute -top-2 -right-2 rounded-full glass-bright border border-white/30 shadow-lg p-1.5 transition-transform hover:scale-105"
@click.stop="emit('pin', 'hub', hub)"
aria-label="Pin hub"
title="Pin"
>
<Icon name="lucide:pin" size="14" class="text-white/80" />
<Icon name="lucide:pin" size="16" class="text-white" />
</button>
</div>
</div>

15
app/components/catalog/SelectionPanel.vue
View File

@@ -38,11 +38,12 @@
@select="onSelect(item)"
/>
<button
class="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity rounded-full bg-white/10 hover:bg-white/20 p-1"
class="absolute -top-2 -right-2 rounded-full glass-bright border border-white/30 shadow-lg p-1.5 transition-transform hover:scale-105"
@click.stop="emit('pin', 'product', item)"
aria-label="Pin product"
title="Pin"
>
<Icon name="lucide:pin" size="14" class="text-white/80" />
<Icon name="lucide:pin" size="16" class="text-white" />
</button>
</div>
</template>
@@ -62,11 +63,12 @@
@select="onSelect(item)"
/>
<button
class="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity rounded-full bg-white/10 hover:bg-white/20 p-1"
class="absolute -top-2 -right-2 rounded-full glass-bright border border-white/30 shadow-lg p-1.5 transition-transform hover:scale-105"
@click.stop="emit('pin', 'hub', item)"
aria-label="Pin hub"
title="Pin"
>
<Icon name="lucide:pin" size="14" class="text-white/80" />
<Icon name="lucide:pin" size="16" class="text-white" />
</button>
</div>
</template>
@@ -86,11 +88,12 @@
@select="onSelect(item)"
/>
<button
class="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity rounded-full bg-white/10 hover:bg-white/20 p-1"
class="absolute -top-2 -right-2 rounded-full glass-bright border border-white/30 shadow-lg p-1.5 transition-transform hover:scale-105"
@click.stop="emit('pin', 'supplier', item)"
aria-label="Pin supplier"
title="Pin"
>
<Icon name="lucide:pin" size="14" class="text-white/80" />
<Icon name="lucide:pin" size="16" class="text-white" />
</button>
</div>
</template>