Foundry376/Mailspring
1
1
Fork 0
mirror of https://github.com/Foundry376/Mailspring.git synced 2025-02-20 22:23:53 +08:00
Code Issues Projects Releases Packages Wiki Activity

🎨(composer-emojis): Fix styles in emoji picker

Browse source 
Summary: Adjust sizing, padding, etc., to fit better with overall app design.

Test Plan: Tested locally.

Differential Revision: https://phab.nylas.com/D2627
This commit is contained in:
Jackie Luo 2016-02-24 10:07:27 -08:00
parent 48131468f0
commit f04449d67a
2 changed files with 17 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
internal_packages/composer-emojis/lib/emojis-composer-extension.jsx
View file

@ -171,15 +171,15 @@ class EmojisComposerExtension extends ContenteditableExtension {
}
}
const WIDTH_PER_CHAR = 8;
return (maxLength + 10) * WIDTH_PER_CHAR;
return (maxLength + 6) * WIDTH_PER_CHAR;
}
static _emojiPickerHeight(emojiOptions) {
const HEIGHT_PER_EMOJI = 28;
const HEIGHT_PER_EMOJI = 25;
if (emojiOptions.length < 5) {
return emojiOptions.length * HEIGHT_PER_EMOJI + 20;
}
return 5 * HEIGHT_PER_EMOJI + 20;
return 5 * HEIGHT_PER_EMOJI + 23;
}
static _getTextUntilSpace(node, offset) {

26
internal_packages/composer-emojis/stylesheets/composer-emojis.less
View file

@ -1,17 +1,19 @@
@import "ui-variables";
.emoji-picker {
max-height: 155px !important;
padding: 10px 10px 10px 10px !important;
max-height: 130px !important;
margin: 10px;
overflow: auto;
.btn.btn-icon.emoji-option {
background-color: @btn-emphasis-bg-color;
color: #FFFFFF;
border-radius: 15px;
}
.btn.btn-icon:hover {
background-color: @btn-emphasis-bg-color;
color: #FFFFFF;
border-radius: 15px;
.btn.btn-icon {
font-size: 14px !important;
padding: 0em 0.5em;
&:first-child {
padding-left: 0.5em !important;
}
&.emoji-option, &:hover {
background-color: @btn-emphasis-bg-color;
color: #FFFFFF;
border-radius: 5px;
}
}
}