fb931b4733
* Add emoji button and popup panel This integrates a simple third party emoji panel with a few css overrides to correct some relative paths and colors. The trickiest thing about this is ensuring we don't break the layout, which is acheived through precise control over the panel's height, and prodigious calls to updateMessageFieldSize. // FREEBIE * Don't close emoji panel on click, do close on send To better facilitate multiple emoji entry. // FREEBIE * Make panel emojis bigger and higher resolution // FREEBIE * Move paperclip button to the right of the microphone This makes our bottom-bar button arrangement more comfortable and consistent with Android. // FREEBIE * Move emoji picker padding to inner container * Insert emojis at cursor position Don't just append to the end like a n00b! Also handle selected text correctly. https://stackoverflow.com/questions/11076975 // FREEBIE * A few visual tweaks to reduce visual complexity of emoji panel - No gray buffer on the right side of the emoji panel - No gray buffer between message compose text box and emoji window - The scroll bar for the emojis is the same as our normal scrollbars
125 lines
2.2 KiB
SCSS
125 lines
2.2 KiB
SCSS
span.emoji {
|
|
display: -moz-inline-box;
|
|
-moz-box-orient: vertical;
|
|
display: inline-block;
|
|
vertical-align: baseline;
|
|
*vertical-align: auto;
|
|
*zoom: 1;
|
|
*display: inline;
|
|
width: 1em;
|
|
height: 1em;
|
|
background-size: 1em;
|
|
background-repeat: no-repeat;
|
|
text-indent: -9999px;
|
|
background-position: 50%, 50%;
|
|
background-size: contain;
|
|
}
|
|
|
|
span.emoji-sizer {
|
|
line-height: 0.81em;
|
|
font-size: 1em;
|
|
margin: -2px 0;
|
|
}
|
|
|
|
span.emoji-outer {
|
|
display: -moz-inline-box;
|
|
display: inline-block;
|
|
*display: inline;
|
|
height: 1em;
|
|
width: 1em;
|
|
}
|
|
|
|
span.emoji-inner {
|
|
display: -moz-inline-box;
|
|
display: inline-block;
|
|
text-indent: -9999px;
|
|
width: 100%;
|
|
height: 100%;
|
|
vertical-align: baseline;
|
|
*vertical-align: auto;
|
|
*zoom: 1;
|
|
}
|
|
|
|
img.emoji {
|
|
width: 1em;
|
|
height: 1em;
|
|
}
|
|
|
|
img.emoji.small {
|
|
width: 1.25em;
|
|
height: 1.25em;
|
|
}
|
|
img.emoji.medium {
|
|
width: 1.5em;
|
|
height: 1.5em;
|
|
}
|
|
img.emoji.large {
|
|
width: 1.75em;
|
|
height: 1.75em;
|
|
}
|
|
img.emoji.jumbo {
|
|
width: 2em;
|
|
height: 2em;
|
|
}
|
|
|
|
// we need these, or we'll make conversation items too big in the left-nav
|
|
.conversations img.emoji.small {
|
|
width: 1em;
|
|
height: 1em;
|
|
}
|
|
.conversations img.emoji.medium {
|
|
width: 1em;
|
|
height: 1em;
|
|
}
|
|
.conversations img.emoji.large {
|
|
width: 1em;
|
|
height: 1em;
|
|
}
|
|
.conversations img.emoji.jumbo {
|
|
width: 1em;
|
|
height: 1em;
|
|
}
|
|
|
|
button.emoji {
|
|
width: 36px;
|
|
height: 36px;
|
|
padding: 0;
|
|
opacity: 0.5;
|
|
border: none;
|
|
background: transparent;
|
|
|
|
&:before {
|
|
content: '';
|
|
display: inline-block;
|
|
width: $button-height;
|
|
height: $button-height;
|
|
@include color-svg('../images/smile.svg', $grey);
|
|
}
|
|
|
|
&:focus, &:hover {
|
|
opacity: 1.0;
|
|
}
|
|
}
|
|
|
|
// Import emoji panel css and override paths
|
|
@import '../node_modules/emoji-panel/lib/emoji-panel-apple-32.css';
|
|
@font-face {
|
|
font-family: 'apple-category';
|
|
src: url(../node_modules/emoji-panel/lib/asset/apple.ttf) format("truetype");
|
|
font-weight: normal;
|
|
font-style: normal; }
|
|
|
|
.emoji-panel-container {
|
|
height: 0px;
|
|
.ep-e {
|
|
background-image: url('../node_modules/emoji-datasource/sheet_apple_64.png');
|
|
background-size: 1312px;
|
|
}
|
|
.ep-slide {
|
|
background-color: $blue;
|
|
}
|
|
.ep ::-webkit-scrollbar {
|
|
// matches what is set in _global.scss; needs !important to override emoji panel CSS
|
|
width: 10px !important;
|
|
}
|
|
}
|