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

[mobile] Add styles of comments for android

Browse source
This commit is contained in:
JuliaSvinareva 2021-03-04 20:25:50 +03:00
parent 0f2a4d8138
commit 7cf42452ae
3 changed files with 64 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -37,7 +37,7 @@ const AddCommentPopup = inject("storeComments")(observer(props => {
</NavRight> </NavRight>
</Navbar> </Navbar>
<div className='wrap-comment'> <div className='wrap-comment'>
<div className="header-comment"> <div className="comment-header">
{Device.android && {Device.android &&
<div className='initials' style={{backgroundColor: `${userInfo.color}`}}>{userInfo.initials}</div> <div className='initials' style={{backgroundColor: `${userInfo.color}`}}>{userInfo.initials}</div>
} }
@ -74,7 +74,7 @@ const AddCommentDialog = inject("storeComments")(observer(props => {
</div> </div>
</div> </div>
<div class='wrap-comment'> <div class='wrap-comment'>
<div class="header-comment"> <div class="comment-header">
${Device.android ? templateInitials : ''} ${Device.android ? templateInitials : ''}
<div class='name'>${userInfo.name}</div> <div class='name'>${userInfo.name}</div>
</div> </div>
@ -237,7 +237,7 @@ const EditCommentDialog = inject("storeComments")(observer(({storeComments, comm
</div> </div>
</div> </div>
<div class='wrap-comment'> <div class='wrap-comment'>
<div class="header-comment"> <div class="comment-header">
${Device.android ? templateInitials : ''} ${Device.android ? templateInitials : ''}
<div> <div>
<div class='name'>${comment.userName}</div> <div class='name'>${comment.userName}</div>
@ -318,7 +318,7 @@ const AddReplyPopup = inject("storeComments")(observer(({storeComments, userInfo
</NavRight> </NavRight>
</Navbar> </Navbar>
<div className='wrap-comment'> <div className='wrap-comment'>
<div className="header-comment"> <div className="comment-header">
{Device.android && {Device.android &&
<div className='initials' style={{backgroundColor: `${userInfo.color}`}}>{userInfo.initials}</div> <div className='initials' style={{backgroundColor: `${userInfo.color}`}}>{userInfo.initials}</div>
} }
@ -354,7 +354,7 @@ const AddReplyDialog = inject("storeComments")(observer(({storeComments, userInf
</div> </div>
</div> </div>
<div class='wrap-comment'> <div class='wrap-comment'>
<div class="header-comment"> <div class="comment-header">
${Device.android ? templateInitials : ''} ${Device.android ? templateInitials : ''}
<div class='name'>${userInfo.name}</div> <div class='name'>${userInfo.name}</div>
</div> </div>
@ -473,7 +473,7 @@ const EditReplyDialog = inject("storeComments")(observer(({storeComments, commen
</div> </div>
</div> </div>
<div class='wrap-comment'> <div class='wrap-comment'>
<div class="header-comment"> <div class="comment-header">
${Device.android ? templateInitials : ''} ${Device.android ? templateInitials : ''}
<div> <div>
<div class='name'>${reply.userName}</div> <div class='name'>${reply.userName}</div>
@ -580,7 +580,7 @@ const ViewComments = ({storeComments, storeAppOptions, onCommentMenuClick, onRes
{comment.quote && <div className='comment-quote'>{sliceQuote(comment.quote)}</div>} {comment.quote && <div className='comment-quote'>{sliceQuote(comment.quote)}</div>}
<div className='comment-text'><pre>{comment.comment}</pre></div> <div className='comment-text'><pre>{comment.comment}</pre></div>
{comment.replies.length > 0 && {comment.replies.length > 0 &&
<ul className='list-reply'> <ul className='reply-list'>
{comment.replies.map((reply, indexReply) => { {comment.replies.map((reply, indexReply) => {
return ( return (
<li key={`reply-${indexComment}-${indexReply}`} <li key={`reply-${indexComment}-${indexReply}`}

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

@ -96,7 +96,7 @@
overflow-wrap: break-word; overflow-wrap: break-word;
} }
} }
.list-reply { .reply-list {
padding-left: 26px; padding-left: 26px;
} }
} }

62
apps/common/mobile/resources/less/material/comments.less
View file

@ -1,11 +1,8 @@
.device-android { .device-android {
.wrap-comment { .wrap-comment, .comment-list, .reply-list {
.header-comment { .comment-header, .reply-header {
display: flex; display: flex;
align-items: center;
.initials { .initials {
height: 30px;
width: 30px;
border-radius: 50px; border-radius: 50px;
color: @white; color: @white;
display: flex; display: flex;
@ -15,13 +12,24 @@
font-size: 14px; font-size: 14px;
} }
} }
}
.wrap-comment {
.comment-header {
align-items: center;
.initials {
height: 30px;
width: 30px;
}
}
.wrap-textarea { .wrap-textarea {
.input:not(.input-outline):after { .input:not(.input-outline):after {
content: none; content: none;
} }
} }
} }
#add-comment-dialog {
#add-comment-dialog, #edit-comment-dialog, #add-reply-dialog, #edit-reply-dialog {
.dialog { .dialog {
--f7-dialog-text-color: @black; --f7-dialog-text-color: @black;
.done { .done {
@ -29,4 +37,46 @@
} }
} }
} }
.comment-list {
.item-inner:after {
content: none;
}
.comment-header {
.left {
display: flex;
align-items: center;
.initials {
width: 40px;
height: 40px;
font-size: 18px;
}
}
}
}
.reply-list {
.reply-header {
.left {
display: flex;
.initials {
margin-top: 5px;
width: 24px;
height: 24px;
font-size: 11px;
}
}
}
}
.edit-comment-popup, .edit-reply-popup, #edit-comment-dialog, #edit-reply-dialog {
.wrap-comment {
.comment-header, .reply-header {
.initials {
height: 40px;
width: 40px;
}
}
}
}
} }