@netless/fastboard-react 0.2.7 → 0.2.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/fastboard-react",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "description": "A UI kit built on top of @netless/fastboard.",
   "main": "dist/index.js",
   "files": [
@@ -22,7 +22,7 @@
     "white-web-sdk": ">=2.16.0"
   },
   "devDependencies": {
-    "@netless/fastboard-core": "0.2.7",
+    "@netless/fastboard-core": "0.2.8",
     "@netless/window-manager": "^0.4.7",
     "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.11",

package/src/components/Fastboard.scss

@@ -36,6 +36,6 @@
 
 .fastboard-bottom-right {
   @extend .fastboard-bottom-left;
-  left: initial;
+  left: auto;
   right: 8px;
 }

package/src/components/PageControl/PageControl.scss

@@ -6,19 +6,19 @@ $name: "fastboard-page-control";
   gap: 4px;
   padding: 4px;
   border-radius: 4px;
-  backdrop-filter: blur(2px);
-  -webkit-backdrop-filter: blur(2px);
+  backdrop-filter: blur(5px);
+  -webkit-backdrop-filter: blur(5px);
 
   &.light {
     color: #333;
-    background-color: rgba($color: #fff, $alpha: 0.85);
-    border: 1px solid rgba(0, 0, 0, 0.15);
+    background-color: rgba(255, 255, 255, 0.9);
+    border: 1px solid #e5e8f0;
   }
 
   &.dark {
     color: #ddd;
-    background-color: rgba($color: #333, $alpha: 0.85);
-    border: 1px solid rgba(0, 0, 0, 0.45);
+    background-color: #14181e;
+    border: 1px solid #383b42;
   }
 }
 
@@ -37,8 +37,8 @@ $name: "fastboard-page-control";
 
   svg,
   img {
-    width: 1em;
-    height: 1em;
+    width: 100%;
+    height: 100%;
   }
 
   &:disabled {
@@ -47,11 +47,11 @@ $name: "fastboard-page-control";
   }
 
   &.light:not(:disabled):hover {
-    background-color: rgba(51, 129, 255, 0.1);
+    background-color: #ebf2ff;
   }
 
   &.dark:not(:disabled):hover {
-    background-color: rgba(51, 129, 255, 0.25);
+    background-color: #383b42;
   }
 }
 
@@ -72,9 +72,13 @@ $name: "fastboard-page-control";
   opacity: 0.6;
 }
 
+.#{$name}-text {
+  line-height: 24px;
+}
+
 .#{$name}-page,
 .#{$name}-slash,
 .#{$name}-page-count {
-  font-size: 12px;
+  font-size: 14px;
   font-variant-numeric: tabular-nums;
 }

package/src/components/PageControl/PageControl.tsx

@@ -6,9 +6,9 @@ import React from "react";
 
 import { useTranslation } from "../../i18n";
 import { Icon } from "../../icons";
-import { ChevronLeft } from "../../icons/ChevronLeft";
-import { ChevronRight } from "../../icons/ChevronRight";
-import { FilePlus } from "../../icons/FilePlus";
+import { Left } from "../../icons/Left";
+import { Right } from "../../icons/Right";
+import { WhiteboardAdd } from "../../icons/WhiteboardAdd";
 import { TopOffset } from "../../theme";
 import { useTheme, useWritable } from "../hooks";
 import { usePageControl } from "./hooks";
@@ -52,16 +52,14 @@ export function PageControl({
           disabled={disabled || pageIndex === 0}
           onClick={actions.prevPage}
         >
-          <Icon
-            fallback={<ChevronLeft theme={theme} />}
-            src={disabled ? prevIconDisable : prevIcon}
-            alt="[prev]"
-          />
+          <Icon fallback={<Left theme={theme} />} src={disabled ? prevIconDisable : prevIcon} alt="[prev]" />
         </button>
       </Tippy>
-      <span className={clsx(`${name}-page`, theme)}>{pageCount === 0 ? "\u2026" : pageIndex + 1}</span>
-      <span className={clsx(`${name}-slash`, theme)}>/</span>
-      <span className={clsx(`${name}-page-count`, theme)}>{pageCount}</span>
+      <span className={clsx(`${name}-text`, theme)}>
+        <span className={clsx(`${name}-page`, theme)}>{pageCount === 0 ? "\u2026" : pageIndex + 1}</span>
+        <span className={clsx(`${name}-slash`, theme)}>/</span>
+        <span className={clsx(`${name}-page-count`, theme)}>{pageCount}</span>
+      </span>
       <Tippy
         className="fastboard-tip"
         content={t("nextPage")}
@@ -77,11 +75,7 @@ export function PageControl({
           disabled={disabled || pageIndex === pageCount - 1}
           onClick={actions.nextPage}
         >
-          <Icon
-            fallback={<ChevronRight theme={theme} />}
-            src={disabled ? nextIconDisable : nextIcon}
-            alt="[next]"
-          />
+          <Icon fallback={<Right theme={theme} />} src={disabled ? nextIconDisable : nextIcon} alt="[next]" />
         </button>
       </Tippy>
       <Tippy
@@ -95,7 +89,11 @@ export function PageControl({
         offset={TopOffset}
       >
         <button className={clsx(`${name}-btn`, "add", theme)} disabled={disabled} onClick={actions.addPage}>
-          <Icon fallback={<FilePlus theme={theme} />} src={disabled ? addIconDisable : addIcon} alt="[add]" />
+          <Icon
+            fallback={<WhiteboardAdd theme={theme} />}
+            src={disabled ? addIconDisable : addIcon}
+            alt="[add]"
+          />
         </button>
       </Tippy>
     </div>

package/src/components/PlayerControl/PlayerControl.scss

@@ -7,8 +7,8 @@ $name: "fastboard-player-control";
   gap: 4px;
   padding: 4px;
   border-radius: 4px;
-  backdrop-filter: blur(2px);
-  -webkit-backdrop-filter: blur(2px);
+  backdrop-filter: blur(5px);
+  -webkit-backdrop-filter: blur(5px);
 
   &.auto-hide {
     opacity: 0;
@@ -45,14 +45,14 @@ $name: "fastboard-player-control";
 
   &.light {
     color: #333;
-    background-color: rgba($color: #fff, $alpha: 0.85);
-    border: 1px solid rgba(0, 0, 0, 0.15);
+    background-color: rgba(255, 255, 255, 0.9);
+    border: 1px solid #e5e8f0;
   }
 
   &.dark {
     color: #ddd;
-    background-color: rgba($color: #333, $alpha: 0.85);
-    border: 1px solid rgba(0, 0, 0, 0.45);
+    background-color: #14181e;
+    border: 1px solid #383b42;
   }
 }
 
@@ -74,8 +74,8 @@ $name: "fastboard-player-control";
 
   svg,
   img {
-    width: 1em;
-    height: 1em;
+    width: 100%;
+    height: 100%;
   }
 
   &:disabled {
@@ -84,11 +84,11 @@ $name: "fastboard-player-control";
   }
 
   &.light:not(:disabled):hover {
-    background-color: rgba(51, 129, 255, 0.1);
+    background-color: #ebf2ff;
   }
 
   &.dark:not(:disabled):hover {
-    background-color: rgba(51, 129, 255, 0.25);
+    background-color: #383b42;
   }
 
   &.loading {
@@ -113,7 +113,7 @@ $name: "fastboard-player-control";
     width: initial;
     height: initial;
     user-select: none;
-    font-size: 12px;
+    font-size: 14px;
     padding: 4px;
     justify-content: flex-end;
 
@@ -140,6 +140,6 @@ $name: "fastboard-player-control";
 .#{$name}-slash,
 .#{$name}-total,
 .#{$name}-speed-text {
-  font-size: 12px;
+  font-size: 14px;
   font-variant-numeric: tabular-nums;
 }

package/src/components/RedoUndo/RedoUndo.scss

@@ -6,19 +6,19 @@ $name: "fastboard-redo-undo";
   gap: 4px;
   padding: 4px;
   border-radius: 4px;
-  backdrop-filter: blur(2px);
-  -webkit-backdrop-filter: blur(2px);
+  backdrop-filter: blur(5px);
+  -webkit-backdrop-filter: blur(5px);
 
   &.light {
     color: #333;
-    background-color: rgba($color: #fff, $alpha: 0.85);
-    border: 1px solid rgba(0, 0, 0, 0.15);
+    background-color: rgba(255, 255, 255, 0.9);
+    border: 1px solid #e5e8f0;
   }
 
   &.dark {
     color: #ddd;
-    background-color: rgba($color: #333, $alpha: 0.85);
-    border: 1px solid rgba(0, 0, 0, 0.45);
+    background-color: #14181e;
+    border: 1px solid #383b42;
   }
 }
 
@@ -37,8 +37,8 @@ $name: "fastboard-redo-undo";
 
   svg,
   img {
-    width: 1em;
-    height: 1em;
+    width: 100%;
+    height: 100%;
   }
 
   &:disabled {
@@ -47,10 +47,10 @@ $name: "fastboard-redo-undo";
   }
 
   &.light:not(:disabled):hover {
-    background-color: rgba(51, 129, 255, 0.1);
+    background-color: #ebf2ff;
   }
 
   &.dark:not(:disabled):hover {
-    background-color: rgba(51, 129, 255, 0.25);
+    background-color: #383b42;
   }
 }

package/src/components/Toolbar/Toolbar.scss

@@ -9,8 +9,8 @@ $name: "fastboard-toolbar";
   gap: 4px;
   position: absolute;
   z-index: 100;
-  backdrop-filter: blur(2px);
-  -webkit-backdrop-filter: blur(2px);
+  backdrop-filter: blur(5px);
+  -webkit-backdrop-filter: blur(5px);
 
   .rc-slider {
     padding: 6px 0;
@@ -36,17 +36,18 @@ $name: "fastboard-toolbar";
 
   &.light {
     color: #333;
-    background-color: rgba($color: #fff, $alpha: 0.85);
-    border: 1px solid rgba(0, 0, 0, 0.15);
-  }
-
-  &.expanded {
-    border: 1px solid rgba(0, 0, 0, 0.15);
+    background-color: rgba(255, 255, 255, 0.9);
+    border: 1px solid #e5e8f0;
   }
 
   &.dark {
     color: #ddd;
-    background-color: rgba($color: #333, $alpha: 0.85);
+    background-color: #14181e;
+    border: 1px solid #383b42;
+  }
+
+  &.expanded {
+    border: 1px solid rgba(0, 0, 0, 0.15);
   }
 
   &.expanded:hover {
@@ -108,11 +109,11 @@ $name: "fastboard-toolbar";
     }
 
     &.light:not(:disabled):hover {
-      background-color: rgba(51, 129, 255, 0.1);
+      background-color: #ebf2ff;
     }
 
     &.dark:not(:disabled):hover {
-      background-color: rgba(51, 129, 255, 0.25);
+      background-color: #383b42;
     }
   }
 
@@ -228,7 +229,7 @@ $name: "fastboard-toolbar";
     }
 
     &-text {
-      font-size: 12px;
+      font-size: 14px;
       color: #5d5d5d;
       overflow: hidden;
       white-space: nowrap;

package/src/components/ZoomControl/ZoomControl.scss

@@ -7,19 +7,19 @@ $name: "fastboard-zoom-control";
   gap: 4px;
   padding: 4px;
   border-radius: 4px;
-  backdrop-filter: blur(2px);
-  -webkit-backdrop-filter: blur(2px);
+  backdrop-filter: blur(5px);
+  -webkit-backdrop-filter: blur(5px);
 
   &.light {
     color: #333;
-    background-color: rgba($color: #fff, $alpha: 0.85);
-    border: 1px solid rgba(0, 0, 0, 0.15);
+    background-color: rgba(255, 255, 255, 0.9);
+    border: 1px solid #e5e8f0;
   }
 
   &.dark {
     color: #ddd;
-    background-color: rgba($color: #333, $alpha: 0.85);
-    border: 1px solid rgba(0, 0, 0, 0.45);
+    background-color: #14181e;
+    border: 1px solid #383b42;
   }
 }
 
@@ -38,8 +38,8 @@ $name: "fastboard-zoom-control";
 
   svg,
   img {
-    width: 1em;
-    height: 1em;
+    width: 100%;
+    height: 100%;
   }
 
   &:disabled {
@@ -48,11 +48,11 @@ $name: "fastboard-zoom-control";
   }
 
   &.light:not(:disabled):hover {
-    background-color: rgba(51, 129, 255, 0.1);
+    background-color: #ebf2ff;
   }
 
   &.dark:not(:disabled):hover {
-    background-color: rgba(51, 129, 255, 0.25);
+    background-color: #383b42;
   }
 }
 
@@ -69,12 +69,16 @@ $name: "fastboard-zoom-control";
   }
 }
 
+.#{$name}-text {
+  line-height: 24px;
+}
+
 .#{$name}-percent {
   opacity: 0.6;
 }
 
 .#{$name}-scale,
 .#{$name}-percent {
-  font-size: 12px;
+  font-size: 14px;
   font-variant-numeric: tabular-nums;
 }

package/src/components/ZoomControl/ZoomControl.tsx

@@ -55,8 +55,10 @@ export function ZoomControl({
           />
         </button>
       </Tippy>
-      <span className={clsx(`${name}-scale`, theme)}>{Math.ceil(scale * 100)}</span>
-      <span className={clsx(`${name}-percent`, theme)}>%</span>
+      <span className={clsx(`${name}-text`, theme)}>
+        <span className={clsx(`${name}-scale`, theme)}>{Math.ceil(scale * 100)}</span>
+        <span className={clsx(`${name}-percent`, theme)}>%</span>
+      </span>
       <Tippy
         className="fastboard-tip"
         content={t("zoomIn")}

package/src/icons/Left.tsx

@@ -0,0 +1,15 @@
+import type { IconProps } from "../typings";
+
+import React from "react";
+import { themes } from "../theme";
+
+export function Left({ theme = "light", active }: IconProps) {
+  const config = themes[theme];
+  const stroke = active ? config.activeColor : config.color;
+
+  return (
+    <svg viewBox="0 0 24 24" fill="none">
+      <path d="m14 8-2 2-2 2 2 2 2 2" stroke={stroke} strokeLinejoin="round" strokeWidth="1.25" />
+    </svg>
+  );
+}

package/src/icons/Minus.tsx

@@ -8,8 +8,8 @@ export function Minus({ theme = "light", active }: IconProps) {
   const stroke = active ? config.activeColor : config.color;
 
   return (
-    <svg viewBox="0 0 24 24">
-      <path fill="none" stroke={stroke} strokeLinecap="round" strokeLinejoin="round" d="M7 12h10" />
+    <svg viewBox="0 0 24 24" fill="none">
+      <path d="M5 12h14" stroke={stroke} strokeLinejoin="round" strokeWidth="1.25" />
     </svg>
   );
 }

package/src/icons/Plus.tsx

@@ -8,8 +8,8 @@ export function Plus({ theme = "light", active }: IconProps) {
   const stroke = active ? config.activeColor : config.color;
 
   return (
-    <svg viewBox="0 0 24 24">
-      <path fill="none" stroke={stroke} strokeLinecap="round" strokeLinejoin="round" d="M12 7v10m-5-5h10" />
+    <svg viewBox="0 0 24 24" fill="none">
+      <path d="M5 12h14m-7-7v14" stroke={stroke} strokeLinejoin="round" strokeWidth="1.25" />
     </svg>
   );
 }

package/src/icons/Redo.tsx

@@ -8,11 +8,12 @@ export function Redo({ theme = "light", active }: IconProps) {
   const stroke = active ? config.activeColor : config.color;
 
   return (
-    <svg viewBox="0 0 24 24">
-      <g fill="none" fillRule="evenodd" stroke={stroke} strokeLinecap="round" strokeLinejoin="round">
-        <path d="M14 14h4v-4" />
-        <path d="m18 14-.788-.9A7.005 7.005 0 0 0 6 14h0" />
-      </g>
+    <svg viewBox="0 0 24 24" fill="none">
+      <path
+        d="M19 9.625H9v-1.25h10v1.25ZM5.625 13v6h-1.25v-6h1.25ZM9 9.625A3.375 3.375 0 0 0 5.625 13h-1.25A4.625 4.625 0 0 1 9 8.375v1.25Z"
+        fill={stroke}
+      />
+      <path d="m15 5 4 4-4 4" stroke={stroke} strokeLinejoin="round" strokeWidth="1.25" />
     </svg>
   );
 }

package/src/icons/Reset.tsx

@@ -8,12 +8,10 @@ export function Reset({ theme = "light", active }: IconProps) {
   const stroke = active ? config.activeColor : config.color;
 
   return (
-    <svg viewBox="0 0 24 24">
-      <g fill="none" fillRule="evenodd" transform="translate(-176 -684)">
-        <path stroke={stroke} strokeLinejoin="round" d="M188 688v4m0 8v4m8-8h-4m-8 0h-4" />
-        <circle cx="188" cy="696" r="6" stroke={stroke} />
-        <circle cx="188" cy="696" r="1" fill={stroke} />
-      </g>
+    <svg viewBox="0 0 24 24" fill="none">
+      <circle cx="12" cy="12" fill={stroke} r="2" />
+      <path d="M12 3v4m0 10v4m9-9h-4M7 12H3" stroke={stroke} strokeLinejoin="round" strokeWidth="1.25" />
+      <circle cx="12" cy="12" r="7" stroke={stroke} strokeLinejoin="round" strokeWidth="1.25" />
     </svg>
   );
 }

package/src/icons/Right.tsx

@@ -0,0 +1,15 @@
+import type { IconProps } from "../typings";
+
+import React from "react";
+import { themes } from "../theme";
+
+export function Right({ theme = "light", active }: IconProps) {
+  const config = themes[theme];
+  const stroke = active ? config.activeColor : config.color;
+
+  return (
+    <svg viewBox="0 0 24 24" fill="none">
+      <path d="m10 8 2 2 2 2-2 2-2 2" stroke={stroke} strokeLinejoin="round" strokeWidth="1.25" />
+    </svg>
+  );
+}

package/src/icons/Undo.tsx

@@ -8,11 +8,12 @@ export function Undo({ theme = "light", active }: IconProps) {
   const stroke = active ? config.activeColor : config.color;
 
   return (
-    <svg viewBox="0 0 24 24">
-      <g fill="none" fillRule="evenodd" stroke={stroke} strokeLinecap="round" strokeLinejoin="round">
-        <path d="M10 14H6v-4" />
-        <path d="m6 14 .788-.9A7.005 7.005 0 0 1 18 14h0" />
-      </g>
+    <svg viewBox="0 0 24 24" fill="none">
+      <path
+        d="M5 9.625h10v-1.25H5v1.25ZM18.375 13v6h1.25v-6h-1.25ZM15 9.625A3.375 3.375 0 0 1 18.375 13h1.25A4.625 4.625 0 0 0 15 8.375v1.25Z"
+        fill={stroke}
+      />
+      <path d="M9 5 5 9l4 4" stroke={stroke} strokeLinejoin="round" strokeWidth="1.25" />
     </svg>
   );
 }

package/src/icons/WhiteboardAdd.tsx

@@ -0,0 +1,26 @@
+import type { IconProps } from "../typings";
+
+import React from "react";
+import { themes } from "../theme";
+
+export function WhiteboardAdd({ theme = "light", active }: IconProps) {
+  const config = themes[theme];
+  const stroke = active ? config.activeColor : config.color;
+
+  return (
+    <svg viewBox="0 0 24 24" fill="none">
+      <path d="M4 20h16M4 6h16" stroke={stroke} strokeLinejoin="round" strokeWidth="1.25" />
+      <rect
+        height="10"
+        rx="1"
+        stroke={stroke}
+        strokeLinejoin="round"
+        strokeWidth="1.25"
+        width="14"
+        x="5"
+        y="8"
+      />
+      <path d="M12 4v2m-3 7h6m-3-3v6" stroke={stroke} strokeLinejoin="round" strokeWidth="1.25" />
+    </svg>
+  );
+}

package/src/icons/ChevronLeft.tsx

@@ -1,21 +0,0 @@
-import type { IconProps } from "../typings";
-
-import React from "react";
-import { themes } from "../theme";
-
-export function ChevronLeft({ theme = "light", active }: IconProps) {
-  const config = themes[theme];
-  const stroke = active ? config.activeColor : config.color;
-
-  return (
-    <svg viewBox="0 0 24 24">
-      <path
-        fill="none"
-        stroke={stroke}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="m14 16-2-2-2-2 2-2 2-2"
-      />
-    </svg>
-  );
-}

package/src/icons/ChevronRight.tsx

@@ -1,21 +0,0 @@
-import type { IconProps } from "../typings";
-
-import React from "react";
-import { themes } from "../theme";
-
-export function ChevronRight({ theme = "light", active }: IconProps) {
-  const config = themes[theme];
-  const stroke = active ? config.activeColor : config.color;
-
-  return (
-    <svg viewBox="0 0 24 24">
-      <path
-        fill="none"
-        stroke={stroke}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="m10 16 2-2 2-2-2-2-2-2"
-      />
-    </svg>
-  );
-}

package/src/icons/FilePlus.tsx

@@ -1,18 +0,0 @@
-import type { IconProps } from "../typings";
-
-import React from "react";
-import { themes } from "../theme";
-
-export function FilePlus({ theme = "light", active }: IconProps) {
-  const config = themes[theme];
-  const stroke = active ? config.activeColor : config.color;
-
-  return (
-    <svg viewBox="0 0 24 24">
-      <path
-        fill={stroke}
-        d="M12 7.5a.5.5 0 0 1 .09.992L12 8.5H8a1.5 1.5 0 0 0-1.493 1.356L6.5 10v6a1.5 1.5 0 0 0 1.356 1.493L8 17.5h6a1.5 1.5 0 0 0 1.493-1.356L15.5 16v-4a.5.5 0 0 1 .992-.09l.008.09v4a2.5 2.5 0 0 1-2.336 2.495L14 18.5H8a2.5 2.5 0 0 1-2.495-2.336L5.5 16v-6a2.5 2.5 0 0 1 2.336-2.495L8 7.5h4Zm4-2a.5.5 0 0 1 .492.41L16.5 6v1.5H18a.5.5 0 0 1 .09.992L18 8.5h-1.5V10a.5.5 0 0 1-.992.09L15.5 10V8.5H14a.5.5 0 0 1-.09-.992L14 7.5h1.5V6a.5.5 0 0 1 .5-.5Z"
-      />
-    </svg>
-  );
-}