diff --git a/web/react/components/post_info.jsx b/web/react/components/post_info.jsx index 26bd6addef..73b47024c4 100644 --- a/web/react/components/post_info.jsx +++ b/web/react/components/post_info.jsx @@ -22,6 +22,26 @@ export default class PostInfo extends React.Component { this.handlePermalinkCopy = this.handlePermalinkCopy.bind(this); } + createReplyLink() { + if (this.props.allowReply === 'true') { + var hideReply = ''; + + if (this.props.commentCount >= 1) { + hideReply = ' post__reply--hide'; + } + + return ( +
+ + + +
+ ); + } + } createDropdown() { var post = this.props.post; var isOwner = UserStore.getCurrentId() === post.user_id; @@ -42,23 +62,6 @@ export default class PostInfo extends React.Component { dataComments = this.props.commentCount; } - if (this.props.allowReply === 'true') { - dropdownContents.push( -
  • - - {'Reply'} - -
  • - ); - } - dropdownContents.push(
  • {'Copy '}) : 'Copy'; @@ -223,6 +227,7 @@ export default class PostInfo extends React.Component { />
  • + {replyLink}
    ", MENU_ICON: " ", COMMENT_ICON: " ", + REPLY_ICON: " ", UPDATE_TYPING_MS: 5000, THEMES: { default: { diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx index 82e9bc4472..494c38bdb1 100644 --- a/web/react/utils/utils.jsx +++ b/web/react/utils/utils.jsx @@ -714,7 +714,7 @@ export function applyTheme(theme) { if (theme.linkColor) { changeCss('a, a:focus, a:hover, .btn, .btn:focus, .btn:hover', 'color:' + theme.linkColor, 1); - changeCss('.post .comment-icon__container', 'fill:' + theme.linkColor, 1); + changeCss('.post .comment-icon__container, .post .post__reply', 'fill:' + theme.linkColor, 1); } if (theme.buttonBg) { diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss index ef23666867..1f7a55cd0e 100644 --- a/web/sass-files/sass/partials/_post.scss +++ b/web/sass-files/sass/partials/_post.scss @@ -408,7 +408,7 @@ body.ios { @include legacy-pie-clearfix; &:hover { - .dropdown, .comment-icon__container { + .dropdown, .comment-icon__container, .post__reply { visibility: visible; } .permalink-icon { @@ -597,7 +597,7 @@ body.ios { position: absolute; right: 0; top: 30px; - width: 65px; + width: 85px; white-space: nowrap; } @@ -666,7 +666,7 @@ body.ios { word-wrap: break-word; padding: 0.2em 0.5em 0em; @include legacy-pie-clearfix; - width: calc(100% - 75px); + width: calc(100% - 95px); p { margin: 0 0 0.4em; @@ -754,6 +754,18 @@ body.ios { visibility: hidden; } + .post__reply { + display: inline-block; + margin-right: 6px; + visibility: hidden; + svg { + width: 18px; + top: 3px; + fill: inherit; + position: relative; + } + } + .comment-icon__container { fill: $primary-color; display: inline-block; diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss index 8491869a6f..a37974c7a0 100644 --- a/web/sass-files/sass/partials/_responsive.scss +++ b/web/sass-files/sass/partials/_responsive.scss @@ -78,21 +78,15 @@ &:hover { background: transparent; + } - .comment-icon__container { - visibility: hidden; - - &.icon--show { - visibility: visible; - } - - } - + .comment-icon__container { + visibility: hidden; } } - .dropdown { + .dropdown, .post__reply { visibility: visible; } @@ -124,8 +118,34 @@ .post { + .post__body { + width: calc(100% - 75px); + } + + .post__reply { + margin-right: 20px; + float: right; + + svg { + top: 1px; + } + + } + + &.other--root .post__reply { + + &.post__reply--hide { + visibility: hidden; + } + + } + .post__header { + .col__reply { + width: 65px; + } + .col__name { pointer-events: none; }