LOVE: updated ParticipantView layout (#8426)

Signed-off-by: Alexander Platov <alexander.platov@hardcoreeng.com>

packages/theme/styles/button.scss

@@ -181,6 +181,7 @@
   min-height: 0;
 }
 .hulyStatusBarButton {
+  overflow: hidden;
   gap: var(--spacing-1);
   padding: var(--spacing-0_25) var(--spacing-0_25) var(--spacing-0_25) var(--spacing-1);
   height: 1.625rem;

plugins/love-resources/src/components/ParticipantView.svelte

@@ -16,8 +16,9 @@
   import { Person, formatName } from '@hcengineering/contact'
   import { Avatar, personByIdStore } from '@hcengineering/contact-resources'
   import { Ref } from '@hcengineering/core'
-  import { Icon, Loading } from '@hcengineering/ui'
+  import { Loading } from '@hcengineering/ui'
   import love from '../plugin'
+  import MicDisabled from './icons/MicDisabled.svelte'
 
   export let _id: string
   export let name: string
@@ -57,10 +58,10 @@
 <div id={_id} class="parent">
   <div class="label">
     <span class="overflow-label">{formatName(name)}</span>
-    <div class="icon" class:shown={muted || connecting}>
+  </div>
-      {#if connecting}<Loading size={'small'} shrink />{/if}
+  <div class="icon" class:shown={muted || connecting}>
-      {#if muted}<Icon size="small" icon={love.icon.MicDisabled} />{/if}
+    {#if connecting}<Loading size={'small'} shrink />{/if}
-    </div>
+    {#if muted}<MicDisabled size={'small'} />{/if}
   </div>
   <div bind:this={parent} class="cover" class:active={activeTrack} class:mirror={mirror && activeTrack}>
     <div class="ava">
@@ -96,9 +97,9 @@
     .ava {
       overflow: hidden;
       position: absolute;
-      height: 25%;
+      width: 6rem;
       aspect-ratio: 1;
-      border-radius: 20%;
+      border-radius: 50%;
     }
     &.active > .ava {
       display: none;
@@ -115,44 +116,39 @@
     min-height: 0;
     max-height: 100%;
 
-    .label {
+    .label,
+    .icon {
       position: absolute;
       display: flex;
-      justify-content: space-between;
+      justify-content: center;
       align-items: center;
-      gap: 0.5rem;
+      padding: 0.25rem 0.5rem;
-      bottom: 0.375rem;
+      height: 1.5rem;
-      left: 0.375rem;
+      color: rgba(0, 0, 0, 0.75);
-      right: 0.375rem;
+      background-color: rgba(255, 255, 255, 0.5);
-      max-width: calc(100% - 0.75rem);
+      backdrop-filter: blur(3px);
       z-index: 1;
+    }
+    .label {
+      overflow: hidden;
+      top: 0;
+      left: 0;
+      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;
 
-      span,
+      &.shown {
-      .icon {
+        display: flex;
-        height: 1.5rem;
-        background-color: rgba(0, 0, 0, 0.7);
-        border-radius: 0.375rem;
-      }
-      span {
-        padding: 0.25rem 0.5rem;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        font-size: 0.875rem;
-        line-height: 1rem;
-        color: #ffffff;
-      }
-      .icon {
-        display: none;
-        justify-content: center;
-        align-items: center;
-        flex-shrink: 0;
-        gap: 0.25rem;
-        padding: 0.25rem;
-        min-width: 1.5rem;
-
-        &.shown {
-          display: flex;
-        }
       }
     }
   }

plugins/love-resources/src/components/icons/MicDisabled.svelte

@@ -0,0 +1,44 @@
+<!--
+// Copyright © 2025 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script lang="ts">
+  import type { IconSize } from '@hcengineering/ui'
+
+  export let size: IconSize = 'small'
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M8.1,0.9c-0.7,0-1.3,0.2-1.8,0.7C5.8,2,5.5,2.8,5.5,3.3l1,1V3.5c0-0.4,0.2-0.8,0.4-1.1S7.6,2,8,2c0.4,0,0.8,0.2,1.1,0.4c0.2,0.3,0.4,0.7,0.4,1.1v4h1v-4c0-0.7-0.2-1.3-0.7-1.8C9.4,1.2,8.7,0.9,8.1,0.9z"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M11.5,7.1v1.5c0,0.3,0,0.5-0.1,0.8l0.8,0.8c0.2-0.5,0.3-1,0.3-1.6V7.1H11.5z"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M8.5,12.9c0.6-0.1,1.2-0.3,1.8-0.6l-0.7-0.7c-0.3,0.1-0.6,0.2-1,0.3c-0.7,0.1-1.4,0-2-0.2c-0.6-0.3-1.2-0.7-1.5-1.3C4.7,9.9,4.5,9.2,4.5,8.6V7.1h-1v1.5c0,1.1,0.4,2.2,1.1,3s1.8,1.3,2.9,1.5v1h-2v1h5v-1h-2V12.9z"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M7,10.8c0.4,0.2,0.9,0.3,1.4,0.2c0.1,0,0.3-0.1,0.4-0.1L7.9,9.9c-0.2,0-0.4-0.1-0.5-0.1C7.1,9.8,6.9,9.6,6.7,9.4C6.6,9.2,6.5,8.9,6.5,8.7l-1-1v0.9c0,0.5,0.1,1,0.4,1.4C6.2,10.2,6.5,10.6,7,10.8z"
+  />
+  <path fill="#DC5148" d="M15,14.4l-0.7,0.7L1,1.8L1.7,1L15,14.4z" />
+</svg>