Fix header: remove selectMode indicator, align logo and icons
Some checks failed
Build Docker Image / build (push) Has been cancelled
Some checks failed
Build Docker Image / build (push) Has been cancelled
- Remove 'Товар:' badge during selection - tags appear only after selection - Align logo and icons vertically with input (h-12) - Simplify search input styling
This commit is contained in:
Ruslan Bakiev
@@ -1,93 +1,74 @@
|
||||
<template>
|
||||
<header class="bg-base-100 shadow-md">
|
||||
<!-- Single row: Logo + Search Block + Icons -->
|
||||
<div class="flex items-center px-4 lg:px-6 py-3 gap-4">
|
||||
<!-- Left: Logo -->
|
||||
<div class="flex items-center flex-shrink-0">
|
||||
<!-- Single row: Logo + Search + Icons -->
|
||||
<div class="flex items-start px-4 lg:px-6 py-3 gap-4">
|
||||
<!-- Left: Logo (centered with input) -->
|
||||
<div class="flex items-center flex-shrink-0 h-12">
|
||||
<NuxtLink :to="localePath('/')" class="flex items-center gap-2">
|
||||
<span class="font-bold text-xl">Optovia</span>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
<!-- Center: Search block (input + chips together) -->
|
||||
<div class="flex-1 flex justify-center px-4 max-w-3xl mx-auto">
|
||||
<!-- Center: Search input + chips -->
|
||||
<div class="flex-1 flex flex-col items-center px-4 max-w-2xl mx-auto gap-2">
|
||||
<!-- Big rounded input -->
|
||||
<div
|
||||
class="w-full bg-base-200/50 rounded-2xl p-4 border border-base-300 shadow-sm hover:shadow-md transition-all"
|
||||
class="flex items-center gap-3 w-full px-5 py-3 border border-base-300 rounded-full bg-base-100 shadow-md hover:shadow-lg focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20 transition-all cursor-text"
|
||||
@click="focusInput"
|
||||
>
|
||||
<!-- Input row with tokens -->
|
||||
<div
|
||||
class="flex items-center gap-3 px-4 py-3 bg-base-100 rounded-xl border border-base-300 cursor-text"
|
||||
@click="focusInput"
|
||||
>
|
||||
<Icon name="lucide:search" size="22" class="text-primary flex-shrink-0" />
|
||||
<Icon name="lucide:search" size="22" class="text-primary flex-shrink-0" />
|
||||
|
||||
<!-- Tokens + input inline -->
|
||||
<div class="flex items-center gap-2 flex-wrap flex-1 min-w-0">
|
||||
<!-- Active filter tokens -->
|
||||
<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) }"
|
||||
@click.stop="$emit('edit-token', token.type)"
|
||||
>
|
||||
<Icon :name="token.icon" size="14" />
|
||||
<span class="max-w-28 truncate">{{ token.label }}</span>
|
||||
<button
|
||||
class="hover:text-error"
|
||||
@click.stop="$emit('remove-token', token.type)"
|
||||
>
|
||||
<Icon name="lucide:x" size="14" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Active selection mode indicator -->
|
||||
<div
|
||||
v-if="selectMode"
|
||||
class="badge badge-lg badge-outline badge-primary gap-1.5 flex-shrink-0"
|
||||
>
|
||||
<Icon :name="selectModeIcon" size="14" />
|
||||
{{ selectModeLabel }}:
|
||||
<button
|
||||
class="hover:text-error"
|
||||
@click.stop="$emit('cancel-select')"
|
||||
>
|
||||
<Icon name="lucide:x" size="14" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Search input -->
|
||||
<input
|
||||
ref="inputRef"
|
||||
v-model="localSearchQuery"
|
||||
type="text"
|
||||
:placeholder="placeholder"
|
||||
class="flex-1 min-w-32 bg-transparent outline-none text-lg"
|
||||
@input="$emit('update:search-query', localSearchQuery)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Chips row (inside same block) -->
|
||||
<div
|
||||
v-if="availableChips.length > 0"
|
||||
class="flex items-center justify-center gap-2 mt-3"
|
||||
>
|
||||
<button
|
||||
v-for="chip in availableChips"
|
||||
:key="chip.type"
|
||||
class="btn btn-sm btn-ghost gap-1.5"
|
||||
@click="$emit('start-select', chip.type)"
|
||||
<!-- Tokens + input inline -->
|
||||
<div class="flex items-center gap-2 flex-wrap flex-1 min-w-0">
|
||||
<!-- Active filter tokens -->
|
||||
<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) }"
|
||||
@click.stop="$emit('edit-token', token.type)"
|
||||
>
|
||||
<Icon name="lucide:plus" size="14" />
|
||||
{{ chip.label }}
|
||||
</button>
|
||||
<Icon :name="token.icon" size="14" />
|
||||
<span class="max-w-28 truncate">{{ token.label }}</span>
|
||||
<button
|
||||
class="hover:text-error"
|
||||
@click.stop="$emit('remove-token', token.type)"
|
||||
>
|
||||
<Icon name="lucide:x" size="14" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Search input -->
|
||||
<input
|
||||
ref="inputRef"
|
||||
v-model="localSearchQuery"
|
||||
type="text"
|
||||
:placeholder="placeholder"
|
||||
class="flex-1 min-w-32 bg-transparent outline-none text-lg"
|
||||
@input="$emit('update:search-query', localSearchQuery)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Chips below input -->
|
||||
<div
|
||||
v-if="availableChips.length > 0"
|
||||
class="flex items-center justify-center gap-2"
|
||||
>
|
||||
<button
|
||||
v-for="chip in availableChips"
|
||||
:key="chip.type"
|
||||
class="btn btn-xs btn-ghost gap-1"
|
||||
@click="$emit('start-select', chip.type)"
|
||||
>
|
||||
<Icon name="lucide:plus" size="12" />
|
||||
{{ chip.label }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right: AI + Globe + Team + User -->
|
||||
<div class="flex items-center gap-1 flex-shrink-0">
|
||||
<!-- Right: AI + Globe + Team + User (centered with input) -->
|
||||
<div class="flex items-center gap-1 flex-shrink-0 h-12">
|
||||
<!-- AI Assistant button -->
|
||||
<NuxtLink :to="localePath('/clientarea/ai')" class="btn btn-ghost btn-circle btn-sm">
|
||||
<Icon name="lucide:bot" size="18" />
|
||||
|
||||
Reference in New Issue
Block a user