@netless/telebox-insider 0.2.20 → 0.2.24

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@netless/telebox-insider",
-    "version": "0.2.20",
+    "version": "0.2.24",
     "private": false,
     "description": "Window widget for Whiteboard",
     "license": "MIT",

package/src/TeleBox/style.scss

@@ -5,7 +5,6 @@
     top: 0;
     left: 0;
     z-index: $base-z-index;
-    will-change: transform;
     transition: width 0.4s cubic-bezier(0.4, 0.9, 0.71, 1.02),
         height 0.4s cubic-bezier(0.55, 0.82, 0.63, 0.95),
         opacity 0.6s cubic-bezier(0.7, 0, 0.84, 0), transform 0.4s ease;
@@ -182,7 +181,6 @@
 }
 
 .#{$namespace}-minimized {
-    will-change: transform;
     transition: width 0.05s cubic-bezier(0.4, 0.9, 0.71, 1.02),
         height 0.05s cubic-bezier(0.55, 0.82, 0.63, 0.95),
         opacity 0.6s cubic-bezier(0.7, 0, 0.84, 0), transform 0.6s ease;

package/src/TeleBoxCollector/style.scss

@@ -21,6 +21,7 @@
     background-repeat: no-repeat;
     background-size: 18px 16px;
     background-position: center;
+    -webkit-tap-highlight-color: transparent;
 }
 
 .#{$namespace}-collector-visible {

package/src/TeleBoxManager/MaxTitleBar/index.ts

@@ -105,12 +105,6 @@ export class MaxTitleBar extends DefaultTitleBar {
 
     public render(): HTMLElement {
         const $titleBar = super.render();
-        if ($titleBar.firstElementChild?.nextElementSibling) {
-            $titleBar.insertBefore(
-                this.$dragArea,
-                $titleBar.firstElementChild.nextElementSibling
-            );
-        }
 
         const { x, y, width } = this.containerRect;
         $titleBar.style.transform = `translate(${x}px, ${y}px)`;
@@ -131,6 +125,10 @@ export class MaxTitleBar extends DefaultTitleBar {
             )
         );
 
+        const $titlesArea = document.createElement("div");
+        $titlesArea.classList.add(this.wrapClassName("titles-area"));
+        $titleBar.insertBefore($titlesArea, $titleBar.firstElementChild);
+
         this.updateTitles();
 
         return $titleBar;
@@ -145,14 +143,12 @@ export class MaxTitleBar extends DefaultTitleBar {
 
     public updateTitles(): void {
         if (this.$titleBar && this.state === TELE_BOX_STATE.Maximized) {
+            this.$titleBar.classList.toggle(
+                this.wrapClassName("max-titlebar-single-title"),
+                this.boxes.length === 1
+            );
             if (this.boxes.length === 1) {
-                if (this.$title) {
-                    this.$title.textContent = this.boxes[0].title;
-                    this.$titleBar.replaceChild(
-                        this.$title,
-                        this.$titleBar.firstElementChild as HTMLElement
-                    );
-                }
+                this.setTitle(this.boxes[0].title);
             } else {
                 this.$titleBar.replaceChild(
                     this.renderTitles(),

package/src/TeleBoxManager/MaxTitleBar/style.scss

@@ -16,32 +16,22 @@ $scrollbar-color-active: rgba(238, 238, 247, 1);
     z-index: $base-z-index * 500;
     user-select: none;
 
-    .#{$namespace}-drag-area {
-        height: 100%;
-        min-width: 16px;
-        position: static;
-        margin: 0;
-        flex-grow: 1;
-        flex-shrink: 0;
+    .#{$namespace}-title {
+        display: none;
+    }
+
+    &.#{$namespace}-max-titlebar-single-title {
+        .#{$namespace}-titles {
+            display: none;
+        }
+        .#{$namespace}-title {
+            display: block;
+        }
     }
 }
 
 .#{$namespace}-max-titlebar-maximized {
     display: flex;
-
-    // .#{$namespace}-titlebar-btns {
-    //     &::before {
-    //         content: "";
-    //         position: absolute;
-    //         z-index: $base-z-index * 300;
-    //         top: 0;
-    //         height: 100%;
-    //         width: 50px;
-    //         transform: translateX(-100%);
-    //         background: linear-gradient(to left, #fff, rgba(0, 0, 0, 0));
-    //         pointer-events: none;
-    //     }
-    // }
 }
 
 .#{$namespace}-titles {

package/src/TeleBoxManager/index.ts

@@ -458,8 +458,11 @@ export class TeleBoxManager {
             }
         });
         box._zIndex$.reaction((_, __, skipUpdate) => {
-            if (this.topBox && box.zIndex > this.topBox.zIndex) {
-                this.topBox$.setValue(box);
+            if (this.boxes.length > 0) {
+                const topBox = this.boxes.reduce((topBox, box) =>
+                    topBox.zIndex > box.zIndex ? topBox : box
+                );
+                this.topBox$.setValue(topBox);
             }
             if (!skipUpdate) {
                 this.events.emit(TELE_BOX_MANAGER_EVENT.ZIndex, box);
@@ -734,7 +737,6 @@ export class TeleBoxManager {
         if (this.topBox) {
             if (box !== this.topBox) {
                 box.setZIndex(this.topBox.zIndex + 1, skipUpdate);
-                this.topBox$.setValue(box);
             }
         }
     }

package/src/TeleTitleBar/DefaultTitleBar/index.ts

@@ -250,8 +250,8 @@ export class DefaultTitleBar implements TeleTitleBar {
         const now = Date.now();
         if (now - this.lastTitleBarClick.timestamp <= 500) {
             if (
-                Math.abs(ev.clientX - this.lastTitleBarClick.clientX) <= 3 &&
-                Math.abs(ev.clientY - this.lastTitleBarClick.clientY) <= 3
+                Math.abs(ev.clientX - this.lastTitleBarClick.clientX) <= 5 &&
+                Math.abs(ev.clientY - this.lastTitleBarClick.clientY) <= 5
             ) {
                 // double click
                 if (this.onEvent) {
@@ -291,8 +291,8 @@ export class DefaultTitleBar implements TeleTitleBar {
 
         if (now - this.lastTitleBarTouch.timestamp <= 500) {
             if (
-                Math.abs(clientX - this.lastTitleBarTouch.clientX) <= 3 &&
-                Math.abs(clientY - this.lastTitleBarTouch.clientY) <= 3
+                Math.abs(clientX - this.lastTitleBarTouch.clientX) <= 10 &&
+                Math.abs(clientY - this.lastTitleBarTouch.clientY) <= 10
             ) {
                 // double click
                 if (this.onEvent) {

package/src/TeleTitleBar/DefaultTitleBar/style.scss

@@ -5,7 +5,6 @@
     height: 26px;
     display: flex;
     align-items: center;
-    padding: 0 16px;
     background: #fff;
     user-select: none;
     border-bottom: 1px solid #eeeef7;
@@ -13,6 +12,7 @@
 }
 
 .#{$namespace}-title-area {
+    padding-left: 16px;
     overflow: hidden;
     position: relative;
     height: 100%;
@@ -45,6 +45,7 @@
 }
 
 .#{$namespace}-titlebar-btns {
+    padding-right: 16px;
     white-space: nowrap;
     word-break: keep-all;
     margin-left: auto;