From aaa05632c5d9eda35a048300a5bd7e99584c5b58 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Mon, 1 Aug 2016 18:24:53 +0500 Subject: [PATCH] Updating position of flags (#3708) --- .../components/post_view/components/post.jsx | 6 +- .../post_view/components/post_info.jsx | 62 +++++++++---------- webapp/components/rhs_comment.jsx | 8 +-- webapp/components/rhs_root_post.jsx | 8 +-- webapp/components/search_results_item.jsx | 4 +- webapp/i18n/en.json | 2 +- webapp/sass/components/_search.scss | 50 ++++++++------- webapp/sass/layout/_post.scss | 12 +--- webapp/sass/responsive/_tablet.scss | 14 +---- webapp/utils/constants.jsx | 4 +- 10 files changed, 79 insertions(+), 91 deletions(-) diff --git a/webapp/components/post_view/components/post.jsx b/webapp/components/post_view/components/post.jsx index 038bcab781c..151a3174ba7 100644 --- a/webapp/components/post_view/components/post.jsx +++ b/webapp/components/post_view/components/post.jsx @@ -173,12 +173,12 @@ export default class Post extends React.Component { } let postType = ''; - if (type !== 'Post') { + if (type !== 'Post' && !this.props.isFlagged) { postType = 'post--comment'; - } else if (commentCount > 0) { + } else if (commentCount > 0 || this.props.isFlagged) { postType = 'post--root'; sameUserClass = ''; - rootUser = ''; + rootUser = 'other--root'; } let systemMessageClass = ''; diff --git a/webapp/components/post_view/components/post_info.jsx b/webapp/components/post_view/components/post_info.jsx index d48d97ba1fb..382331635b4 100644 --- a/webapp/components/post_view/components/post_info.jsx +++ b/webapp/components/post_view/components/post_info.jsx @@ -277,27 +277,6 @@ export default class PostInfo extends React.Component { ); } - let options; - if (Utils.isPostEphemeral(post)) { - options = ( -
  • - {this.createRemovePostButton()} -
    • - ); - } else { - options = ( -
  • -
    - {this.createDropdown()} -
    - {comments} -
    • - ); - } - let flag; let flagFunc; let flagVisible = ''; @@ -322,7 +301,7 @@ export default class PostInfo extends React.Component { ); @@ -336,15 +315,22 @@ export default class PostInfo extends React.Component { flagFunc = this.flagPost; } - return ( -
    diff --git a/webapp/components/rhs_root_post.jsx b/webapp/components/rhs_root_post.jsx index 423abcf8214..92b86fae3dd 100644 --- a/webapp/components/rhs_root_post.jsx +++ b/webapp/components/rhs_root_post.jsx @@ -332,7 +332,7 @@ export default class RhsRootPost extends React.Component { ); @@ -367,6 +367,9 @@ export default class RhsRootPost extends React.Component { minute='2-digit' /> + +
  • + {rootOptions}
    • -
  • - {rootOptions} -
    • ); @@ -177,9 +177,9 @@ export default class SearchResultsItem extends React.Component { minute='2-digit' /> - {flag}
  • + {flag} Sending Messages

    Type here to write a message and press Enter to post it.

    Click the Attachment button to upload an image or a file.

    ", "create_post.write": "Write a message...", "create_team.agreement": "By proceeding to create your account and use {siteName}, you agree to our     Terms of Service and Privacy Policy. If you do not agree, you cannot use {siteName}.", diff --git a/webapp/sass/components/_search.scss b/webapp/sass/components/_search.scss index 11bcdb92d90..8c79130b3f8 100644 --- a/webapp/sass/components/_search.scss +++ b/webapp/sass/components/_search.scss @@ -137,30 +137,36 @@ } } -.col__controls { - font-size: 13px; - position: absolute; - right: 0; - top: 0; - - a { - @include opacity(.8); - vertical-align: top; - - &:hover { - @include opacity(1); - } - } - - - .search-item__jump { +.post { + .col__controls { font-size: 13px; - position: relative; - top: 1px; - } + position: absolute; + right: 0; + top: 0; - .search-item__comment { - margin-right: 5px; + .flag-icon__container { + top: 4px; + } + + a { + @include opacity(.8); + vertical-align: top; + + &:hover { + @include opacity(1); + } + } + + + .search-item__jump { + font-size: 13px; + position: relative; + top: 1px; + } + + .search-item__comment { + margin-right: 5px; + } } } diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss index 6408c9ec7d2..46963125c6d 100644 --- a/webapp/sass/layout/_post.scss +++ b/webapp/sass/layout/_post.scss @@ -695,12 +695,6 @@ body.ios { } } - .flag-icon__container { - left: 36px; - position: absolute; - top: 8px; - } - .post__img { img { display: none; @@ -811,7 +805,7 @@ body.ios { .col__reply { border: 1px solid transparent; border-radius: 2px; - min-width: 70px; + min-width: 92px; padding: 2px 5px; position: absolute; right: 0; @@ -844,7 +838,7 @@ body.ios { .post__img { padding-right: 10px; text-align: right; - width: 50px; + width: 42px; svg { height: 32px; @@ -1128,7 +1122,7 @@ body.ios { .flag-icon__container { display: inline-block; font-size: 12px; - margin-left: 5px; + margin-right: 5px; position: relative; top: 1px; visibility: hidden; diff --git a/webapp/sass/responsive/_tablet.scss b/webapp/sass/responsive/_tablet.scss index 70dc3962725..5702146bd35 100644 --- a/webapp/sass/responsive/_tablet.scss +++ b/webapp/sass/responsive/_tablet.scss @@ -201,27 +201,15 @@ } .post__content { - padding-right: 45px; + padding-right: 70px; } } - .flag-icon__container { - left: -16px; - position: absolute; - top: 7px; - } - &.same--root { &.same--user { padding-left: 70px; padding-top: 0; - .flag-icon__container { - left: -16px; - position: absolute; - top: 7px; - } - .post__header { .col__reply { top: -1px; diff --git a/webapp/utils/constants.jsx b/webapp/utils/constants.jsx index 42a4213d3a9..5970fcbf16c 100644 --- a/webapp/utils/constants.jsx +++ b/webapp/utils/constants.jsx @@ -325,8 +325,8 @@ export const Constants = { OPEN_TEAM: 'O', MAX_POST_LEN: 4000, EMOJI_SIZE: 16, - FLAG_ICON_OUTLINE_SVG: " ", - FLAG_ICON_SVG: " ", + FLAG_ICON_OUTLINE_SVG: " ", + FLAG_ICON_SVG: " ", ATTACHMENT_ICON_SVG: "", MATTERMOST_ICON_SVG: " ", ONLINE_ICON_SVG: " ",