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

Restyle InfoPanel to match SelectionPanel (dark glass styling)
Some checks failed
Build Docker Image / build (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-01-26 15:52:16 +07:00
parent a569942e24
commit 8354102895
1 changed files with 127 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,8 @@
<template>
<MapPanel>
<template #header>
<div class="flex items-center justify-between mb-2">
<div class="flex flex-col h-full">
<!-- Header -->
<div class="flex-shrink-0 p-4 border-b border-white/10">
<div class="flex items-center justify-between mb-3">
<div class="flex items-center gap-2">
<div
class="flex items-center justify-center w-6 h-6 rounded-full"
@@ -9,26 +10,25 @@
>
<Icon :name="entityIcon" size="14" class="text-white" />
</div>
<h3 class="font-semibold text-base text-base-content">{{ entityName }}</h3>
<h3 class="font-semibold text-base text-white">{{ entityName }}</h3>
</div>
<button
class="btn btn-ghost btn-xs btn-circle text-base-content/60 hover:text-base-content"
@click="emit('close')"
>
<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>
</template>
</div>
<!-- Content (scrollable) -->
<div class="flex-1 overflow-y-auto p-4">
<!-- Loading state -->
<div v-if="loading" class="flex items-center justify-center py-8">
<span class="loading loading-spinner loading-md" />
<span class="loading loading-spinner loading-md text-white" />
</div>
<!-- Content -->
<div v-else-if="entity" class="flex flex-col gap-4">
<!-- Entity details card -->
<div class="mb-2">
<div>
<HubCard v-if="entityType === 'hub'" :hub="entity" />
<SupplierCard v-else-if="entityType === 'supplier'" :supplier="entity" />
<OfferCard v-else-if="entityType === 'offer'" :offer="entity" compact />
@@ -40,17 +40,17 @@
v-for="tab in availableTabs"
:key="tab.id"
role="tab"
class="tab"
:class="{ 'tab-active': currentTab === tab.id }"
class="tab text-white/70"
:class="{ 'tab-active !text-white !bg-white/20': currentTab === tab.id }"
@click="currentTab = tab.id"
>
{{ tab.label }}
<span v-if="tab.count" class="ml-1 opacity-70">({{ tab.count }})</span>
<span v-if="tab.count !== undefined" class="ml-1 opacity-70">({{ tab.count }})</span>
</a>
</div>
<!-- Tab content -->
<div class="flex flex-col gap-2 min-h-[200px]">
<div class="flex flex-col gap-2">
<!-- Products tab (only for Offer entity) -->
<div v-if="currentTab === 'products' && entityType === 'offer'">
<div v-if="relatedProducts.length === 0" class="text-center py-8 text-white/60">
@@ -162,12 +162,13 @@
</div>
<!-- Add to filter button -->
<button class="btn btn-primary btn-sm mt-2" @click="emit('add-to-filter')">
<button class="btn btn-primary btn-sm" @click="emit('add-to-filter')">
<Icon name="lucide:filter-plus" size="16" />
{{ $t('catalog.info.addToFilter') }}
</button>
</div>
</MapPanel>
</div>
</div>
</template>
<script setup lang="ts">
@@ -206,10 +207,10 @@ const currentTab = ref<string>('offers')
// Entity name
const entityName = computed(() => {
return props.entity?.name || props.entityId.slice(0, 8) + '...'
return props.entity?.name || props.entity?.productName || props.entityId.slice(0, 8) + '...'
})
// Badge color and label
// Badge color
const badgeColor = computed(() => {
if (props.entityType === 'hub') return entityColors.hub
if (props.entityType === 'supplier') return entityColors.supplier
@@ -217,13 +218,6 @@ const badgeColor = computed(() => {
return '#666'
})
const badgeLabel = computed(() => {
if (props.entityType === 'hub') return t('catalog.entities.hub')
if (props.entityType === 'supplier') return t('catalog.entities.supplier')
if (props.entityType === 'offer') return t('catalog.entities.offer')
return ''
})
const entityIcon = computed(() => {
if (props.entityType === 'hub') return 'lucide:warehouse'
if (props.entityType === 'supplier') return 'lucide:factory'