Add comment text block
This commit is contained in:
SergeyEzhin
parent
d4f384e532
commit
ccd8f061c1
|
|
@ -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'>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -253,4 +239,69 @@
|
|||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -83,86 +83,93 @@ class MainPage extends Component {
|
|||
|
||||
};
|
||||
|
||||
render() {
|
||||
const appOptions = this.props.storeAppOptions;
|
||||
const config = appOptions.config;
|
||||
render() {
|
||||
const appOptions = this.props.storeAppOptions;
|
||||
const config = appOptions.config;
|
||||
|
||||
let showLogo = !(appOptions.canBrandingExt && (config.customization && (config.customization.loaderName || config.customization.loaderLogo)));
|
||||
if ( !Object.keys(config).length ) {
|
||||
showLogo = !/&(?:logo)=/.test(window.location.search);
|
||||
}
|
||||
let showLogo = !(appOptions.canBrandingExt && (config.customization && (config.customization.loaderName || config.customization.loaderLogo)));
|
||||
if ( !Object.keys(config).length ) {
|
||||
showLogo = !/&(?:logo)=/.test(window.location.search);
|
||||
}
|
||||
|
||||
const showPlaceholder = !appOptions.isDocReady && (!config.customization || !(config.customization.loaderName || config.customization.loaderLogo));
|
||||
if ( $$('.skl-container').length ) {
|
||||
$$('.skl-container').remove();
|
||||
}
|
||||
const showPlaceholder = !appOptions.isDocReady && (!config.customization || !(config.customization.loaderName || config.customization.loaderLogo));
|
||||
if ( $$('.skl-container').length ) {
|
||||
$$('.skl-container').remove();
|
||||
}
|
||||
|
||||
return (
|
||||
<Page name="home" className={`editor${ showLogo ? ' page-with-logo' : ''}`}>
|
||||
{/* Top Navbar */}
|
||||
<Navbar id='editor-navbar' className={`main-navbar${showLogo ? ' navbar-with-logo' : ''}`}>
|
||||
{showLogo && <div className="main-logo"><Icon icon="icon-logo"></Icon></div>}
|
||||
<Subnavbar>
|
||||
<Toolbar openOptions={this.handleClickToOpenOptions} closeOptions={this.handleOptionsViewClosed}/>
|
||||
<Search useSuspense={false}/>
|
||||
</Subnavbar>
|
||||
</Navbar>
|
||||
{/* Page content */}
|
||||
return (
|
||||
<Page name="home" className={`editor${ showLogo ? ' page-with-logo' : ''}`}>
|
||||
{/* Top Navbar */}
|
||||
<Navbar id='editor-navbar' className={`main-navbar${showLogo ? ' navbar-with-logo' : ''}`}>
|
||||
{showLogo && <div className="main-logo"><Icon icon="icon-logo"></Icon></div>}
|
||||
<Subnavbar>
|
||||
<Toolbar openOptions={this.handleClickToOpenOptions} closeOptions={this.handleOptionsViewClosed}/>
|
||||
<Search useSuspense={false}/>
|
||||
</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>
|
||||
<View id="editor_sdk">
|
||||
</View>
|
||||
|
||||
{showPlaceholder ?
|
||||
<div className="doc-placeholder-container">
|
||||
<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>
|
||||
</div> : null
|
||||
}
|
||||
{showPlaceholder ?
|
||||
<div className="doc-placeholder-container">
|
||||
<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>
|
||||
</div> : null
|
||||
}
|
||||
|
||||
{/* {
|
||||
Device.phone ? null : <SearchSettings />
|
||||
} */}
|
||||
<SearchSettings useSuspense={false} />
|
||||
{
|
||||
!this.state.editOptionsVisible ? null :
|
||||
<EditOptions onclosed={this.handleOptionsViewClosed.bind(this, 'edit')} />
|
||||
}
|
||||
{
|
||||
!this.state.addOptionsVisible ? null :
|
||||
<AddOptions onclosed={this.handleOptionsViewClosed.bind(this, 'add')} showOptions={this.state.addShowOptions} />
|
||||
}
|
||||
{
|
||||
!this.state.settingsVisible ? null :
|
||||
<Settings openOptions={this.handleClickToOpenOptions.bind(this)} onclosed={this.handleOptionsViewClosed.bind(this, 'settings')} />
|
||||
}
|
||||
{
|
||||
!this.state.collaborationVisible ? null :
|
||||
<Collaboration onclosed={this.handleOptionsViewClosed.bind(this, 'coauth')} page={this.state.collaborationPage} />
|
||||
}
|
||||
{appOptions.isDocReady && <ContextMenu openOptions={this.handleClickToOpenOptions.bind(this)} /> }
|
||||
</Page>
|
||||
)
|
||||
}
|
||||
{/* {
|
||||
Device.phone ? null : <SearchSettings />
|
||||
} */}
|
||||
<SearchSettings useSuspense={false} />
|
||||
{
|
||||
!this.state.editOptionsVisible ? null :
|
||||
<EditOptions onclosed={this.handleOptionsViewClosed.bind(this, 'edit')} />
|
||||
}
|
||||
{
|
||||
!this.state.addOptionsVisible ? null :
|
||||
<AddOptions onclosed={this.handleOptionsViewClosed.bind(this, 'add')} showOptions={this.state.addShowOptions} />
|
||||
}
|
||||
{
|
||||
!this.state.settingsVisible ? null :
|
||||
<Settings openOptions={this.handleClickToOpenOptions.bind(this)} onclosed={this.handleOptionsViewClosed.bind(this, 'settings')} />
|
||||
}
|
||||
{
|
||||
!this.state.collaborationVisible ? null :
|
||||
<Collaboration onclosed={this.handleOptionsViewClosed.bind(this, 'coauth')} page={this.state.collaborationPage} />
|
||||
}
|
||||
{appOptions.isDocReady && <ContextMenu openOptions={this.handleClickToOpenOptions.bind(this)} /> }
|
||||
</Page>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default inject("storeAppOptions")(observer(MainPage));
|
||||
Loading…
Reference in a new issue