Unfloyded/Legamunt
0
0
Fork 0
Code Activity

Add emoji autosuggest (#5053)

Browse source 
* Add emoji autosuggest

Some credit goes to glitch-soc/mastodon#149

* Remove server-side shortcode->unicode conversion

* Insert shortcode when suggestion is custom emoji

* Remove remnant of server-side emojis

* Update style of autosuggestions

* Fix wrong emoji filenames generated in autosuggest item

* Do not lazy load emoji picker, as that no longer works

* Fix custom emoji autosuggest

* Fix multiple "Custom" categories getting added to emoji index, only add once
This commit is contained in:
Eugen Rochko 2017-09-23 14:47:32 +02:00 • committed by GitHub
parent 66126f3021
commit 1e02ba111a
19 changed files with 133 additions and 209 deletions
Download patch file Download diff file Expand all files Collapse all files

45
app/javascript/styles/components.scss
View file

@ -1880,15 +1880,18 @@
}
.autosuggest-textarea__suggestions {
box-sizing: border-box;
display: none;
position: absolute;
top: 100%;
width: 100%;
z-index: 99;
box-shadow: 0 0 15px rgba($base-shadow-color, 0.4);
box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4);
background: $ui-secondary-color;
border-radius: 0 0 4px 4px;
color: $ui-base-color;
font-size: 14px;
padding: 6px;
&.autosuggest-textarea__suggestions--visible {
display: block;
@ -1898,34 +1901,36 @@
.autosuggest-textarea__suggestions__item {
padding: 10px;
cursor: pointer;
border-radius: 4px;
&:hover {
&:hover,
&:focus,
&:active,
&.selected {
background: darken($ui-secondary-color, 10%);
}
&.selected {
background: $ui-highlight-color;
color: $base-border-color;
}
}
.autosuggest-account {
overflow: hidden;
.autosuggest-account,
.autosuggest-emoji {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
line-height: 18px;
font-size: 14px;
}
.autosuggest-account-icon {
float: left;
margin-right: 5px;
.autosuggest-account-icon,
.autosuggest-emoji img {
display: block;
margin-right: 8px;
width: 16px;
height: 16px;
}
.autosuggest-status {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
strong {
font-weight: 500;
}
.autosuggest-account .display-name__account {
color: lighten($ui-base-color, 36%);
}
.character-counter__wrapper {