UBERF-6118. Updated Avatar. Updated LOVE layout. (#5092)

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

packages/theme/styles/common.scss

@@ -324,6 +324,10 @@
 .antiNav-space {
   flex-shrink: 0;
   height: .5rem;
+
+  &.x2 {
+    height: 1rem;
+  }
 }
 .antiNav-footer-line {
   flex-shrink: 0;

packages/theme/styles/components.scss

@@ -303,7 +303,7 @@
   min-width: 0;
   min-height: 0;
 
-  &:not(.second, .default),
+  &:not(.second, .default, .no-border),
   &.border {
     border-top: 1px solid var(--theme-navpanel-divider);
   }

packages/ui/src/components/AccordionItem.svelte

@@ -29,7 +29,7 @@
   export let icon: Asset | AnySvelteComponent | ComponentType | undefined = undefined
   export let iconProps: any | undefined = undefined
   export let size: 'small' | 'medium' | 'large'
-  export let kind: 'default' | 'second' = 'default'
+  export let kind: 'default' | 'second' | 'no-border' = 'default'
   export let nested: boolean = false
   export let isOpen: boolean = false
   export let disabled: boolean = false

plugins/contact-resources/src/components/Avatar.svelte

@@ -39,21 +39,25 @@
     IconSize,
     getPlatformAvatarColorByName,
     getPlatformAvatarColorForTextDef,
-    themeStore
+    themeStore,
+    resizeObserver
   } from '@hcengineering/ui'
   import { getAvatarProviderId } from '../utils'
   import AvatarIcon from './icons/Avatar.svelte'
+  import { onMount } from 'svelte'
 
   export let avatar: string | null | undefined = undefined
   export let name: string | null | undefined = undefined
   export let direct: Blob | undefined = undefined
   export let size: IconSize
   export let icon: Asset | AnySvelteComponent | undefined = undefined
-  export let variant: 'circle' | 'roundedRect' = 'roundedRect'
+  export let variant: 'circle' | 'roundedRect' | 'none' = 'roundedRect'
 
   let url: string[] | undefined
   let avatarProvider: AvatarProvider | undefined
   let color: ColorDefinition | undefined = undefined
+  let fontSize: number = 16
+  let element: HTMLElement
 
   $: displayName = getDisplayName(name)
 
@@ -102,31 +106,57 @@
   let imageElement: HTMLImageElement | undefined = undefined
 
   $: srcset = url?.slice(1)?.join(', ')
+
+  onMount(() => {
+    if (size === 'full' && !url && name && displayName && displayName !== '' && element) {
+      fontSize = element.clientWidth * 0.6
+    }
+  })
 </script>
 
-<div
+{#if size === 'full' && !url && name && displayName && displayName !== ''}
-  class="ava-{size} flex-center avatar-container {variant}"
+  <div
-  class:no-img={!url && color}
+    bind:this={element}
-  class:bordered={!url && color === undefined}
+    class="ava-{size} flex-center avatar-container {variant}"
-  style:background-color={color && !url ? color.icon : 'var(--theme-button-default)'}
+    class:no-img={!url && color}
->
+    class:bordered={!url && color === undefined}
-  {#if url}
+    style:background-color={color && !url ? color.icon : 'var(--theme-button-default)'}
-    {#if size === 'large' || size === 'x-large' || size === '2x-large'}
+    use:resizeObserver={(element) => {
-      <img class="ava-{size} ava-blur" src={url[0]} {srcset} alt={''} bind:this={imageElement} />
+      fontSize = element.clientWidth * 0.6
-    {/if}
+    }}
-    <img class="ava-{size} ava-mask" src={url[0]} {srcset} alt={''} bind:this={imageElement} />
+  >
-  {:else if name && displayName && displayName !== ''}
     <div
       class="ava-text"
       style:color={color ? color.iconText : 'var(--primary-button-color)'}
+      style:font-size={`${fontSize}px`}
       data-name={displayName.toLocaleUpperCase()}
     />
-  {:else}
+  </div>
-    <div class="icon">
+{:else}
-      <Icon icon={icon ?? AvatarIcon} size={'full'} />
+  <div
-    </div>
+    class="ava-{size} flex-center avatar-container {variant}"
-  {/if}
+    class:no-img={!url && color}
-</div>
+    class:bordered={!url && color === undefined}
+    style:background-color={color && !url ? color.icon : 'var(--theme-button-default)'}
+  >
+    {#if url}
+      {#if size === 'large' || size === 'x-large' || size === '2x-large'}
+        <img class="ava-{size} ava-blur {variant}" src={url[0]} {srcset} alt={''} bind:this={imageElement} />
+      {/if}
+      <img class="ava-{size} ava-mask {variant}" src={url[0]} {srcset} alt={''} bind:this={imageElement} />
+    {:else if name && displayName && displayName !== ''}
+      <div
+        class="ava-text"
+        style:color={color ? color.iconText : 'var(--primary-button-color)'}
+        data-name={displayName.toLocaleUpperCase()}
+      />
+    {:else}
+      <div class="icon">
+        <Icon icon={icon ?? AvatarIcon} size={'full'} />
+      </div>
+    {/if}
+  </div>
+{/if}
 
 <style lang="scss">
   .avatar-container {
@@ -141,7 +171,7 @@
     }
 
     &.roundedRect {
-      border-radius: 0.5rem;
+      border-radius: 20%;
     }
 
     &.no-img {
@@ -154,7 +184,10 @@
     }
     img {
       object-fit: cover;
-      border: 1px solid var(--avatar-border-color);
+
+      &.circle {
+        border: 1px solid var(--avatar-border-color);
+      }
     }
     .icon,
     .ava-text::after {
@@ -169,9 +202,14 @@
       transform-origin: center;
       transform: translate(-50%, -50%) scale(0.6);
     }
-    .ava-text::after {
+    .ava-text {
-      content: attr(data-name);
+      font-weight: 500;
-      transform: translate(-50%, -50%);
+      letter-spacing: -0.05em;
+
+      &::after {
+        content: attr(data-name);
+        transform: translate(-50%, -50%);
+      }
     }
   }
 
@@ -180,9 +218,7 @@
     height: 0.875rem;
 
     .ava-text {
-      font-weight: 500;
       font-size: 0.525rem;
-      letter-spacing: -0.05em;
     }
   }
 
@@ -191,9 +227,7 @@
     height: 1.13rem;
 
     .ava-text {
-      font-weight: 500;
       font-size: 0.625rem;
-      letter-spacing: -0.05em;
     }
   }
 
@@ -202,16 +236,7 @@
     height: 1.25rem;
 
     .ava-text {
-      font-weight: 500;
+      font-size: 0.75rem;
-      font-size: 0.625rem;
-      letter-spacing: -0.05em;
-    }
-  }
-  .ava-inline,
-  .ava-tiny,
-  .ava-card {
-    &.roundedRect {
-      border-radius: 0.25rem;
     }
   }
 
@@ -220,9 +245,7 @@
     height: 1.5rem;
 
     .ava-text {
-      font-weight: 500;
+      font-size: 0.875rem;
-      font-size: 0.75rem;
-      letter-spacing: -0.05em;
     }
   }
   .ava-smaller {
@@ -230,9 +253,7 @@
     height: 1.75rem;
 
     .ava-text {
-      font-weight: 500;
+      font-size: 1rem;
-      font-size: 0.8125rem;
-      letter-spacing: -0.05em;
     }
   }
   .ava-small {
@@ -240,9 +261,7 @@
     height: 2rem;
 
     .ava-text {
-      font-weight: 500;
+      font-size: 1.125rem;
-      font-size: 0.875rem;
-      letter-spacing: -0.05em;
     }
   }
   .ava-medium {
@@ -250,9 +269,7 @@
     height: 2.5rem;
 
     .ava-text {
-      font-weight: 500;
+      font-size: 1.375rem;
-      font-size: 0.875rem;
-      letter-spacing: -0.05em;
     }
   }
   .ava-large {
@@ -260,8 +277,7 @@
     height: 4.5rem;
 
     .ava-text {
-      font-weight: 500;
+      font-size: 2.75rem;
-      font-size: 2rem;
     }
   }
 
@@ -270,12 +286,7 @@
     height: 7.5rem;
 
     .ava-text {
-      font-weight: 500;
+      font-size: 4.5rem;
-      font-size: 3.5rem;
-    }
-
-    &.roundedRect {
-      border-radius: 1rem;
     }
   }
 
@@ -284,26 +295,17 @@
     height: 10rem;
 
     .ava-text {
-      font-weight: 500;
+      font-size: 6rem;
-      font-size: 4.75rem;
-    }
-
-    &.roundedRect {
-      border-radius: 1rem;
     }
   }
 
   .ava-full {
     width: 100%;
     height: 100%;
+    aspect-ratio: 1;
 
     .ava-text {
-      font-weight: 500;
+      font-size: inherit;
-      font-size: 2rem;
-    }
-
-    &.roundedRect {
-      border-radius: 0px;
     }
   }
 
@@ -314,36 +316,23 @@
 
   .ava-mask {
     position: absolute;
-    border: 1px solid var(--avatar-border-color);
 
     &.circle {
+      border: 1px solid var(--avatar-border-color);
       border-radius: 50%;
     }
 
-    .roundedRect & {
+    .roundedRect {
-      border-radius: 0.5rem;
+      border-radius: 20%;
-
-      &.ava-inline,
-      &.ava-tiny,
-      &.ava-card {
-        border-radius: 0.25rem;
-      }
-
-      &.ava-x-large,
-      &.ava-2x-large {
-        border-radius: 1rem;
-      }
-
-      &.ava-full {
-        border-radius: 0px;
-      }
     }
   }
 
   .ava-large .ava-mask,
   .ava-x-large .ava-mask,
   .ava-2x-large .ava-mask {
-    border-width: 2px;
+    &.circle {
+      border-width: 2px;
+    }
   }
 
   .ava-inline .ava-mask,