treehouse
/
mastodon
22
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

Improve emoji picker look (#1493) 

* Improve emoji picker look

* Add hover animation to emojis in picker
remotes/1727458204337373841/tmp_refs/heads/signup-info-prompt
Eugen 2017-04-11 23:23:34 +02:00 committed by GitHub
parent b22b2cbfac
commit 8ead070b94
2 changed files with 58 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/javascripts/components/features/compose/components/emoji_picker_dropdown.jsx
View File

@ -46,7 +46,7 @@ const EmojiPickerDropdown = React.createClass({
<img draggable="false" className="emojione" alt="🙂" src="/emoji/1f602.svg" />
</DropdownTrigger>
<DropdownContent className='dropdown__left'>
<DropdownContent className='dropdown__left light'>
<EmojiPicker emojione={settings} onChange={this.handleChange} search={true} />
</DropdownContent>
</Dropdown>

82
app/assets/stylesheets/components.scss
View File

@ -704,6 +704,12 @@ a.status__content__spoiler-link {
left: 8px;
}
&.light {
&:before {
border-color: transparent transparent $color5 transparent;
}
}
& > ul {
list-style: none;
background: $color2;
@ -721,7 +727,7 @@ a.status__content__spoiler-link {
}
& > .emoji-dialog {
left: -249px;
left: -210px;
}
}
@ -1468,14 +1474,14 @@ button.icon-button.active i.fa-retweet {
}
.emoji-dialog {
width: 280px;
height: 220px;
background: darken($color3, 10%);
width: 245px;
height: 270px;
background: $color5;
box-sizing: border-box;
border-radius: 2px;
border-radius: 4px;
overflow: hidden;
position: relative;
box-shadow: 0 0 15px rgba($color8, 0.4);
box-shadow: 0 0 8px rgba($color8, 0.2);
.emojione {
margin: 0;
@ -1485,7 +1491,6 @@ button.icon-button.active i.fa-retweet {
.emoji-dialog-header {
padding: 0 10px;
background-color: $color3;
ul {
padding: 0;
@ -1496,18 +1501,29 @@ button.icon-button.active i.fa-retweet {
li {
display: inline-block;
box-sizing: border-box;
height: 42px;
padding: 9px 5px;
padding: 10px 5px;
cursor: pointer;
border-bottom: 2px solid transparent;
.emoji {
width: 18px;
height: 18px;
}
img, svg {
width: 22px;
height: 22px;
width: 18px;
height: 18px;
filter: grayscale(100%);
}
&:hover {
img, svg {
filter: grayscale(0);
}
}
&.active {
background: lighten($color3, 6%);
border-bottom-color: $color4;
img, svg {
filter: grayscale(0);
@ -1531,7 +1547,7 @@ button.icon-button.active i.fa-retweet {
.emoji-category-header {
box-sizing: border-box;
overflow-y: hidden;
padding: 8px 16px 0;
padding: 10px 8px 10px 16px;
display: table;
> * {
@ -1541,10 +1557,10 @@ button.icon-button.active i.fa-retweet {
}
.emoji-category-title {
font-size: 14px;
font-family: sans-serif;
font-weight: normal;
color: $color1;
font-size: 12px;
text-transform: uppercase;
font-weight: 500;
color: darken($color2, 18%);
cursor: default;
}
@ -1584,7 +1600,7 @@ button.icon-button.active i.fa-retweet {
width: 7px;
height: 7px;
border-radius: 10px;
border: 2px solid $color1;
border: 2px solid $color5;
top: 2px;
left: 2px;
}
@ -1592,14 +1608,20 @@ button.icon-button.active i.fa-retweet {
}
.emoji-search-wrapper {
padding: 6px 16px;
padding: 10px;
border-bottom: 1px solid lighten($color2, 4%);
}
.emoji-search {
font-size: 12px;
padding: 6px 4px;
font-size: 14px;
font-weight: 400;
padding: 7px 9px;
font-family: inherit;
display: block;
width: 100%;
border: 1px solid #ddd;
background: rgba($color2, 0.3);
color: darken($color2, 18%);
border: 1px solid $color2;
border-radius: 4px;
}
@ -1612,11 +1634,21 @@ button.icon-button.active i.fa-retweet {
}
.emoji-search-wrapper + .emoji-categories-wrapper {
top: 83px;
top: 93px;
}
.emoji-row .emoji:hover {
background: lighten($color2, 3%);
.emoji-row .emoji {
img, svg {
transition: transform 60ms ease-in-out;
}
&:hover {
background: lighten($color2, 3%);
img, svg {
transform: translateZ(0) scale(1.2);
}
}
}
.emoji {