diff --git a/packages/theme/styles/_lumia-colors.scss b/packages/theme/styles/_lumia-colors.scss index 179312a0f4..dd669f1911 100644 --- a/packages/theme/styles/_lumia-colors.scss +++ b/packages/theme/styles/_lumia-colors.scss @@ -37,6 +37,8 @@ --tag-accent-SunshineBackground: #FFBD2E; --border-color-global-error-border-color: #fb6863; + + --border-talk-indication-primary: #4683EA; } /* Dark Theme */ @@ -89,6 +91,8 @@ --icon-disabled-IconColor: #394358; + --border-talk-indication-secondary: #25262A; + /** Buttons **/ --button-subtle-LabelColor: #fff; --button-subtle-IconColor: #fff; @@ -182,6 +186,8 @@ --icon-disabled-IconColor: #B3BCCC; + --border-talk-indication-secondary: #F1F1F1; + /** Buttons **/ --button-subtle-LabelColor: #000; --button-subtle-IconColor: #000; diff --git a/plugins/love-resources/src/components/ParticipantView.svelte b/plugins/love-resources/src/components/ParticipantView.svelte index 4fc72fd348..3944941775 100644 --- a/plugins/love-resources/src/components/ParticipantView.svelte +++ b/plugins/love-resources/src/components/ParticipantView.svelte @@ -20,8 +20,6 @@ import { currentRoomAudioLevels } from '../utils' import MicDisabled from './icons/MicDisabled.svelte' - import { tweened } from 'svelte/motion' - import { elasticInOut } from 'svelte/easing' export let _id: string export let name: string @@ -32,12 +30,6 @@ let parent: HTMLDivElement let activeTrack: boolean = false - let level: number = 0 - const speakers = tweened(0, { - duration: 5, - easing: elasticInOut - }) - export function appendChild (track: HTMLMediaElement, enabled: boolean = true): void { const video = parent.querySelector('.video') if (video != null) { @@ -65,27 +57,17 @@ $: user = $personByIdStore.get(_id as Ref) $: speach = $currentRoomAudioLevels.get(_id as Ref) ?? 0 - let tspeach: number = 0 - $: if ((speach > 0 && speach > tspeach) || (tspeach > 0 && speach <= 0)) { - void speakers.set(speach > 0.5 ? 0.5 : speach, { duration: 50, easing: elasticInOut }) - } - speakers.subscribe((sp) => { - tspeach = sp > 0 ? sp : 0 - level = tspeach - }) -
+
0}>
-
- {formatName(name)} -
-
+
{#if connecting}{/if} - {#if muted}{/if} + {#if muted}{/if} + {formatName(name)}
@@ -139,59 +121,43 @@ background-color: black; border-radius: 0.75rem; - .label, - .icon { + .label { + overflow: hidden; + text-overflow: ellipsis; position: absolute; display: flex; justify-content: center; align-items: center; + gap: 0.25rem; padding: 0.25rem 0.5rem; - height: 1.5rem; - color: rgba(0, 0, 0, 0.75); - background-color: rgba(255, 255, 255, 0.5); - backdrop-filter: blur(3px); - } - .label { - overflow: hidden; - top: 0; - left: 0; + top: 0.25rem; + left: 0.25rem; max-width: 12rem; font-weight: 500; font-size: 0.75rem; line-height: 1rem; - border-radius: 0.75rem 0 0.5rem 0; - } - .icon { - display: none; - bottom: 0; - right: 0; - flex-shrink: 0; - gap: 0.25rem; - border-radius: 0.5rem 0 0.75rem 0; + color: var(--white-color); + background-color: rgba(0, 0, 0, 0.5); + border-radius: 0.5rem; + backdrop-filter: blur(3px); - &.shown { - display: flex; + &.withIcon { + padding-left: 0.25rem; } } - &::after, - &::before { + &.speach::before, + &.speach::after { position: absolute; content: ''; - background-color: var(--theme-caption-color); - opacity: var(--border-opacity, 0); - z-index: -1; + inset: 0; + border-radius: 0.75rem; + z-index: 1; } - &::after { - inset: -0.125rem; - width: calc(100% + 0.25rem); - height: calc(100% + 0.25rem); - border-radius: calc(0.75rem + 0.125rem); + &.speach::before { + border: 3px solid var(--border-talk-indication-secondary); } - &::before { - inset: -0.25rem; - width: calc(100% + 0.5rem); - height: calc(100% + 0.5rem); - border-radius: calc(0.75rem + 0.25rem); + &.speach::after { + border: 2px solid var(--border-talk-indication-primary); } } diff --git a/plugins/love-resources/src/components/icons/MicDisabled.svelte b/plugins/love-resources/src/components/icons/MicDisabled.svelte index e7934be3af..344b953df6 100644 --- a/plugins/love-resources/src/components/icons/MicDisabled.svelte +++ b/plugins/love-resources/src/components/icons/MicDisabled.svelte @@ -16,29 +16,14 @@ import type { IconSize } from '@hcengineering/ui' export let size: IconSize = 'small' - const fill: string = 'currentColor' + export let fill: string = 'currentColor' - + - - -