From 1a71589dce9781be8c9eca17a5d96f94b57d0679 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Fri, 25 Aug 2017 19:29:31 +0500 Subject: PLT-7224 - Updating post textbox UI (#7153) * PLT-7224 - Updating post textbox UI * Updating post textbox spacing * Updating emoji icon --- .../components/create_comment/create_comment.jsx | 7 +- webapp/components/create_post.jsx | 7 +- webapp/components/file_upload.jsx | 3 +- .../components/post_view/post_info/post_info.jsx | 5 +- webapp/components/rhs_comment.jsx | 6 +- webapp/components/rhs_root_post.jsx | 6 +- webapp/sass/layout/_post-right.scss | 5 - webapp/sass/layout/_post.scss | 194 +++++++++++---------- webapp/sass/layout/_sidebar-right.scss | 8 +- webapp/sass/responsive/_mobile.scss | 25 ++- webapp/sass/responsive/_tablet.scss | 80 --------- webapp/utils/constants.jsx | 3 +- webapp/utils/utils.jsx | 6 +- 13 files changed, 160 insertions(+), 195 deletions(-) diff --git a/webapp/components/create_comment/create_comment.jsx b/webapp/components/create_comment/create_comment.jsx index 9370d7b48..54f3f65ca 100644 --- a/webapp/components/create_comment/create_comment.jsx +++ b/webapp/components/create_comment/create_comment.jsx @@ -549,7 +549,7 @@ export default class CreateComment extends React.Component { let emojiPicker = null; if (window.mm_config.EnableEmojiPicker === 'true') { emojiPicker = ( - + @@ -594,7 +595,7 @@ export default class CreateComment extends React.Component { /> {fileUpload} {emojiPicker} diff --git a/webapp/components/create_post.jsx b/webapp/components/create_post.jsx index 4b83f3051..e7329c5f3 100644 --- a/webapp/components/create_post.jsx +++ b/webapp/components/create_post.jsx @@ -721,7 +721,7 @@ export default class CreatePost extends React.Component { let emojiPicker = null; if (window.mm_config.EnableEmojiPicker === 'true') { emojiPicker = ( - + @@ -767,7 +768,7 @@ export default class CreatePost extends React.Component { /> {fileUpload} {emojiPicker} diff --git a/webapp/components/file_upload.jsx b/webapp/components/file_upload.jsx index 3e28f11df..9ec4aaf2f 100644 --- a/webapp/components/file_upload.jsx +++ b/webapp/components/file_upload.jsx @@ -380,9 +380,8 @@ class FileUpload extends React.Component { let fileDiv; if (FileUtils.canUploadFiles()) { fileDiv = ( -
+
- + diff --git a/webapp/components/rhs_comment.jsx b/webapp/components/rhs_comment.jsx index a4db89835..6b27848bb 100644 --- a/webapp/components/rhs_comment.jsx +++ b/webapp/components/rhs_comment.jsx @@ -371,7 +371,11 @@ export default class RhsComment extends React.Component { className='reacticon__container reaction' onClick={this.toggleEmojiPicker} ref={'rhs_reacticon_' + post.id} - > + > + diff --git a/webapp/components/rhs_root_post.jsx b/webapp/components/rhs_root_post.jsx index ed88fff05..9c7fd7244 100644 --- a/webapp/components/rhs_root_post.jsx +++ b/webapp/components/rhs_root_post.jsx @@ -236,7 +236,11 @@ export default class RhsRootPost extends React.Component { className='reacticon__container reaction' onClick={this.toggleEmojiPicker} ref='rhs_root_reacticon' - > + > + diff --git a/webapp/sass/layout/_post-right.scss b/webapp/sass/layout/_post-right.scss index 1442a8de8..fefb58092 100644 --- a/webapp/sass/layout/_post-right.scss +++ b/webapp/sass/layout/_post-right.scss @@ -82,11 +82,6 @@ min-width: 1px; } - .post-create-footer { - padding: 5px 0 30px; - width: 100%; - } - .post-right-comments-upload-in-progress { @include opacity(.7); margin-right: 10px; diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss index 1857462e6..245ff062f 100644 --- a/webapp/sass/layout/_post.scss +++ b/webapp/sass/layout/_post.scss @@ -258,10 +258,9 @@ .post-list-holder-by-time { -webkit-overflow-scrolling: touch; - background: #ffffff; height: 100%; overflow-y: scroll; - padding: 1em 0 0; + padding: 1em 0 .5em; position: absolute; width: 100%; @@ -385,7 +384,7 @@ .post-create__container { @include flex(0 0 auto); width: 100%; - z-index: 9; + z-index: 5; label { font-weight: normal; @@ -393,7 +392,7 @@ form { margin: 0 auto; - padding: .5em 15px 0; + padding: 0 15px 0; width: 100%; } @@ -404,16 +403,16 @@ .custom-textarea { bottom: 0; max-height: 162px; - padding-top: 8px; overflow: hidden; + padding: 14px 0 14px 20px; resize: none; &:not(.custom-textarea--emoji-picker) { - padding-right: 35px; + padding-right: 40px; } &.custom-textarea--emoji-picker { - padding-right: 60px; + padding-right: 80px; } &.textbox-preview-area { @@ -423,26 +422,113 @@ .emoji-picker { position: absolute; + right: 0; top: -361px; - right: 0px; } - .post-create.scroll { - .btn-file { + .scroll { + .post-body__actions { right: 10px; } .custom-textarea { -ms-overflow-style: auto; - overflow: auto; -webkit-overflow-scrolling: touch; + overflow: auto; &:not(.custom-textarea--emoji-picker) { - padding-right: 43px; + padding-right: 50px; } &.custom-textarea--emoji-picker { - padding-right: 60px; + padding-right: 90px; + } + } + } + + .post-body__actions { + display: flex; + height: 100%; + position: absolute; + right: 0; + top: 0; + + > span { + border-left: 1px solid transparent; + width: 41px; + + &:first-child { + border: none; + } + + > span, + div { + display: block; + height: 49px; + line-height: 49px; + text-align: center; + width: 100%; + } + } + + &:hover, + &:active { + box-shadow: none; + } + + &.btn-file__disabled { + @include opacity(.1); + + &:hover, + &:active { + @include opacity(.1); + } + } + + .icon--emoji { + @include opacity(.5); + @include single-transition(all, .15s); + cursor: pointer; + + &:hover { + @include opacity(.7); + } + + svg { + position: relative; + top: 2px; + } + } + + .icon--attachment { + @include opacity(.4); + @include single-transition(all, .15s); + cursor: pointer; + overflow: hidden; + position: relative; + vertical-align: top; + + &:hover { + @include opacity(.6); + } + + input { + cursor: pointer; + direction: ltr; + filter: alpha(opacity=0); + font-size: 23px; + height: 100%; + margin: 0; + opacity: 0; + position: absolute; + right: 0; + top: 0; + width: 100%; + } + + svg { + position: relative; + top: 3px; } } } @@ -477,69 +563,11 @@ } } - .btn-file { - @include single-transition(all, .15s); - font-size: 16px; - padding: 8px 9px 4px; - position: absolute; - right: 0; - top: 0; - z-index: 5; - - svg { - height: 18px; - width: 18px; - } - - &:hover, - &:active { - box-shadow: none; - } - - &.btn-file__disabled { - @include opacity(.1); - - &:hover, - &:active { - @include opacity(.1); - } - } - - .icon--attachment { - @include opacity(.5); - display: inline-block; - position: relative; - vertical-align: top; - - input { - cursor: pointer; - direction: ltr; - filter: alpha(opacity=0); - font-size: 23px; - height: 100%; - margin: 0; - opacity: 0; - position: absolute; - right: 0; - top: 0; - width: 100%; - } - - &:hover { - @include opacity(.9); - } - } - } - .icon--emoji-picker { @include opacity(.5); @include single-transition(all, .15s); cursor: pointer; - font-size: 19px; - margin-left: 7px; - position: relative; - vertical-align: top; &:hover, &:active { @@ -573,23 +601,6 @@ } } - - .icon--emoji-picker { - @include opacity(.5); - @include single-transition(all, .15s); - cursor: pointer; - font-size: 19px; - margin-left: 7px; - position: relative; - vertical-align: top; - - &:hover, - &:active { - @include opacity(.9); - box-shadow: none; - } - } - textarea { box-shadow: none; } @@ -1524,6 +1535,13 @@ margin-left: 5px; vertical-align: top; visibility: hidden; + + svg { + height: 14px; + position: relative; + top: 1px; + width: 14px; + } } .flag-icon__container { diff --git a/webapp/sass/layout/_sidebar-right.scss b/webapp/sass/layout/_sidebar-right.scss index 73654923f..bf1cef606 100644 --- a/webapp/sass/layout/_sidebar-right.scss +++ b/webapp/sass/layout/_sidebar-right.scss @@ -95,17 +95,17 @@ .post-create-footer { @include clearfix; + clear: both; font-size: 13px; overflow: visible; position: relative; - clear: both; .post-error { - font-weight: normal; - margin-bottom: 0; + @include opacity(.55); display: inline-block; font-size: .85em; - @include opacity(.55); + font-weight: normal; + margin-bottom: 0; position: absolute; top: -25px; } diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss index ba830000a..fdbf774ee 100644 --- a/webapp/sass/responsive/_mobile.scss +++ b/webapp/sass/responsive/_mobile.scss @@ -40,13 +40,30 @@ } .post-create__container { - padding-bottom: 10px; + .post-create-footer { + padding: 0 10px; + } + + form { + padding: 0; + } + + .post-create-body { + padding: 0; + + textarea { + .app-content & { + border-left: none; + border-right: none; + } + } + } .msg-typing { display: none; } - .icon--emoji-picker { + .emoji-picker__container { display: none; } } @@ -821,7 +838,7 @@ } .file-preview__container { - margin: 5px 0 0; + margin: 10px 0 5px; } .file-preview { @@ -1189,6 +1206,8 @@ } .post-create-footer { + padding-top: 10px; + .control-label { margin: .5em 0; top: 0; diff --git a/webapp/sass/responsive/_tablet.scss b/webapp/sass/responsive/_tablet.scss index 71b95c997..967d6231d 100644 --- a/webapp/sass/responsive/_tablet.scss +++ b/webapp/sass/responsive/_tablet.scss @@ -19,86 +19,6 @@ } } - .post-create__container { - .post-create { - &.post-create--attachment-disabled { - .post-body__cell { - padding-left: 1em; - } - - .post-create-footer { - padding-left: 1em; - } - } - } - - form { - padding: .5em 0 0; - } - - .post-create-footer { - padding: 0 45px 0 8px; - - .post-error { - position: relative; - top: 0; - - .sidebar--right & { - left: 0; - } - } - } - - .post-create-body { - display: table; - width: 100%; - - .post-body__cell { - display: table-cell; - padding-left: 45px; - - - .sidebar--right & { - padding-left: 0; - } - } - - .app__content & { - .btn-file { - bottom: -2px; - left: 10px; - line-height: 36px; - padding: 0; - top: auto; - width: 25px; - - .icon--emoji-picker { - display: none; - } - } - } - - .app__content & { - .icon { - position: relative; - top: 3px; - - } - } - - .icon__emoji_picker { - position: relative; - display: none; - top: 1px; - right: -1px; - } - - .send-button { - display: table-cell; - } - } - } - .signup-team__container { &.branded { display: block; diff --git a/webapp/utils/constants.jsx b/webapp/utils/constants.jsx index a5e24c69c..ea6d1dba3 100644 --- a/webapp/utils/constants.jsx +++ b/webapp/utils/constants.jsx @@ -470,12 +470,13 @@ export const Constants = { OPEN_TEAM: 'O', MAX_POST_LEN: 4000, EMOJI_SIZE: 16, + EMOJI_ICON_SVG: " ", UNREAD_ICON_SVG: "", MEMBERS_ICON_SVG: " ", TEAM_INFO_SVG: " ", FLAG_FILLED_ICON_SVG: " ", FLAG_ICON_SVG: " ", - ATTACHMENT_ICON_SVG: "", + ATTACHMENT_ICON_SVG: " ", MATTERMOST_ICON_SVG: " ", ONLINE_AVATAR_SVG: " ", AWAY_AVATAR_SVG: " ", diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx index 2df4a753e..52574e735 100644 --- a/webapp/utils/utils.jsx +++ b/webapp/utils/utils.jsx @@ -650,9 +650,9 @@ export function applyTheme(theme) { changeCss('.app__body .post-image__details', 'color:' + theme.centerChannelColor); changeCss('.app__body .post-image__column a, .app__body .post-image__column a:hover, .app__body .post-image__column a:focus', 'color:' + theme.centerChannelColor); changeCss('@media(min-width: 768px){.app__body .search-bar__container .search__form .search-bar, .app__body .form-control', 'color:' + theme.centerChannelColor); - changeCss('.app__body .input-group-addon, .app__body .form-control', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2)); + changeCss('.app__body .input-group-addon, .app__body .form-control, .app__body .post-create__container .post-body__actions > span', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.1)); changeCss('@media(min-width: 768px){.app__body .post-list__table .post-list__content .dropdown-menu a:hover', 'background:' + changeOpacity(theme.centerChannelColor, 0.1)); - changeCss('.app__body .form-control:focus', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.3)); + changeCss('.app__body .form-control:focus', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2)); changeCss('.app__body .attachment .attachment__content', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.3)); changeCss('.app__body .input-group-addon, .app__body .channel-intro .channel-intro__content, .app__body .webhooks__container', 'background:' + changeOpacity(theme.centerChannelColor, 0.05)); changeCss('.app__body .date-separator .separator__text', 'color:' + theme.centerChannelColor); @@ -679,7 +679,7 @@ export function applyTheme(theme) { changeCss('body.app__body ::-webkit-scrollbar-thumb', 'background:' + changeOpacity(theme.centerChannelColor, 0.4)); } changeCss('body', 'scrollbar-arrow-color:' + theme.centerChannelColor); - changeCss('.app__body .post-create__container .post-create-body .btn-file svg, .app__body .post.post--compact .post-image__column .post-image__details svg, .app__body .modal .about-modal .about-modal__logo svg, .app__body .post .post__img svg', 'fill:' + theme.centerChannelColor); + changeCss('.app__body .post-create__container .post-create-body .btn-file svg, .app__body .post.post--compact .post-image__column .post-image__details svg, .app__body .modal .about-modal .about-modal__logo svg, .app__body .post .post__img svg, .app__body .post-body__actions svg', 'fill:' + theme.centerChannelColor); changeCss('.app__body .scrollbar--horizontal, .app__body .scrollbar--vertical', 'background:' + changeOpacity(theme.centerChannelColor, 0.5)); changeCss('.app__body .post-list__new-messages-below', 'background:' + changeColor(theme.centerChannelColor, 0.5)); changeCss('.app__body .post.post--comment .post__body', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2)); -- cgit v1.2.3-1-g7c22