@netless/telebox-insider 1.0.0-alpha.25 → 1.0.0-alpha.28

package/src/TeleBoxManager/typings.ts

@@ -7,6 +7,8 @@ import type { TELE_BOX_MANAGER_EVENT } from "./constants";
 export interface TeleBoxManagerConfig extends Pick<TeleBoxConfig, "namespace"> {
     /** Element to mount boxes. */
     readonly root?: HTMLElement | null;
+    /** Fullscreen mode. Default false. */
+    readonly fullscreen?: TeleBoxFullscreen;
     /** Stage area height/with ratio. No ratio if <= 0. Default -1. */
     readonly stageRatio?: number;
     /** Where the minimized boxes go. */
@@ -29,6 +31,8 @@ export interface TeleBoxManagerConfig extends Pick<TeleBoxConfig, "namespace"> {
     readonly defaultBoxBodyStyle?: string | null;
     /** Custom `style` attribute value for stage area of all boxes. Can be overwritten by box. */
     readonly defaultBoxStageStyle?: string | null;
+    /** Theme variable */
+    readonly theme?: TeleBoxManagerThemeConfig;
 }
 
 type TeleBoxManagerBoxConfigBaseProps =
@@ -101,3 +105,44 @@ export type TeleBoxManagerEventConfig = CheckTeleBoxManagerConfig<{
 }>;
 
 export type TeleBoxManagerEvent = keyof TeleBoxManagerEventConfig;
+
+/**
+ * Fullscreen mode.
+ * - `true`: fullscreen mode. hide titlebar for single tab.
+ * - `false`: normal mode.
+ * - `"no-titlebar"`: always hide titlebar
+ * - `"always-titlebar"`: always show titlebar
+ */
+export type TeleBoxFullscreen = boolean | "no-titlebar" | "always-titlebar";
+
+export type TeleBoxManagerThemeConfig = {
+    managerContainerBackground?: string | null;
+    managerStageBackground?: string | null;
+    managerStageShadow?: string | null;
+
+    boxContainerBackground?: string | null;
+    boxStageBackground?: string | null;
+    boxStageShadow?: string | null;
+
+    boxColor?: string | null;
+    boxBorder?: string | null;
+    boxShadow?: string | null;
+    boxFooterColor?: string | null;
+    boxFooterBackground?: string | null;
+
+    titlebarColor?: string | null;
+    titlebarBackground?: string | null;
+    titlebarBorderBottom?: string | null;
+    titlebarTabColor?: string | null;
+    titlebarTabFocusColor?: string | null;
+    titlebarTabBackground?: string | null;
+    titlebarTabDividerColor?: string | null;
+
+    collectorBackground?: string | null;
+    collectorShadow?: string | null;
+
+    titlebarIconMinimize?: string | null;
+    titlebarIconMaximize?: string | null;
+    titlebarIconMaximizeActive?: string | null;
+    titlebarIconClose?: string | null;
+};

package/src/TeleTitleBar/DefaultTitleBar/index.ts

@@ -122,9 +122,9 @@ export class DefaultTitleBar implements TeleTitleBar {
 
             this.sideEffect.addEventListener(
                 $buttonsContainer,
-                "pointerup",
+                "click",
                 (ev) => {
-                    if (!ev.isPrimary || this.readonly$.value) {
+                    if (this.readonly$.value) {
                         return;
                     }
                     const target = ev.target as HTMLElement;

package/src/TeleTitleBar/DefaultTitleBar/style.scss

@@ -11,9 +11,9 @@
     user-select: none;
     touch-action: manipulation;
 
-    @include v(color, titlebar-color, $titlebar-color);
-    @include v(background-color, titlebar-background, $titlebar-background);
-    @include v(border-bottom, titlebar-border-bottom, $titlebar-border-bottom);
+    @include clr(color, titlebarColor);
+    @include clr(background-color, titlebarBackground);
+    @include clr(border-bottom, titlebarBorderBottom);
 }
 
 .#{$namespace}-title-area {
@@ -28,7 +28,7 @@
 
 .#{$namespace}-title {
     @include no-user-select;
-    @include v(color, titlebar-color, $titlebar-color);
+    @include clr(color, titlebarColor);
 
     overflow: hidden;
     margin: 0;
@@ -49,6 +49,8 @@
     bottom: 0;
     margin: auto;
     z-index: 10;
+    // enable pointermove event on touch devices
+    touch-action: none;
 }
 
 .#{$namespace}-titlebar-btns {
@@ -88,25 +90,25 @@
 
 .#{$namespace}-titlebar-icon-minimize {
     background: center / cover no-repeat;
-    @include v(
-        background-image,
-        titlebar-icon-minimize,
+    background-image: url("./icons/minimize.svg");
+    background-image: var(
+        --tele-titlebarIconMinimize,
         url("./icons/minimize.svg")
     );
 }
 
 .#{$namespace}-titlebar-icon-maximize {
     background: center / cover no-repeat;
-    @include v(
-        background-image,
-        titlebar-icon-maximize,
+    background-image: url("./icons/maximize.svg");
+    background-image: var(
+        --tele-titlebarIconMaximize,
         url("./icons/maximize.svg")
     );
 
     &.is-active {
-        @include v(
-            background-image,
-            titlebar-icon-maximize-active,
+        background-image: url("./icons/maximize-active.svg");
+        background-image: var(
+            --tele-titlebarIconMaximizeActive,
             url("./icons/maximize-active.svg")
         );
     }
@@ -114,59 +116,20 @@
 
 .#{$namespace}-titlebar-icon-close {
     background: center / cover no-repeat;
-    @include v(background-image, titlebar-icon-close, url("./icons/close.svg"));
+    background-image: url("./icons/close.svg");
+    background-image: var(--tele-titlebarIconClose, url("./icons/close.svg"));
 }
 
 .#{$namespace}-color-scheme-dark {
     color-scheme: dark;
 
     .#{$namespace}-title {
-        @include v(color, titlebar-color-dark, $titlebar-color-dark);
+        @include clr-dark(color, titlebarColor);
     }
 
     .#{$namespace}-titlebar {
-        @include v(color, titlebar-color-dark, $titlebar-color-dark);
-        @include v(
-            background-color,
-            titlebar-background-dark,
-            $titlebar-background-dark
-        );
-        @include v(
-            border-bottom,
-            titlebar-border-bottom-dark,
-            $titlebar-border-bottom-dark
-        );
-    }
-
-    .#{$namespace}-titlebar-icon-minimize {
-        @include v(
-            background-image,
-            titlebar-icon-minimize-dark,
-            url("./icons/minimize.svg")
-        );
-    }
-
-    .#{$namespace}-titlebar-icon-maximize {
-        @include v(
-            background-image,
-            titlebar-icon-maximize-dark,
-            url("./icons/maximize.svg")
-        );
-
-        &.is-active {
-            @include v(
-                background-image,
-                titlebar-icon-maximize-active-dark,
-                url("./icons/maximize-active.svg")
-            );
-        }
-    }
-
-    .#{$namespace}-titlebar-icon-close {
-        @include v(
-            background-image,
-            titlebar-icon-close-dark,
-            url("./icons/close.svg")
-        );
+        @include clr-dark(color, titlebarColor);
+        @include clr-dark(background-color, titlebarBackground);
+        @include clr-dark(border-bottom, titlebarBorderBottom);
     }
 }

package/src/index.ts

@@ -1,5 +1,3 @@
-import "./scss/fancy-scrollbar.scss";
-
 export * from "./TeleBox";
 export * from "./TeleTitleBar";
 export * from "./TeleBoxManager";

package/src/scss/mixins.scss

@@ -5,8 +5,3 @@
     // iOS Safari
     -webkit-user-select: none;
 }
-
-@mixin v($property, $varName, $val) {
-    #{$property}: $val;
-    #{$property}: var(--tele-#{$varName}, $val);
-}

package/src/scss/variables.scss

@@ -5,44 +5,70 @@ $max-titlebar-z-index: $base-z-index + 5000;
 $stage-z-index: $max-titlebar-z-index + 10;
 $collector-z-index: $stage-z-index + 10;
 
-$manager-container-background: #f9f9f9;
-$manager-container-background-dark: #25282e;
-$manager-stage-background: #fff;
-$manager-stage-background-dark: #272a30;
-$manager-stage-shadow: 0px 0px 16px rgba(0, 0, 0, 0.08);
-$manager-stage-shadow-dark: 0px 0px 16px rgba(0, 0, 0, 0.24);
+$tele-colors: (
+    managerContainerBackground: #f9f9f9,
+    managerStageBackground: #fff,
+    managerStageShadow: 0px 0px 16px rgba(0, 0, 0, 0.08),
+    boxContainerBackground: #f9f9f9,
+    boxStageBackground: #fff,
+    boxStageShadow: 0px 0px 16px rgba(0, 0, 0, 0.08),
+    boxColor: #191919,
+    boxBorder: 1px solid #e3e3ec,
+    boxShadow: 0px 4px 10px 0px rgba(47, 65, 146, 0.15),
+    boxFooterColor: #191919,
+    boxFooterBackground: #fff,
+    titlebarColor: #191919,
+    titlebarBackground: #fff,
+    titlebarBorderBottom: 1px solid #eeeef7,
+    titlebarTabColor: #7b88a0,
+    titlebarTabFocusColor: #357bf6,
+    titlebarTabBackground: transparent,
+    titlebarTabDividerColor: #e5e5f0,
+    collectorBackground: #fff,
+    collectorShadow: 0px 2px 6px 0px rgba(47, 65, 146, 0.15),
+);
 
-$box-container-background: $manager-container-background;
-$box-container-background-dark: $manager-container-background-dark;
-$box-stage-background: $manager-stage-background;
-$box-stage-background-dark: $manager-stage-background-dark;
-$box-stage-shadow: $manager-stage-shadow;
-$box-stage-shadow-dark: $manager-stage-shadow-dark;
+$tele-colors-dark: (
+    managerContainerBackground: #25282e,
+    managerStageBackground: #272a30,
+    managerStageShadow: 0px 0px 16px rgba(0, 0, 0, 0.24),
+    boxContainerBackground: #25282e,
+    boxStageBackground: #272a30,
+    boxStageShadow: 0px 0px 16px rgba(0, 0, 0, 0.24),
+    boxColor: #e9e9e9,
+    boxBorder: 1px solid #383b42,
+    boxShadow: 0px 4px 10px 0px rgba(56, 59, 66, 0.15),
+    boxFooterColor: #e9e9e9,
+    boxFooterBackground: #383b42,
+    titlebarColor: #e9e9e9,
+    titlebarBackground: #383b42,
+    titlebarBorderBottom: none,
+    titlebarTabColor: #e9e9e9,
+    titlebarTabFocusColor: #357bf6,
+    titlebarTabBackground: transparent,
+    titlebarTabDividerColor: #7b88a0,
+    collectorBackground: #383b42,
+    collectorShadow: 0px 2px 6px 0px rgba(47, 65, 146, 0.15),
+);
 
-$box-color: #191919;
-$box-color-dark: #e9e9e9;
-$box-border: 1px solid #e3e3ec;
-$box-border-dark: 1px solid #383b42;
-$box-shadow: 0px 4px 10px 0px rgba(47, 65, 146, 0.15);
-$box-shadow-dark: 0px 4px 10px 0px rgba(56, 59, 66, 0.15);
+@mixin clr($property, $key) {
+    #{$property}: map-get($tele-colors, $key);
+    #{$property}: var(--tele-#{$key}, map-get($tele-colors, $key));
+}
 
-$titlebar-color: #191919;
-$titlebar-color-dark: #e9e9e9;
-$titlebar-background: #fff;
-$titlebar-background-dark: #383b42;
-$titlebar-border-bottom: 1px solid #eeeef7;
-$titlebar-border-bottom-dark: none;
+@mixin clr-dark($property, $key) {
+    #{$property}: map-get($tele-colors-dark, $key);
+    #{$property}: var(--tele-#{$key}, map-get($tele-colors-dark, $key));
+}
 
-$titlebar-tab-color: #7b88a0;
-$titlebar-tab-color-dark: #e9e9e9;
-$titlebar-tab-focus-color: #357bf6;
-$titlebar-tab-focus-color-dark: #357bf6;
-$titlebar-tab-background: transparent;
-$titlebar-tab-background-dark: transparent;
-$titlebar-tab-divider-color: #e5e5f0;
-$titlebar-tab-divider-color-dark: #7b88a0;
+@mixin clr-root() {
+    @each $key, $value in $tele-colors {
+        --tele-#{$key}: #{$value};
+    }
+}
 
-$collector-background: #fff;
-$collector-background-dark: #383b42;
-$collector-shadow: 0px 2px 6px 0px rgba(47, 65, 146, 0.15);
-$collector-shadow-dark: $collector-shadow;
+@mixin clr-root-dark() {
+    @each $key, $value in $tele-colors-dark {
+        --tele-#{$key}: #{$value};
+    }
+}