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/components/_emoticons.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/components/_emoticons.scss')
-rw-r--r-- | webapp/sass/components/_emoticons.scss | 208 |
1 files changed, 205 insertions, 3 deletions
diff --git a/webapp/sass/components/_emoticons.scss b/webapp/sass/components/_emoticons.scss index 43d2e8ece..7cf7034d2 100644 --- a/webapp/sass/components/_emoticons.scss +++ b/webapp/sass/components/_emoticons.scss @@ -1,15 +1,15 @@ -@charset 'UTF-8'; +@charset "UTF-8"; .emoticon { background-position: 50% 50%; background-repeat: no-repeat; background-size: contain; display: inline-block; - height: 20px; + height: 21px; min-height: 1em; min-width: 1em; vertical-align: middle; - width: 20px; + width: 21px; } .emoticon-suggestion { @@ -36,3 +36,205 @@ text-align: center; vertical-align: middle; } + +.emoji-picker__popover { + padding: 0px; + + .popover-content { + padding: 0px; + } +} + + + +.emoji-picker-bottom { + display: flex; + flex-direction: column; + @include user-select(none); + position: absolute; + z-index: 40; + right: 0%; + width: 278px; + border: 1px solid; + min-height: 298px; + border-radius: 3px; + + .emoji-picker__search-container { + position: relative; + + .emoji-picker__search-icon { + padding-left: 6px; + padding-top: 6px; + position: absolute; + font-size: 13px; + } + + + } +} + +.emoji-picker__search { + border-width: 1px 0px 1px 0px; + border-style: solid; + padding: 2px 0 2px 25px; + width: 100%; + height: 25px; + font-size: 12px; + + &:focus{ + outline: none; + } +} + +.emoji-picker { + display: flex; + flex-direction: column; + @include user-select(none); + position: absolute; + top: -361px; + right: 0px; + width: 278px; + border: 1px solid; + border-radius: 3px; + + .emoji-picker__search-container { + position: relative; + + .emoji-picker__search-icon { + padding-left: 6px; + padding-top: 6px; + position: absolute; + font-size: 13px; + } + + + } +} + +.emoji-picker__categories { + flex-grow: 0; + flex-shrink: 0; + + .emoji-picker__category { + color: #333333; + display: inline-block; + font-size: 16px; + margin: 3px 6px; + text-align: center; + width: 15px; + + &--selected, + &:hover { + color: #666666; + } + } +} + +.emoji-picker__items { + max-height: 262px; + overflow-x: hidden; + overflow-y: auto; + padding: 0px 8px 8px 8px; + position: relative; + + + + .emoji-picker__category-header { + font-size: 12px; + font-weight: bold; + margin-bottom: 6px; + margin-top: 3px; + padding-top: 3px; + // padding-bottom: 10px; + } + + .emoji-picker__preview_sprite { + isplay: inline-block; + height: 45px; + margin: 3px; + vertical-align: top; + + padding: 3px; + } + + .emoji-picker-items__container { + > div { + display: inline-block; + height: 21px; + margin: 3px; + vertical-align: top; + width: 21px; + padding: 3px; + } + > span { + display: inline-block; + height: 21px; + margin: 3px; + vertical-align: top; + width: 21px; + padding: 0px; + border: 0px; + } + } + + .emoji-picker__item { + border-radius: 6px; + cursor: pointer; + font-size: 18px; + margin: 3px; + } +} +.emojisprite-wrapper { + cursor: pointer; +} + +.emoji-picker__preview { + border-top: 1px solid; + display: table-cell; + vertical-align: middle; + flex-grow: 0; + flex-shrink: 0; + height:45px; + width: 278px; + padding: 3px 10px; + + &.emoji-picker__preview-placeholder { + padding: 12px; + } + + .emoji-picker__preview-image-box { + display: table-cell; + vertical-align: middle; + height: 36px; + width: 42px; + + .sprite-preview { + height: 36px; + width: 36px; + vertical-align: middle; + padding: 0px; + border: 0px; + display: inline-block; + } + } + + .emoji-picker__preview-image { + max-height: 36px; + max-width: 42px; + padding: 0 10px 0 0; + + } + + .emoji-picker__preview-name { + + font-size: 13px; + font-weight: bold; + } + + .emoji-picker__preview-aliases { + display: block; + font-size: 12px; + + font-weight: bold; + } +} |