Added Blur functionality

Click the circle on the right of the level to enable/disable blur

NightShades.widget/index.coffee

@@ -1,26 +1,32 @@
 # For use with Übersicht ==> http://tracesof.net/uebersicht/
 # Coded by Porco-Rosso ==> https://github.com/Porco-Rosso
 # from Stereostance.com
+# v1.1.0
 # GNU GPL V2
 
 command: ""
 
 refreshFrequency: 300000000
 
 render: (output) -> """
+
 <div class="shade"></div>
-  <div class="container">
+
+<div class="blur-layer"></div>
+
+<div class="container">
     <img class="shades-icon" src="NightShades.widget/Shadesdark.png">
     <span class="table">
-    <tr>
-    <th><span class="level">.3</span></th>
-    <th><span class="level selected">.5</span></th>
-    <th><span class="level">.8</span></th>
-  </tr>
-  </span>
-  
-  </div>
-  
+      <tr>
+      <th><span class="level">.3</span></th>
+      <th><span class="level selected">.5</span></th>
+      <th><span class="level">.8</span></th>
+      </tr>
+    </span>
+    <span class="bluricon blurred-icon">◍</span>
+
+</div>
+
 """
 
 style: """
@@ -38,37 +44,50 @@ style: """
     top: 0px
     left: 0px
     z-index: -100
-    
+    overflow:hidden
+
+  .blur-layer
+    width: 10000px
+    height: 10000px
+    position: absolute
+    overflow: hidden
+    top: 0px
+    left: 0px
+    z-index: -101
+    -webkit-backdrop-filter: blur(0px)
+
   .container
     position: absolute
     top: 0px
     left: 08px
     width: 200px
-    
+
   .table
     position: relative
     font-size: 12px
     padding: 0px
     color: rgba(#FFF, 0.3)
     border:1px solid rgba(#FFF, 0.3)
     border-radius: 2px
-    
+
   .level.selected
      color: rgba(#000, 0.5)
      background: rgba(#FFF, 0.3)
-     
+
   .shades-icon
     height: 10px
     -webkit-filter: drop-shadow(0px 0px 2px rgba(#FFF, 0.5))
-    
-    
+
+  span.bluricon
+    font-size: 20px
+    position: absolute
+    margin-left: 3px
+    margin-bottom: 5px
+    margin-top: -1px
 """
 
 update: (output, domEl) ->
-#    $('.shade').css({
-#    width:  $('.content').width(),
-#    height:  $('.content').height()
-#    });
+# Add/remove Shade
     $(domEl).find('.shades-icon').click ->
         if $('.shade').hasClass( "transparent" )
              opacity = $(".table").find('.level.selected').html();
@@ -88,12 +107,28 @@ update: (output, domEl) ->
              $('.shades-icon').css({'-webkit-filter': 'drop-shadow(0px 0px 0px rgba(#FFF, 0.0))'})
              $('.shade').addClass( "transparent" )
             console.log("shades off")
-
+
+# Change level of shade
     $(domEl).find('.level').click ->
              $('.level.selected').removeClass('selected')
              $(this).addClass('selected')
              opacity = $(".table").find('.level.selected').html();
              $('.shade').css({'opacity': opacity})
-
+
+# Add/remove Blur
+    $(domEl).find('.bluricon').click ->
+        if $('.blur-layer').hasClass( "blurred" )
+             $('.blur-layer').css({'-webkit-backdrop-filter': 'blur(0px)'})
+             $('.bluricon').html("◍")
+             $('.bluricon').css({'margin-top': '-1px'})
+             $('.blur-layer').removeClass( "blurred" )
+             console.log("unblurred")
+
+        else
+             $('.blur-layer').css({'-webkit-backdrop-filter': 'blur(10px)'})
+             $('.bluricon').html("●")
+             $('.bluricon').css({'margin-top': '0px'})
+             $('.blur-layer').addClass( "blurred" )
+             console.log("blurred")
+
         return
-

README.md

@@ -1,8 +1,12 @@
 # U-bersicht-Nightshades
 This widget alows to quickly apply a dark overlay or 'Shades' to the wallpaper. With a cmd+click on the shades icon you can turn the $wag on and off, and adjust the level as needed. Warning does not block UV rays.
 
-
 For use with Übersicht ==> http://tracesof.net/uebersicht/
 
 
 ![Demo Screenshot](http://i.imgur.com/oDwVZC5.png)
+
+----
+Version 1.1.0 - *Now with blur toggle!*
+
+![Updated Demo](https://cloud.githubusercontent.com/assets/7024527/21076005/e7b67ff6-bf20-11e6-983c-868bc2c5b0c4.png)