Add comment text block

apps/common/mobile/lib/controller/collaboration/Comments.jsx

@@ -444,6 +444,7 @@ class ViewCommentsController extends Component {
         this.onCommentMenuClick = this.onCommentMenuClick.bind(this);
         this.onResolveComment = this.onResolveComment.bind(this);
         this.closeViewCurComments = this.closeViewCurComments.bind(this);
+        this.onAddNewComment = this.onAddNewComment.bind(this);
 
         this.state = {
             isOpenViewCurComments: false
@@ -602,6 +603,29 @@ class ViewCommentsController extends Component {
         }
     }
 
+    onAddNewComment (commentText, documentFlag) {
+        const api = Common.EditorApi.get();
+        let comment;
+        
+        if (typeof Asc.asc_CCommentDataWord !== 'undefined') {
+            comment = new Asc.asc_CCommentDataWord(null);
+        } else {
+            comment = new Asc.asc_CCommentData(null);
+        }
+        if (commentText.length > 0) {
+            comment.asc_putText(commentText);
+            comment.asc_putTime(utcDateToString(new Date()));
+            comment.asc_putOnlyOfficeTime(ooDateToString(new Date()));
+            comment.asc_putUserId(this.props.users.currentUser.asc_getIdOriginal());
+            comment.asc_putUserName(this.props.users.currentUser.asc_getUserName());
+            comment.asc_putSolved(false);
+
+            !!comment.asc_putDocumentFlag && comment.asc_putDocumentFlag(documentFlag);
+
+            api.asc_addComment(comment);
+        }
+    }
+
     showComment (comment) {
         const api = Common.EditorApi.get();
 
@@ -614,8 +638,8 @@ class ViewCommentsController extends Component {
         return(
             <Fragment>
                 {this.props.allComments && <ViewComments wsProps={this.props?.storeWorksheets?.wsProps} onCommentMenuClick={this.onCommentMenuClick} onResolveComment={this.onResolveComment} 
-                    showComment={this.showComment} />}
+                    showComment={this.showComment} onAddNewComment={this.onAddNewComment} />}
-                {this.state.isOpenViewCurComments && <ViewCurrentComments wsProps={this.props?.storeWorksheets?.wsProps} opened={this.state.isOpenViewCurComments}
+                {this.state.isOpenViewCurComments && <ViewCurrentComments wsProps={this.props?.storeWorksheets?.wsProps} opened={this.state.isOpenViewCurComments} onAddNewComment={this.onAddNewComment}
                                                                           closeCurComments={this.closeViewCurComments}
                                                                           onCommentMenuClick={this.onCommentMenuClick}
                                                                           onResolveComment={this.onResolveComment}

apps/common/mobile/lib/view/collaboration/Comments.jsx

@@ -739,7 +739,7 @@ const ViewComments = inject("storeComments", "storeAppOptions", "storeReview")(o
     )
 }));
 
-const CommentList = inject("storeComments", "storeAppOptions", "storeReview")(observer(({storeComments, storeAppOptions, onCommentMenuClick, onResolveComment, storeReview, wsProps}) => {
+const CommentList = inject("storeComments", "storeAppOptions", "storeReview")(observer(({storeComments, storeAppOptions, onCommentMenuClick, onResolveComment, storeReview, wsProps, onAddNewComment}) => {
     const { t } = useTranslation();
     const _t = t('Common.Collaboration', {returnObjects: true});
     const isAndroid = Device.android;
@@ -772,6 +772,22 @@ const CommentList = inject("storeComments", "storeAppOptions", "storeReview")(ob
         }
     };
 
+    const resizeArea = (text_id, minHeight, maxHeight) => {
+        let area = $$(text_id)[0];
+        let area_hidden = $$(text_id + "_hidden")[0];
+        let text = '';
+
+        area.value.replace(/[<>]/g, '_').split("\n").forEach(function(s) {
+            text = text + '<div>' + s.replace(/\s\s/g, ' &nbsp;') + '&nbsp;</div>'+"\n";
+        });
+
+        area_hidden.innerHTML = text;
+        let height = area_hidden.offsetHeight + 15;
+        height = Math.max(minHeight, height);
+        height = Math.min(maxHeight, height);
+        area.style.height = height + 'px';
+    }
+
     if(!comment) {
         if (comments.length > 0) {
             onViewNextComment();
@@ -782,16 +798,37 @@ const CommentList = inject("storeComments", "storeAppOptions", "storeReview")(ob
     return (
         <Fragment>
             <Toolbar position='bottom'>
-                {!viewMode && 
+                <div className="adding-comment adding-comment_showed">
+                    <div className="comment-text_hidden"><div className="textarea_behavior" id="comment-text_hidden"></div></div>
+                    <textarea className="comment-add-field" id="comment-text" placeholder="@ to mention" onKeyUp={() => resizeArea('#comment-text', 32, 450)}></textarea>
+                    <button type="button" className="adding-comment__button comment-add-button" onClick={() => onAddNewComment($$('#comment-text')[0].value, false)}>
+                        <Icon slot="media" icon="icon-comment-button"></Icon>
+                    </button>
+                </div>
+            </Toolbar>
+            {/* <Toolbar position='bottom'> */}
+                {/* {!viewMode && 
                     <Link className={`btn-add-reply${wsProps?.Objects ? ' disabled' : ''}`} href='#' onClick={() => {onCommentMenuClick('addReply', comment);}}>{_t.textAddReply}</Link>
                 }
                 <div className='comment-navigation row'>
                     <Link href='#' onClick={onViewPrevComment}><Icon slot='media' icon='icon-prev'/></Link>
                     <Link href='#' onClick={onViewNextComment}><Icon slot='media' icon='icon-next'/></Link>
-                </div>
+                </div> */}
-            </Toolbar>
+                {/* <div className="comment-text_hidden"><div className="textarea_behavior" id="comment-text_hidden"></div></div>
+                <textarea className="comment-field" id="comment-text" placeholder="@ to mention" onKeyUp={() => resizeArea('#comment-text', 32, 450)}></textarea>
+                <button type="button" className="comment-button" onClick={() => onAddNewComment($$('#comment-text')[0].value, false)}>
+                    <Icon slot="media" icon="icon-comment-button"></Icon>
+                </button> */}
+            {/* </Toolbar> */}
             <div className='pages'>
                 <Page className='page-current-comment'>
+                    {/* <div className='comment-header'>
+                        <Link href="#">View All</Link>
+                        <div className='comment-navigation row'>
+                            <Link href='#' onClick={onViewPrevComment}><Icon slot='media' icon='icon-prev'/></Link>
+                            <Link href='#' onClick={onViewNextComment}><Icon slot='media' icon='icon-next'/></Link>
+                        </div>
+                    </div> */}
                     <List className='comment-list'>
                         <ListItem>
                             <div slot='header' className='comment-header'>
@@ -868,7 +905,7 @@ const CommentList = inject("storeComments", "storeAppOptions", "storeReview")(ob
 
 }));
 
-const ViewCommentSheet = ({closeCurComments, onCommentMenuClick, onResolveComment, wsProps}) => {
+const ViewCommentSheet = ({closeCurComments, onCommentMenuClick, onResolveComment, wsProps, onAddNewComment}) => {
     useEffect(() => {
         f7.sheet.open('#view-comment-sheet');
     });
@@ -914,19 +951,19 @@ const ViewCommentSheet = ({closeCurComments, onCommentMenuClick, onResolveCommen
             <div id='swipe-handler' className='swipe-container' onTouchStart={handleTouchStart} onTouchMove={handleTouchMove} onTouchEnd={handleTouchEnd}>
                 <Icon icon='icon-swipe'/>
             </div>
-            <CommentList wsProps={wsProps} onCommentMenuClick={onCommentMenuClick} onResolveComment={onResolveComment}/>
+            <CommentList wsProps={wsProps} onAddNewComment={onAddNewComment} onCommentMenuClick={onCommentMenuClick} onResolveComment={onResolveComment}/>
         </Sheet>
     )
 };
 
-const ViewCommentPopover = ({onCommentMenuClick, onResolveComment, wsProps}) => {
+const ViewCommentPopover = ({onCommentMenuClick, onResolveComment, wsProps, onAddNewComment}) => {
     useEffect(() => {
         f7.popover.open('#view-comment-popover', '#btn-coauth');
     });
 
     return (
         <Popover id='view-comment-popover' style={{height: '410px'}} closeByOutsideClick={false}>
-            <CommentList wsProps={wsProps} onCommentMenuClick={onCommentMenuClick} onResolveComment={onResolveComment} />
+            <CommentList wsProps={wsProps} onAddNewComment={onAddNewComment} onCommentMenuClick={onCommentMenuClick} onResolveComment={onResolveComment} />
         </Popover>
     )
 };

apps/common/mobile/resources/less/comments.less

@@ -240,3 +240,68 @@
 .actions-backdrop.backdrop-in {
   z-index: 13600;
 }
+
+// Comments 
+
+.comment-text_hidden {
+  position: relative;
+}  
+
+#comment-text_hidden {
+  visibility:hidden;
+  position: absolute;
+}
+
+.comment-add-field {
+  position: relative;
+  background: @background-tertiary;
+  border: 0.5px solid rgba(0, 0, 0, 0.15);
+  border-radius: 16px;
+  height: 32px;
+  padding: 4px 41px 4px 16px;
+  color: @text-normal;
+  width: 100%;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 14px;
+  line-height: 20px;
+  letter-spacing: 0.25px;
+  word-wrap: break-word;
+  overflow:hidden;
+  &::placeholder {
+    color: @text-tertiary;
+  }
+}
+
+.comment-add-button {
+  position: absolute;
+  // right: 27px;
+  // top: 15px;
+  width: 19px;
+  height: 19px;
+  background: transparent;
+  outline: none;
+  border: 0;
+  padding: 0;
+}
+
+.adding-comment {
+  background-color: @fill-white;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  z-index: -1;
+  opacity: 0;
+  transition: opacity .3s;
+  box-shadow: 0px 0.25px 1px rgba(0, 0, 0, 0.039), 0px 0.85px 3px rgba(0, 0, 0, 0.19);
+  // padding: 8px 16px;
+  &_showed {
+    opacity: 1;
+    z-index: 10000;
+  }
+  &__button {
+    top: 8px;
+    right: 16px;
+  }
+}

apps/common/mobile/resources/less/icons.less

@@ -30,4 +30,14 @@ i.icon {
         height: 24px;
         .encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="2" y="2" width="20" height="20"><circle cx="12" cy="12" r="9.5" fill="@{gray}" stroke="@{brandColor}"/></mask><g mask="url(#mask0)"><circle cx="12" cy="12" r="9.5" transform="rotate(-90 12 12)" stroke="@{brandColor}"/><line x1="5.09054" y1="19.2024" x2="19.1919" y2="5.10094" stroke="@{brandColor}"/></g></svg>');
     }
+    &.icon-comment-button {
+        width: 18px;
+        height: 18px;
+        .encoded-svg-mask('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M9.99958 14L20.9996 3M9.99958 14L13.4996 21C13.5435 21.0957 13.6139 21.1769 13.7025 21.2338C13.7912 21.2906 13.8943 21.3209 13.9996 21.3209C14.1049 21.3209 14.208 21.2906 14.2966 21.2338C14.3853 21.1769 14.4557 21.0957 14.4996 21L20.9996 3M9.99958 14L2.99958 10.5C2.90384 10.4561 2.82271 10.3857 2.76583 10.2971C2.70895 10.2084 2.67871 10.1053 2.67871 10C2.67871 9.89468 2.70895 9.79158 2.76583 9.70295C2.82271 9.61431 2.90384 9.54387 2.99958 9.5L20.9996 3" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>', @text-tertiary);
+    }
+    &.icon-comment-button.active {
+        width: 18px;
+        height: 18px;
+        .encoded-svg-mask('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M9.99958 14L20.9996 3M9.99958 14L13.4996 21C13.5435 21.0957 13.6139 21.1769 13.7025 21.2338C13.7912 21.2906 13.8943 21.3209 13.9996 21.3209C14.1049 21.3209 14.208 21.2906 14.2966 21.2338C14.3853 21.1769 14.4557 21.0957 14.4996 21L20.9996 3M9.99958 14L2.99958 10.5C2.90384 10.4561 2.82271 10.3857 2.76583 10.2971C2.70895 10.2084 2.67871 10.1053 2.67871 10C2.67871 9.89468 2.70895 9.79158 2.76583 9.70295C2.82271 9.61431 2.90384 9.54387 2.99958 9.5L20.9996 3" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
+    }
 }

apps/documenteditor/mobile/src/page/main.jsx

@@ -83,86 +83,93 @@ class MainPage extends Component {
 
     };
 
-  render() {
+    render() {
-      const appOptions = this.props.storeAppOptions;
+        const appOptions = this.props.storeAppOptions;
-      const config = appOptions.config;
+        const config = appOptions.config;
 
-      let showLogo = !(appOptions.canBrandingExt && (config.customization && (config.customization.loaderName || config.customization.loaderLogo)));
+        let showLogo = !(appOptions.canBrandingExt && (config.customization && (config.customization.loaderName || config.customization.loaderLogo)));
-      if ( !Object.keys(config).length ) {
+        if ( !Object.keys(config).length ) {
-          showLogo = !/&(?:logo)=/.test(window.location.search);
+            showLogo = !/&(?:logo)=/.test(window.location.search);
-      }
+        }
 
-      const showPlaceholder = !appOptions.isDocReady && (!config.customization || !(config.customization.loaderName || config.customization.loaderLogo));
+        const showPlaceholder = !appOptions.isDocReady && (!config.customization || !(config.customization.loaderName || config.customization.loaderLogo));
-      if ( $$('.skl-container').length ) {
+        if ( $$('.skl-container').length ) {
-          $$('.skl-container').remove();
+            $$('.skl-container').remove();
-      }
+        }
 
-      return (
+        return (
-          <Page name="home" className={`editor${ showLogo ? ' page-with-logo' : ''}`}>
+            <Page name="home" className={`editor${ showLogo ? ' page-with-logo' : ''}`}>
-              {/* Top Navbar */}
+                {/* Top Navbar */}
-              <Navbar id='editor-navbar' className={`main-navbar${showLogo ? ' navbar-with-logo' : ''}`}>
+                <Navbar id='editor-navbar' className={`main-navbar${showLogo ? ' navbar-with-logo' : ''}`}>
-                  {showLogo && <div className="main-logo"><Icon icon="icon-logo"></Icon></div>}
+                    {showLogo && <div className="main-logo"><Icon icon="icon-logo"></Icon></div>}
-                  <Subnavbar>
+                    <Subnavbar>
-                      <Toolbar openOptions={this.handleClickToOpenOptions} closeOptions={this.handleOptionsViewClosed}/>
+                        <Toolbar openOptions={this.handleClickToOpenOptions} closeOptions={this.handleOptionsViewClosed}/>
-                      <Search useSuspense={false}/>
+                        <Search useSuspense={false}/>
-                  </Subnavbar>
+                    </Subnavbar>
-              </Navbar>
+                </Navbar>
-              {/* Page content */}
+                {/* Page content */}
+                <div className="adding-comment adding-comment_showed">
+                    <div className="comment-text_hidden"><div className="textarea_behavior" id="comment-text_hidden"></div></div>
+                    <textarea className="comment-add-field" placeholder="@ to mention"></textarea>
+                    <button type="button" className="adding-comment__button comment-add-button">
+                        <Icon slot="media" icon="icon-comment-button"></Icon>
+                    </button>
+                </div>
 
-              <View id="editor_sdk">
+                <View id="editor_sdk">
-              </View>
+                </View>
 
-              {showPlaceholder ?
+                {showPlaceholder ?
-                  <div className="doc-placeholder-container">
+                    <div className="doc-placeholder-container">
-                      <div className="doc-placeholder">
+                        <div className="doc-placeholder">
-                          <div className="line"></div>
+                            <div className="line"></div>
-                          <div className="line"></div>
+                            <div className="line"></div>
-                          <div className="line"></div>
+                            <div className="line"></div>
-                          <div className="line"></div>
+                            <div className="line"></div>
-                          <div className="line"></div>
+                            <div className="line"></div>
-                          <div className="line"></div>
+                            <div className="line"></div>
-                          <div className="line"></div>
+                            <div className="line"></div>
-                          <div className="line"></div>
+                            <div className="line"></div>
-                          <div className="line"></div>
+                            <div className="line"></div>
-                          <div className="line"></div>
+                            <div className="line"></div>
-                          <div className="line"></div>
+                            <div className="line"></div>
-                          <div className="line"></div>
+                            <div className="line"></div>
-                          <div className="line"></div>
+                            <div className="line"></div>
-                          <div className="line"></div>
+                            <div className="line"></div>
-                          <div className="line"></div>
+                            <div className="line"></div>
-                          <div className="line"></div>
+                            <div className="line"></div>
-                          <div className="line"></div>
+                            <div className="line"></div>
-                          <div className="line"></div>
+                            <div className="line"></div>
-                          <div className="line"></div>
+                            <div className="line"></div>
-                          <div className="line"></div>
+                            <div className="line"></div>
-                      </div>
+                        </div>
-                  </div> : null
+                    </div> : null
-              }
+                }
 
-              {/* {
+                {/* {
-                  Device.phone ? null : <SearchSettings />
+                    Device.phone ? null : <SearchSettings />
-              } */}
+                } */}
-              <SearchSettings useSuspense={false} />
+                <SearchSettings useSuspense={false} />
-              {
+                {
-                  !this.state.editOptionsVisible ? null :
+                    !this.state.editOptionsVisible ? null :
-                      <EditOptions onclosed={this.handleOptionsViewClosed.bind(this, 'edit')} />
+                        <EditOptions onclosed={this.handleOptionsViewClosed.bind(this, 'edit')} />
-              }
+                }
-              {
+                {
-                  !this.state.addOptionsVisible ? null :
+                    !this.state.addOptionsVisible ? null :
-                      <AddOptions onclosed={this.handleOptionsViewClosed.bind(this, 'add')} showOptions={this.state.addShowOptions} />
+                        <AddOptions onclosed={this.handleOptionsViewClosed.bind(this, 'add')} showOptions={this.state.addShowOptions} />
-              }
+                }
-              {
+                {
-                  !this.state.settingsVisible ? null :
+                    !this.state.settingsVisible ? null :
-                      <Settings openOptions={this.handleClickToOpenOptions.bind(this)} onclosed={this.handleOptionsViewClosed.bind(this, 'settings')} />
+                        <Settings openOptions={this.handleClickToOpenOptions.bind(this)} onclosed={this.handleOptionsViewClosed.bind(this, 'settings')} />
-              }
+                }
-              {
+                {
-                  !this.state.collaborationVisible ? null :
+                    !this.state.collaborationVisible ? null :
-                      <Collaboration onclosed={this.handleOptionsViewClosed.bind(this, 'coauth')} page={this.state.collaborationPage} />
+                        <Collaboration onclosed={this.handleOptionsViewClosed.bind(this, 'coauth')} page={this.state.collaborationPage} />
-              }
+                }
-              {appOptions.isDocReady && <ContextMenu openOptions={this.handleClickToOpenOptions.bind(this)} /> }  
+                {appOptions.isDocReady && <ContextMenu openOptions={this.handleClickToOpenOptions.bind(this)} /> }  
-          </Page>
+            </Page>
-      )
+        )
-  }
+    }
 }
 
 export default inject("storeAppOptions")(observer(MainPage));