@netless/telebox-insider 0.3.0-beta.5 → 0.3.0-beta.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/telebox-insider",
-  "version": "0.3.0-beta.5",
+  "version": "0.3.0-beta.7",
   "private": false,
   "description": "Window widget for Whiteboard",
   "author": "CRIMX <straybugs@gmail.com> (https://github.com/crimx/)",
@@ -69,7 +69,7 @@
     "react-dom": "^17.0.2",
     "react-refresh": "^0.8.3",
     "rimraf": "^3.0.0",
-    "sass": "^1.36.0",
+    "sass": "^1.77.0",
     "sass-loader": "^10.1.1",
     "side-effect-manager": "0.1.5",
     "typescript": "^4.9.5",

package/src/AppMenu/index.ts

@@ -0,0 +1,145 @@
+import './style.scss';
+import { TeleBoxManager } from '../TeleBoxManager';
+import { TeleBoxColorScheme, TeleBoxState, TELE_BOX_STATE } from '..';
+
+export type AppId = string;
+
+export interface AppMenuProps {
+  manager: TeleBoxManager;
+  container: HTMLDivElement;
+  theme: TeleBoxColorScheme;
+  getBoxesStatus?: () => Map<string, TeleBoxState>;
+}
+
+export class AppMenu {
+  private readonly namespace: string = 'telebox-app-menu';
+  public readonly container: HTMLDivElement;
+  private readonly badge: HTMLDivElement = document.createElement('div');
+  private readonly menuView: HTMLDivElement = document.createElement('div');
+  private readonly manager: TeleBoxManager;
+  private theme: TeleBoxColorScheme;
+  private getBoxesStatus?: () => Map<string, TeleBoxState>;
+
+  constructor(props: AppMenuProps) {
+    this.container = props.container;
+    this.manager = props.manager;
+    this.theme = props.theme;
+    this.getBoxesStatus = props.getBoxesStatus;
+    this.init();
+  }
+
+  get boxesStatus(): Map<string, TeleBoxState> {
+    return this.getBoxesStatus?.() || new Map();
+  }
+
+  get minimizedBoxesStatus(): TeleBoxState[] {
+    const arr: TeleBoxState[] = [];
+    this.boxesStatus.forEach((status) => {
+      if (status === TELE_BOX_STATE.Minimized) {
+        arr.push(status);
+      }
+    });
+    return arr;
+  }
+
+  private c(className: string): string {
+    return `${this.namespace}-${className}`;
+  }
+
+  public containerClickHandler = () => {
+    if (this.manager.readonly) {
+      return;
+    }
+    const isShowMenuView = getComputedStyle(this.menuView).display === 'flex';
+    if (isShowMenuView) {
+      this.menuView.style.display = 'none';
+    } else {
+      this.menuView.style.display = 'flex';
+    }
+  };
+
+  private menuViewClickHandler = (e: MouseEvent | TouchEvent) => {
+    e.stopPropagation();
+    e.stopImmediatePropagation();
+    const target = e.target as HTMLElement;
+    const id = target.getAttribute(`data-${this.c('app-id')}`);
+    if (id) {
+        const lastNotMinimizedBoxStatus = this.manager.getLastNotMinimizedBoxStatus(id) || TELE_BOX_STATE.Normal;
+        const zIndex = (lastNotMinimizedBoxStatus===TELE_BOX_STATE.Maximized ? this.manager.getMaxMaximizedBoxZIndex() : this.manager.getMaxNormalBoxZIndex()) + 1;
+        this.manager.setBox(id, {
+          status: lastNotMinimizedBoxStatus,
+          zIndex
+        }, false, ()=>{
+          this.manager.focusBox(id);
+        })
+        return;
+    }
+  };
+
+  private createDefaultAppMenu(){
+    this.badge.classList.add(this.c('app-menu-badge'));
+    this.menuView.classList.add(this.c('app-menu-tooltip'));
+    this.container.classList.add(this.c('app-menu-container'), this.theme);
+    this.menuView.addEventListener('click', this.menuViewClickHandler);
+    this.container.append(this.badge, this.menuView);
+  }
+
+  private async init(){
+    this.createDefaultAppMenu();
+    this.appMenuChange();
+  }
+
+    updatePrefersColorSchemeHandler = () => {
+        this.container.classList.remove(this.theme);
+        this.theme = this.manager.prefersColorScheme;
+        this.container.classList.add(this.theme);
+    };
+
+    appMenuChange = () => {
+        const minimizedBoxesStatus = this.manager.getMinimizedBoxesStatus();
+        this.render(minimizedBoxesStatus);
+    }
+
+  private createMinimizedItem(appId: AppId){
+    const appItem = document.createElement('div');
+    appItem.classList.add(this.c('app-menu-item'));
+    console.log("appId=====>", appId);
+    appItem.setAttribute(`data-${this.c('app-id')}`, appId);
+    const titleDiv = document.createElement('div');
+    titleDiv.classList.add(this.c('app-menu-item-title'));
+    const app = this.manager.getBox(appId);
+    titleDiv.innerText = app?.title || appId;
+    appItem.appendChild(titleDiv);
+    return appItem;
+  }
+
+  private renderMenuView(minimizedBoxesStatus: Map<AppId, TELE_BOX_STATE.Minimized>){
+    const items: HTMLDivElement[] = [];
+    minimizedBoxesStatus.forEach((_, appId) => {
+      items.push(this.createMinimizedItem(appId));
+    });
+    this.menuView.append(...items);
+  }
+
+  render(minimizedBoxesStatus: Map<AppId, TELE_BOX_STATE.Minimized>) {
+    this.menuView.style.display = 'none';
+    this.badge.innerText = '';
+    this.menuView.innerHTML = '';
+    if (minimizedBoxesStatus.size === 0) {
+      this.container.style.display = 'none';
+    } else {
+      this.badge.innerText = minimizedBoxesStatus.size.toString();
+      this.renderMenuView(minimizedBoxesStatus);
+      this.container.style.display = 'block';
+    }
+  }
+  destroy(){
+
+    this.badge.remove();
+    this.menuView.removeEventListener('click', this.menuViewClickHandler);
+    this.menuView.remove();
+    this.container.remove();
+    // this.removeContainer();
+  }
+}
+

package/src/AppMenu/style.scss

@@ -0,0 +1,109 @@
+$namespace: "telebox-app-menu";
+.#{$namespace}-app-menu-container {
+    // &.dark {
+    //   background-color: #43434d;
+    //   color-scheme: dark;
+    //   .#{$namespace}-app-menu-tooltip {
+    //     background-color: #43434d;
+    //     color-scheme: dark;
+    //     .#{$namespace}-app-menu-item{
+    //       color: #999;
+    //       &:hover {
+    //         background-color: #383b42;
+    //       }
+    //       &.active{
+    //         color: #fff;
+    //       }
+    //     }
+    //   }
+    // }
+}
+.#{$namespace}-app-menu-badge {
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 1;
+  width: auto;
+  height: 12px;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: #fff;
+  background-color: red;
+  border-radius: 6px;
+  padding: 0 4px;
+  font-size: 12px;
+  line-height: 12px;
+  text-align: center;
+  transform: scale(0.7);
+}
+
+.#{$namespace}-app-menu-tooltip {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  transform: translateY(-50px);
+  width: 100px;
+  height: auto;
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: center;  
+  justify-content: flex-end;
+  box-shadow: 0 2px 6px #2f419226;
+  border-radius: 4px;
+  padding: 3px 0;
+  background-color: #fff;
+  pointer-events: none;
+}
+.#{$namespace}-app-menu-item {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;  
+  justify-content: space-between;
+  padding: 0 5px 0 15px;
+  box-sizing: border-box;
+  width: 100%;
+  pointer-events: auto;
+  color: #999;
+
+  &:hover {
+    background-color: #f0f0f0;
+  }
+
+  &.show-all,
+  &.hidden-all{
+    padding-left: 20px;
+    pointer-events: none;
+    background-size: 15%;
+    background-position-y: center;
+    background-position-x: 2px;
+    background-repeat: no-repeat;
+  }
+
+  &.active{
+    color: #333;
+    pointer-events: auto;
+  }
+
+  &.hidden-all{
+    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjZ2MjZIMHoiIC8+CiAgICAgICAgPHBhdGggaWQ9ImMiIGQ9Ik0yNi44NjkgMEwyOCAxLjEzMVYyNi44N0wyNi44NjkgMjhIMS4xM0wwIDI2Ljg3VjEuMTMxTDEuMTMgMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiPgogICAgICAgICAgICA8bWFzayBpZD0iYiIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNhIiAvPgogICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tNC42NDI5LTQuNjQyOWgzNS4yODU4djM1LjI4NThILTQuNjQyOXoiIG1hc2s9InVybCgjYikiIC8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8bWFzayBpZD0iZCIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNjIiAvPgogICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tMTcuNTE2OCAxNEwxNC0xNy41MTY4IDQ1LjUxNjggMTQgMTQgNDUuNTE2OHoiIG1hc2s9InVybCgjZCkiIC8+CiAgICAgICAgPC9nPgogICAgICAgIDxwYXRoIHN0cm9rZT0iI0E3QTdDQSIgc3Ryb2tlLXdpZHRoPSIxLjIiCiAgICAgICAgICAgIGQ9Ik0xMC4wODg2IDIxLjQ4NjV2LTMuNjk2Nkg2LjM5Mk0yMS4zODU1IDEwLjE4OTVoLTMuNjk2NlY2LjQ5M00yMS40MDIgMTcuNzk4M2gtMy42OTY2djMuNjk2Nk0xMC4yNTAzIDYuMTQ5OHYzLjg5ODVINi4zNTE3IiAvPgogICAgPC9nPgo8L3N2Zz4K);
+  }
+
+  &.show-all{
+    border-top: 1px solid #ccc;
+    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjh2MjhIMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjYSIgLz4KICAgICAgICA8L21hc2s+CiAgICAgICAgPGcgZmlsbD0iI0E3QTdDQSIgZmlsbC1ydWxlPSJub256ZXJvIiBtYXNrPSJ1cmwoI2IpIj4KICAgICAgICAgICAgPHBhdGgKICAgICAgICAgICAgICAgIGQ9Ik0yMC40ODEgMTcuMWgxLjJ2NC41ODFIMTcuMXYtMS4yaDMuMzgxVjE3LjF6bS0xNC4xOTA1LS4wMDloMS4ydjMuMzgxaDMuMzgwOXYxLjJoLTQuNTgxdi00LjU4MXpNMTcuMSA2LjE5MDVoNC41ODF2NC41ODA5aC0xLjJ2LTMuMzgxSDE3LjF2LTEuMnptLTEwLjcwMDguMTA4N2g0Ljc5ODV2MS4ySDcuNTk5MnYzLjU5ODVoLTEuMlY2LjI5OTJ6IiAvPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+Cg==);
+  }
+}
+
+.#{$namespace}-app-menu-item-title {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+  line-height: 20px;
+  text-align: left;
+  height: 20px;
+  pointer-events: none;
+}

package/src/TeleBox/style.scss

@@ -1,5 +1,5 @@
-@import "../scss/variables.scss";
-@import "../scss/mixins.scss";
+@use "../scss/variables" as *;
+@use "../scss/mixins" as *;
 
 .#{$namespace}-box {
     position: absolute;

package/src/TeleBoxCollector/index.ts

@@ -1,6 +1,8 @@
 import "./style.scss";
 import collectorSVG from "./icons/collector.svg";
 import { TeleStyles } from "../typings";
+import { TeleBoxState } from "../TeleBox/typings";
+import { TELE_BOX_STATE } from "../TeleBox/constants";
 
 export interface TeleBoxCollectorConfig {
     visible?: boolean;
@@ -9,9 +11,11 @@ export interface TeleBoxCollectorConfig {
     namespace?: string;
     styles?: TeleStyles;
     onClick?: () => void;
+    getBoxesStatus?: () => Map<string, TeleBoxState>;
 }
 
 export class TeleBoxCollector {
+    public getBoxesStatus?: () => Map<string, TeleBoxState>;
     public constructor({
         visible = true,
         readonly = false,
@@ -19,13 +23,19 @@ export class TeleBoxCollector {
         namespace = "telebox",
         styles = {},
         onClick,
-    }: TeleBoxCollectorConfig = {}) {
+        getBoxesStatus
+    }: TeleBoxCollectorConfig) {
         this._visible = visible;
         this._readonly = readonly;
         this._darkMode = darkMode;
         this.namespace = namespace;
         this.styles = styles;
         this.onClick = onClick;
+        this.getBoxesStatus = getBoxesStatus;
+    }
+
+    get boxesStatus(): Map<string, TeleBoxState> | undefined {
+        return this.getBoxesStatus?.();
     }
 
     public readonly styles: TeleStyles;
@@ -48,6 +58,9 @@ export class TeleBoxCollector {
 
     public $collector: HTMLElement | undefined;
 
+    public $appMenuContainer: HTMLDivElement = document.createElement('div');
+
+
     /**
      * Mount collector to a root element.
      */
@@ -66,6 +79,23 @@ export class TeleBoxCollector {
         return this;
     }
 
+    private hasMinimizedBox(): boolean {
+        const boxesStatus = this.boxesStatus;
+        if (boxesStatus) {
+           for (const status of boxesStatus.values()) {
+                if (status === TELE_BOX_STATE.Minimized) {
+                    return true;
+                }
+           }
+        }
+        return false;
+    }
+
+    public updateBoxesStatus(): void {
+        const hasMinimizedBox = this.hasMinimizedBox();
+        this.setVisible(hasMinimizedBox);
+    }
+
     public setVisible(visible: boolean): this {
         if (this._visible !== visible) {
             this._visible = visible;
@@ -151,6 +181,9 @@ export class TeleBoxCollector {
                 )
             );
 
+            this.$appMenuContainer.classList.add(this.wrapClassName("collector-shadow"));
+            this.$collector.append(this.$appMenuContainer);
+
             this.setStyles(this.styles);
         }
 
@@ -184,4 +217,5 @@ export class TeleBoxCollector {
             this.onClick();
         }
     };
+
 }

package/src/TeleBoxCollector/style.scss

@@ -1,5 +1,5 @@
-@import "../scss/variables.scss";
-@import "../scss/mixins.scss";
+@use "../scss/variables" as *;
+@use "../scss/mixins" as *;
 
 .#{$namespace}-collector {
     @include no-user-select;
@@ -7,7 +7,7 @@
     visibility: hidden;
     display: block;
     position: absolute;
-    z-index: $base-z-index * 2;
+    z-index: $base-z-index * 10;
     width: 40px;
     height: 40px;
     margin: 0;
@@ -43,3 +43,13 @@
         background-color: #43434d;
     }
 }
+
+.#{$namespace}-collector-shadow {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    pointer-events: none;
+}

package/src/TeleBoxManager/MaxTitleBar/index.ts

@@ -16,8 +16,7 @@ export interface MaxTitleBarConfig extends DefaultTitleBarConfig {
 }
 
 export class MaxTitleBar extends DefaultTitleBar {
-
-    public getBoxesStatus?: MaxTitleBarConfig["getBoxesStatus"];
+    public getBoxesStatus?: () => Map<string, TeleBoxState>;
     public constructor(config: MaxTitleBarConfig) {
         super(config);
 
@@ -27,6 +26,10 @@ export class MaxTitleBar extends DefaultTitleBar {
         this.darkMode = config.darkMode;
         this.getBoxesStatus = config.getBoxesStatus;
     }
+
+    get boxesStatus(): Map<string, TeleBoxState> | undefined {
+        return this.getBoxesStatus?.();
+    }
     public hasMaximizedBoxInStatus(): boolean {
         if (this.getBoxesStatus) {
             const boxesStatus = this.getBoxesStatus();

package/src/TeleBoxManager/MaxTitleBar/style.scss

@@ -1,5 +1,5 @@
-@import "../../scss/variables.scss";
-@import "../../scss/mixins.scss";
+@use "../../scss/variables" as *;
+@use "../../scss/mixins" as *;
 
 $scrollbar-size: 8px;
 $scrollbar-ff-width: auto; // FF-only accepts auto, thin, none
@@ -16,7 +16,7 @@ $scrollbar-color-active: rgba(238, 238, 247, 1);
     position: absolute;
     top: 0;
     left: 0;
-    z-index: $base-z-index * 500;
+    z-index: $base-z-index * 10;
 
     .#{$namespace}-title {
         display: none;