fcr-ui-scene-mobile 3.4.0

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

@@ -0,0 +1,588 @@
+.fcr-board-toolbar {
+  position: absolute;
+  width: 50px;
+  z-index: 10;
+  border-radius: 8px;
+  /* box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); */
+  box-shadow: var(--fcr_web_light_dropup);
+}
+
+.fcr-board-toolbar .fcr-divider-vertical::before {
+  background: linear-gradient(
+    to left,
+    rgba(255, 255, 255, 0) 0%,
+    rgba(0, 0, 0, 0.25) 50%,
+    rgba(255, 255, 255, 0) 97.92%
+  );
+}
+
+.fcr-board-toolbar-main {
+  padding: 6px 0;
+  border-radius: 8px;
+  width: 50px;
+  border: 1px solid var(--fcr_ui_scene_black1);
+}
+
+.fcr-board-toolbar-horizontal.fcr-board-toolbar-main {
+}
+
+.fcr-board-toolbar-horizontal {
+  position: absolute;
+  width: 836px;
+  height: 70px;
+  z-index: 10;
+  border: 1px solid var(--fcr_ui_scene_black1);
+}
+
+.fcr-board-toolbar-horizontal .fcr-board-toolbar-list {
+  flex-direction: row;
+  display: flex;
+  padding: 0 10px;
+  align-items: center;
+}
+
+.fcr-board-toolbar-horizontal .fcr-board-toolbar-list-title {
+  display: block;
+  width: 50px;
+  margin-left: -2px;
+}
+
+.fcr-board-toolbar-horizontal .fcr-board-toolbar-list li {
+  width: 46px;
+  height: 36px;
+  margin-right: 16px;
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--fcr_ui_scene_black6);
+  text-align: center;
+}
+
+.fcr-board-toolbar-horizontal .fcr-board-toolbar-item-surrounding {
+  width: 46px;
+  height: 36px;
+}
+
+.fcr-board-toolbar-panel .fcr-popover-trigger-opened {
+  background-color: unset;
+}
+
+.fcr-board-toolbar--left {
+  margin-left: 10px;
+}
+
+.fcr-board-toolbar--right {
+  margin-left: -10px;
+}
+
+.fcr-board-toolbar-list {
+  margin: 0;
+}
+
+.fcr-board-toolbar-list .fcr-popover-trigger-opened {
+  background-color: unset;
+}
+
+.fcr-board-toolbar-list li {
+  padding: 2px 0;
+  display: flex;
+  justify-content: center;
+}
+
+.fcr-board-toolbar-list li .fcr-divider-vertical,
+.fcr-board-toolbar__picker__overlay .fcr-divider-vertical {
+  width: 32px;
+  height: 0;
+  margin: 0 auto;
+}
+
+.fcr-board-toolbar-list li .fcr-divider-marign-top {
+  margin-top: 5px;
+}
+
+.fcr-board-toolbar-list li .fcr-divider-marign-bottom,
+.fcr-board-toolbar__picker__overlay .fcr-divider-marign-bottom {
+  margin-bottom: 5px;
+}
+
+.fcr-board-toolbar-list
+  .fcr-board-toolbar-item-surrounding:hover:not(.fcr-board-toolbar-item-surrounding--disabled) {
+  background: var(--fcr_ui_scene_ramp_brand1);
+}
+
+.fcr-board-toolbar-item-surrounding--active {
+  background: var(--fcr_ui_scene_ramp_brand0);
+}
+
+.fcr-board-toolbar-item-surrounding--disabled {
+  opacity: 0.3;
+}
+
+.fcr-board-toolbar-item-surrounding {
+  border-radius: 6px;
+  position: relative;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  margin: 0 auto;
+}
+
+.fcr-board-toolbar-expansion-icon {
+  position: absolute;
+  right: 2px;
+  bottom: 4px;
+}
+
+.fcr-board-toolbar-expansion-icon path {
+  fill: var(--fcr_ui_scene_black6);
+}
+
+.fcr-board-toolbar__color-items {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 42px;
+  margin: 0 auto;
+}
+
+.fcr-board-toolbar__color-item {
+  border-radius: 50%;
+  position: relative;
+  width: 18px;
+  height: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  margin: 5px;
+}
+
+.fcr-board-toolbar__color-item-inner {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  border: 4px solid #fff;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 2px;
+}
+.fcr-board-toolbar__color-item-inner svg {
+  width: 14px;
+  height: 14px;
+}
+
+.fcr-board-toolbar__color-item--active::after {
+  border-radius: 50%;
+  content: '';
+  width: 14px;
+  height: 14px;
+  border: 4px solid #fff;
+}
+
+.fcr-board-toolbar__color-item--picker {
+  background-image: conic-gradient(
+    from 180deg at 50% 50%,
+    #ff7171 0deg,
+    #ffa471 30deg,
+    #ffe37f 63.75deg,
+    #e3ff75 91.88deg,
+    #a9ff75 125.63deg,
+    #79ff8f 163.12deg,
+    #72ffe6 189.38deg,
+    #70cff8 210deg,
+    #6880ff 232.5deg,
+    #7856ff 260.62deg,
+    #dd56ff 277.5deg,
+    #ff56da 303.75deg,
+    #ff3797 327.96deg,
+    #ff6464 340.25deg,
+    #ff5656 359.93deg,
+    #ff7171 360deg
+  );
+}
+
+.fcr-board-toolbar__color-item--disabled {
+  background: var(--fcr_ui_scene_black1);
+  background-image: unset;
+  cursor: not-allowed;
+}
+
+.fcr-board-toolbar__picker-color--border::before {
+  border: 1px solid var(--fcr_ui_scene_line1);
+  position: absolute;
+  content: '';
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  left: 0;
+  top: 0;
+}
+
+.fcr-board-toolbar__picker-color--active.fcr-board-toolbar__picker-color--border::after {
+  box-shadow:
+    0 0 0 1px var(--fcr_ui_scene_black1),
+    inset 0 0 0 1px var(--fcr_ui_scene_black1);
+}
+
+.fcr-board-toolbar-panel--color > div {
+  position: relative;
+  width: 18px;
+  height: 18px;
+  margin: 12px 8px;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+.fcr-board-toolbar-panel--color > div::after {
+  border-radius: 50%;
+  content: '';
+  width: 28px;
+  height: 28px;
+  position: absolute;
+  left: -5px;
+  top: -5px;
+  border: 3px solid transparent;
+}
+
+.fcr-board-toolbar-panel--color > div:hover::after {
+  border-color: var(--color-brand-6);
+}
+
+.fcr-board-toolbar-panel--color > div.fcr-board-toolbar__picker-color--active::after {
+  border-color: currentColor;
+}
+
+.fcr-board-toolbar-panel--color {
+  display: flex;
+  flex-wrap: wrap;
+  width: 148px;
+  justify-content: space-around;
+}
+
+.fcr-board-toolbar-main,
+.fcr-board-toolbar-extra {
+  background-color: var(--fcr_ui_scene_white10);
+}
+
+.fcr-board-toolbar-extra {
+  padding: 10px 0;
+  border-radius: 0 0 8px 8px;
+}
+
+.fcr-board-toolbar-panel {
+  background: var(--fcr_ui_scene_white10) !important;
+  min-width: 48px;
+}
+
+.fcr-board-toolbar-panel .fcr-board-toolbar-panel--footer {
+  font-size: 12px;
+  color: var(--fcr_ui_scene_black3);
+  height: 24px;
+  text-align: center;
+  line-height: 24px;
+  border-top: 1px solid var(--fcr_ui_scene_black1);
+  width: 100%;
+}
+
+.fcr-board-toolbar-panel--pen,
+.fcr-board-toolbar-panel--shape,
+.fcr-board-toolbar-panel--eraser,
+.fcr-board-toolbar-panel--capture,
+.fcr-board-toolbar-panel--extra {
+  padding: 6px;
+}
+
+.fcr-board-toolbar-handle {
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  cursor: move;
+}
+
+.fcr-board-toolbar-handle:hover circle {
+  fill: var(--fcr_ui_scene_ramp_brand6);
+  fill-opacity: 0.4;
+}
+
+.fcr-board-toolbar__picker__overlay .fcr-tooltip-inner {
+  width: unset !important;
+  overflow: unset !important;
+}
+
+.fcr-board-toolbar__set-common__overlay .fcr-button-gray {
+  background: none;
+  border: none;
+}
+
+.fcr-board-toolbar-panel__pen-type {
+  display: flex;
+  justify-content: space-between;
+}
+
+.fcr-board-toolbar-panel__divider {
+  border-style: var(--color-block-2);
+  margin-top: 15px;
+  margin-bottom: 10px;
+}
+
+.fcr-board-toolbar-panel--pen > div,
+.fcr-board-toolbar-panel--shape > div,
+.fcr-board-toolbar-panel--eraser > div,
+.fcr-board-toolbar-panel--capture > div,
+.fcr-board-toolbar-panel--extra > div {
+  border-radius: 6px;
+  width: 34px;
+  height: 34px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+
+.fcr-board-toolbar-panel--pen > div:not(:last-child),
+.fcr-board-toolbar-panel--shape > div:not(:last-child),
+.fcr-board-toolbar-panel--eraser > div:not(:last-child),
+.fcr-board-toolbar-panel--capture > div:not(:last-child),
+.fcr-board-toolbar-panel--extra > div:not(:last-child) {
+  margin-bottom: 6px;
+}
+
+.fcr-board-toolbar-panel--pen > div:hover,
+.fcr-board-toolbar-panel--shape > div:hover,
+.fcr-board-toolbar-panel--eraser > div:hover,
+.fcr-board-toolbar-panel--capture > div:hover,
+.fcr-board-toolbar-panel--extra > div:hover {
+  background: var(--fcr_ui_scene_ramp_brand1);
+}
+
+.fcr-board-toolbar-panel--pen > div.fcr-board-toolbar-panel--active,
+.fcr-board-toolbar-panel--shape > div.fcr-board-toolbar-panel--active,
+.fcr-board-toolbar-panel--eraser > div.fcr-board-toolbar-panel--active,
+.fcr-board-toolbar-panel--capture > div.fcr-board-toolbar-panel--active,
+.fcr-board-toolbar-panel--extra > div.fcr-board-toolbar-panel--active {
+  background: var(--fcr_ui_scene_ramp_brand0);
+  border: 2px solid var(--color-brand-6);
+}
+
+.fcr-board-toolbar-panel--extra > .fcr-board-toolbar__color-items:hover {
+  background: unset;
+}
+
+.fcr-board-toolbar-fold {
+  position: absolute;
+  top: 50%;
+  cursor: pointer;
+  transition: all 0.2s;
+  filter: drop-shadow(2px 0px 1px rgba(0, 0, 0, 0.05));
+}
+
+.fcr-board-toolbar--unfolded .fcr-board-toolbar-fold {
+  opacity: 0;
+}
+
+.fcr-board-toolbar--unfolded:hover .fcr-board-toolbar-fold {
+  opacity: 1;
+}
+
+.fcr-board-toolbar--left .fcr-board-toolbar-fold {
+  left: calc(100% - 1px);
+  transform: translateY(-50%);
+}
+
+.fcr-board-toolbar--right .fcr-board-toolbar-fold {
+  right: calc(100% - 1px);
+  transform: translateY(-50%) rotate(180deg);
+}
+
+.fcr-board-toolbar--folded .fcr-board-toolbar-fold {
+  transform: translateY(-50%) rotate(0deg);
+}
+
+.fcr-board-toolbar-fold path:nth-child(1) {
+  --fill-color: var(--fcr_ui_scene_white10);
+  fill: var(--fill-color);
+}
+
+.fcr-board-toolbar-fold path:nth-child(2) {
+  --fill-color: var(--fcr_ui_scene_black8);
+  fill: var(--fill-color);
+  transition: all 0.2s;
+}
+
+.fcr-board-toolbar-fold:hover path:nth-child(2) {
+  fill: var(--fcr_ui_scene_ramp_brand6);
+}
+
+/* toolbar at left side */
+.fcr-board-toolbar--left.fcr-board-toolbar--unfolded {
+  animation: 0.3s slide-in-to-right forwards;
+}
+
+.fcr-board-toolbar--left.fcr-board-toolbar--folded {
+  animation: 0.3s slide-out-to-left forwards;
+}
+
+.fcr-board-toolbar--left.fcr-board-toolbar--unfolded .fcr-board-toolbar-fold path:nth-child(2) {
+  transform: rotate(0deg);
+  transform-origin: 8px;
+  transition: transform 0s linear 0.2s;
+}
+
+.fcr-board-toolbar--left.fcr-board-toolbar--folded .fcr-board-toolbar-fold path:nth-child(2) {
+  transform: rotate(180deg);
+  transform-origin: 8px;
+  transition: transform 0s linear 0.2s;
+}
+
+/* toolbar at right side */
+.fcr-board-toolbar--right.fcr-board-toolbar--unfolded {
+  animation: 0.3s slide-in-to-left forwards;
+}
+
+.fcr-board-toolbar--right.fcr-board-toolbar--folded {
+  animation: 0.3s slide-out-to-right forwards;
+}
+
+.fcr-board-toolbar--right.fcr-board-toolbar--unfolded .fcr-board-toolbar-fold path:nth-child(2) {
+  transform: rotate(0deg);
+  transform-origin: 8px;
+  transition: transform 0s linear 0.2s;
+}
+
+.fcr-board-toolbar--right.fcr-board-toolbar--folded .fcr-board-toolbar-fold path:nth-child(2) {
+  transform: rotate(180deg);
+  transform-origin: 8px;
+  transition: transform 0s linear 0.2s;
+}
+
+.fcr-board-toolbar-panel--extra {
+  max-height: 266px;
+  overflow: auto;
+  overflow-y: overlay;
+}
+
+.fcr-board-toolbar-panel--extra::-webkit-scrollbar {
+  width: 3px;
+}
+
+.section::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.fcr-board-toolbar-panel--extra::-webkit-scrollbar-thumb {
+  width: 3px;
+  opacity: 0.8;
+  border-radius: 3px;
+}
+
+.fcr-board-toolbar__picker__overlay .fcr-tooltip-inner {
+  overflow: hidden !important;
+  border: 1px solid var(--fcr_ui_scene_black1) !important;
+  border-radius: 8px !important;
+  box-shadow: var(--fcr_web_light_dropup) !important;
+}
+
+.fcr-board-toobar-folded-button {
+  width: 60px;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--fcr_ui_scene_black2);
+  flex-direction: column;
+  background: var(--fcr_ui_scene_white10);
+  border-radius: 4px;
+  font-size: 12px;
+}
+
+.fcr-board-toobar-folded-button svg {
+  width: 28px;
+}
+
+.fcr-board-toobar-folded-button path {
+  fill: var(--fcr_ui_scene_black8) !important;
+}
+
+.fcr-board-toobar-folded-button:hover {
+  color: var(--fcr_ui_scene_ramp_brand6);
+}
+
+.fcr-board-toobar-folded-button:hover path {
+  fill: var(--fcr_ui_scene_ramp_brand6) !important;
+}
+
+.fcr-board-toolbar--folded .fcr-board-toolbar-main {
+  display: none;
+}
+
+.fcr-board-toolbar--unfolded .fcr-board-toolbar-main {
+  display: block;
+}
+
+.fcr-board-toolbar--folded .fcr-board-toobar-folded-button {
+  display: flex;
+}
+
+.fcr-board-toolbar--unfolded .fcr-board-toobar-folded-button {
+  display: none;
+}
+
+@keyframes slide-out-to-left {
+  0% {
+    transform: translateX(0px);
+  }
+
+  80% {
+    transform: translateX(-65px);
+  }
+
+  100% {
+    transform: translateX(-50px);
+  }
+}
+
+@keyframes slide-in-to-right {
+  0% {
+    transform: translateX(-50px);
+  }
+
+  20% {
+    transform: translateX(-65px);
+  }
+
+  100% {
+    transform: translateX(0px);
+  }
+}
+
+@keyframes slide-out-to-right {
+  0% {
+    transform: translateX(0px);
+  }
+
+  80% {
+    transform: translateX(65px);
+  }
+
+  100% {
+    transform: translateX(50px);
+  }
+}
+
+@keyframes slide-in-to-left {
+  0% {
+    transform: translateX(50px);
+  }
+
+  20% {
+    transform: translateX(65px);
+  }
+
+  100% {
+    transform: translateX(0px);
+  }
+}

package/lib/modules/whiteboard/components/toolbar/components/color-picker/components/color.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+export declare const Color: FC<{
+    value: string;
+    showCurrentColor: boolean;
+}>;

package/lib/modules/whiteboard/components/toolbar/components/color-picker/components/color.js

@@ -0,0 +1,38 @@
+"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.Color = void 0;
+var _mobxReact = require("mobx-react");
+var _store = require("../../../store");
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _jsxRuntime = require("react/jsx-runtime");
+var Color = exports.Color = (0, _mobxReact.observer)(function (_ref) {
+  var value = _ref.value;
+  var _useContext = (0, _react.useContext)(_store.ToolbarContext),
+    _useContext$observabl = _useContext.observables,
+    currentColor = _useContext$observabl.currentColor,
+    currentShape = _useContext$observabl.currentShape,
+    setStrokeColor = _useContext.setStrokeColor;
+  var isActive = currentColor === value;
+  var isDisabled = !currentShape;
+  var cls = (0, _classnames["default"])('fcr-board-toolbar__color-item', {
+    'fcr-board-toolbar__color-item--active': isActive,
+    'fcr-board-toolbar__color-item--disabled': isDisabled
+  });
+  var handleClick = function handleClick() {
+    setStrokeColor(value);
+  };
+  var style = {
+    backgroundColor: value
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: cls,
+    onClick: isDisabled ? undefined : handleClick,
+    style: style
+  });
+});

package/lib/modules/whiteboard/components/toolbar/components/color-picker/components/panel.d.ts

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