cybrespace/mastodon
4
3
Fork 3
Code Issues 7 Pull requests Releases Activity

Improve emoji picker look (#1493)

Browse source 
* Improve emoji picker look

* Add hover animation to emojis in picker
This commit is contained in:
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" /> <img draggable="false" className="emojione" alt="🙂" src="/emoji/1f602.svg" />
</DropdownTrigger> </DropdownTrigger>
<DropdownContent className='dropdown__left'> <DropdownContent className='dropdown__left light'>
<EmojiPicker emojione={settings} onChange={this.handleChange} search={true} /> <EmojiPicker emojione={settings} onChange={this.handleChange} search={true} />
</DropdownContent> </DropdownContent>
</Dropdown> </Dropdown>

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

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