dsrptlab/clientsflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(communications): center play control on call waveform

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-02-23 18:44:35 +07:00
parent 5fb8113ed7
commit 2e1014d726
1 changed files with 38 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
frontend/app/components/workspace/CrmWorkspaceApp.vue
View File

@@ -5106,28 +5106,29 @@ async function decideFeedCard(card: FeedCard, decision: "accepted" | "rejected")
{{ formatDay(entry.item.at) }} · {{ formatTime(entry.item.at) }} {{ formatDay(entry.item.at) }} · {{ formatTime(entry.item.at) }}
<span v-if="entry.item.duration"> · {{ entry.item.duration }}</span> <span v-if="entry.item.duration"> · {{ entry.item.duration }}</span>
</p> </p>
<div class="comm-call-wave mb-2" :ref="(el) => setCommCallWaveHost(entry.item.id, el as Element | null)" /> <div class="comm-call-wave-wrap mb-2">
<div class="mt-2 flex items-center gap-2" :class="entry.item.direction === 'out' ? 'justify-end' : 'justify-start'"> <div class="comm-call-wave" :ref="(el) => setCommCallWaveHost(entry.item.id, el as Element | null)" />
<button <button
class="call-play-toggle" class="call-wave-center-play"
:disabled="!isCommCallPlayable(entry.item)" :disabled="!isCommCallPlayable(entry.item)"
:title="isCommCallPlayable(entry.item) ? 'Play voice message' : 'Audio unavailable'" :title="isCommCallPlayable(entry.item) ? 'Play voice message' : 'Audio unavailable'"
@click="toggleCommCallPlayback(entry.item)" @click="toggleCommCallPlayback(entry.item)"
> >
<svg v-if="!isCommCallPlaying(entry.item.id)" viewBox="0 0 20 20" class="h-3.5 w-3.5"> <svg v-if="!isCommCallPlaying(entry.item.id)" viewBox="0 0 20 20" class="h-4 w-4">
<path <path
fill="currentColor" fill="currentColor"
d="M6.5 4.75a.75.75 0 0 1 1.12-.65l7.5 4.25a.75.75 0 0 1 0 1.3l-7.5 4.25a.75.75 0 0 1-1.12-.65v-8.5Z" d="M6.5 4.75a.75.75 0 0 1 1.12-.65l7.5 4.25a.75.75 0 0 1 0 1.3l-7.5 4.25a.75.75 0 0 1-1.12-.65v-8.5Z"
/> />
</svg> </svg>
<svg v-else viewBox="0 0 20 20" class="h-3.5 w-3.5"> <svg v-else viewBox="0 0 20 20" class="h-4 w-4">
<path <path
fill="currentColor" fill="currentColor"
d="M6.75 4.5a.75.75 0 0 1 .75.75v9.5a.75.75 0 0 1-1.5 0v-9.5a.75.75 0 0 1 .75-.75Zm6.5 0a.75.75 0 0 1 .75.75v9.5a.75.75 0 0 1-1.5 0v-9.5a.75.75 0 0 1 .75-.75Z" d="M6.75 4.5a.75.75 0 0 1 .75.75v9.5a.75.75 0 0 1-1.5 0v-9.5a.75.75 0 0 1 .75-.75Zm6.5 0a.75.75 0 0 1 .75.75v9.5a.75.75 0 0 1-1.5 0v-9.5a.75.75 0 0 1 .75-.75Z"
/> />
</svg> </svg>
<span>{{ isCommCallPlaying(entry.item.id) ? "Pause" : "Play" }}</span>
</button> </button>
</div>
<div class="mt-2 flex" :class="entry.item.direction === 'out' ? 'justify-end' : 'justify-start'">
<button class="call-transcript-toggle" @click="toggleCallTranscript(entry.item)"> <button class="call-transcript-toggle" @click="toggleCallTranscript(entry.item)">
<span> <span>
{{ {{
@@ -5772,6 +5773,10 @@ async function decideFeedCard(card: FeedCard, decision: "accepted" | "rejected")
background: var(--color-base-100); background: var(--color-base-100);
} }
.comm-call-wave-wrap {
position: relative;
}
.comm-call-wave { .comm-call-wave {
height: 30px; height: 30px;
width: 100%; width: 100%;
@@ -5787,6 +5792,33 @@ async function decideFeedCard(card: FeedCard, decision: "accepted" | "rejected")
height: 100% !important; height: 100% !important;
} }
.call-wave-center-play {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 34px;
height: 34px;
border: 1px solid color-mix(in oklab, var(--color-base-content) 22%, transparent);
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
color: color-mix(in oklab, var(--color-base-content) 88%, transparent);
background: color-mix(in oklab, var(--color-base-100) 72%, transparent);
backdrop-filter: blur(2px);
}
.call-wave-center-play:hover:not(:disabled) {
background: color-mix(in oklab, var(--color-base-100) 58%, var(--color-base-200));
}
.call-wave-center-play:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.call-transcript-toggle { .call-transcript-toggle {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@@ -5800,28 +5832,6 @@ async function decideFeedCard(card: FeedCard, decision: "accepted" | "rejected")
background: color-mix(in oklab, var(--color-base-100) 90%, transparent); background: color-mix(in oklab, var(--color-base-100) 90%, transparent);
} }
.call-play-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
border: 1px solid color-mix(in oklab, var(--color-base-content) 18%, transparent);
border-radius: 999px;
padding: 4px 10px;
font-size: 11px;
font-weight: 500;
color: color-mix(in oklab, var(--color-base-content) 72%, transparent);
background: color-mix(in oklab, var(--color-base-100) 90%, transparent);
}
.call-play-toggle:hover:not(:disabled) {
background: color-mix(in oklab, var(--color-base-100) 72%, var(--color-base-200));
}
.call-play-toggle:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.call-transcript-toggle:hover { .call-transcript-toggle:hover {
background: color-mix(in oklab, var(--color-base-100) 72%, var(--color-base-200)); background: color-mix(in oklab, var(--color-base-100) 72%, var(--color-base-200));
} }