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 ( return (
<Fragment> <Fragment>
<Toolbar position='bottom'> <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 && {/* {!viewMode &&
<Link className={`btn-add-reply${wsProps?.Objects ? ' disabled' : ''}`} href='#' onClick={() => {onCommentMenuClick('addReply', comment);}}>{_t.textAddReply}</Link> <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={onViewPrevComment}><Icon slot='media' icon='icon-prev'/></Link>
<Link href='#' onClick={onViewNextComment}><Icon slot='media' icon='icon-next'/></Link> <Link href='#' onClick={onViewNextComment}><Icon slot='media' icon='icon-next'/></Link>
</div> */} </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> <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)}> <button type="button" className="comment-button" onClick={() => onAddNewComment($$('#comment-text')[0].value, false)}>
<Icon slot="media" icon="icon-comment-button"></Icon> <Icon slot="media" icon="icon-comment-button"></Icon>
</button> </button> */}
</Toolbar> {/* </Toolbar> */}
<div className='pages'> <div className='pages'>
<Page className='page-current-comment'> <Page className='page-current-comment'>
{/* <div className='comment-header'> {/* <div className='comment-header'>

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

@ -52,19 +52,19 @@
padding-right: 0; padding-right: 0;
padding-bottom: 0; padding-bottom: 0;
padding-top: 16px; padding-top: 16px;
// .comment-header { .comment-header {
// display: flex; display: flex;
// justify-content: space-between; justify-content: space-between;
// padding-right: 16px; padding-right: 16px;
// .right { .right {
// display: flex; display: flex;
// justify-content: flex-end; justify-content: flex-end;
// width: 70px; width: 70px;
// .comment-resolve { .comment-resolve {
// margin-right: 10px; margin-right: 10px;
// } }
// } }
// } }
.reply-header { .reply-header {
display: flex; display: flex;
justify-content: space-between; 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 { .edit-comment-popup, .add-reply-popup, .edit-reply-popup {
z-index: 20000; z-index: 20000;
} }
@ -253,4 +239,69 @@
.actions-backdrop.backdrop-in { .actions-backdrop.backdrop-in {
z-index: 13600; 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; 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;
}
} }

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

@ -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)); export default inject("storeAppOptions")(observer(MainPage));