-
{props.code}
+
+
{props.code}
+ {props.description}
-
- :art:
-
+
+
+ :art:
+
+ Improving structure / format of the code.
@@ -43,8 +48,8 @@ exports[`GitmojiList should render the component 1`] = ` className="zap emoji-header" > β‘οΈ @@ -52,9 +57,14 @@ exports[`GitmojiList should render the component 1`] = `
-
- :zap:
-
+
+
+ :zap:
+
+ Improving performance.
@@ -71,8 +81,8 @@ exports[`GitmojiList should render the component 1`] = ` className="fire emoji-header" > π₯ @@ -80,9 +90,14 @@ exports[`GitmojiList should render the component 1`] = `
-
- :fire:
-
+
+
+ :fire:
+
+ Removing code or files.
@@ -99,8 +114,8 @@ exports[`GitmojiList should render the component 1`] = ` className="bug emoji-header" > π @@ -108,9 +123,14 @@ exports[`GitmojiList should render the component 1`] = `
-
- :bug:
-
+
+
+ :bug:
+
+ Fixing a bug.
@@ -127,8 +147,8 @@ exports[`GitmojiList should render the component 1`] = ` className="ambulance emoji-header" > π @@ -136,9 +156,14 @@ exports[`GitmojiList should render the component 1`] = `
-
- :ambulance:
-
+
+
+ :ambulance:
+
+ Critical hotfix.
@@ -155,8 +180,8 @@ exports[`GitmojiList should render the component 1`] = ` className="sparkles emoji-header" > β¨ @@ -164,9 +189,14 @@ exports[`GitmojiList should render the component 1`] = `
-
- :sparkles:
-
+
+
+ :sparkles:
+
+ Introducing new features.
diff --git a/src/components/GitmojiList/index.js b/src/components/GitmojiList/index.js index c2e3186..932cae5 100644 --- a/src/components/GitmojiList/index.js +++ b/src/components/GitmojiList/index.js @@ -15,13 +15,20 @@ type Props = { const GitmojiList = (props: Props) => { React.useEffect(() => { - const clipboard = new Clipboard('.gitmoji') + const clipboard = new Clipboard('.gitmoji-code, .gitmoji-emoji') - clipboard.on('success', function() { + clipboard.on('success', function(e) { window.ga('send', 'event', 'Gitmoji', 'Copy to Clipboard') + const elementClasses = e.trigger.classList + let notificationMessage = `Hey! Gitmoji ${e.text} copied to the clipboard π
` + + if (elementClasses.contains('gitmoji-emoji')) { + notificationMessage = `Hey! Gitmoji emoji ${e.text} copied to the clipboard π
` + } + var notification = new window.NotificationFx({ - message: 'Hey! Gitmoji copied to the clipboard π
', + message: notificationMessage, layout: 'growl', effect: 'scale', type: 'notice' diff --git a/src/styles/_includes/_notifications.scss b/src/styles/_includes/_notifications.scss index a9713ef..2f8507b 100644 --- a/src/styles/_includes/_notifications.scss +++ b/src/styles/_includes/_notifications.scss @@ -28,6 +28,13 @@ margin: 0; } + .gitmoji-code { + padding: 0 4px; + border-radius: 4px; + background-color: rgba($black, 0.7); + color: $white; + } + &.ns-show, &.ns-visible { pointer-events: auto; @@ -84,7 +91,7 @@ .ns-growl { top: 30px; left: 30px; - max-width: 300px; + max-width: 350px; border-radius: 5px; } @@ -135,6 +142,7 @@ opacity: 0; -webkit-transform: translate3d(0, 40px, 0) scale3d(0.1, 0.6, 1); } + 100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1); @@ -147,6 +155,7 @@ -webkit-transform: translate3d(0, 40px, 0) scale3d(0.1, 0.6, 1); transform: translate3d(0, 40px, 0) scale3d(0.1, 0.6, 1); } + 100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1); diff --git a/src/styles/style.scss b/src/styles/style.scss index e1f5ecd..61a5a44 100644 --- a/src/styles/style.scss +++ b/src/styles/style.scss @@ -130,10 +130,25 @@ main.wrap { box-sizing: border-box; .gitmoji { - font-size: 5em; - cursor: pointer; - font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', - 'Segoe UI Symbol', 'Android Emoji', 'EmojiSymbols'; + &-emoji { + display: inline-block; + font-size: 5em; + cursor: pointer; + font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', + 'Segoe UI Symbol', 'Android Emoji', 'EmojiSymbols'; + + &:hover { + animation-name: bounce; + animation-duration: 0.5s; + } + } + + &-code { + border-radius: 4px; + transition-duration: 0.3s; + border-bottom: solid 2px rgba(0, 0, 0, 0); + cursor: pointer; + } } &-card { @@ -257,6 +272,13 @@ main.wrap { @each $gitmoji, $color in ($gitmojis) { .#{$gitmoji} { background-color: $color; + + & ~ .emoji-info .gitmoji-code { + &:hover { + background-color: rgba($color, 0.3); + box-shadow: 0 4px rgba($color, 0.6); + } + } } } @@ -265,19 +287,54 @@ main.wrap { 100% { color: #7ccdea; } + 16% { color: #0074d9; } + 32% { color: #2ecc40; } + 48% { color: #ffdc00; } + 64% { color: #b10dc9; } + 80% { color: #ff4136; } } + +/* + This code has been obtained from: + https://github.com/daneden/animate.css/blob/master/source/attention_seekers/bounce.css +*/ +@keyframes bounce { + from, + 20%, + 53%, + 80%, + to { + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + transform: translate3d(0, 0, 0); + } + + 40%, + 43% { + animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + transform: translate3d(0, -9px, 0); + } + + 70% { + animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + transform: translate3d(0, -5px, 0); + } + + 90% { + transform: translate3d(0, -2px, 0); + } +}