Simplify profile settings screens
This commit is contained in:
Ruslan Bakiev
@@ -153,78 +153,81 @@ async function removeConnection(connectionId: string) {
|
||||
{{ feedback }}
|
||||
</div>
|
||||
|
||||
<div class="rounded-[32px] bg-[#edf3ee] p-6 md:p-8">
|
||||
<div
|
||||
v-if="activeConnections.length > 0"
|
||||
class="space-y-4"
|
||||
<div
|
||||
v-if="activeConnections.length > 0"
|
||||
class="space-y-4"
|
||||
>
|
||||
<article
|
||||
v-for="{ option, connection } in activeConnections"
|
||||
:key="connection!.id"
|
||||
class="rounded-[28px] bg-white px-5 py-4 shadow-[0_18px_38px_rgba(18,56,36,0.08)]"
|
||||
>
|
||||
<article
|
||||
v-for="{ option, connection } in activeConnections"
|
||||
:key="connection!.id"
|
||||
class="rounded-[28px] bg-white px-5 py-4 shadow-[0_18px_38px_rgba(18,56,36,0.08)]"
|
||||
>
|
||||
<div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
|
||||
<div class="flex min-w-0 items-center gap-4">
|
||||
<div v-if="messengerConnectionAvatarSrc(connection)" class="avatar">
|
||||
<div class="h-14 w-14 rounded-[20px]">
|
||||
<img :src="messengerConnectionAvatarSrc(connection)" :alt="messengerConnectionName(connection)">
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="flex h-14 w-14 items-center justify-center rounded-[20px] text-sm font-black"
|
||||
:class="option.iconClass"
|
||||
>
|
||||
{{ messengerConnectionInitials(connection, option.channel === 'TELEGRAM' ? 'TG' : 'MX') }}
|
||||
</div>
|
||||
|
||||
<div class="min-w-0">
|
||||
<p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">{{ option.label }}</p>
|
||||
<p class="truncate text-lg font-bold text-[#123824]">{{ messengerConnectionName(connection) }}</p>
|
||||
<p class="truncate text-sm text-[#557562]">{{ messengerConnectionHandle(connection) || connection.channelId }}</p>
|
||||
<div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
|
||||
<div class="flex min-w-0 items-center gap-4">
|
||||
<div v-if="messengerConnectionAvatarSrc(connection)" class="avatar">
|
||||
<div class="h-14 w-14 rounded-[20px]">
|
||||
<img :src="messengerConnectionAvatarSrc(connection)" :alt="messengerConnectionName(connection)">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="btn rounded-full border border-[#e5cfc7] bg-[#fff5f1] px-5 text-[#a64d2d] hover:border-[#deb5a8] hover:bg-[#ffe8e0]"
|
||||
:disabled="deleteConnectionMutation.loading.value"
|
||||
@click="removeConnection(connection!.id)"
|
||||
<div
|
||||
v-else
|
||||
class="flex h-14 w-14 items-center justify-center rounded-[20px] text-sm font-black"
|
||||
:class="option.iconClass"
|
||||
>
|
||||
{{ deleteConnectionMutation.loading.value ? 'Отключаем...' : 'Отключить' }}
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
{{ messengerConnectionInitials(connection, option.channel === 'TELEGRAM' ? 'TG' : 'MX') }}
|
||||
</div>
|
||||
|
||||
<p
|
||||
v-else
|
||||
class="text-sm leading-6 text-[#557562]"
|
||||
>
|
||||
Пока ничего не подключено.
|
||||
</p>
|
||||
|
||||
<div
|
||||
v-if="availableOptions.length > 0"
|
||||
class="mt-6 grid gap-4 md:grid-cols-2"
|
||||
>
|
||||
<button
|
||||
v-for="option in availableOptions"
|
||||
:key="option.channel"
|
||||
class="flex min-h-[104px] flex-col items-start justify-between rounded-[28px] border-0 px-5 py-5 text-left shadow-[0_18px_38px_rgba(18,56,36,0.08)] transition"
|
||||
:class="[option.buttonClass, { 'opacity-60': !connectUrl(option.channel) }]"
|
||||
:disabled="pendingChannel === option.channel || !connectUrl(option.channel)"
|
||||
@click="connectMessenger(option.channel)"
|
||||
>
|
||||
<div class="inline-flex h-11 w-11 items-center justify-center rounded-2xl bg-white/18 text-sm font-black text-white">
|
||||
{{ option.channel === 'TELEGRAM' ? 'TG' : 'MX' }}
|
||||
<div class="min-w-0">
|
||||
<p class="truncate text-lg font-bold text-[#123824]">{{ messengerConnectionName(connection) }}</p>
|
||||
<p class="truncate text-sm text-[#557562]">{{ messengerConnectionHandle(connection) || connection.channelId }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm font-semibold text-white">
|
||||
|
||||
<button
|
||||
class="btn rounded-full border border-[#e5cfc7] bg-[#fff5f1] px-5 text-[#a64d2d] hover:border-[#deb5a8] hover:bg-[#ffe8e0]"
|
||||
:disabled="deleteConnectionMutation.loading.value"
|
||||
@click="removeConnection(connection!.id)"
|
||||
>
|
||||
{{ deleteConnectionMutation.loading.value ? 'Отключаем...' : 'Отключить' }}
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<p
|
||||
v-else
|
||||
class="text-sm leading-6 text-[#557562]"
|
||||
>
|
||||
Пока ничего не подключено.
|
||||
</p>
|
||||
|
||||
<div
|
||||
v-if="availableOptions.length > 0"
|
||||
class="space-y-4"
|
||||
>
|
||||
<button
|
||||
v-for="option in availableOptions"
|
||||
:key="option.channel"
|
||||
class="flex w-full items-center justify-between rounded-[28px] border-0 px-5 py-5 text-left shadow-[0_18px_38px_rgba(18,56,36,0.08)] transition"
|
||||
:class="[option.buttonClass, { 'opacity-60': !connectUrl(option.channel) }]"
|
||||
:disabled="pendingChannel === option.channel || !connectUrl(option.channel)"
|
||||
@click="connectMessenger(option.channel)"
|
||||
>
|
||||
<div class="flex items-center gap-4">
|
||||
<div
|
||||
class="inline-flex h-11 min-w-11 items-center justify-center rounded-2xl bg-white text-sm font-black"
|
||||
:class="option.channel === 'TELEGRAM' ? 'text-[#1a9c63]' : 'text-[#2b7fff]'"
|
||||
>
|
||||
{{ option.channel === 'TELEGRAM' ? 'TG' : 'MAX' }}
|
||||
</div>
|
||||
|
||||
<p class="text-base font-semibold text-white">
|
||||
{{ pendingChannel === option.channel ? `Открываем ${option.label}...` : `Подключить ${option.label}` }}
|
||||
</p>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<div class="mt-4 space-y-2">
|
||||
<div class="space-y-2">
|
||||
<p
|
||||
v-for="option in availableOptions.filter((item) => !connectUrl(item.channel))"
|
||||
:key="`${option.channel}-hint`"
|
||||
|
||||
Reference in New Issue
Block a user