Hanged Distro

README.md

@@ -9,7 +9,7 @@ coolHue gradients palette is **rendered by JavaScript Object** which makes it ve
 
 # Installation
 You can create your very own personalized collection of Gradient Palette with coolHue - 
-1. Download the latest [coolHue v1.2.1 release archive](http://bit.ly/coolhue-v121) from the repository's release section.
+1. Download the latest [coolHue release archive](http://bit.ly/coolhue-releases) from the repository's release section.
 2. Unpack the archive and drag `index.html` in the browser, to check out the default gradient palette.
 3. All the gradients which are visible in the browser by default are rendered by `colorData` Javascript Object.
 4. You just need to update the `colorData` Object (array) to create your very own gradient palette. So, Open `index.html` in the text editor and update the color codes.
@@ -27,10 +27,10 @@ You can grab the complete dev build using the **`bower`** package manager via fo
 :heavy_exclamation_mark: Installation command mentioned above needs bower to be pre installed on your local machine.
 
 ## Photoshop Gradient Palette
-You can download the [coolHue Gradient Palette for Photoshop](https://github.com/webkul/coolhue/blob/master/distro/ps_coolHue.grd).
+You can download the [coolHue Gradient Palette for Photoshop](http://bit.ly/coolhue-ps).
 
 ## Sketch App Gradient Palette
-You can download the [coolHue Gradient Palette for Sketch App](https://github.com/webkul/coolhue/blob/master/distro/coolHue.sketch).
+You can download the [coolHue Gradient Palette for Sketch App](http://bit.ly/coolhue-sketch).
 
 # Credits
 Crafted with :heart: by [UVdesk App](https://www.uvdesk.com/)

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "coolhue",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "homepage": "https://webkul.github.io/coolhue/",
   "authors": [
     "Nitish Kumar <[email protected]>"

css/style.css

@@ -233,6 +233,114 @@ p.ch-copyright {
     ;
 }
 
+.ch-distro {
+    position: fixed;
+    right: 25px;
+    bottom: 25px;
+    min-width: 200px;
+    max-width: 100%;
+}
+
+.ch-distro-icon {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    position: absolute;
+    right: 0px;
+    bottom: 0px;
+    background-color: #FFFFFF;
+    background-image: url("../images/icon-distro.svg");
+    background-repeat: no-repeat;
+    background-position: left center;
+    box-shadow: 0px 10px 27px 3px rgba(0, 0, 0, 0.15), 0px 1px 4px 0px rgba(0, 0, 0, 0.03);
+    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+    transform: translateY(0px);
+    cursor: pointer;
+}
+
+.ch-distro-icon-active,
+.ch-distro-icon:hover {
+    box-shadow: 0px 25px 30px 5px rgba(0, 0, 0, 0.1), 0px 5px 20px 5px rgba(0, 0, 0, 0.03);
+    transform: translateY(-6px);
+}
+
+.ch-distro-icon-active{
+    background-position: right center; 
+}
+
+.ch-distro-wrapper {
+    left: 0px;
+    right: 0px;
+    bottom: 70px;
+    position: absolute;
+    background-color: #FFFFFF;
+    box-shadow: 0px 0px 51px 0px rgba(0, 0, 0, 0.08), 0px 6px 18px 0px rgba(0, 0, 0, 0.05);
+    border-radius: 8px;
+    padding: 15px;
+    display: none;
+}
+
+.ch-distro-type {
+    color: #2750C4;
+    display: block;
+    padding: 7px 0px;
+    text-decoration: none;
+    font-size: 17px;
+    background-position: left center;
+    background-repeat: no-repeat;
+    padding-left: 32px;
+}
+
+.ch-distro-type:hover {
+    text-decoration: underline;
+}
+
+.ch-distro-type:nth-child(1) {
+    background-image: url("../images/icon-sketch.svg");
+}
+
+.ch-distro-type:nth-child(2) {
+    background-image: url("../images/icon-photoshop.svg");
+}
+
+.ch-distro-type:nth-child(3) {
+    background-image: url("../images/icon-customize.svg");
+}
+
+.ch-distro-wrapper-flap-up {
+    animation: flap-up 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.ch-distro-wrapper-flap-down{
+     animation: flap-down 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.ch-distro-wrapper-visible{
+    display: block;
+}
+
+@keyframes flap-up {
+    0% {
+        opacity: 0;
+        transform: translateY(25px);
+    }
+    100% {
+        opacity: 1;
+        transform: translateY(0px);
+    }
+}
+
+@keyframes flap-down {
+    0% {
+        opacity: 1;
+        transform: translateY(0px);
+    }
+    100% {
+        opacity: 0;
+        transform: translateY(25px);
+    }
+}
+
 @keyframes notify-up {
     0% {
         opacity: 0;

index.html

@@ -65,6 +65,18 @@ <h1 class="ch-logo" title="coolhue">coolHue - Color Swatch and Palette</h1>
         <div class="ch-separator ch-separator-bottom"></div>
         <p class="ch-copyright">&copy; Copyright 2017 Webkul Software, All rights reserved.</p>
     </div>
+
+    <!--Distro-->
+    <div class="ch-distro">
+        <div class="ch-distro-icon"></div>
+        <div class="ch-distro-wrapper ch-distro-wrapper-flap-up">
+            <a class="ch-distro-type" href="http://bit.ly/coolhue-sketch" target="_blank">Sketch Palette</a>
+            <a class="ch-distro-type" href="http://bit.ly/coolhue-ps" target="_blank">Photoshop Palette</a>
+            <a class="ch-distro-type" href="http://bit.ly/coolhue-dev" target="_blank">Customize Palette</a>
+        </div>
+    </div>
+    <!--//Distro-->
+
     <!--//Footer-->
 
     <!--Notification-->

scripts/script.js

@@ -107,7 +107,7 @@ document.addEventListener("DOMContentLoaded", function () {
                 notifyPlank.removeChild(notify);
             }, 5000);
         }
-        
+
         //Grab Palette
         if (event.target.matches(".ch-grab")) {
             var eventColorFrom = event.target.dataset.colorFrom;
@@ -124,4 +124,25 @@ document.addEventListener("DOMContentLoaded", function () {
             window.open(canvas.toDataURL());
         }
     }
+
+    //Distro
+    var chDistroWrapper = document.querySelector(".ch-distro-wrapper");
+    var chDistroIcon = document.querySelector(".ch-distro-icon");
+    chDistroIcon.addEventListener("click", function () {
+        if (this.classList.contains("ch-distro-icon-active")) {
+            chDistroWrapper.classList.remove("ch-distro-wrapper-flap-up");
+            chDistroWrapper.classList.add("ch-distro-wrapper-flap-down");
+            setTimeout(function () {
+                chDistroIcon.classList.remove("ch-distro-icon-active");
+                chDistroWrapper.classList.remove("ch-distro-wrapper-visible");
+            }, 400);
+        } else {
+            if (chDistroWrapper.classList.contains("ch-distro-wrapper-flap-down")) {
+                chDistroWrapper.classList.remove("ch-distro-wrapper-flap-down");
+            }
+            chDistroWrapper.classList.add("ch-distro-wrapper-visible");
+            chDistroWrapper.classList.add("ch-distro-wrapper-flap-up");
+            this.classList.add("ch-distro-icon-active");
+        }
+    });
 });