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

UI fixes: identical headers, panel styling, view toggle icons, sync map view
All checks were successful
Build Docker Image / build (push) Successful in 3m20s
Details

Browse Source 
- Show mode toggle on all pages (not just catalog)
- Panel background base-300, top-20 spacing from navbar
- View toggle with colored icons in circles
- Sync mapViewMode when selecting (supplier chip -> suppliers view)
This commit is contained in:
Ruslan Bakiev
2026-01-23 10:25:33 +07:00
parent c7054579f1
commit 4c6f5abd78
3 changed files with 45 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
app/components/page/CatalogPage.vue
View File

@@ -29,27 +29,36 @@
</div>
<!-- View toggle (top RIGHT overlay) - works in both modes -->
<div class="absolute top-4 right-4 z-20 hidden lg:block">
<div class="join bg-white/95 backdrop-blur shadow-lg rounded-lg">
<div class="absolute top-20 right-4 z-20 hidden lg:block">
<div class="join bg-base-100/95 backdrop-blur shadow-lg rounded-lg">
<button
class="btn btn-sm join-item"
class="btn btn-sm join-item gap-2"
:class="{ 'btn-active': mapViewMode === 'offers' }"
@click="setMapViewMode('offers')"
>
<span class="w-5 h-5 rounded-full flex items-center justify-center" style="background-color: #f97316">
<Icon name="lucide:shopping-bag" size="12" class="text-white" />
</span>
{{ $t('catalog.views.offers') }}
</button>
<button
class="btn btn-sm join-item"
class="btn btn-sm join-item gap-2"
:class="{ 'btn-active': mapViewMode === 'hubs' }"
@click="setMapViewMode('hubs')"
>
<span class="w-5 h-5 rounded-full flex items-center justify-center" style="background-color: #22c55e">
<Icon name="lucide:warehouse" size="12" class="text-white" />
</span>
{{ $t('catalog.views.hubs') }}
</button>
<button
class="btn btn-sm join-item"
class="btn btn-sm join-item gap-2"
:class="{ 'btn-active': mapViewMode === 'suppliers' }"
@click="setMapViewMode('suppliers')"
>
<span class="w-5 h-5 rounded-full flex items-center justify-center" style="background-color: #3b82f6">
<Icon name="lucide:factory" size="12" class="text-white" />
</span>
{{ $t('catalog.views.suppliers') }}
</button>
</div>
@@ -58,9 +67,9 @@
<!-- Left overlay panel (shown when showPanel is true) -->
<div
v-if="showPanel"
class="absolute top-4 left-4 bottom-4 z-10 w-96 max-w-[calc(100vw-2rem)] hidden lg:block"
class="absolute top-20 left-4 bottom-4 z-10 w-96 max-w-[calc(100vw-2rem)] hidden lg:block"
>
<div class="bg-white/95 backdrop-blur rounded-xl shadow-lg p-4 h-full overflow-hidden flex flex-col">
<div class="bg-base-300/95 backdrop-blur rounded-xl shadow-lg p-4 h-full overflow-hidden flex flex-col">
<slot name="panel" />
</div>
</div>
@@ -69,27 +78,33 @@
<div class="lg:hidden absolute bottom-0 left-0 right-0 z-20">
<!-- Mobile view toggle -->
<div class="flex justify-end px-4 mb-2">
<div class="join bg-white/95 backdrop-blur shadow-lg rounded-lg">
<div class="join bg-base-100/95 backdrop-blur shadow-lg rounded-lg">
<button
class="btn btn-xs join-item"
class="btn btn-xs join-item gap-1"
:class="{ 'btn-active': mapViewMode === 'offers' }"
@click="setMapViewMode('offers')"
>
{{ $t('catalog.views.offers') }}
<span class="w-4 h-4 rounded-full flex items-center justify-center" style="background-color: #f97316">
<Icon name="lucide:shopping-bag" size="10" class="text-white" />
</span>
</button>
<button
class="btn btn-xs join-item"
class="btn btn-xs join-item gap-1"
:class="{ 'btn-active': mapViewMode === 'hubs' }"
@click="setMapViewMode('hubs')"
>
{{ $t('catalog.views.hubs') }}
<span class="w-4 h-4 rounded-full flex items-center justify-center" style="background-color: #22c55e">
<Icon name="lucide:warehouse" size="10" class="text-white" />
</span>
</button>
<button
class="btn btn-xs join-item"
class="btn btn-xs join-item gap-1"
:class="{ 'btn-active': mapViewMode === 'suppliers' }"
@click="setMapViewMode('suppliers')"
>
{{ $t('catalog.views.suppliers') }}
<span class="w-4 h-4 rounded-full flex items-center justify-center" style="background-color: #3b82f6">
<Icon name="lucide:factory" size="10" class="text-white" />
</span>
</button>
</div>
</div>
@@ -97,7 +112,7 @@
<!-- Mobile panel (collapsible) - only when showPanel is true -->
<div
v-if="showPanel"
class="bg-white/95 backdrop-blur rounded-t-xl shadow-lg transition-all duration-300"
class="bg-base-300/95 backdrop-blur rounded-t-xl shadow-lg transition-all duration-300"
:class="mobilePanelExpanded ? 'h-[60vh]' : 'h-auto'"
>
<!-- Drag handle -->

2
app/layouts/topnav.vue
View File

@@ -21,7 +21,7 @@
:hub-label="hubLabel"
:quantity="quantity"
:can-search="canSearch"
:show-mode-toggle="isCatalogSection"
:show-mode-toggle="true"
@toggle-theme="toggleTheme"
@set-catalog-mode="setCatalogMode"
@sign-out="onClickSignOut"

18
app/pages/catalog/index.vue
View File

@@ -54,6 +54,7 @@ const {
hubId,
canSearch,
mapViewMode,
setMapViewMode,
entityColors,
selectItem,
cancelSelect,
@@ -73,11 +74,20 @@ const selectionLoading = computed(() => {
return false
})
// Initialize data when selectMode changes
// Initialize data and sync map view when selectMode changes
watch(selectMode, async (mode) => {
if (mode === 'product') await initProducts()
if (mode === 'hub') await initHubs()
if (mode === 'supplier') await initSuppliers()
if (mode === 'product') {
await initProducts()
setMapViewMode('offers')
}
if (mode === 'hub') {
await initHubs()
setMapViewMode('hubs')
}
if (mode === 'supplier') {
await initSuppliers()
setMapViewMode('suppliers')
}
}, { immediate: true })
// Offers data for quote results