fcr-ui-scene-mobile 3.4.0

package/lib/modules/whiteboard/components/pagination/index.css

@@ -0,0 +1,228 @@
+.fcr-pagination {
+  background: var(--fcr_web_ui_scene_fill2);
+  box-shadow: var(--fcr_dark_s_shadow);
+  border-radius: 8px;
+  border-width: 1px;
+  border-style: solid;
+  display: inline-flex;
+  padding: 0 4px;
+  font-size: 14px;
+  height: 36px;
+}
+
+.fcr-pagination .fcr-pagination__prev,
+.fcr-pagination .fcr-pagination__next,
+.fcr-pagination .fcr-pagination__expansion {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.fcr-pagination .fcr-pagination__prev {
+  padding-right: 4px;
+}
+.fcr-pagination .fcr-pagination__next {
+  padding-left: 4px;
+}
+
+.fcr-pagination .fcr-pagination__btn {
+  border-radius: 6px;
+  height: 26px;
+  width: 26px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  outline: none;
+}
+
+.fcr-pagination .fcr-pagination__btn:hover:not(.fcr-pagination_btn--disabled) {
+  cursor: pointer;
+  color: var(--color-icon-2);
+  background: var(--color-hover);
+}
+
+.fcr-pagination .fcr-pagination__btn:active:not(.fcr-pagination_btn--disabled) {
+  @apply fcr-bg-brand-8;
+}
+
+.fcr-pagination .fcr-pagination__page {
+  @apply fcr-text-1;
+  text-align: center;
+  width: 58px;
+  font-weight: 700;
+  align-self: center;
+}
+
+.fcr-pagination-small {
+  height: 32px;
+}
+.fcr-pagination-small .fcr-pagination__page {
+  width: 40px;
+  font-size: 12px;
+  font-weight: 400;
+}
+
+.fcr-pagination.fcr-pagination-half-r {
+  @apply fcr-rounded-8;
+  height: 32px;
+  min-width: 40px;
+  font-size: 16px;
+  padding: 5px;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  border: none;
+  justify-content: center;
+}
+
+.fcr-pagination-half-r .fcr-pagination__extra .fcr-clickabel-icon {
+  @apply fcr-rounded-4;
+  width: 30px;
+  height: 22px;
+}
+
+.fcr-pagination-half-r .fcr-pagination__next .fcr-pagination__btn,
+.fcr-pagination-half-r .fcr-pagination__prev .fcr-pagination__btn {
+  @apply fcr-rounded-4;
+  width: 22px;
+  height: 22px;
+}
+
+.fcr-pagination-half-r .fcr-pagination__page {
+  flex-shrink: 0;
+  width: fit-content;
+  min-width: 35px;
+}
+
+.fcr-pagination-mask {
+  display: inline-flex;
+  width: 0;
+  opacity: 0;
+  overflow: hidden;
+  transition: 0.3s all;
+}
+
+.fcr-pagination-mask--expanded {
+  opacity: 1;
+  width: 148px;
+}
+
+.fcr-pagination__expansion {
+  width: 0;
+  opacity: 0;
+  overflow: hidden;
+  transition: 0.3s all;
+  cursor: pointer;
+}
+
+.fcr-pagination__expansion--expanded {
+  opacity: 1;
+  width: 30px;
+}
+
+.fcr-pagination-half-r .fcr-pagination__extra {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-right: 9px;
+}
+
+.fcr-pagination-half-r .fcr-pagination__btn {
+  @apply fcr-rounded-10;
+  height: 30px;
+  width: 30px;
+}
+
+.fcr-pagination-half-r .fcr-pagination__prev {
+  padding-left: 13px;
+}
+
+.fcr-pagination_btn--disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.fcr-pagination-float {
+  pointer-events: none;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  --effect-color: theme(colors.brand.4);
+}
+
+.fcr-pagination-float .fcr-pagination-float__prev,
+.fcr-pagination-float .fcr-pagination-float__next {
+  @apply fcr-bg-4 fcr-rounded-8;
+  pointer-events: all;
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 12px;
+}
+.fcr-pagination-float .fcr-pagination-float__prev {
+  left: 10px;
+}
+
+.fcr-pagination-float .fcr-pagination-float__next {
+  right: 10px;
+}
+.fcr-pagination-float .fcr-pagination-float__btn,
+.fcr-pagination-list-view .fcr-pagination-float__btn {
+  @apply fcr-rounded-8 fcr-bg-2;
+  width: 40px;
+  height: 40px;
+  /* Note: backdrop-filter has minimal browser support */
+  backdrop-filter: blur(25px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  outline: none;
+}
+.fcr-pagination-float .fcr-pagination-float__btn:hover:not(.fcr-pagination_btn--disabled),
+.fcr-pagination-list-view .fcr-pagination-float__btn:hover:not(.fcr-pagination_btn--disabled) {
+  @apply fcr-bg-brand-6;
+  cursor: pointer;
+  color: var(--color-icon-2);
+}
+
+.fcr-pagination-float .fcr-pagination-float__btn:active:not(.fcr-pagination_btn--disabled),
+.fcr-pagination-list-view .fcr-pagination-float__btn:active:not(.fcr-pagination_btn--disabled) {
+  @apply fcr-bg-brand-8;
+}
+
+.fcr-pagination-float__page {
+  @apply fcr-text-1;
+  padding: 3px 0 5px;
+}
+.fcr-pagination-list-view {
+  --effect-color: theme(colors.brand.4);
+  display: flex;
+  gap: 4px;
+}
+.fcr-pagination-list-view-col {
+  flex-direction: column;
+}
+.fcr-pagination-list-view .fcr-pagination-float__btn {
+  @apply fcr-rounded-4;
+}
+.fcr-pagination-list-view-row .fcr-pagination-float__btn {
+  width: 30px;
+  height: 114px;
+}
+.fcr-pagination-list-view-row .fcr-pagination-list-view__next svg {
+  transform: rotate(180deg);
+}
+.fcr-pagination-list-view-col .fcr-pagination-float__btn {
+  width: 192px;
+  height: 30px;
+}
+.fcr-pagination-list-view-col .fcr-pagination-list-view__prev svg {
+  transform: rotate(90deg);
+}
+.fcr-pagination-list-view-col .fcr-pagination-list-view__next svg {
+  transform: rotate(270deg);
+}
+.fcr-pagination-list-view .fcr-pagination-list-view__prev .fcr-pagination-float__btn,
+.fcr-pagination-list-view .fcr-pagination-list-view__next .fcr-pagination-float__btn {
+  @apply fcr-bg-2-a70;
+}

package/lib/modules/whiteboard/components/pagination/index.d.ts

@@ -0,0 +1,15 @@
+import './index.css';
+import { FC } from 'react';
+type PaginationProps = {
+    current: number;
+    total: number;
+    onChange?: (current: number) => void;
+};
+type HalfRoundedProps = PaginationProps & {
+    onAdd?: () => void;
+    addText: string;
+    showText: string;
+    hideText: string;
+};
+export declare const HalfRoundedPagination: FC<HalfRoundedProps>;
+export {};

package/lib/modules/whiteboard/components/pagination/index.js

@@ -0,0 +1,163 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HalfRoundedPagination = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
+require("./index.css");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
+var _jsxRuntime = require("react/jsx-runtime");
+var usePageCounter = function usePageCounter(context) {
+  var _useState = (0, _react.useState)(context.current),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    current = _useState2[0],
+    setCurrent = _useState2[1];
+  (0, _react.useEffect)(function () {
+    setCurrent(context.current);
+  }, [context.current]);
+  var handlePrev = function handlePrev() {
+    if (current <= 1) {
+      return;
+    }
+    setCurrent(current - 1);
+  };
+  var handleNext = function handleNext() {
+    if (current >= context.total) {
+      return;
+    }
+    setCurrent(current + 1);
+  };
+  return {
+    current: current,
+    handlePrev: handlePrev,
+    handleNext: handleNext
+  };
+};
+var HalfRoundedPagination = exports.HalfRoundedPagination = function HalfRoundedPagination(_ref) {
+  var current = _ref.current,
+    total = _ref.total,
+    _ref$onAdd = _ref.onAdd,
+    onAdd = _ref$onAdd === void 0 ? function () {} : _ref$onAdd,
+    _ref$onChange = _ref.onChange,
+    onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
+    addText = _ref.addText,
+    showText = _ref.showText,
+    hideText = _ref.hideText;
+  var cls = (0, _classnames["default"])('fcr-pagination fcr-pagination-half-r', {});
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    expansionVisible = _useState4[0],
+    setExpansionVisible = _useState4[1];
+  var _useState5 = (0, _react.useState)(true),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    expanded = _useState6[0],
+    setExpanded = _useState6[1];
+  var _usePageCounter = usePageCounter({
+      current: current,
+      total: total
+    }),
+    handleNext = _usePageCounter.handleNext,
+    handlePrev = _usePageCounter.handlePrev,
+    innerCurrent = _usePageCounter.current;
+  (0, _react.useEffect)(function () {
+    onChange(innerCurrent);
+  }, [innerCurrent]);
+  var handleExpand = function handleExpand() {
+    setExpanded(function (expanded) {
+      return !expanded;
+    });
+  };
+  var prevCls = (0, _classnames["default"])('fcr-pagination__btn', innerCurrent <= 1 ? 'fcr-pagination_btn--disabled' : 'fcr-btn-click-effect');
+  var nextCls = (0, _classnames["default"])('fcr-pagination__btn', innerCurrent >= total ? 'fcr-pagination_btn--disabled' : 'fcr-btn-click-effect');
+  var expansionCls = (0, _classnames["default"])('fcr-pagination__expansion', {
+    'fcr-pagination__expansion--expanded': !expanded || expansionVisible
+  });
+  var maskCls = (0, _classnames["default"])('fcr-pagination-mask', {
+    'fcr-pagination-mask--expanded': expanded
+  });
+  var handleHover = function handleHover(visible) {
+    return function () {
+      setExpansionVisible(visible);
+    };
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "fcr-pagination-half-r-wrapper",
+    onMouseEnter: handleHover(true),
+    onMouseLeave: handleHover(false),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: cls,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: maskCls,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "fcr-pagination__extra",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+            content: addText,
+            placement: "top",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+              type: _type.FcrIconType.FCR_V2_PHONE_MORE1,
+              onClick: onAdd,
+              colors: {
+                iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+              }
+            })
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "fcr-divider"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "fcr-pagination__prev",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+            className: prevCls,
+            onClick: handlePrev,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+              type: _type.FcrIconType.FCR_LEFT4,
+              size: 24,
+              colors: {
+                iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+              }
+            })
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "fcr-pagination__page",
+          children: [current !== null && current !== void 0 ? current : 0, "/", total !== null && total !== void 0 ? total : 0]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "fcr-pagination__next",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+            className: nextCls,
+            onClick: handleNext,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+              type: _type.FcrIconType.FCR_RIGHT4,
+              size: 24,
+              colors: {
+                iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+              }
+            })
+          })
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+        content: expanded ? hideText : showText,
+        placement: !expanded ? 'right' : 'top',
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: expansionCls,
+          onClick: handleExpand,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+            type: _type.FcrIconType.FCR_V2_CHEVRON_LEFT2,
+            size: 16,
+            style: {
+              transform: expanded ? 'rotate(0deg)' : 'rotate(180deg)'
+            },
+            colors: {
+              iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+            }
+          })
+        })
+      })]
+    })
+  });
+};

package/lib/modules/whiteboard/components/pagination/store.d.ts

@@ -0,0 +1,18 @@
+declare const scenePaginationUIContextDefault: {
+    observables: {
+        currentPage: number;
+        totalPage: number;
+    };
+    addPage: () => void;
+    changePage: (_page: number) => void;
+};
+export declare const ScenePaginationUIContext: import("react").Context<{
+    observables: {
+        currentPage: number;
+        totalPage: number;
+    };
+    addPage: () => void;
+    changePage: (_page: number) => void;
+}>;
+export type ScenePaginationUIContextValue = typeof scenePaginationUIContextDefault;
+export {};

package/lib/modules/whiteboard/components/pagination/store.js

@@ -0,0 +1,17 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ScenePaginationUIContext = void 0;
+var _react = require("react");
+var scenePaginationUIContextDefault = {
+  observables: {
+    currentPage: 0,
+    totalPage: 0
+  },
+  addPage: function addPage() {},
+  changePage: function changePage(_page) {}
+};
+var ScenePaginationUIContext = exports.ScenePaginationUIContext = /*#__PURE__*/(0, _react.createContext)(scenePaginationUIContextDefault);

package/lib/modules/whiteboard/components/progress/index.d.ts

@@ -0,0 +1,5 @@
+import './style.css';
+export default function ProgressDialog(props: {
+    title: string;
+    progress: number;
+}): import("react/jsx-runtime").JSX.Element;

package/lib/modules/whiteboard/components/progress/index.js

@@ -0,0 +1,43 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = ProgressDialog;
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+require("./style.css");
+var _jsxRuntime = require("react/jsx-runtime");
+function ProgressDialog(props) {
+  var title = props.title,
+    progress = props.progress;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "progress-dialog-frame",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "progress-dialog-icon",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+        type: _type.FcrIconType.FCR_DOWNLOAD,
+        size: 24
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "progress-dialog-content",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "progress-dialog-title",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: title
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+          children: [progress, "%"]
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "progress-dialog-progress",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "progress-dialog-progress-bar",
+          style: {
+            width: "".concat(progress, "%")
+          }
+        })
+      })]
+    })]
+  });
+}

package/lib/modules/whiteboard/components/progress/style.css

@@ -0,0 +1,52 @@
+.progress-dialog-frame {
+    width: 290px;
+    min-height: 58px;
+    padding: 10px 0;
+    border-radius: var(--fcr_cornerradius_s);
+    background: var(--fcr_ui_scene_white6);
+    box-shadow: var(--fcr_web_light_dropup);
+    display: flex;
+    align-items: center;
+    z-index: 1000;
+    position: absolute;
+    top: calc(100% - 98px);
+    left: calc(100vw - 310px);
+  }
+  .progress-dialog-icon {
+    width: 32px;
+    height: 32px;
+    margin: 0 18px;
+  }
+  .progress-dialog-icon svg {
+    width: 32px;
+    height: 32px;
+  }
+  .progress-dialog-content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    flex: 1;
+    padding-right: 18px;
+  }
+  .progress-dialog-title {
+    font-size: 13px;
+    color: var(--fcr_ui_scene_icontext1);
+    margin-bottom: 10px;
+    justify-content: space-between;
+    display: flex;
+    flex: 1;
+  }
+  .progress-dialog-progress {
+    font-size: 12px;
+    height: 9px;
+    background: var(--fcr_ui_scene_ramp_brand1);
+    border-radius: var(--fcr_cornerradius_round);
+    flex: 1;
+  }
+  .progress-dialog-progress-bar {
+    width: 100%;
+    height: 9px;
+    background: var(--fcr_ui_scene_ramp_brand6);
+    border-radius: var(--fcr_cornerradius_round);
+  }
+  

package/lib/modules/whiteboard/components/scene-pagination.d.ts

@@ -0,0 +1 @@
+export declare const ScenePagination: () => import("react/jsx-runtime").JSX.Element;

package/lib/modules/whiteboard/components/scene-pagination.js

@@ -0,0 +1,30 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ScenePagination = void 0;
+var _mobxReact = require("mobx-react");
+var _react = require("react");
+var _pagination = require("./pagination");
+var _store = require("./pagination/store");
+var _jsxRuntime = require("react/jsx-runtime");
+var ScenePagination = exports.ScenePagination = (0, _mobxReact.observer)(function () {
+  var _useContext = (0, _react.useContext)(_store.ScenePaginationUIContext),
+    observables = _useContext.observables,
+    addPage = _useContext.addPage,
+    changePage = _useContext.changePage;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "fcr-board-pagination",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_pagination.HalfRoundedPagination, {
+      current: observables.currentPage,
+      total: observables.totalPage,
+      onAdd: addPage,
+      onChange: changePage,
+      addText: 'fcr_board_new_page',
+      showText: 'fcr_board_show_pageration',
+      hideText: 'fcr_board_hide_pageration'
+    })
+  });
+});

package/lib/modules/whiteboard/components/switch-theme/index.css

@@ -0,0 +1,98 @@
+.whiteboard-switch-theme {
+  height: 175px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  column-gap: 22px;
+  border-bottom: 1px solid var(--fcr_ui_scene_line1);
+  position: relative;
+}
+.whiteboard-switch-theme-popover {
+  max-width: 100%;
+  width: 100%;
+}
+.whiteboard-switch-theme-popover .fcr-tooltip-inner {
+  border-radius: 0 !important;
+  box-shadow: none !important;
+  border: none !important;
+}
+.whiteboard-switch-theme_item {
+  width: 184px;
+  height: 136px;
+  border: 1px solid var(--fcr_ui_scene_line1);
+  border-radius: 16px;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: top;
+  align-items: top;
+  flex-direction: column;
+  background: var(--fcr_web_ui_scene_fill4_popup);
+  color: var(--fcr_ui_scene_icontext1);
+}
+.whiteboard-switch-theme_item-active {
+  background-color: var(--fcr_ui_scene_ramp_brand6);
+}
+
+.whiteboard-switch-theme_item-close {
+  width: 30px;
+  height: 30px;
+  position: absolute;
+  top: 50%;
+  margin-top: -15px;
+  border-radius: 50%;
+  left: calc(50% + 220px * 1.5);
+  background: var(--fcr_web_ui_scene_fill4_popup);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+.whiteboard-switch-theme_item-close:hover {
+  background: var(--fcr_web_ui_scene_hover);
+}
+.whiteboard-switch-theme_item-close:hover path {
+  fill: var(--fcr_ui_scene_ramp_brand6);
+}
+.whiteboard-switch-theme_item:hover {
+  border: 2px solid var(--fcr_ui_scene_ramp_brand6);
+}
+.whiteboard-switch-theme_item:hover .whiteboard-switch-theme_item-inner {
+  width: 172px;
+  margin-top: 3px;
+}
+
+.whiteboard-switch-theme_item-inner {
+  width: 174px;
+  height: 100px;
+  border-radius: 12px;
+  background: var(--fcr_ui_scene_white10);
+  margin: 4px 4px 9px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  row-gap: 12px;
+}
+.whiteboard-switch-theme_item-inner.whiteboard {
+  background: #fff;
+}
+.whiteboard-switch-theme_item-inner.blackboard {
+  background: #000;
+}
+.whiteboard-switch-theme_item-inner.chalkboard {
+  background: #5a7d75;
+}
+.whiteboard-switch-theme_color-group {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  column-gap: 18px;
+}
+.whiteboard-switch-theme_color-group span {
+  display: block;
+  width: 18px;
+  height: 18px;
+  border-radius: 18px;
+  background: var(--fcr_web_ui_scene_fill4_popup);
+}

package/lib/modules/whiteboard/components/switch-theme/index.d.ts

@@ -0,0 +1,3 @@
+import './index.css';
+declare const WhiteboardSwitchTheme: () => import("react/jsx-runtime").JSX.Element;
+export default WhiteboardSwitchTheme;