diff options
author | bonespiked <dngreene@gmail.com> | 2017-03-24 09:09:51 -0400 |
---|---|---|
committer | Jason Blais <jason@spinpunch.com> | 2017-03-24 09:09:51 -0400 |
commit | 28ad645153b206ba84ddc4935280eaed94bb0138 (patch) | |
tree | a5ddcc228b5cfdbd479078873a1bfede9f11cb1f /webapp/sass/layout/_post.scss | |
parent | d0af931e6e57b78432d5527b6e7b0be36c538144 (diff) | |
download | chat-28ad645153b206ba84ddc4935280eaed94bb0138.tar.gz chat-28ad645153b206ba84ddc4935280eaed94bb0138.tar.bz2 chat-28ad645153b206ba84ddc4935280eaed94bb0138.zip |
Ticket 4665 - Emoji Picker (#5157)
* #4665 Added EmojiPicker
Work primarily by @broernr-de and @harrison on pre-release.mattermost.com
* Final fixes to handle custom emojis from internal review and single merge error
* ESLint fixes
* CSS changes and other code to support emoji picker in reply window
* Fix for file upload and emoji picker icon positions on post and comment.
RHS emoji picker appearing see-through at this time.
* Fix for two ESLint issues.
* covered most of feedback:
RHS emoji picker looks correct color-wise
RHS emoji picker dynamically positions against height of thread size (post + reply messages)
escape closes emoji window
search box focused on open
ESLint fixes against other files
oversized emoji preview fixes
* Adding in 'outside click' eventing to dismiss the emoji window
* Changing some formatting to fix mismatch between my local eslant rules and jenkins.
* adding alternative import method due to downstream testing errors
* yet another attempt to retain functionality and pass tests - skipping import of browser store
* fix for feedback items 5 and 7:
* move search to float on top with stylistic changes
* whitespace in the header (+1 squashed commit)
Squashed commits:
[6a26d32] changes that address items
1, 2, 6, 8, and 9 of latest feedback
* Fix for attachment preview location on mobile
* Fix for latest rounds of feedback
* fixing eslint issue
* making emojipicker sprite based, fixing alignments
* Fix for emoji quality, fixing some behavior (hover background and cursor settings)
undoing config changes
* Preview feature for emojis
* Adjustments to config file, and changing layout/design of attachment and emoji icon.
* manual revert from master branch for config.json
* reverting paperclip and fixing alignments. Additionally fixing inadvertent display of picker on mobile.
* CSS changes to try to fix the hover behavior - currently working for emoji picker (when enabled), but hover for attachment isn't working
* Made suggested changes by jwilander except for jQuery removal
* Adding hover for both icons
* removal of some usages of jQuery
* Fix for two layout issues on IE11/Edge
* UI improvements for emoji picker
* Fix for many minor display issues
* fix for additional appearance items
* fix to two minor UI items
* A little extra padding for IE11
* fix for IE11 scroll issue, and removing align attribute on img tag which was throwing js error
* fixes some display issues on firefox
* fix for uneven sides of emojis
* fix for eslint issues that I didn't introduce
* fix for missing bottom edge of RHS emojipicker. also fixing text overlapping icons on text area (including RHS)
* Update "emoji selector" to "emoji picker"
* changes for code review
- removal of ..getDOMNode
- use sprite imagery for emoji preview
- remove lastBlurAt from state as it wasn't used
* fixes for:
- fake custom emoji preview in picker
- RHS scrollbar on preview
* fix for minor alignment of preview emoji
Diffstat (limited to 'webapp/sass/layout/_post.scss')
-rw-r--r-- | webapp/sass/layout/_post.scss | 97 |
1 files changed, 92 insertions, 5 deletions
diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss index 1e1dd4b08..892eea860 100644 --- a/webapp/sass/layout/_post.scss +++ b/webapp/sass/layout/_post.scss @@ -23,7 +23,7 @@ } .textarea-wrapper { - min-height: 36px; + min-height: 37px; position: relative; .textbox-preview-area { @@ -371,7 +371,15 @@ 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; + + } .center { max-width: 1028px; } @@ -386,6 +394,25 @@ -ms-overflow-style: auto; overflow: auto; padding-right: 43px; + resize: none; + } + + #post_textbox-reference.custom-textarea-emoji { + padding-right: 43px; + resize: none; + } + + + #reply_textbox.custom-textarea-emoji { + padding-right: 60px; + resize: none; + + } + + #post_textbox.custom-textarea-emoji { + padding-right: 60px; + resize: none; + } } } @@ -425,8 +452,28 @@ max-height: 162px !important; padding-right: 35px; padding-top: 8px; + resize: none; + + } + + #post_textbox-reference.custom-textarea-emoji { + bottom: 0; + max-height: 162px !important; + padding-right: 35px; + padding-top: 8px; + resize: none; + } + + #post_textbox.custom-textarea-emoji { + bottom: 0; + max-height: 162px !important; + padding-right: 60px; + padding-top: 8px; + resize: none; + + } .textarea-div { line-height: 1.5; max-height: 163px !important; @@ -436,13 +483,12 @@ } .btn-file { - @include opacity(.5); @include single-transition(all, .15s); font-size: 16px; - padding: 7px 9px 6px; + padding: 8px 9px 4px; position: absolute; right: 0; - top: 1px; + top: 0; z-index: 5; svg { @@ -452,7 +498,6 @@ &:hover, &:active { - @include opacity(.9); box-shadow: none; } @@ -464,6 +509,48 @@ @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 { + @include opacity(.9); + box-shadow: none; + } } textarea { |