Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-16 21:24:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

Remove space between emojis in picker

Browse Source 
Signed-off-by: Tulir Asokan <tulir@maunium.net>
This commit is contained in:
Tulir Asokan 2019-10-20 12:31:28 +03:00
parent 10732e8e73
commit 438ad54701
2 changed files with 15 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
res/css/views/emojipicker/_EmojiPicker.scss
View File

@ -145,17 +145,22 @@ limitations under the License.
margin: 0; margin: 0;
} }
.mx_EmojiPicker_item { .mx_EmojiPicker_item_wrapper {
display: inline-block;
list-style: none; list-style: none;
width: 38px;
cursor: pointer;
}
.mx_EmojiPicker_item {
display: inline-block; display: inline-block;
font-size: 20px; font-size: 20px;
margin: 1px; padding: 5px;
padding: 4px 0; width: 100%;
width: 36px; height: 100%;
box-sizing: border-box; box-sizing: border-box;
text-align: center; text-align: center;
border-radius: 4px; border-radius: 4px;
cursor: pointer;
&:hover { &:hover {
background-color: $focus-bg-color; background-color: $focus-bg-color;
@ -165,7 +170,7 @@ limitations under the License.
.mx_EmojiPicker_item_selected { .mx_EmojiPicker_item_selected {
color: rgba(0, 0, 0, .5); color: rgba(0, 0, 0, .5);
border: 1px solid $input-valid-border-color; border: 1px solid $input-valid-border-color;
margin: 0; padding: 4px;
} }
.mx_EmojiPicker_category_label, .mx_EmojiPicker_preview_name { .mx_EmojiPicker_category_label, .mx_EmojiPicker_preview_name {

4
src/components/views/emojipicker/Emoji.js
View File

@ -33,8 +33,10 @@ class Emoji extends React.PureComponent {
<li onClick={() => onClick(emoji)} <li onClick={() => onClick(emoji)}
onMouseEnter={() => onMouseEnter(emoji)} onMouseEnter={() => onMouseEnter(emoji)}
onMouseLeave={() => onMouseLeave(emoji)} onMouseLeave={() => onMouseLeave(emoji)}
className={`mx_EmojiPicker_item ${isSelected ? 'mx_EmojiPicker_item_selected' : ''}`}> className="mx_EmojiPicker_item_wrapper">
<div className={`mx_EmojiPicker_item ${isSelected ? 'mx_EmojiPicker_item_selected' : ''}`}>
{emoji.unicode} {emoji.unicode}
</div>
</li> </li>
); );
} }