From 56a671b00199de1b6ba9f1a8a810ea30d8107677 Mon Sep 17 00:00:00 2001
From: fillotassi <fabio.bernardi32@gmail.com>
Date: Mon, 17 Sep 2018 20:34:36 +0200
Subject: [PATCH] Add bar-transparency on slider drag

---
 components/sequencer.vue | 21 ++++++++++++---------
 pages/index.vue          |  2 +-
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/components/sequencer.vue b/components/sequencer.vue
index ee80e4a..d485ef8 100644
--- a/components/sequencer.vue
+++ b/components/sequencer.vue
@@ -2,7 +2,7 @@
   <section class="sequencer" v-on:mouseover="displayControls()" v-on:mouseleave="hideControls()" >
     <!--<span class="sequence-controls-wrapper">-->
     <div class="options-wrapper">
-      <div class="control-bar">
+      <span class="control-bar" :class="[{'transparentBar': barIsTransparent}]">
         <div class="sequence-options">
           <div class="option-icon" id="icon-slots"></div>
           <div class="option-icon" id="icon-euclid"></div>
@@ -10,12 +10,12 @@
           <div class="option-icon" id="icon-delete"></div>
         </div>
         <div class="sequence-bar">
-          <range-slider class="slider" min="1" step="1" v-model="slotSlider" v-on:input="assignEuclidean(slotSlider, pulseSlider)" ></range-slider>
+          <range-slider class="slider" min="1" step="1" v-model="slotSlider" v-on:input="assignEuclidean(slotSlider, pulseSlider), setTransparency()" ></range-slider>
           <input id="pulseSlider"/>
-          <range-slider class="slider"  min="1" :max="slotSlider" step="1" v-model="pulseSlider" v-on:input  ="assignEuclidean(slotSlider, pulseSlider)" ></range-slider>
+          <range-slider class="slider"  min="1" :max="slotSlider" step="1" v-model="pulseSlider" v-on:input  ="assignEuclidean(slotSlider, pulseSlider), setTransparency()" ></range-slider>
           <input id="pulseSlider" value="3" />
         </div>
-      </div>
+      </span>
     </div>
     <div class="sequencerLine">
         <div class="slot" v-for="(slot, slotid) in euclideanList" :key="slotid">
@@ -61,11 +61,10 @@
         },
         hideControls: function (){
           this.controlIsDisplayed = false;
-        }
-        /*,
-        barOpacity: function (){
-          this.setOpacity = true;
-        }*/,
+        },
+        setTransparency: function (){
+          this.barIsTransparent = true;
+        },
         bjorklund: function (slots, pulses) {
 
       var pattern = [],
@@ -206,6 +205,10 @@
   overflow-x: auto;
 }
 
+.transparentBar{
+  opacity:0.5;
+}
+
 .sequence-bar{
   display:none;
 }
diff --git a/pages/index.vue b/pages/index.vue
index 9ed73dc..bac0bf9 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -45,7 +45,7 @@ export default {
         slotSlider: 16,
         pulseSlider: 3,
         euclideanList: [],
-        controlIsDisplayed: false });
+        barIsTransparent: false });
     },
     getSequencerData: function(){
       var modelEsp = {