@netless/telebox-insider 0.2.23 → 0.2.26

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@netless/telebox-insider",
-    "version": "0.2.23",
+    "version": "0.2.26",
     "private": false,
     "description": "Window widget for Whiteboard",
     "license": "MIT",
@@ -24,7 +24,7 @@
         "storybook": "start-storybook -p 6006 --no-version-updates",
         "build-storybook": "build-storybook && node scripts/move-storybook.js",
         "deploy-storybook": "yarn run build-storybook && node scripts/deploy-storybook.js",
-        "cleanup": "rimraf ./build"
+        "cleanup": "rimraf ./dist"
     },
     "devDependencies": {
         "@babel/plugin-proposal-class-properties": "^7.13.0",

package/src/TeleBox/style.scss

@@ -1,4 +1,5 @@
 @import "../scss/variables.scss";
+@import "../scss/mixins.scss";
 
 .#{$namespace}-box {
     position: absolute;
@@ -57,6 +58,8 @@
 }
 
 .#{$namespace}-resize-handle {
+    @include no-user-select;
+
     position: absolute;
     z-index: 2147483647;
 }
@@ -126,6 +129,8 @@
 }
 
 .#{$namespace}-track-mask {
+    @include no-user-select;
+
     position: fixed;
     top: 0;
     left: 0;

package/src/TeleBoxCollector/style.scss

@@ -1,6 +1,9 @@
 @import "../scss/variables.scss";
+@import "../scss/mixins.scss";
 
 .#{$namespace}-collector {
+    @include no-user-select;
+
     visibility: hidden;
     display: block;
     position: absolute;

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

@@ -1,4 +1,5 @@
 @import "../../scss/variables.scss";
+@import "../../scss/mixins.scss";
 
 $scrollbar-size: 8px;
 $scrollbar-ff-width: auto; // FF-only accepts auto, thin, none
@@ -9,39 +10,30 @@ $scrollbar-color-hover: rgba(238, 238, 247, 1);
 $scrollbar-color-active: rgba(238, 238, 247, 1);
 
 .#{$namespace}-max-titlebar {
+    @include no-user-select;
+
     display: none;
     position: absolute;
     top: 0;
     left: 0;
     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/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

@@ -1,11 +1,13 @@
 @import "../../scss/variables.scss";
+@import "../../scss/mixins.scss";
 
 .#{$namespace}-titlebar {
+    @include no-user-select;
+
     box-sizing: border-box;
     height: 26px;
     display: flex;
     align-items: center;
-    padding: 0 16px;
     background: #fff;
     user-select: none;
     border-bottom: 1px solid #eeeef7;
@@ -13,6 +15,7 @@
 }
 
 .#{$namespace}-title-area {
+    padding-left: 16px;
     overflow: hidden;
     position: relative;
     height: 100%;
@@ -22,6 +25,8 @@
 }
 
 .#{$namespace}-title {
+    @include no-user-select;
+
     overflow: hidden;
     margin: 0;
     padding: 0;
@@ -45,6 +50,7 @@
 }
 
 .#{$namespace}-titlebar-btns {
+    padding-right: 16px;
     white-space: nowrap;
     word-break: keep-all;
     margin-left: auto;
@@ -52,6 +58,8 @@
 }
 
 .#{$namespace}-titlebar-btn {
+    @include no-user-select;
+
     width: 22px;
     height: 22px;
     padding: 0;

package/src/scss/mixins.scss

@@ -0,0 +1,7 @@
+@mixin no-user-select {
+    user-select: none;
+    // touch device
+    -webkit-touch-callout: none;
+    // iOS Safari
+    -webkit-user-select: none;
+}