diff options
author | Harrison Healey <harrisonmhealey@gmail.com> | 2017-04-04 15:15:11 -0400 |
---|---|---|
committer | Joram Wilander <jwawilander@gmail.com> | 2017-04-04 15:15:11 -0400 |
commit | 77a76487a8e15084c8b5e8e350eb8dc7a87455ea (patch) | |
tree | d733caef90d04c86de7f8c6acd7481bddfd68d0d | |
parent | 6bb65ef420fba17ec02e9b8005ca58bb60321cdc (diff) | |
download | chat-77a76487a8e15084c8b5e8e350eb8dc7a87455ea.tar.gz chat-77a76487a8e15084c8b5e8e350eb8dc7a87455ea.tar.bz2 chat-77a76487a8e15084c8b5e8e350eb8dc7a87455ea.zip |
PLT-5985 Cleaned up CSS for post textbox (#5974)
-rw-r--r-- | webapp/components/textbox.jsx | 10 | ||||
-rw-r--r-- | webapp/sass/layout/_post-right.scss | 3 | ||||
-rw-r--r-- | webapp/sass/layout/_post.scss | 374 |
3 files changed, 177 insertions, 210 deletions
diff --git a/webapp/components/textbox.jsx b/webapp/components/textbox.jsx index 21f784af5..f15848688 100644 --- a/webapp/components/textbox.jsx +++ b/webapp/components/textbox.jsx @@ -246,6 +246,14 @@ export default class Textbox extends React.Component { </div> ); + let textboxClassName = 'form-control custom-textarea'; + if (this.props.emojiEnabled) { + textboxClassName += ' custom-textarea--emoji-picker'; + } + if (this.state.connection) { + textboxClassName += ' ' + this.state.connection; + } + return ( <div ref='wrapper' @@ -254,7 +262,7 @@ export default class Textbox extends React.Component { <SuggestionBox id={this.props.id} ref='message' - className={`form-control custom-textarea${this.props.emojiEnabled ? '-emoji' : ''} ${this.state.connection}`} + className={textboxClassName} type='textarea' spellCheck='true' placeholder={this.props.createMessage} diff --git a/webapp/sass/layout/_post-right.scss b/webapp/sass/layout/_post-right.scss index 5fd7df3f2..9282d0d7b 100644 --- a/webapp/sass/layout/_post-right.scss +++ b/webapp/sass/layout/_post-right.scss @@ -71,8 +71,7 @@ } } - .custom-textarea, - .custom-textarea-emoji { + .custom-textarea { min-height: 100px; } diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss index a3b228241..2a2876116 100644 --- a/webapp/sass/layout/_post.scss +++ b/webapp/sass/layout/_post.scss @@ -15,11 +15,11 @@ border-color: #cccccc; box-shadow: none; } -} -.bad-connection { - background: #ffffac !important; - color: #d04444 !important; + &.bad-connection { + background: #ffffac !important; + color: #d04444 !important; + } } .textarea-wrapper { @@ -360,33 +360,36 @@ .post-create__container { label { - font-weight: normal; - } - .custom-textarea { - overflow: hidden; -} + font-weight: normal; + } -form { - margin: 0 auto; - padding: .5em 15px 0; - width: 100%; -} -#reply_textbox.custom-textarea-emoji{ - bottom: 0; - max-height: 162px !important; - padding-right: 60px; - padding-top: 6px; - resize: none; + form { + margin: 0 auto; + padding: .5em 15px 0; + width: 100%; + } + .center { + max-width: 1028px; + } + .custom-textarea { + bottom: 0; + max-height: 162px; + padding-top: 8px; + overflow: hidden; + resize: none; -} -.center { - max-width: 1028px; -} + &:not(.custom-textarea--emoji-picker) { + padding-right: 35px; + } + + &.custom-textarea--emoji-picker { + padding-right: 60px; + } + } -.post-create { - &.scroll { + .post-create.scroll { .btn-file { right: 10px; } @@ -394,235 +397,192 @@ form { .custom-textarea { -ms-overflow-style: auto; overflow: auto; - padding-right: 43px; - resize: none; - } - #post_textbox-reference.custom-textarea-emoji { - padding-right: 43px; - resize: none; - } - - - - #post_textbox.custom-textarea-emoji { - padding-right: 60px; - resize: none; + &:not(.custom-textarea--emoji-picker) { + padding-right: 43px; + } + &.custom-textarea--emoji-picker { + padding-right: 60px; + } } } -} -.post-create-body { - padding: 0 0 2px; - position: relative; - - .post-body__cell { + .post-create-body { + padding: 0 0 2px; position: relative; - vertical-align: top; - } - - .send-button { - @include single-transition(all, .15s); - cursor: pointer; - display: none; - font-size: 18px; - height: 37px; - line-height: 37px; - padding-right: 4px; - text-align: center; - vertical-align: bottom; - width: 45px; - - &:active { - @include opacity(.75); - } - &.disabled { - color: grey; + .post-body__cell { + position: relative; + vertical-align: top; } - } - - .custom-textarea { - bottom: 0; - max-height: 162px !important; - padding-right: 35px; - padding-top: 8px; - resize: none; - } + .send-button { + @include single-transition(all, .15s); + cursor: pointer; + display: none; + font-size: 18px; + height: 37px; + line-height: 37px; + padding-right: 4px; + text-align: center; + vertical-align: bottom; + width: 45px; - #post_textbox-reference.custom-textarea-emoji { - bottom: 0; - max-height: 162px !important; - padding-right: 35px; - padding-top: 8px; - resize: none; + &:active { + @include opacity(.75); + } - } + &.disabled { + color: grey; + } + } + .btn-file { + @include single-transition(all, .15s); + font-size: 16px; + padding: 8px 9px 4px; + position: absolute; + right: 0; + top: 0; + z-index: 5; - #post_textbox.custom-textarea-emoji { - bottom: 0; - max-height: 162px !important; - padding-right: 60px; - padding-top: 8px; - resize: none; + svg { + height: 18px; + width: 18px; + } - } - .textarea-div { - line-height: 1.5; - max-height: 163px !important; - overflow: auto; - padding-right: 30px; - padding-top: 8px; - } + &:hover, + &:active { + box-shadow: none; + } - .btn-file { - @include single-transition(all, .15s); - font-size: 16px; - padding: 8px 9px 4px; - position: absolute; - right: 0; - top: 0; - z-index: 5; + &.btn-file__disabled { + @include opacity(.1); - svg { - height: 18px; - width: 18px; - } + &:hover, + &:active { + @include opacity(.1); + } + } - &:hover, - &:active { - box-shadow: none; - } + .icon--attachment { + @include opacity(.5); + display: inline-block; + position: relative; + vertical-align: top; - &.btn-file__disabled { - @include opacity(.1); + 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, - &:active { - @include opacity(.1); + &:hover { + @include opacity(.9); + } } } - .icon--attachment { + + .icon--emoji-picker { @include opacity(.5); - display: inline-block; + @include single-transition(all, .15s); + cursor: pointer; + font-size: 19px; + margin-left: 7px; 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 { + &:hover, + &:active { @include opacity(.9); + box-shadow: none; } - } - } + .icon--attachment { + @include opacity(.5); + display: inline-block; + position: relative; + vertical-align: top; - .icon--emoji-picker { - @include opacity(.5); - @include single-transition(all, .15s); - cursor: pointer; - font-size: 19px; - margin-left: 7px; - 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, - &:active { - @include opacity(.9); - box-shadow: none; + &:hover { + @include opacity(.9); + } + } } - .icon--attachment { + + .icon--emoji-picker { @include opacity(.5); - display: inline-block; + @include single-transition(all, .15s); + cursor: pointer; + font-size: 19px; + margin-left: 7px; 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 { + &:hover, + &:active { @include opacity(.9); + box-shadow: none; } } - } - - .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); + textarea { box-shadow: none; } } - textarea { - box-shadow: none; - } -} - -.post-create-footer { - @include clearfix; - font-size: 13px; - padding: 3px 0 0; - position: relative; + .post-create-footer { + @include clearfix; + font-size: 13px; + padding: 3px 0 0; + position: relative; - .post-error { - @include opacity(.55); - display: inline-block; - font-size: .85em; - font-weight: normal; - margin-bottom: 0; - position: absolute; - top: 4px; + .post-error { + @include opacity(.55); + display: inline-block; + font-size: .85em; + font-weight: normal; + margin-bottom: 0; + position: absolute; + top: 4px; + } } -} -.msg-typing { - @include opacity(.7); - display: block; - font-size: .95em; - height: 20px; - margin-bottom: 5px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} + .msg-typing { + @include opacity(.7); + display: block; + font-size: .95em; + height: 20px; + margin-bottom: 5px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } } .post-list__table { |