@netless/telebox-insider 1.0.0-alpha.23 → 1.0.0-alpha.26

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@netless/telebox-insider",
-    "version": "1.0.0-alpha.23",
+    "version": "1.0.0-alpha.26",
     "private": false,
     "description": "Window widget for Whiteboard",
     "license": "MIT",

package/src/TeleBox/index.ts

@@ -65,6 +65,7 @@ type PropsValConfig = {
     readonly: RequiredTeleBoxConfig["readonly$"];
     rootRect: RequiredTeleBoxConfig["rootRect$"];
     managerStageRect: RequiredTeleBoxConfig["managerStageRect$"];
+    managerStageRatio: RequiredTeleBoxConfig["managerStageRatio$"];
     defaultBoxStageStyle: RequiredTeleBoxConfig["defaultBoxStageStyle$"];
     defaultBoxBodyStyle: RequiredTeleBoxConfig["defaultBoxBodyStyle$"];
     collectorRect: RequiredTeleBoxConfig["collectorRect$"];
@@ -240,6 +241,7 @@ export class TeleBox {
             readonly: readonly$,
             rootRect: rootRect$,
             managerStageRect: managerStageRect$,
+            managerStageRatio: managerStageRatio$,
             defaultBoxBodyStyle: defaultBoxBodyStyle$,
             defaultBoxStageStyle: defaultBoxStageStyle$,
             collectorRect: collectorRect$,
@@ -857,6 +859,10 @@ export class TeleBox {
         this.$main = $main;
         $boxMain.appendChild($main);
 
+        const $quarantineOuter = document.createElement("div");
+        $quarantineOuter.className = this.wrapClassName("quarantine-outer");
+        $main.appendChild($quarantineOuter);
+
         const $quarantine = document.createElement("div");
         $quarantine.className = this.wrapClassName("quarantine");
         $quarantine.appendChild($body);
@@ -867,10 +873,10 @@ export class TeleBox {
             const $shadowStyle = document.createElement("style");
             $shadowStyle.textContent = shadowStyles;
             $quarantine.insertBefore($shadowStyle, $quarantine.firstChild);
-            const shadow = $main.attachShadow({ mode: "open" });
+            const shadow = $quarantineOuter.attachShadow({ mode: "open" });
             shadow.appendChild($quarantine);
         } else {
-            $main.appendChild($quarantine);
+            $quarantineOuter.appendChild($quarantine);
         }
 
         this._renderResizeHandlers();

package/src/TeleBox/style.scss

@@ -39,6 +39,12 @@
     overflow: hidden;
 }
 
+.#{$namespace}-quarantine-outer {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
 .#{$namespace}-resize-handle {
     @include no-user-select;
 

package/src/TeleBox/style.shadow.scss

@@ -51,6 +51,9 @@
     display: flex;
     flex-direction: column;
 
+    @include v(color, box-footer-color, $titlebar-color);
+    @include v(background-color, box-footer-background, $titlebar-background);
+
     &::before {
         content: "";
         display: block;
@@ -85,4 +88,13 @@
             $manager-stage-shadow-dark
         );
     }
+
+    .#{$namespace}-footer-wrap {
+        @include v(color, box-footer-color-dark, $titlebar-color-dark);
+        @include v(
+            background-color,
+            box-footer-background-dark,
+            $titlebar-background-dark
+        );
+    }
 }