diff options
author | Asaad Mahmood <asaadmahmood@users.noreply.github.com> | 2017-08-25 19:29:31 +0500 |
---|---|---|
committer | Harrison Healey <harrisonmhealey@gmail.com> | 2017-08-25 10:29:31 -0400 |
commit | 1a71589dce9781be8c9eca17a5d96f94b57d0679 (patch) | |
tree | 0c962b9c0a7c0aa147fe3856d33ea64683708d92 /webapp/sass | |
parent | 086365fb84e1d8096993756b79558bc204b1df2e (diff) | |
download | chat-1a71589dce9781be8c9eca17a5d96f94b57d0679.tar.gz chat-1a71589dce9781be8c9eca17a5d96f94b57d0679.tar.bz2 chat-1a71589dce9781be8c9eca17a5d96f94b57d0679.zip |
PLT-7224 - Updating post textbox UI (#7153)
* PLT-7224 - Updating post textbox UI
* Updating post textbox spacing
* Updating emoji icon
Diffstat (limited to 'webapp/sass')
-rw-r--r-- | webapp/sass/layout/_post-right.scss | 5 | ||||
-rw-r--r-- | webapp/sass/layout/_post.scss | 194 | ||||
-rw-r--r-- | webapp/sass/layout/_sidebar-right.scss | 8 | ||||
-rw-r--r-- | webapp/sass/responsive/_mobile.scss | 25 | ||||
-rw-r--r-- | webapp/sass/responsive/_tablet.scss | 80 |
5 files changed, 132 insertions, 180 deletions
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; |