Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Add comment text block

Browse source
This commit is contained in:
SergeyEzhin 2021-11-30 18:39:16 +04:00
parent d4f384e532
commit ccd8f061c1
4 changed files with 171 additions and 148 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
apps/common/mobile/lib/view/collaboration/Comments.jsx
View file

@ -798,6 +798,15 @@ const CommentList = inject("storeComments", "storeAppOptions", "storeReview")(ob
return (
<Fragment>
<Toolbar position='bottom'>
<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>
}
@ -805,12 +814,12 @@ const CommentList = inject("storeComments", "storeAppOptions", "storeReview")(ob
<Link href='#' onClick={onViewPrevComment}><Icon slot='media' icon='icon-prev'/></Link>
<Link href='#' onClick={onViewNextComment}><Icon slot='media' icon='icon-next'/></Link>
</div> */}
<div className="comment-text_hidden"><div className="textarea_behavior" id="comment-text_hidden"></div></div>
{/* <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>
</button> */}
{/* </Toolbar> */}
<div className='pages'>
<Page className='page-current-comment'>
{/* <div className='comment-header'>

105
apps/common/mobile/resources/less/comments.less
View file

@ -52,19 +52,19 @@
padding-right: 0;
padding-bottom: 0;
padding-top: 16px;
// .comment-header {
// display: flex;
// justify-content: space-between;
// padding-right: 16px;
// .right {
// display: flex;
// justify-content: flex-end;
// width: 70px;
// .comment-resolve {
// margin-right: 10px;
// }
// }
// }
.comment-header {
display: flex;
justify-content: space-between;
padding-right: 16px;
.right {
display: flex;
justify-content: flex-end;
width: 70px;
.comment-resolve {
margin-right: 10px;
}
}
}
.reply-header {
display: flex;
justify-content: space-between;
@ -113,20 +113,6 @@
}
}
.comment-header {
display: flex;
justify-content: space-between;
padding-right: 16px;
.right {
display: flex;
justify-content: flex-end;
width: 70px;
.comment-resolve {
margin-right: 10px;
}
}
}
.edit-comment-popup, .add-reply-popup, .edit-reply-popup {
z-index: 20000;
}
@ -254,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;
}
}

44
apps/common/mobile/resources/less/common-material.less
View file

@ -618,48 +618,4 @@
margin-right: 0;
}
}
// Comments
.comment-text_hidden {
position: relative;
}
#comment-text_hidden {
visibility:hidden;
position: absolute;
}
.comment-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-button {
position: absolute;
right: 27px;
top: 15px;
width: 19px;
height: 19px;
background: transparent;
outline: none;
border: 0;
padding: 0;
}
}

7
apps/documenteditor/mobile/src/page/main.jsx
View file

@ -108,6 +108,13 @@ class MainPage extends Component {
</Subnavbar>
</Navbar>
{/* 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>