diff options
author | Harrison Healey <harrisonmhealey@gmail.com> | 2017-06-13 14:35:45 -0400 |
---|---|---|
committer | Christopher Speller <crspeller@gmail.com> | 2017-06-13 11:35:45 -0700 |
commit | 40efd8367a85e3333e9b7cc45c390259d412088c (patch) | |
tree | f40d4fb6f5e7b1bdb8cefa95e25a626837a07a9c /webapp/sass/components/_emoticons.scss | |
parent | 56883d6f95b268477a1f0ec956bc1891ce30c2a1 (diff) | |
download | chat-40efd8367a85e3333e9b7cc45c390259d412088c.tar.gz chat-40efd8367a85e3333e9b7cc45c390259d412088c.tar.bz2 chat-40efd8367a85e3333e9b7cc45c390259d412088c.zip |
PLT-6127/PLT-6135/PLT-6137 Added EmojiPickerOverlay component to better position emoji picker (#6352)
* Cleaned up emoji picker CSS
* Fixed border of emoji picker when reacting to comments in the RHS
* PLT-6135 Made EmojiPicker automatically position itself above/below the [...] menu
* PLT-6135 Changed post textbox emoji picker to use a RootCloseWrapper
* PLT-6135 Changed comment textbox emoji picker to use a RootCloseWrapper
* PLT-6135 Changed RHS post components to use EmojiPickerOverlay
* Removed react-outside-event package
* Fixed merge conflict
* Fixed emoji picker position on posts in RHS
* Removed unused CSS classes
* Fixed not being able to react to posts with emoji picker
Diffstat (limited to 'webapp/sass/components/_emoticons.scss')
-rw-r--r-- | webapp/sass/components/_emoticons.scss | 168 |
1 files changed, 38 insertions, 130 deletions
diff --git a/webapp/sass/components/_emoticons.scss b/webapp/sass/components/_emoticons.scss index 210c8620b..24d53eef3 100644 --- a/webapp/sass/components/_emoticons.scss +++ b/webapp/sass/components/_emoticons.scss @@ -8,7 +8,6 @@ top: 2px; vertical-align: middle; visibility: hidden; - } .emoticon { @@ -48,100 +47,6 @@ vertical-align: middle; } -.emoji-picker__popover { - padding: 0px; - - .popover-content { - padding: 0px; - } -} - -.emoji-picker-react-rhs-comment { - position: absolute; - width: 278px; - border: 1px solid; - min-height: 298px; - border-radius: 3px; - top: 21px; - right:59px; - z-index: 100; - .emoji-picker__search-container { - position: relative; - - .emoji-picker__search-icon { - padding-left: 6px; - padding-top: 6px; - position: absolute; - font-size: 13px; - } - - - } -} - -.emoji-picker-react { - position: absolute; - width: 278px; - border: 1px solid; - min-height: 298px; - border-radius: 3px; - top: 42px; - right:59px; - z-index: 100; - .emoji-picker__search-container { - position: relative; - - .emoji-picker__search-icon { - padding-left: 6px; - padding-top: 6px; - position: absolute; - font-size: 13px; - } - - - } -} - - -.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 { @include user-select(none); border-radius: 3px; @@ -149,23 +54,9 @@ display: flex; flex-direction: column; position: absolute; - right: 0; - top: -361px; + height: 362px; width: 278px; z-index: 8; - - .emoji-picker__search-container { - position: relative; - - .emoji-picker__search-icon { - padding-left: 6px; - padding-top: 6px; - position: absolute; - font-size: 13px; - } - - - } } .emoji-picker__categories { @@ -187,6 +78,30 @@ } } +.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__items { max-height: 262px; overflow-x: hidden; @@ -194,15 +109,12 @@ 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 { @@ -238,25 +150,21 @@ } } - .emoji-picker__item { - font-size: 18px; - margin: 3px; - } - .emoticon { - max-height: 21px; - max-width: 21px; - min-height: 0; - min-width: 0; - width: auto; - height: auto; - margin: 0 auto; + .emoji-picker__item-wrapper { + .emoji-picker__item { + font-size: 18px; + margin: 3px; + max-height: 21px; + max-width: 21px; + min-height: 0; + min-width: 0; + width: auto; + height: auto; + margin: 0 auto; + } } } -.emojisprite-wrapper { - cursor: pointer; -} - .emoji-picker__preview { border-top: 1px solid; display: flex; @@ -294,6 +202,7 @@ font-weight: bold; } } + .emoji-picker__preview-image-box { display: flex; align-items: center; @@ -318,5 +227,4 @@ max-height: 36px; max-width: 42px; } - } |