From 8ead070b940ce8d4bf2c93af99b3487129d578e2 Mon Sep 17 00:00:00 2001 From: Eugen Date: Tue, 11 Apr 2017 23:23:34 +0200 Subject: [PATCH] Improve emoji picker look (#1493) * Improve emoji picker look * Add hover animation to emojis in picker --- .../components/emoji_picker_dropdown.jsx | 2 +- app/assets/stylesheets/components.scss | 82 +++++++++++++------ 2 files changed, 58 insertions(+), 26 deletions(-) diff --git a/app/assets/javascripts/components/features/compose/components/emoji_picker_dropdown.jsx b/app/assets/javascripts/components/features/compose/components/emoji_picker_dropdown.jsx index fa577ce262..36e97df413 100644 --- a/app/assets/javascripts/components/features/compose/components/emoji_picker_dropdown.jsx +++ b/app/assets/javascripts/components/features/compose/components/emoji_picker_dropdown.jsx @@ -46,7 +46,7 @@ const EmojiPickerDropdown = React.createClass({ 🙂 - + diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss index d7473eddb8..8e4a667e35 100644 --- a/app/assets/stylesheets/components.scss +++ b/app/assets/stylesheets/components.scss @@ -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 {