@seafile/comment-editor 0.0.1-alpha.0

package/dist/basic-sdk/comment/components/global-comment/global-comment-body-header.js

@@ -0,0 +1,87 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactI18next = require("react-i18next");
+var _reactstrap = require("reactstrap");
+var _mouseEvent = require("../../../utils/mouse-event");
+var _constants = require("../../constants");
+const CommentTypeDropdownItem = _ref => {
+  let {
+    type,
+    setCommentType
+  } = _ref;
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)('sdoc-editor');
+  const handleCommentTypeChanged = (0, _react.useCallback)((event, type) => {
+    (0, _mouseEvent.eventStopPropagation)(event);
+    setCommentType(type);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownItem, {
+    className: "sdoc-dropdown-menu-item",
+    tag: 'div',
+    onClick: event => handleCommentTypeChanged(event, type)
+  }, t(type));
+};
+const GlobalCommentBodyHeader = _ref2 => {
+  let {
+    commentList = [],
+    commentType,
+    setCommentType
+  } = _ref2;
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)('sdoc-editor');
+  const [isDropdownOpen, setDropdownOpen] = (0, _react.useState)(false);
+  let commentTip = null;
+  if (commentList.length === 1) {
+    commentTip = t('Total_1_comment');
+  } else if (commentList.length > 1) {
+    commentTip = t('Total_count_comments', {
+      count: commentList.length
+    });
+  }
+  const id = 'comment-type-controller';
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "comments-panel-body__header"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "comments-types-count"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    id: "comment-types",
+    className: "comment-type"
+  }, /*#__PURE__*/_react.default.createElement(_reactstrap.Dropdown, {
+    isOpen: isDropdownOpen,
+    toggle: () => setDropdownOpen(!isDropdownOpen)
+  }, /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownToggle, {
+    tag: 'div',
+    caret: true,
+    className: "d-flex align-items-center justify-content-center"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    id: id
+  }, t(commentType))), /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownMenu, {
+    className: "sdoc-dropdown-menu sdoc-comment-filter-dropdown",
+    container: "comment-types"
+  }, /*#__PURE__*/_react.default.createElement(CommentTypeDropdownItem, {
+    type: _constants.COMMENT_TYPES.ALL,
+    setCommentType: setCommentType
+  }), /*#__PURE__*/_react.default.createElement(CommentTypeDropdownItem, {
+    type: _constants.COMMENT_TYPES.DOC,
+    setCommentType: setCommentType
+  }), /*#__PURE__*/_react.default.createElement(CommentTypeDropdownItem, {
+    type: _constants.COMMENT_TYPES.RESOLVED,
+    setCommentType: setCommentType
+  }), /*#__PURE__*/_react.default.createElement(CommentTypeDropdownItem, {
+    type: _constants.COMMENT_TYPES.UNRESOLVED,
+    setCommentType: setCommentType
+  })))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "comment-count-tip"
+  }, commentTip)));
+};
+var _default = exports.default = GlobalCommentBodyHeader;

package/dist/basic-sdk/comment/components/global-comment/global-comment-editor.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _commentEditor = _interopRequireDefault(require("../comment-editor"));
+const GlobalCommentEditor = _ref => {
+  let {
+    isScrollDisplayed,
+    globalCommentContent,
+    type,
+    insertDocComment,
+    hiddenCommentEditor,
+    onContentChange
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)('sdoc-doc-comment-editor-container', 'sdoc-comment-list-container', {
+      'scrolled': isScrollDisplayed
+    })
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-doc-comment-editor-content"
+  }, /*#__PURE__*/_react.default.createElement(_commentEditor.default, {
+    type: type,
+    className: "sdoc-doc-comment-editor",
+    commentContent: globalCommentContent,
+    hiddenUserInfo: true,
+    insertContent: insertDocComment,
+    hiddenComment: hiddenCommentEditor,
+    onContentChange: onContentChange
+  })));
+};
+var _default = exports.default = GlobalCommentEditor;

package/dist/basic-sdk/comment/components/global-comment/global-comment-header.js

@@ -0,0 +1,82 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactI18next = require("react-i18next");
+var _tooltip = _interopRequireDefault(require("../../../components/tooltip"));
+var _constants = require("../../../constants");
+var _context = _interopRequireDefault(require("../../../context"));
+var _eventBus = _interopRequireDefault(require("../../../utils/event-bus"));
+var _mouseEvent = require("../../../utils/mouse-event");
+const GlobalCommentHeader = _ref => {
+  let {
+    toggle,
+    activeCommentGroup,
+    setCurrentCommentGroup
+  } = _ref;
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)('sdoc-editor');
+  const panelHeaderRef = (0, _react.useRef)(null);
+  const [isMounted, setIsMounted] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    if (panelHeaderRef.current) {
+      setIsMounted(true);
+    }
+  }, []);
+  const goBack = (0, _react.useCallback)(event => {
+    (0, _mouseEvent.eventStopPropagation)(event);
+    setCurrentCommentGroup(null);
+  }, [setCurrentCommentGroup]);
+  const toggleReadAll = (0, _react.useCallback)(async event => {
+    (0, _mouseEvent.eventStopPropagation)(event);
+    try {
+      await _context.default.readAllNotifications();
+      const res = await _context.default.listUnseenNotifications();
+      const notifications = res.data.notifications;
+      const eventBus = _eventBus.default.getInstance();
+      eventBus.dispatch(_constants.INTERNAL_EVENT.UNSEEN_NOTIFICATIONS_COUNT, notifications === null || notifications === void 0 ? void 0 : notifications.length);
+      eventBus.dispatch(_constants.INTERNAL_EVENT.NEW_NOTIFICATION);
+      eventBus.dispatch(_constants.INTERNAL_EVENT.CLEAR_NOTIFICATION);
+    } catch (error) {
+      //
+    }
+  }, []);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "comments-panel-header"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "comments-panel-header-left"
+  }, activeCommentGroup && /*#__PURE__*/_react.default.createElement("div", {
+    className: "goback sdoc-icon-btn",
+    onClick: goBack
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "sdocfont sdoc-previous-page",
+    style: {
+      transform: 'scale(1.2)'
+    }
+  })), /*#__PURE__*/_react.default.createElement("span", {
+    className: "title"
+  }, activeCommentGroup ? t('Comment_details') : t('Comments'))), /*#__PURE__*/_react.default.createElement("div", {
+    ref: panelHeaderRef,
+    className: "comments-panel-header-right"
+  }, !activeCommentGroup && /*#__PURE__*/_react.default.createElement("div", {
+    id: "sdoc-read-all-btn",
+    className: "sdoc-icon-btn",
+    onClick: toggleReadAll
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "sdocfont sdoc-all-read"
+  }), isMounted && /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+    target: "sdoc-read-all-btn"
+  }, t('Mark_all_as_read'))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-icon-btn",
+    onClick: toggle
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "sdocfont sdoc-sm-close"
+  }))));
+};
+var _default = exports.default = GlobalCommentHeader;

package/dist/basic-sdk/comment/components/global-comment/index.css

@@ -0,0 +1,326 @@
+.sdoc-comment-drawer {
+  width: 100%;
+  height: 100%;
+}
+
+.sdoc-comment-drawer .comments-panel-wrapper {
+  /* 100vh - toolbar height*/
+  height: calc(100vh - 93px);
+  display: flex;
+  flex-direction: column;
+  background: #fff;
+}
+
+.sdoc-comment-drawer .sdoc-comment-resize-handler {
+  position: absolute;
+  left: 0;
+  height: 100%;
+  margin-right: -2px;
+  width: 6px;
+  cursor: ew-resize;
+  z-index: 103;
+}
+
+.sdoc-comment-drawer .sdoc-comment-resize-handler:hover {
+  border-left: 1px solid #d8d8d8;
+}
+
+.sdoc-comment-resize-handler .sdoc-comment-move-dragger {
+  display: none;
+  position: absolute;
+  top: 0px;
+  left: -4px;
+  width: 6px;
+  height: 30px;
+  border-radius: 3px;
+  background-color: #2674f8;
+  cursor: ew-resize;
+}
+
+.sdoc-comment-drawer .comments-panel-header {
+  padding: 0 16px;
+  height: 46px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid #EAECEF;
+}
+
+.sdoc-comment-drawer .comments-panel-header .comments-panel-header-left {
+  display: flex;
+}
+
+.sdoc-comment-drawer .comments-panel-header .comments-panel-header-left .title {
+  color: #212529;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.sdoc-comment-drawer .comments-panel-header .comments-panel-header-left .goback {
+  margin-right: 4px;
+}
+
+.sdoc-comment-drawer .comments-panel-header .comments-panel-header-right {
+  display: flex;
+}
+
+.sdoc-comment-drawer .comments-panel-header-right .sdoc-icon-btn:not(:last-child) {
+  margin-right: 4px;
+}
+
+.sdoc-comment-drawer .comments-panel-header .sdoc-icon-btn .sdocfont.sdoc-sm-close {
+  font-weight: 700;
+}
+
+.sdoc-comment-drawer .comments-panel-body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  position: relative;
+}
+
+.sdoc-comment-drawer .comments-panel-body__header {
+  display: flex;
+  flex-direction: column;
+  padding: 0 16px;
+}
+
+.sdoc-comment-drawer .comments-panel-body__header .comments-types-count {
+  height: 38px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 0;
+}
+
+.sdoc-comment-drawer .comments-panel-body__header .comment-type {
+  color: #212529;
+  font-size: 12px;
+}
+
+.sdoc-comment-drawer .comments-panel-body__header .comment-type {
+  color: #212529;
+  font-size: 12px;
+}
+
+.sdoc-comment-drawer .comments-panel-body__header .comment-count-tip {
+  color: #999;
+  font-size: 12px;
+}
+
+.sdoc-comment-drawer .comments-panel-body__content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding-top: 0px;
+  margin-bottom: 16px;
+  overflow: auto;
+  border-bottom: 1px solid #e1e2e5;
+}
+
+.sdoc-comment-drawer .comments-panel-body__content .sdoc-comment-list-container {
+  position: relative;
+  margin-top: 0px;
+}
+
+.sdoc-comment-drawer .comments-panel-body__content .comment-ui-container.active {
+  left: 0;
+  background: #fff;
+  box-shadow: unset;
+}
+
+.sdoc-dropdown-menu .dropdown-item {
+  font-size: 14px;
+  color: #212529;
+}
+
+/* doc comment add editor */
+.sdoc-comment-drawer .comments-panel-body .global-comment-input-wrapper {
+  padding: 0 16px;
+  width: 100%;
+  margin-bottom: 16px;
+}
+
+.sdoc-comment-drawer .comments-panel-body .global-comment-input-wrapper .form-control[readonly] {
+  background-color: #fff;
+}
+
+.sdoc-comment-drawer .comments-panel-body .global-comment-input-wrapper .form-control {
+  font-size: 14px;
+  font-weight: unset;
+  border: 1px solid #ececec;
+}
+
+.sdoc-comment-drawer .comments-panel-body .global-comment-input-wrapper.active .form-control {
+  padding-top: 14px;
+}
+
+.sdoc-comment-drawer .comments-panel-body .global-comment-input-wrapper .form-control:focus {
+  box-shadow: none;
+  border-color: #e1e2e5;
+}
+
+.sdoc-comment-drawer .comments-panel-body .global-comment-input-wrapper .form-control::placeholder {
+  color: rgb(191, 191, 191);
+}
+
+.sdoc-comment-drawer .comments-panel-body .sdoc-doc-comment-editor-container {
+  position: relative;
+  width: 100%;
+}
+
+.sdoc-comment-drawer .sdoc-doc-comment-editor-container .sdoc-doc-comment-editor-content {
+  position: relative;
+  margin-bottom: 0;
+  padding: 0px;
+  left: 0;
+  border: 0px;
+  background-color: #FFF;
+  box-shadow: none;
+  border-radius: 0px;
+}
+
+/* custom */
+.sdoc-comment-drawer .sdoc-comment-list-container {
+  margin-top: 0px;
+  left: 0;
+}
+
+.sdoc-comment-drawer .sdoc-comment-list-container .comment-collapse-wrapper {
+  cursor: pointer;
+}
+
+.sdoc-comment-drawer .sdoc-comment-list-container .comment-ui-container {
+  background-color: #FFF;
+  margin-bottom: 0px;
+  box-shadow: none;
+  padding: 16px;
+  border-radius: 0px;
+}
+
+.sdoc-comment-drawer .sdoc-comment-list-container .comment-ui-container:hover {
+  background-color: #f5f5f5;
+}
+
+.sdoc-comment-drawer .sdoc-comment-list-container .comment-ui-container.active .comment-item:hover {
+  background-color: unset;
+}
+
+.sdoc-comment-drawer .sdoc-comment-list-container .comment-item .comment-header .comment-author__avatar {
+  width: 24px;
+  height: 24px;
+  margin-top: -5px;
+}
+
+.sdoc-comment-drawer .sdoc-comment-list-container .comment-item .comment-header .comment-author__avatar img {
+  border-radius: 50%;
+}
+
+.sdoc-comment-drawer .sdoc-comment-list-container .comment-item .comment-content {
+  margin-left: 35px;
+  display: flex;
+  align-items: center;
+}
+
+.sdoc-comment-drawer .sdoc-comment-list-container .comment-item .comment-footer .comments-count {
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+.sdoc-comment-drawer .sdoc-comment-list-container .comment-item .comment-footer .comments-count .comments-count-number {
+  margin-left: 8px;
+  margin-top: -2px;
+}
+
+.sdoc-comment-drawer .sdoc-comment-list-container .comment-item .comment-footer .comment-author {
+  margin-left: 20px;
+  align-items: unset;
+}
+
+.sdoc-comment-drawer .sdoc-comment-list-container .comment-item .comment-item-operation-wrapper .comment-operation {
+  width: 24px;
+  height: 24px;
+}
+
+.sdoc-comment-drawer .sdoc-comment-list-container .comment-item .comment-footer .comment-author__avatar {
+  width: 16px;
+  height: 16px;
+  margin-top: -1px
+}
+
+.sdoc-comment-drawer .sdoc-comment-list-container .comment-item .comment-footer .comment-author__avatar img {
+  border-radius: 50%;
+}
+
+.sdoc-comment-drawer .sdoc-comment-list-container .comment-item .comment-footer .comment-author__latest-reply {
+  margin-left: 8px;
+}
+
+.sdoc-comment-drawer .sdoc-comment-list-container .comment-item .comment-footer .comment-author__latest-reply p {
+  margin: 0px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 220px;
+}
+
+.sdoc-comment-drawer .sdoc-comment-list-container .comment-item-selected-text-container {
+  width: 100%;
+  height: auto;
+  color: #666666;
+  display: flex;
+  align-items: center;
+  padding: 0px 0px 16px 0px;
+  border-radius: 3px 3px 0 0;
+  cursor: pointer;
+  overflow: hidden;
+}
+
+.sdoc-comment-drawer .sdoc-comment-list-container .detail-context-comment {
+  align-items: start !important;
+}
+
+.sdoc-comment-drawer .sdoc-comment-list-container .detail-context-comment .sdoc-comment-quote {
+  padding-top: 1px;
+}
+
+.sdoc-comment-drawer .sdoc-comment-list-container .context-comment-item-selected-text-container {
+  padding: 16px 16px 0 16px;
+  color: #666;
+  display: flex;
+}
+
+.sdoc-comment-drawer .sdoc-comment-list-container .context-comment-item-selected-text-container .sdoc-comment-quote {
+  font-size: 12px;
+  padding-top: 1px;
+}
+
+.sdoc-comment-drawer .sdoc-comment-list-container .context-comment-item-selected-text-container .context-comment-items {
+  display: flex;
+  flex-direction: column;
+  font-size: 14px;
+}
+
+.comments-panel-body__header .sdoc-comment-filter-dropdown.sdoc-dropdown-menu {
+  border: 1px solid #dee3eb;
+}
+
+/* global detail */
+.sdoc-comment-drawer .sdoc-comment-list-container .global-comment-item-detail-wrapper {
+  border-bottom: 0px
+}
+
+.sdoc-comment-drawer .sdoc-comment-list-container .global-comment-item-detail-wrapper:hover {
+  background-color: #FFF;
+}
+
+.sdoc-comment-drawer .sdoc-comment-list-container .global-comment-item-detail-wrapper .comment-operation .sdoc-confirm {
+  color: rgb(70, 77, 90);
+  font-weight: unset;
+}
+
+.sdoc-comment-drawer .sdoc-comment-list-container .global-comment-item-detail-wrapper .comment-item:not(:last-child){
+  margin-bottom: 16px;
+}