diff --git a/app/assets/javascripts/awards_handler.js b/app/assets/javascripts/awards_handler.js
index 4f63c7988f5..67106e85a37 100644
--- a/app/assets/javascripts/awards_handler.js
+++ b/app/assets/javascripts/awards_handler.js
@@ -263,7 +263,8 @@ AwardsHandler.prototype.addAward = function addAward(
this.addAwardToEmojiBar(votesBlock, normalizedEmoji, checkMutuality);
return typeof callback === 'function' ? callback() : undefined;
});
- return $('.emoji-menu').removeClass('is-visible');
+ $('.emoji-menu').removeClass('is-visible');
+ $('.js-add-award.is-active').removeClass('is-active');
};
AwardsHandler.prototype.addAwardToEmojiBar = function addAwardToEmojiBar(
diff --git a/app/assets/stylesheets/framework/awards.scss b/app/assets/stylesheets/framework/awards.scss
index 1ae144fb471..b849cc2d853 100644
--- a/app/assets/stylesheets/framework/awards.scss
+++ b/app/assets/stylesheets/framework/awards.scss
@@ -91,7 +91,7 @@
.award-menu-holder {
display: inline-block;
- position: relative;
+ position: absolute;
.tooltip {
white-space: nowrap;
@@ -117,11 +117,41 @@
&.active,
&:hover,
- &:active {
+ &:active,
+ &.is-active {
background-color: $row-hover;
border-color: $row-hover-border;
box-shadow: none;
outline: 0;
+
+ .award-control-icon svg {
+ background: $award-emoji-positive-add-bg;
+
+ path {
+ fill: $award-emoji-positive-add-lines;
+ }
+ }
+
+ .award-control-icon-neutral {
+ opacity: 0;
+ }
+
+ .award-control-icon-positive {
+ opacity: 1;
+ transform: scale(1.15);
+ }
+ }
+
+ &.is-active {
+ .award-control-icon-positive {
+ opacity: 0;
+ transform: scale(1);
+ }
+
+ .award-control-icon-super-positive {
+ opacity: 1;
+ transform: scale(1);
+ }
}
&.btn {
@@ -162,9 +192,33 @@
color: $border-gray-normal;
margin-top: 1px;
padding: 0 2px;
+
+ svg {
+ margin-bottom: 1px;
+ height: 18px;
+ width: 18px;
+ border-radius: 50%;
+
+ path {
+ fill: $border-gray-normal;
+ }
+ }
+ }
+
+ .award-control-icon-positive,
+ .award-control-icon-super-positive {
+ position: absolute;
+ left: 7px;
+ bottom: 9px;
+ opacity: 0;
+ @include transition(opacity, transform);
}
.award-control-text {
vertical-align: middle;
}
}
+
+.note-awards .award-control-icon-positive {
+ left: 6px;
+}
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 97794a47df8..712eb7caf33 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -293,6 +293,8 @@ $badge-color: $gl-text-color-secondary;
* Award emoji
*/
$award-emoji-menu-shadow: rgba(0,0,0,.175);
+$award-emoji-positive-add-bg: #fed159;
+$award-emoji-positive-add-lines: #bb9c13;
/*
* Search Box
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 57cf8e136e2..603ef461ffe 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -398,13 +398,50 @@ ul.notes {
font-size: 17px;
}
- &:hover {
+ svg {
+ height: 16px;
+ width: 16px;
+ fill: $gray-darkest;
+ vertical-align: text-top;
+ }
+
+ .award-control-icon-positive,
+ .award-control-icon-super-positive {
+ position: absolute;
+ margin-left: -20px;
+ opacity: 0;
+ }
+
+ &:hover,
+ &.is-active {
.danger-highlight {
color: $gl-text-red;
}
.link-highlight {
color: $gl-link-color;
+
+ svg {
+ fill: $gl-link-color;
+ }
+ }
+
+ .award-control-icon-neutral {
+ opacity: 0;
+ }
+
+ .award-control-icon-positive {
+ opacity: 1;
+ }
+ }
+
+ &.is-active {
+ .award-control-icon-positive {
+ opacity: 0;
+ }
+
+ .award-control-icon-super-positive {
+ opacity: 1;
}
}
}
@@ -508,7 +545,6 @@ ul.notes {
}
.line-resolve-all-container {
-
.btn-group {
margin-left: -4px;
}
@@ -537,7 +573,6 @@ ul.notes {
fill: $gray-darkest;
}
}
-
}
.line-resolve-all {
diff --git a/app/views/award_emoji/_awards_block.html.haml b/app/views/award_emoji/_awards_block.html.haml
index 5aae410a63f..3ca45fbf751 100644
--- a/app/views/award_emoji/_awards_block.html.haml
+++ b/app/views/award_emoji/_awards_block.html.haml
@@ -13,5 +13,7 @@
%button.btn.award-control.has-tooltip.js-add-award{ type: 'button',
'aria-label': 'Add emoji',
data: { title: 'Add emoji', placement: "bottom" } }
- = icon('smile-o', class: "award-control-icon award-control-icon-normal")
+ %span{ class: "award-control-icon award-control-icon-neutral" }= custom_icon('emoji_slightly_smiling_face')
+ %span{ class: "award-control-icon award-control-icon-positive" }= custom_icon('emoji_smiley')
+ %span{ class: "award-control-icon award-control-icon-super-positive" }= custom_icon('emoji_smile')
= icon('spinner spin', class: "award-control-icon award-control-icon-loading")
diff --git a/app/views/projects/notes/_note.html.haml b/app/views/projects/notes/_note.html.haml
index 6c0e6d48d6c..18afa811bad 100644
--- a/app/views/projects/notes/_note.html.haml
+++ b/app/views/projects/notes/_note.html.haml
@@ -59,7 +59,9 @@
- if note.emoji_awardable?
= link_to '#', title: 'Award Emoji', class: 'note-action-button note-emoji-button js-add-award js-note-emoji', data: { position: 'right' } do
= icon('spinner spin')
- = icon('smile-o', class: 'link-highlight')
+ %span{ class: "link-highlight award-control-icon-neutral" }= custom_icon('emoji_slightly_smiling_face')
+ %span{ class: "link-highlight award-control-icon-positive" }= custom_icon('emoji_smiley')
+ %span{ class: "link-highlight award-control-icon-super-positive" }= custom_icon('emoji_smile')
- if note_editable
= link_to '#', title: 'Edit comment', class: 'note-action-button js-note-edit' do
diff --git a/app/views/shared/icons/_emoji_slightly_smiling_face.svg b/app/views/shared/icons/_emoji_slightly_smiling_face.svg
new file mode 100644
index 00000000000..56dbad91554
--- /dev/null
+++ b/app/views/shared/icons/_emoji_slightly_smiling_face.svg
@@ -0,0 +1 @@
+
diff --git a/app/views/shared/icons/_emoji_smile.svg b/app/views/shared/icons/_emoji_smile.svg
new file mode 100644
index 00000000000..ce645fee46f
--- /dev/null
+++ b/app/views/shared/icons/_emoji_smile.svg
@@ -0,0 +1 @@
+
diff --git a/app/views/shared/icons/_emoji_smiley.svg b/app/views/shared/icons/_emoji_smiley.svg
new file mode 100644
index 00000000000..ddfae50e566
--- /dev/null
+++ b/app/views/shared/icons/_emoji_smiley.svg
@@ -0,0 +1 @@
+
diff --git a/changelogs/unreleased/award-emoji-button-smiley-animation.yml b/changelogs/unreleased/award-emoji-button-smiley-animation.yml
new file mode 100644
index 00000000000..31903aeb040
--- /dev/null
+++ b/changelogs/unreleased/award-emoji-button-smiley-animation.yml
@@ -0,0 +1,4 @@
+---
+title: Added award emoji animation and improved active state
+merge_request:
+author: