@netless/telebox-insider 0.2.8 → 0.2.9

package/package.json

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

package/src/TeleBox/style.scss

@@ -204,6 +204,8 @@
 }
 
 .#{$namespace}-color-scheme-dark {
+    color-scheme: dark;
+
     .#{$namespace}-box-main {
         color: #e9e9e9;
         background: #212126;

package/src/TeleBoxCollector/index.ts

@@ -5,6 +5,7 @@ import { TeleStyles } from "../typings";
 export interface TeleBoxCollectorConfig {
     visible?: boolean;
     readonly?: boolean;
+    darkMode?: boolean;
     namespace?: string;
     styles?: TeleStyles;
     onClick?: () => void;
@@ -14,12 +15,14 @@ export class TeleBoxCollector {
     public constructor({
         visible = true,
         readonly = false,
+        darkMode = false,
         namespace = "telebox",
         styles = {},
         onClick,
     }: TeleBoxCollectorConfig = {}) {
-        this._visible = Boolean(visible);
-        this._readonly = Boolean(readonly);
+        this._visible = visible;
+        this._readonly = readonly;
+        this._darkMode = darkMode;
         this.namespace = namespace;
         this.styles = styles;
         this.onClick = onClick;
@@ -37,6 +40,10 @@ export class TeleBoxCollector {
         return this._readonly;
     }
 
+    public get darkMode(): boolean {
+        return this._darkMode;
+    }
+
     public onClick: (() => void) | undefined;
 
     public $collector: HTMLElement | undefined;
@@ -85,6 +92,23 @@ export class TeleBoxCollector {
         return this;
     }
 
+    public setDarkMode(darkMode: boolean): this {
+        if (this._darkMode !== darkMode) {
+            this._darkMode = darkMode;
+            if (this.$collector) {
+                this.$collector.classList.toggle(
+                    this.wrapClassName("color-scheme-dark"),
+                    darkMode
+                );
+                this.$collector.classList.toggle(
+                    this.wrapClassName("color-scheme-light"),
+                    !darkMode
+                );
+            }
+        }
+        return this;
+    }
+
     public setStyles(styles: TeleStyles): this {
         Object.assign(this.styles, styles);
         if (this.$collector) {
@@ -103,6 +127,7 @@ export class TeleBoxCollector {
         if (!this.$collector) {
             this.$collector = document.createElement("button");
             this.$collector.className = this.wrapClassName("collector");
+            this.$collector.style.backgroundImage = `url('${collectorSVG}')`;
             this.$collector.addEventListener(
                 "click",
                 this.handleCollectorClick
@@ -120,12 +145,11 @@ export class TeleBoxCollector {
                 );
             }
 
-            const $icon = document.createElement("img");
-            $icon.draggable = false;
-            $icon.className = this.wrapClassName("collector-icon");
-            $icon.src = collectorSVG;
-
-            this.$collector.appendChild($icon);
+            this.$collector.classList.add(
+                this.wrapClassName(
+                    this._darkMode ? "color-scheme-dark" : "color-scheme-light"
+                )
+            );
 
             this.setStyles(this.styles);
         }
@@ -153,6 +177,8 @@ export class TeleBoxCollector {
 
     protected _readonly: boolean;
 
+    protected _darkMode: boolean;
+
     protected handleCollectorClick = (): void => {
         if (!this._readonly && this.onClick) {
             this.onClick();

package/src/TeleBoxCollector/style.scss

@@ -18,11 +18,9 @@
     cursor: pointer;
     user-select: none;
     pointer-events: none;
-}
-
-.#{$namespace}-collector-icon {
-    width: 18px;
-    height: 16px;
+    background-repeat: no-repeat;
+    background-size: 18px 16px;
+    background-position: center;
 }
 
 .#{$namespace}-collector-visible {
@@ -33,3 +31,11 @@
 .#{$namespace}-collector-readonly {
     cursor: not-allowed;
 }
+
+.#{$namespace}-color-scheme-dark {
+    color-scheme: dark;
+
+    &.#{$namespace}-collector {
+        background-color: #43434d;
+    }
+}

package/src/TeleBoxManager/MaxTitleBar/index.ts

@@ -8,6 +8,7 @@ import { TeleBoxRect, TeleBoxState } from "../../TeleBox/typings";
 export type MaxTitleBarTeleBox = Pick<TeleBox, "id" | "title" | "readonly">;
 
 export interface MaxTitleBarConfig extends DefaultTitleBarConfig {
+    darkMode: boolean;
     boxes: MaxTitleBarTeleBox[];
     containerRect: TeleBoxRect;
     focusedBox?: MaxTitleBarTeleBox;
@@ -20,6 +21,7 @@ export class MaxTitleBar extends DefaultTitleBar {
         this.boxes = config.boxes;
         this.focusedBox = config.focusedBox;
         this.containerRect = config.containerRect;
+        this.darkMode = config.darkMode;
     }
 
     public focusBox(box?: MaxTitleBarTeleBox): void {
@@ -89,6 +91,22 @@ export class MaxTitleBar extends DefaultTitleBar {
         }
     }
 
+    public setDarkMode(darkMode: boolean): void {
+        if (darkMode !== this.darkMode) {
+            this.darkMode = darkMode;
+            if (this.$titleBar) {
+                this.$titleBar.classList.toggle(
+                    this.wrapClassName("color-scheme-dark"),
+                    darkMode
+                );
+                this.$titleBar.classList.toggle(
+                    this.wrapClassName("color-scheme-light"),
+                    !darkMode
+                );
+            }
+        }
+    }
+
     public render(): HTMLElement {
         const $titleBar = super.render();
         const { x, y, width } = this.containerRect;
@@ -104,6 +122,11 @@ export class MaxTitleBar extends DefaultTitleBar {
             this.wrapClassName("readonly"),
             this.readonly
         );
+        $titleBar.classList.add(
+            this.wrapClassName(
+                this.darkMode ? "color-scheme-dark" : "color-scheme-light"
+            )
+        );
 
         this.updateTitles();
 
@@ -171,6 +194,8 @@ export class MaxTitleBar extends DefaultTitleBar {
         return this.$titles;
     }
 
+    protected darkMode: boolean;
+
     protected $titles: HTMLElement | undefined;
 
     protected boxes: MaxTitleBarTeleBox[];

package/src/TeleBoxManager/MaxTitleBar/style.scss

@@ -123,3 +123,21 @@ $scrollbar-color-active: rgba(238, 238, 247, 1);
         cursor: not-allowed;
     }
 }
+
+.#{$namespace}-color-scheme-dark {
+    color-scheme: dark;
+
+    &.#{$namespace}-titlebar {
+        color: #e9e9e9;
+        background: #43434d;
+        border-bottom: none;
+    }
+
+    .#{$namespace}-titles-tab {
+        border-right-color: #7b88a0;
+    }
+
+    .#{$namespace}-title {
+        color: #e9e9e9;
+    }
+}

package/src/TeleBoxManager/index.ts

@@ -166,6 +166,7 @@ export class TeleBoxManager {
             if (collector) {
                 collector.setVisible(minimized$.value);
                 collector.setReadonly(readonly$.value);
+                collector.setDarkMode(this._darkMode$.value);
                 this._sideEffect.add(() => {
                     collector.onClick = () => {
                         if (!readonly$.value) {
@@ -179,6 +180,9 @@ export class TeleBoxManager {
         readonly$.subscribe((readonly) =>
             collector$.value?.setReadonly(readonly)
         );
+        this._darkMode$.subscribe((darkMode) => {
+            collector$.value?.setDarkMode(darkMode);
+        });
 
         minimized$.subscribe((minimized, _, skipUpdate) => {
             collector$.value?.setVisible(minimized);
@@ -253,6 +257,7 @@ export class TeleBoxManager {
         );
 
         this.maxTitleBar = new MaxTitleBar({
+            darkMode: this.darkMode,
             readonly: readonly$.value,
             namespace: this.namespace,
             state: state$.value,
@@ -287,6 +292,9 @@ export class TeleBoxManager {
         readonly$.subscribe((readonly) =>
             this.maxTitleBar.setReadonly(readonly)
         );
+        this._darkMode$.subscribe((darkMode) => {
+            this.maxTitleBar.setDarkMode(darkMode);
+        });
 
         const valConfig: ValConfig = {
             prefersColorScheme: prefersColorScheme$,

package/src/TeleTitleBar/DefaultTitleBar/style.scss

@@ -73,6 +73,8 @@
 }
 
 .#{$namespace}-color-scheme-dark {
+    color-scheme: dark;
+
     .#{$namespace}-title {
         color: #e9e9e9;
     }