IntenseWebs/mattermost
3
0
Fork 0
mirror of https://github.com/mattermost/mattermost.git synced 2025-02-25 18:55:24 -06:00
Code Issues Packages Projects Releases Wiki Activity

PLT-5897: Respect intrinsic ratio of img in emoji picker (#5987)

Browse Source 
Changed style of img emoji picker, also fixed preview of emoji.
This commit is contained in:
VeraLyu
2017-04-26 00:44:02 +08:00
committed by Corey Hulen
parent dc9c73a46b
commit f9502ff14b
4 changed files with 46 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
webapp/components/emoji_picker/components/emoji_picker_item.jsx
View File

@@ -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>);

2
webapp/components/emoji_picker/components/emoji_picker_preview.jsx
View File

@@ -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'

55
webapp/sass/components/_emoticons.scss
View File

@@ -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;
}
}

2
webapp/utils/utils.jsx
View File

@@ -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));
}