Add shadow for slice of chart on hover

Author: Stigmatoz

src/index.html

@@ -28,6 +28,17 @@
    <div id="resultTable" class="list-of-site"></div>
    <div id="total" class="inline-flex"></div>
    <div id="byDays" class="calendar-block"></div>
+
+   <svg class="height-0">
+      <filter id="dropShadow">
+          <feGaussianBlur in="SourceAlpha" stdDeviation="3"/> 
+          <feOffset dx="0" dy="1" />
+          <feMerge>
+              <feMergeNode />
+              <feMergeNode in="SourceGraphic" />
+          </feMerge>
+      </filter>
+    </svg>
 </body>
 
 </html>

src/manifest.json

@@ -3,7 +3,7 @@
 
         "name": "Web Activity Time Tracker",
         "short_name": "Web Time Tracker",
-        "version": "1.0.3",
+        "version": "1.1.0",
         "minimum_chrome_version": "26",
 
         "description": "Track and limit time your activity in the browser.",

src/scripts/ui.js

@@ -124,9 +124,23 @@ class UI {
         div.addEventListener('mouseenter', function () {
             if (document.getElementById('chart').innerHTML !== '') {
                 var item = document.getElementById(tab.url);
-                if (item !== null)
+                if (item !== null) {
                     item.dispatchEvent(new Event('mouseenter'));
-                else document.getElementById('Others').dispatchEvent(new Event('mouseenter'));
+                    item.classList.add('mouse-over');
+                }
+                else {
+                    document.getElementById('Others').dispatchEvent(new Event('mouseenter'));
+                    document.getElementById('Others').classList.add('mouse-over');
+                }
+            }
+        });
+        div.addEventListener('mouseout', function () {
+            if (document.getElementById('chart').innerHTML !== '') {
+                var item = document.getElementById(tab.url);
+                if (item !== null) {
+                    item.classList.remove('mouse-over');
+                }
+                else document.getElementById('Others').classList.remove('mouse-over');
             }
         });
         div.classList.add('inline-flex');
@@ -332,7 +346,7 @@ class UI {
         var resultList = [];
         allDays.forEach(element => {
             var day = days.find(x => x.date == element);
-            if (day !== undefined){
+            if (day !== undefined) {
                 resultList.push({
                     'date': day.date,
                     'total': day.total
@@ -343,7 +357,7 @@ class UI {
                 'total': 0
             });
         });
-        
+
         return resultList;
     }
 }

src/style/chart.css

@@ -1,9 +1,3 @@
-/* Add shadow effect to chart. If you don't like it, get rid of it. */
-svg {
-    -webkit-filter: drop-shadow( 0px 2px 2px rgba(0,0,0,.3) );
-    filter: drop-shadow( 0px 2px 2px rgba(0,0,0,.25) );
-}
-
 /*Styling for the lines connecting the labels to the slices*/
 polyline{
     opacity: .3;
@@ -38,6 +32,18 @@ tspan{
     font-weight: 600 !important;
 }
 
+g.slices > path:hover{
+  transform: translate(0,-1px);
+  filter: url(#dropShadow);
+  transition: transform .1s;
+} 
+
+g.slices > path.mouse-over{
+  transform: translate(0,-1px);
+  filter: url(#dropShadow);
+  transition: transform .1s;
+}
+
 /*styles for chart of days*/
 .axis path,
 .axis line {
@@ -91,3 +97,7 @@ tspan{
 .red-label{
   color:red;
 }
+
+.height-0{
+  height: 0 !important;
+}