From 36dbc0fe61009e5fffa05bda9bcd9a8b9ccc63b3 Mon Sep 17 00:00:00 2001
From: lone-cloud <lonecloud604@pm.me>
Date: Tue, 18 Oct 2016 18:01:35 -0700
Subject: [PATCH] minor improvements for mobile

---
 .../pods/components/hue-controls/template.hbs |  2 +-
 .../pods/components/light-group/component.js  | 31 ------------
 .../pods/components/light-group/template.hbs  |  2 +-
 .../pods/components/music-tab/component.js    | 31 ------------
 .../pods/components/music-tab/template.hbs    | 16 +++----
 mobile/app/styles/common.scss                 |  4 --
 mobile/app/styles/dimmer.scss                 |  1 -
 mobile/app/styles/hue-controls.scss           | 12 +----
 mobile/app/styles/light-group.scss            |  2 -
 mobile/app/styles/music-tab.scss              | 14 ------
 mobile/app/styles/noui-slider.scss            |  8 ----
 mobile/app/styles/paper.scss                  | 12 -----
 .../pods/components/light-group/component.js  | 48 ++++++++++---------
 .../pods/components/music-tab/template.hbs    |  2 +-
 web/app/styles/hue-controls.scss              |  2 +-
 web/app/styles/music-tab.scss                 |  4 +-
 16 files changed, 40 insertions(+), 151 deletions(-)

diff --git a/mobile/app/pods/components/hue-controls/template.hbs b/mobile/app/pods/components/hue-controls/template.hbs
index 72eaf95..9747988 100644
--- a/mobile/app/pods/components/hue-controls/template.hbs
+++ b/mobile/app/pods/components/hue-controls/template.hbs
@@ -1,7 +1,7 @@
 {{#if ready}}
   <div id="navigation">
     {{#each tabData as |tab|}}
-      <span class="navigation-item pointer text-uppercase {{if tab.selected "active"}}" {{action "changeTab" tab.name}}>{{tab.name}}</span>
+      <span class="navigation-item text-uppercase {{if tab.selected "active"}}" {{action "changeTab" tab.name}}>{{tab.name}}</span>
     {{/each}}
     <div id="settings">
       <span data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="settings-itemSettings">
diff --git a/mobile/app/pods/components/light-group/component.js b/mobile/app/pods/components/light-group/component.js
index 7b448bd..21a14c5 100644
--- a/mobile/app/pods/components/light-group/component.js
+++ b/mobile/app/pods/components/light-group/component.js
@@ -13,7 +13,6 @@ const {
 export default Component.extend({
   elementId: 'active-lights',
   classNames: ['light-group', 'horizontal-light-group'],
-  isHovering: false,
   activeLights: A(),
 
   // list of all the lights in the hue system
@@ -122,36 +121,6 @@ export default Component.extend({
         activeLights.pushObject(id);
         this.set('syncLight', id);
       }
-    },
-    lightStartHover(id){
-      let hoveredLight = this.get('lightsList').filter(function(light){
-        return light.activeClass !== 'unreachable' && light.id === id[0];
-      });
-
-      if(!isEmpty(hoveredLight) && this.get('noHover') !== true){
-        $.ajax(this.get('apiURL')  + '/lights/' + id + '/state', {
-          data: JSON.stringify({"alert": "lselect"}),
-          contentType: 'application/json',
-          type: 'PUT'
-        });
-      }
-
-      this.set('isHovering', true);
-    },
-    lightStopHover(id){
-      let hoveredLight = this.get('lightsList').filter(function(light){
-        return light.activeClass !== 'unreachable' && light.id === id[0];
-      });
-
-      if(!isEmpty(hoveredLight) && this.get('noHover') !== true){
-        $.ajax(this.get('apiURL')  + '/lights/' + id + '/state', {
-          data: JSON.stringify({"alert": "none"}),
-          contentType: 'application/json',
-          type: 'PUT'
-        });
-      }
-
-      this.set('isHovering', false);
     }
   }
 });
diff --git a/mobile/app/pods/components/light-group/template.hbs b/mobile/app/pods/components/light-group/template.hbs
index 880b9e5..a2a9d3f 100644
--- a/mobile/app/pods/components/light-group/template.hbs
+++ b/mobile/app/pods/components/light-group/template.hbs
@@ -1,5 +1,5 @@
 {{#each lightsList as |light|}}
-  <div class="{{light.activeClass}} light{{light.id}}" data-toggle="tooltip" data-placement="top auto" {{action "clickLight" light.id}} {{action "lightStartHover" light.id on="mouseEnter"}} {{action "lightStopHover" light.id on="mouseLeave"}}>
+  <div class="{{light.activeClass}} light{{light.id}}" data-toggle="tooltip" data-placement="top auto" {{action "clickLight" light.id}}>
     <img class="hueLight" width="40" src="assets/images/lights/{{light.type}}.svg">
   </div>
 {{/each}}
\ No newline at end of file
diff --git a/mobile/app/pods/components/music-tab/component.js b/mobile/app/pods/components/music-tab/component.js
index a3dac8a..d16668e 100644
--- a/mobile/app/pods/components/music-tab/component.js
+++ b/mobile/app/pods/components/music-tab/component.js
@@ -226,20 +226,6 @@ export default Component.extend(helperMixin, visualizerMixin, {
     });
   },
 
-  dragOver() {
-    let dragLeaveTimeoutHandle = this.get('dragLeaveTimeoutHandle');
-    this.set('dragging', true);
-
-    if (dragLeaveTimeoutHandle) {
-      clearTimeout(dragLeaveTimeoutHandle);
-    }
-  },
-
-  dragLeave(){
-    // need to delay the dragLeave notification to avoid flickering ( hovering over some page elements causes this event to be sent )
-    this.set('dragLeaveTimeoutHandle', setTimeout(()=>{ this.set('dragging', false); }, 500));
-  },
-
   simulateKick(/*mag, ratioKickMag*/) {
     let activeLights = this.get('activeLights'),
       lightsData = this.get('lightsData'),
@@ -387,10 +373,6 @@ export default Component.extend(helperMixin, visualizerMixin, {
       }
     });
 
-    this.$().on('drop', '#play-list-area', (event)=>{
-      this.send('dropFiles', event.dataTransfer.files);
-    });
-
      // demo tracks
     if(this.get('firstVisit')){
       this.send('handleNewSoundCloudURL', 'https://soundcloud.com/mrsuicidesheep/candyland-speechless-feat-rkcb');
@@ -806,19 +788,6 @@ export default Component.extend(helperMixin, visualizerMixin, {
     clickSpeaker(){
       this.simulateKick(1);
     },
-    dropFiles(files){
-      this.setProperties({
-        dragging: false,
-        draggingOverPlayListArea: false
-      });
-      this.send('handleNewFiles', files);
-    },
-    playerListAreaDragOver(){
-      this.set('draggingOverPlayListArea', true);
-    },
-    playerListAreaDragLeave(){
-      this.set('draggingOverPlayListArea', false);
-    },
     handleNewFiles(files){
       let self = this,
         playQueue = this.get('playQueue'),
diff --git a/mobile/app/pods/components/music-tab/template.hbs b/mobile/app/pods/components/music-tab/template.hbs
index 6ea07f4..6209e00 100644
--- a/mobile/app/pods/components/music-tab/template.hbs
+++ b/mobile/app/pods/components/music-tab/template.hbs
@@ -84,20 +84,16 @@
   </div>
 {{else}}
   {{#if usingLocalAudio}}
-    <div id="play-list-area" class={{playListAreaClass}} {{action "addLocalAudio"}} {{action "playerListAreaDragOver" on="dragOver"}} {{action "playerListAreaDragLeave" on="dragLeave"}} {{action "dropFiles" on="drop"}}>
-      {{#if (or playQueueEmpty dragging)}}
+    <div id="play-list-area" class={{playListAreaClass}} {{action "addLocalAudio"}}>
+      {{#if playQueueEmpty}}
         <div id="dragHere">
-          {{#if dragging}}
-            Drag your music files here
-          {{else}}
             Add your music files here
-          {{/if}}
         </div>
         {{paper-icon "library-music" class=dimmerOnClass}}
       {{/if}}
 
       {{#each playQueue as |item index|}}
-        <div class="playlist-item pointer track{{index}} {{if (eq index playQueuePointer) "active"}} {{if dragging "hidden"}}" {{action "goToSong" index true bubbles=false}}>
+        <div class="playlist-item track{{index}} {{if (eq index playQueuePointer) "active"}} {{if dragging "hidden"}}" {{action "goToSong" index true bubbles=false}}>
           {{#if item.picture}}
             <img class="album-art" src={{item.picture}}>
           {{else}}
@@ -119,7 +115,7 @@
             {{/if}}
           </div>
 
-          <span class="audio-remove-button pointer" {{action "removeAudio" index bubbles=false}}>{{paper-icon "close" classNames="close"}}</span>
+          <span class="audio-remove-button" {{action "removeAudio" index bubbles=false}}>{{paper-icon "close" classNames="close"}}</span>
         </div>
       {{/each}}
     </div>
@@ -128,7 +124,7 @@
 </div>
 </div>
 
-<div id="slide-toggle" class="text-center pointer row" {{action "slideTogglePlayerBottom"}}>
+<div id="slide-toggle" class="text-center row" {{action "slideTogglePlayerBottom"}}>
 <div class="col-xs-offset-5 col-xs-2">
   {{paper-icon beatDetectionAreaArrowIcon id="beat-detection-area-arrow-icon"}}
 </div>
@@ -193,7 +189,7 @@
       <div class="rivet8"></div>
 
       <div id="beat-speaker-center-outer">
-        <div id="beat-speaker-center-inner" class="pointer" {{action "clickSpeaker"}}></div>
+        <div id="beat-speaker-center-inner" {{action "clickSpeaker"}}></div>
       </div>
     </div>
   </div>
diff --git a/mobile/app/styles/common.scss b/mobile/app/styles/common.scss
index db7ef0f..fe3e02c 100644
--- a/mobile/app/styles/common.scss
+++ b/mobile/app/styles/common.scss
@@ -9,7 +9,3 @@
 .no-text-decoration {
   text-decoration: none !important;
 }
-
-.pointer {
-  cursor: pointer;
-}
\ No newline at end of file
diff --git a/mobile/app/styles/dimmer.scss b/mobile/app/styles/dimmer.scss
index f388622..e214f14 100644
--- a/mobile/app/styles/dimmer.scss
+++ b/mobile/app/styles/dimmer.scss
@@ -78,7 +78,6 @@ body.dimmerOn {
 
 #dimmer {
   display: inline-block;
-  cursor: pointer;
   width: 40px;
   height: 40px;
   background: url(images/huegasm.png) center center no-repeat;
diff --git a/mobile/app/styles/hue-controls.scss b/mobile/app/styles/hue-controls.scss
index 2a00f1d..1509070 100644
--- a/mobile/app/styles/hue-controls.scss
+++ b/mobile/app/styles/hue-controls.scss
@@ -5,10 +5,6 @@
   }
 }
 
-#color-row {
-  cursor: pointer;
-}
-
 #hue-controls {
   max-width: 1200px;
   position: relative;
@@ -30,7 +26,6 @@
   padding: 0 10px 0 10px;
   &.active {
     font-weight: bold;
-    cursor: default;
     text-decoration: none !important;
   }
   &:hover {
@@ -58,13 +53,9 @@
   z-index: 3;
 }
 
-#picker {
-  cursor: crosshair;
-}
-
 #loop-addition {
   position: absolute;
-  left: 35px;
+  left: 33px;
   top: 15px;
   font-size: 16px;
 }
@@ -72,7 +63,6 @@
 #settings {
   z-index: 3;
   text-align: right;
-  cursor: pointer;
   float: right;
   position: relative;
 }
diff --git a/mobile/app/styles/light-group.scss b/mobile/app/styles/light-group.scss
index 03da523..37b159d 100644
--- a/mobile/app/styles/light-group.scss
+++ b/mobile/app/styles/light-group.scss
@@ -7,7 +7,6 @@
 }
 
 .light-inactive {
-  cursor: pointer;
   position: relative;
 }
 
@@ -30,7 +29,6 @@
 }
 
 .light-active {
-  cursor: pointer;
   img {
     transition-duration: 0.3s;
     transition-property: transform;
diff --git a/mobile/app/styles/music-tab.scss b/mobile/app/styles/music-tab.scss
index c6d29ac..707e5a4 100644
--- a/mobile/app/styles/music-tab.scss
+++ b/mobile/app/styles/music-tab.scss
@@ -173,16 +173,6 @@
   font-weight: bold;
 }
 
-#play-list-area.drag-here-highlight {
-  background-color: white;
-  border: 5px dotted #5383ff;
-}
-
-#play-list-area.dragging-over {
-  background-color: darken(white, 5%);
-  box-shadow: inset 0 0 20px 0 rgba(0, 0, 0, 1);
-}
-
 #file-input {
   width: 1px;
   height: 1px;
@@ -242,10 +232,6 @@
   margin-bottom: 10px;
 }
 
-.star {
-  cursor: auto !important;
-}
-
 #beat-option-button-group {
   margin: 20px 0 10px 0;
 }
diff --git a/mobile/app/styles/noui-slider.scss b/mobile/app/styles/noui-slider.scss
index 06c756b..7629984 100644
--- a/mobile/app/styles/noui-slider.scss
+++ b/mobile/app/styles/noui-slider.scss
@@ -16,18 +16,10 @@
   background: grey;
 }
 
-.noUi-base {
-  cursor: pointer;
-}
-
 .noUi-connect {
   background-color: $secondaryThemeColor;
 }
 
-.noUi-handle {
-  cursor: pointer;
-}
-
 .noUi-horizontal .noUi-handle {
   width: 0.4em;
   height: 1.3em;
diff --git a/mobile/app/styles/paper.scss b/mobile/app/styles/paper.scss
index ac9f217..c40cc4e 100644
--- a/mobile/app/styles/paper.scss
+++ b/mobile/app/styles/paper.scss
@@ -1,9 +1,5 @@
 @import 'ember-paper';
 
-.paper-icon {
-  cursor: pointer;
-}
-
 md-checkbox .md-icon, .md-off, .md-on {
   border-color: inherit !important;
 }
@@ -26,10 +22,6 @@ md-checkbox .md-label {
   }
 }
 
-md-switch[disabled=disabled], md-switch[disabled=disabled] .md-container, md-slider[disabled=disabled] {
-  cursor: not-allowed;
-}
-
 md-progress-circular {
   margin: 0 auto 20px auto !important;
 }
@@ -38,10 +30,6 @@ md-progress-linear {
   margin-bottom: 50px !important;
 }
 
-md-slider {
-  cursor: pointer;
-}
-
 md-slider.md-default-theme .md-thumb:after {
   border-color: $secondaryThemeColor;
   background-color: $secondaryThemeColor;
diff --git a/web/app/pods/components/light-group/component.js b/web/app/pods/components/light-group/component.js
index 7b448bd..b19d3c2 100644
--- a/web/app/pods/components/light-group/component.js
+++ b/web/app/pods/components/light-group/component.js
@@ -124,34 +124,38 @@ export default Component.extend({
       }
     },
     lightStartHover(id){
-      let hoveredLight = this.get('lightsList').filter(function(light){
-        return light.activeClass !== 'unreachable' && light.id === id[0];
-      });
-
-      if(!isEmpty(hoveredLight) && this.get('noHover') !== true){
-        $.ajax(this.get('apiURL')  + '/lights/' + id + '/state', {
-          data: JSON.stringify({"alert": "lselect"}),
-          contentType: 'application/json',
-          type: 'PUT'
+      if(!window.matchMedia || (window.matchMedia("(min-width: 768px)").matches)){
+        let hoveredLight = this.get('lightsList').filter(function(light){
+          return light.activeClass !== 'unreachable' && light.id === id[0];
         });
-      }
 
-      this.set('isHovering', true);
+        if(!isEmpty(hoveredLight) && this.get('noHover') !== true){
+          $.ajax(this.get('apiURL')  + '/lights/' + id + '/state', {
+            data: JSON.stringify({"alert": "lselect"}),
+            contentType: 'application/json',
+            type: 'PUT'
+          });
+        }
+
+        this.set('isHovering', true);
+      }
     },
     lightStopHover(id){
-      let hoveredLight = this.get('lightsList').filter(function(light){
-        return light.activeClass !== 'unreachable' && light.id === id[0];
-      });
-
-      if(!isEmpty(hoveredLight) && this.get('noHover') !== true){
-        $.ajax(this.get('apiURL')  + '/lights/' + id + '/state', {
-          data: JSON.stringify({"alert": "none"}),
-          contentType: 'application/json',
-          type: 'PUT'
+      if(!window.matchMedia || (window.matchMedia("(min-width: 768px)").matches)){
+        let hoveredLight = this.get('lightsList').filter(function(light){
+          return light.activeClass !== 'unreachable' && light.id === id[0];
         });
-      }
 
-      this.set('isHovering', false);
+        if(!isEmpty(hoveredLight) && this.get('noHover') !== true){
+          $.ajax(this.get('apiURL')  + '/lights/' + id + '/state', {
+            data: JSON.stringify({"alert": "none"}),
+            contentType: 'application/json',
+            type: 'PUT'
+          });
+        }
+
+        this.set('isHovering', false);
+      }
     }
   }
 });
diff --git a/web/app/pods/components/music-tab/template.hbs b/web/app/pods/components/music-tab/template.hbs
index 4efc861..e02466b 100644
--- a/web/app/pods/components/music-tab/template.hbs
+++ b/web/app/pods/components/music-tab/template.hbs
@@ -20,7 +20,7 @@
                   -->{{/if}}<!--
           --><span data-toggle="tooltip" data-placement="top" class="bootstrap-tooltip" id="volumeMutedTooltip"
                    data-title={{volumeMutedTooltipTxt}} {{action "volumeMutedChanged"}}>{{paper-icon icon=volumeIcon class=volumeMutedClass}}</span><!--
-                  -->{{range-slider start=volume min=0 max=100 connect=filledConnect on-slide="volumeChanged" id="volume-bar" class="hidden-xs"}}
+                  -->{{range-slider start=volume min=0 max=100 connect=filledConnect on-slide="volumeChanged" id="volume-bar"}}
 
         <div id="player-time-controls">{{timeElapsedTxt}} / {{timeTotalTxt}}</div>
       {{/if}}
diff --git a/web/app/styles/hue-controls.scss b/web/app/styles/hue-controls.scss
index fd38e07..578325d 100644
--- a/web/app/styles/hue-controls.scss
+++ b/web/app/styles/hue-controls.scss
@@ -68,7 +68,7 @@
 
 #loop-addition {
   position: absolute;
-  left: 35px;
+  left: 33px;
   top: 15px;
   font-size: 16px;
 }
diff --git a/web/app/styles/music-tab.scss b/web/app/styles/music-tab.scss
index 2b5854a..02d7a0f 100644
--- a/web/app/styles/music-tab.scss
+++ b/web/app/styles/music-tab.scss
@@ -332,11 +332,13 @@
 
 #save-beat-preferences-star {
   position: absolute;
-  top: 3px;
+  top: 5px;
+  left: 5px;
   z-index: 1000;
   md-icon {
     color: $secondaryThemeColor !important;
     font-size: 25px;
+    cursor: default;
   }
 }