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

Add unified icon system to navigation
All checks were successful
Build Docker Image / build (push) Successful in 3m14s
Details

Browse Source 
- Chips: colored circle with entity icon (product/hub/supplier)
- Active tokens: outline style with icon in circle
- Quote segments: labeled with colored circle icons
This commit is contained in:
Ruslan Bakiev
2026-01-23 10:35:59 +07:00
parent 4c6f5abd78
commit fc6ce31659
1 changed files with 49 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
app/components/navigation/MainNavigation.vue
View File

@@ -40,24 +40,39 @@
class="flex-1 px-4 py-2.5 text-left hover:bg-base-200/50 rounded-l-full transition-colors min-w-0"
@click="$emit('edit-token', 'product')"
>
<div class="text-xs text-base-content/60">{{ $t('catalog.quote.product') }}</div>
<div class="font-medium truncate">{{ productLabel || $t('catalog.quote.selectProduct') }}</div>
<div class="flex items-center gap-1.5 text-xs text-base-content/60">
<span class="w-4 h-4 rounded-full flex items-center justify-center flex-shrink-0" :style="{ backgroundColor: entityColors.product }">
<Icon name="lucide:shopping-bag" size="10" class="text-white" />
</span>
{{ $t('catalog.quote.product') }}
</div>
<div class="font-medium truncate mt-0.5">{{ productLabel || $t('catalog.quote.selectProduct') }}</div>
</button>
<!-- Hub segment -->
<button
class="flex-1 px-4 py-2.5 text-left hover:bg-base-200/50 transition-colors min-w-0"
@click="$emit('edit-token', 'hub')"
>
<div class="text-xs text-base-content/60">{{ $t('catalog.quote.hub') }}</div>
<div class="font-medium truncate">{{ hubLabel || $t('catalog.quote.selectHub') }}</div>
<div class="flex items-center gap-1.5 text-xs text-base-content/60">
<span class="w-4 h-4 rounded-full flex items-center justify-center flex-shrink-0" :style="{ backgroundColor: entityColors.hub }">
<Icon name="lucide:warehouse" size="10" class="text-white" />
</span>
{{ $t('catalog.quote.hub') }}
</div>
<div class="font-medium truncate mt-0.5">{{ hubLabel || $t('catalog.quote.selectHub') }}</div>
</button>
<!-- Quantity segment -->
<button
class="flex-1 px-4 py-2.5 text-left hover:bg-base-200/50 rounded-r-full transition-colors min-w-0"
@click="$emit('edit-token', 'quantity')"
>
<div class="text-xs text-base-content/60">{{ $t('catalog.quote.quantity') }}</div>
<div class="font-medium">{{ quantity ? `${quantity} ${$t('units.t')}` : '—' }}</div>
<div class="flex items-center gap-1.5 text-xs text-base-content/60">
<span class="w-4 h-4 rounded-full flex items-center justify-center flex-shrink-0 bg-base-content/30">
<Icon name="lucide:scale" size="10" class="text-white" />
</span>
{{ $t('catalog.quote.quantity') }}
</div>
<div class="font-medium mt-0.5">{{ quantity ? `${quantity} ${$t('units.t')}` : '—' }}</div>
</button>
</div>
<!-- Search button -->
@@ -82,18 +97,23 @@
<!-- Tokens + input inline -->
<div class="flex items-center gap-2 flex-wrap flex-1 min-w-0">
<!-- Active filter tokens -->
<!-- Active filter tokens (outline style with icon in circle) -->
<div
v-for="token in activeTokens"
:key="token.type"
class="badge badge-lg gap-1.5 cursor-pointer hover:opacity-80 transition-all flex-shrink-0 text-white"
:style="{ backgroundColor: getTokenColor(token.type) }"
class="flex items-center gap-1.5 px-2.5 py-1.5 rounded-full border-2 cursor-pointer hover:opacity-80 transition-all flex-shrink-0"
:style="{ borderColor: getTokenColor(token.type), color: getTokenColor(token.type) }"
@click.stop="$emit('edit-token', token.type)"
>
<Icon :name="token.icon" size="14" />
<span class="max-w-28 truncate">{{ token.label }}</span>
<span
class="w-5 h-5 rounded-full flex items-center justify-center flex-shrink-0"
:style="{ backgroundColor: getTokenColor(token.type) }"
>
<Icon :name="getTokenIcon(token.type)" size="12" class="text-white" />
</span>
<span class="max-w-28 truncate font-medium text-sm">{{ token.label }}</span>
<button
class="hover:text-error"
class="hover:text-error ml-0.5"
@click.stop="$emit('remove-token', token.type)"
>
<Icon name="lucide:x" size="14" />
@@ -112,7 +132,7 @@
</div>
</div>
<!-- Chips below -->
<!-- Chips below (with colored circle icons) -->
<div
v-if="availableChips.length > 0"
class="flex items-center justify-center gap-2"
@@ -120,10 +140,15 @@
<button
v-for="chip in availableChips"
:key="chip.type"
class="btn btn-xs btn-ghost gap-1"
class="btn btn-xs btn-ghost gap-1.5 pr-3"
@click="$emit('start-select', chip.type)"
>
<Icon name="lucide:plus" size="12" />
<span
class="w-5 h-5 rounded-full flex items-center justify-center flex-shrink-0"
:style="{ backgroundColor: getTokenColor(chip.type) }"
>
<Icon :name="getTokenIcon(chip.type)" size="12" class="text-white" />
</span>
{{ chip.label }}
</button>
</div>
@@ -339,5 +364,14 @@ const selectModeIcon = computed(() => {
const getTokenColor = (type: string) => {
return entityColors[type as keyof typeof entityColors] || entityColors.product
}
const getTokenIcon = (type: string) => {
const icons: Record<string, string> = {
product: 'lucide:shopping-bag',
hub: 'lucide:warehouse',
supplier: 'lucide:factory'
}
return icons[type] || 'lucide:tag'
}
</script>