diff options
author | VeraLyu <lvroyce0210@gmail.com> | 2017-04-26 00:44:02 +0800 |
---|---|---|
committer | Corey Hulen <corey@hulen.com> | 2017-04-25 09:44:02 -0700 |
commit | f9502ff14bbb31aa835540c14725bbebdf0c340d (patch) | |
tree | 46db93a54c68280f82df857618e7cdc81d24d1d9 /webapp | |
parent | dc9c73a46b5cf322f558a0f06bd8da76209321a6 (diff) | |
download | chat-f9502ff14bbb31aa835540c14725bbebdf0c340d.tar.gz chat-f9502ff14bbb31aa835540c14725bbebdf0c340d.tar.bz2 chat-f9502ff14bbb31aa835540c14725bbebdf0c340d.zip |
PLT-5897: Respect intrinsic ratio of img in emoji picker (#5987)
Changed style of img emoji picker, also fixed preview of emoji.
Diffstat (limited to 'webapp')
-rw-r--r-- | webapp/components/emoji_picker/components/emoji_picker_item.jsx | 10 | ||||
-rw-r--r-- | webapp/components/emoji_picker/components/emoji_picker_preview.jsx | 2 | ||||
-rw-r--r-- | webapp/sass/components/_emoticons.scss | 55 | ||||
-rw-r--r-- | webapp/utils/utils.jsx | 2 |
4 files changed, 46 insertions, 23 deletions
diff --git a/webapp/components/emoji_picker/components/emoji_picker_item.jsx b/webapp/components/emoji_picker/components/emoji_picker_item.jsx index c7981c952..dee08e638 100644 --- a/webapp/components/emoji_picker/components/emoji_picker_item.jsx +++ b/webapp/components/emoji_picker/components/emoji_picker_item.jsx @@ -44,12 +44,14 @@ export default class EmojiPickerItem extends React.Component { if (this.props.category === 'recent' || this.props.category === 'custom') { item = - (<span> + (<span + onMouseOver={this.handleMouseOver} + onMouseOut={this.handleMouseOut} + onClick={this.handleClick} + className='emoji-picker__item-wrapper' + > <img className='emoji-picker__item emoticon' - onMouseOver={this.handleMouseOver} - onMouseOut={this.handleMouseOut} - onClick={this.handleClick} src={EmojiStore.getEmojiImageUrl(this.props.emoji)} /> </span>); diff --git a/webapp/components/emoji_picker/components/emoji_picker_preview.jsx b/webapp/components/emoji_picker/components/emoji_picker_preview.jsx index 24acf9668..79ec91441 100644 --- a/webapp/components/emoji_picker/components/emoji_picker_preview.jsx +++ b/webapp/components/emoji_picker/components/emoji_picker_preview.jsx @@ -44,7 +44,7 @@ export default class EmojiPickerPreview extends React.Component { <div className='emoji-picker__preview-image-box'> {previewImage} </div> - <div className='emoji-picker__preview-detail-box'> + <div className='emoji-picker__preview-image-label-box'> <span className='emoji-picker__preview-name'>{name}</span> <span className='emoji-picker__preview-aliases' diff --git a/webapp/sass/components/_emoticons.scss b/webapp/sass/components/_emoticons.scss index df4bbc158..ebbd222d9 100644 --- a/webapp/sass/components/_emoticons.scss +++ b/webapp/sass/components/_emoticons.scss @@ -230,15 +230,26 @@ width: 21px; padding: 0px; border: 0px; + text-align: center; + border-radius: 6px; + overflow: hidden; + cursor: pointer; } } .emoji-picker__item { - border-radius: 6px; - cursor: pointer; 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; + } } .emojisprite-wrapper { @@ -247,7 +258,11 @@ .emoji-picker__preview { border-top: 1px solid; - display: table-cell; + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: stretch; + vertical-align: middle; flex-grow: 0; flex-shrink: 0; height: 45px; @@ -264,9 +279,29 @@ vertical-align: middle; } + .emoji-picker__preview-image-label-box { + margin-left: 3px; + .emoji-picker__preview-name { + font-size: 13px; + font-weight: bold; + } + + .emoji-picker__preview-aliases { + display: block; + font-size: 12px; + + font-weight: bold; + } + } .emoji-picker__preview-image-box { + display: flex; + align-items: center; + justify-content: center; height: 36px; + max-height: 36px; width: 42px; + max-width: 42px; + text-align: center; .sprite-preview { border: none; @@ -281,20 +316,6 @@ .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; - } } diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx index 9a4f5c21f..a252ea646 100644 --- a/webapp/utils/utils.jsx +++ b/webapp/utils/utils.jsx @@ -682,7 +682,7 @@ export function applyTheme(theme) { changeCss('.app__body .emoji-picker__preview', 'border-top-color:' + changeOpacity(theme.centerChannelColor, 0.2)); changeCss('.app__body .emoji-picker__category, .app__body .emoji-picker__category:focus, .app__body .emoji-picker__category:hover', 'color:' + changeOpacity(theme.centerChannelColor, 0.3)); changeCss('.app__body .emoji-picker__category--selected, .app__body .emoji-picker__category--selected:focus, .app__body .emoji-picker__category--selected:hover', 'color:' + theme.centerChannelColor); - changeCss('.app__body .emoji-picker__item:hover', 'background-color:' + changeOpacity(theme.centerChannelColor, 0.8)); + changeCss('.app__body .emoji-picker__item-wrapper:hover', 'background-color:' + changeOpacity(theme.centerChannelColor, 0.8)); changeCss('.app__body .emojisprite:hover', 'background-color:' + changeOpacity(theme.centerChannelColor, 0.8)); changeCss('.app__body .icon__postcontent_picker:hover', 'color:' + changeOpacity(theme.centerChannelColor, 0.8)); } |