From e673345a4b203225eaee0e5fd4a723dfcf183b31 Mon Sep 17 00:00:00 2001
From: Alexander Platov <alexander.platov@hardcoreeng.com>
Date: Thu, 6 Jun 2024 07:36:16 +0300
Subject: [PATCH] Removed, replaced bind:clientWidth and bind:clientHeight
(#5741)
---
.../src/components/StyledTextEditor.svelte | 16 +-------
packages/theme/styles/love.scss | 8 ++++
.../src/components/ControlBar.svelte | 11 ++----
.../src/components/ParticipantView.svelte | 37 +++++++++++++++----
.../love-resources/src/components/Room.svelte | 8 ++--
5 files changed, 48 insertions(+), 32 deletions(-)
diff --git a/packages/text-editor/src/components/StyledTextEditor.svelte b/packages/text-editor/src/components/StyledTextEditor.svelte
index 747f7a7b37..042712d911 100644
--- a/packages/text-editor/src/components/StyledTextEditor.svelte
+++ b/packages/text-editor/src/components/StyledTextEditor.svelte
@@ -16,7 +16,7 @@
import { Markup } from '@hcengineering/core'
import { IntlString } from '@hcengineering/platform'
import { EmptyMarkup } from '@hcengineering/text'
- import { Button, ButtonSize, Scroller } from '@hcengineering/ui'
+ import { Button, type ButtonSize, Scroller } from '@hcengineering/ui'
import { AnyExtension, mergeAttributes } from '@tiptap/core'
import { createEventDispatcher } from 'svelte'
import textEditorPlugin from '../plugin'
@@ -51,8 +51,6 @@
let textEditor: TextEditor | undefined = undefined
- let contentHeight: number
-
export function submit (): void {
textEditor?.submit()
}
@@ -162,13 +160,7 @@
on:click|preventDefault|stopPropagation={() => (needFocus = true)}
>
<div class="textInput">
- <div
- bind:clientHeight={contentHeight}
- class="inputMsg"
- class:showScroll={contentHeight > 32}
- class:scrollable={isScrollable}
- style="--texteditor-maxheight: {varsStyle};"
- >
+ <div class="inputMsg" class:scrollable={isScrollable} style:--texteditor-maxheight={varsStyle}>
{#if isScrollable}
<Scroller>
<TextEditor
@@ -257,10 +249,6 @@
&.scrollable {
max-height: var(--texteditor-maxheight);
-
- &.showScroll {
- overflow: auto;
- }
}
&:not(.showScroll) {
overflow-y: hidden;
diff --git a/packages/theme/styles/love.scss b/packages/theme/styles/love.scss
index 0e86a97174..4c22e42a11 100644
--- a/packages/theme/styles/love.scss
+++ b/packages/theme/styles/love.scss
@@ -132,6 +132,14 @@
}
}
+// Room
+@media only screen and (max-width: 1024px) {
+ .room-container + .bar > .bar__left-panel button span { display: none; }
+}
+@media only screen and (max-width: 700px) {
+ .room-container + .bar > .bar__left-panel { position: initial; }
+}
+
// RoomPopup
.room-popup {
.room-btns {
diff --git a/plugins/love-resources/src/components/ControlBar.svelte b/plugins/love-resources/src/components/ControlBar.svelte
index bdbd28414c..002fbf45b3 100644
--- a/plugins/love-resources/src/components/ControlBar.svelte
+++ b/plugins/love-resources/src/components/ControlBar.svelte
@@ -47,9 +47,6 @@
const allowShare: boolean = true
let allowLeave: boolean = false
- let barWidth: number
- $: noLabel = barWidth < 900
-
$: allowCam = $currentRoom?.type === RoomType.Video
$: allowLeave = $myInfo?.room !== ($myOffice?._id ?? love.ids.Reception)
@@ -104,7 +101,7 @@
const micKeys = client.getModel().findAllSync(view.class.Action, { _id: love.action.ToggleMic })?.[0]?.keyBinding
</script>
-<div bind:clientWidth={barWidth} class="bar w-full flex-center flex-gap-2 flex-no-shrink">
+<div class="bar w-full flex-center flex-gap-2 flex-no-shrink">
{#if room._id !== love.ids.Reception}
<ModernButton
icon={roomAccessIcon[room.access]}
@@ -162,7 +159,7 @@
{#if hasAccountRole(getCurrentAccount(), AccountRole.User)}
<ModernButton
icon={view.icon.Copy}
- tooltip={{ label: !linkCopied ? love.string.CopyGuestLink : view.string.Copied }}
+ tooltip={{ label: !linkCopied ? love.string.CopyGuestLink : view.string.Copied, direction: 'top' }}
kind={'secondary'}
size={'large'}
on:click={copyGuestLink}
@@ -171,8 +168,8 @@
{#if allowLeave}
<ModernButton
icon={love.icon.LeaveRoom}
- label={noLabel ? undefined : love.string.LeaveRoom}
- tooltip={{ label: love.string.LeaveRoom }}
+ label={love.string.LeaveRoom}
+ tooltip={{ label: love.string.LeaveRoom, direction: 'top' }}
kind={'negative'}
size={'large'}
on:click={leave}
diff --git a/plugins/love-resources/src/components/ParticipantView.svelte b/plugins/love-resources/src/components/ParticipantView.svelte
index 154d69c78a..88a4f77db9 100644
--- a/plugins/love-resources/src/components/ParticipantView.svelte
+++ b/plugins/love-resources/src/components/ParticipantView.svelte
@@ -16,7 +16,7 @@
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 { Icon, Loading, resizeObserver } from '@hcengineering/ui'
import love from '../plugin'
export let _id: string
@@ -28,6 +28,7 @@
let parent: HTMLDivElement
let activeTrack: boolean = false
+ let filled: boolean = false
export function appendChild (track: HTMLMediaElement): void {
const video = parent.querySelector('.video')
@@ -58,8 +59,21 @@
$: user = $personByIdStore.get(_id as Ref<Person>)
</script>
-<div id={_id} class="parent" class:small bind:clientWidth={parentWidth}>
- <div class="label" class:filled bind:clientWidth={labelWidth}>
+<div
+ id={_id}
+ class="parent"
+ class:small
+ use:resizeObserver={(element) => {
+ parentWidth = element.clientWidth
+ }}
+>
+ <div
+ class="label"
+ class:filled
+ use:resizeObserver={(element) => {
+ labelWidth = element.clientWidth
+ }}
+ >
<span class="overflow-label">{formatName(name)}</span>
{#if connecting}
<div class="loading">
@@ -70,9 +84,9 @@
<Icon size="small" icon={love.icon.MicDisabled} />
</div>
</div>
- <div bind:this={parent} class="cover" class:mirror={mirror && activeTrack}>
- <div class="ava" class:hidden={activeTrack}>
- <Avatar size={'full'} {name} person={user} />
+ <div bind:this={parent} class="cover" class:active={activeTrack} class:mirror={mirror && activeTrack}>
+ <div class="ava">
+ <Avatar size={'full'} {name} person={user} showStatus={false} />
</div>
</div>
</div>
@@ -102,10 +116,17 @@
}
.ava {
- height: 25%;
overflow: hidden;
- border-radius: 20%;
+ position: absolute;
+ height: 25%;
aspect-ratio: 1;
+ border-radius: 20%;
+ }
+ &.active > .ava {
+ display: none;
+ }
+ &:not(.active) {
+ background-color: black;
}
}
.parent {
diff --git a/plugins/love-resources/src/components/Room.svelte b/plugins/love-resources/src/components/Room.svelte
index ec17bf7299..aa56531cb4 100644
--- a/plugins/love-resources/src/components/Room.svelte
+++ b/plugins/love-resources/src/components/Room.svelte
@@ -17,7 +17,7 @@
import { personByIdStore } from '@hcengineering/contact-resources'
import { Room as TypeRoom } from '@hcengineering/love'
import { getMetadata } from '@hcengineering/platform'
- import { Label, Loading, deviceOptionsStore as deviceInfo } from '@hcengineering/ui'
+ import { Label, Loading, deviceOptionsStore as deviceInfo, resizeObserver } from '@hcengineering/ui'
import {
LocalParticipant,
LocalTrackPublication,
@@ -317,8 +317,10 @@
</div>
{#if withVideo}
<div
- bind:clientWidth={roomWidth}
- bind:clientHeight={roomHeight}
+ use:resizeObserver={(element) => {
+ roomWidth = element.clientWidth
+ roomHeight = element.clientHeight
+ }}
class="videoGrid"
style={$screenSharing ? '' : gridStyle}
class:scroll-m-0={$screenSharing}