dimmer switch, labels for settings

app/pods/components/bridge-finder/template.hbs

@@ -26,8 +26,10 @@
       </div>
     {{else}}
       {{#if bridgeFindFail}}
-        <p>A hue bridge was not found on your network. <br>
+        <p>A hue bridge could not be automatically found on your network. <br>
-          Enter one manually?</p>
+          Enter one manually? <br><br>
+          ( or enter <b>trial</b> to look around )
+        </p>
 
         <span id="bridgeInput">
           {{paper-input label="Hue bridge IP address" value=manualBridgeIp}}

app/pods/components/groups-list/template.hbs

@@ -1,9 +1,11 @@
-<h3 class="sideNavTitle">Light Groups<span data-toggle="tooltip" data-placement="bottom auto" title="Add Group" class="bootstrapTooltip addButton pull-right cursorPointer" {{action "toggleAddGroupsModal"}}>{{paper-icon icon="group-add"}}</span></h3>
-
 {{#paper-list}}
+  {{#paper-item}}
+    <h4 class="addButton" {{action "toggleAddGroupsModal"}}>Add a new light group</h4>
+  {{/paper-item}}
+
   {{#each groupsArrData as |group|}}
     {{#paper-item class=group.rowClass}}
-      <div class="groupSelect cursorPointer" {{action "selectGroup" group.data.key}}>{{group.name}}</div> {{#if group.deletable}}<span data-toggle="tooltip" data-placement="top auto" title="Remove Group" class="bootstrapTooltip removeButton cursorPointer" {{action "toggleConfirmDeleteGroupsModal" group.name group.data.key}}>{{paper-icon icon="close"}}</span>{{/if}}
+      <div class="groupSelect" {{action "selectGroup" group.data.key}}>{{group.name}}</div> {{#if group.deletable}}<span data-toggle="tooltip" data-placement="top auto" title="Remove Group" class="bootstrapTooltip removeButton cursorPointer" {{action "toggleConfirmDeleteGroupsModal" group.name group.data.key}}>{{paper-icon icon="close"}}</span>{{/if}}
     {{/paper-item}}
   {{/each}}
 {{/paper-list}}

app/pods/components/hue-controls/template.hbs

@@ -1,34 +1,32 @@
 {{#if ready}}
   <div class="row navigation">
-    <div class="col-lg-4 col-lg-offset-4 col-xs-6 col-xs-offset-3">
+    <div class="col-sm-5 col-sm-offset-4 col-xs-6 col-xs-offset-1">
       {{#each tabData as |tab|}}
         <span class="navigationItem cursorPointer {{if tab.selected "active"}} text-uppercase" {{action "changeTab" tab.name}}>{{tab.name}}</span>
       {{/each}}
     </div>
 
-    <div id="settings" class="col-xs-3">
+    <div id="settings" class="col-sm-3 col-xs-5">
-      <span id="groupMenu" class="settingsItem">
+      <div class="settingsItem">
         <span data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-          <span data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip" data-title="Light Groups">
+          Light Groups
-            {{paper-icon icon="group"}}
+          <div class="text-center">{{paper-icon icon="group"}}</div>
-          </span>
         </span>
 
         {{groups-list lightsData=lightsData groupsData=groupsData activeLights=activeLights apiURL=apiURL updateGroupsData=updateGroupsData groupControlDisplayed=groupControlDisplayed}}
-      </span>
+      </div>
 
-      <span id="appSettingsMenu" class="settingsItem">
+      <div class="settingsItem">
         <span data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-          <span data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip" data-title="Application Settings">
+          Settings
-            {{paper-icon icon="settings"}}
+          <div class="text-center">{{paper-icon icon="settings"}}</div>
-          </span>
         </span>
 
         <ul id="appSettings" class="dropdown-menu">
           <li class="appSettingsItem" {{action "clearBridge"}}>Switch bridge</li>
           <li class="warn appSettingsItem" {{action "clearAllSettings"}}>Clear application settings</li>
         </ul>
-      </span>
+      </div>
     </div>
   </div>
 

app/pods/components/huegasm-app/template.hbs

@@ -5,5 +5,5 @@
 {{/if}}
 
 <footer id="footer">
-   <p><span class="dimmerWrapper" {{action "toggleDimmer"}}>{{fa-icon "fa-lightbulb-o" classNames=dimmerOnClass}}</span>Made by <a href="//egorphilippov.me">egorphilippov.me</a> © 2015 Huegasm</p>
+   <p><span class="relative"><span class="dimmerWrapper" {{action "toggleDimmer"}}>{{fa-icon "fa-lightbulb-o" classNames=dimmerOnClass}}</span>Made by <a href="//egorphilippov.me">egorphilippov.me</a> © 2015 Huegasm</span></p>
 </footer>

app/pods/components/lights-tab/template.hbs

@@ -1,23 +1,23 @@
-{{#paper-list}}
+{{#paper-list class="lightsTab"}}
   {{#paper-item class="item"}}
     {{light-group lightsData=lightsData activeLights=activeLights action='clickLight' apiURL=apiURL classNames="horizontalLightGroup"}}
   {{/paper-item}}
 
   {{#paper-item}}
     {{paper-icon icon="power-settings-new"}}
-    <p>Power</p>
+    <p data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip" data-title="Selected lights are turned on/off">Power</p>
     {{#paper-switch checked=lightsOn disabled=trial skipProxy=trial}} {{lightsOnTxt}} {{/paper-switch}}
   {{/paper-item}}
 
   {{#paper-item}}
     {{paper-icon icon="brightness-4"}}
-    <p>Brightness</p>
+    <p data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip" data-title="Brightness level of the selected lights">Brightness</p>
     {{paper-slider flex=true min='1' max='254' value=lightsBrightness disabled=brightnessControlDisabled}}
   {{/paper-item}}
 
   {{#paper-item action=colorRowAction class="colorRow"}}
     {{paper-icon icon="color-lens"}}
-    <p>Color</p>
+    <p data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip" data-title="Color of the selected lights">Color</p>
   {{/paper-item}}
 
   <div class="relative">
@@ -30,13 +30,13 @@
 
   {{#paper-item}}
     {{paper-icon icon="flare"}}
-    <p>Strobe</p>
+    <p data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip" data-title="Selected lights will flash in sequential order">Strobe</p>
     {{#paper-switch checked=strobeOn disabled=trial skipProxy=trial}} {{strobeOnTxt}} {{/paper-switch}}
   {{/paper-item}}
 
   {{#paper-item}}
     {{paper-icon icon="color-lens"}} {{paper-icon icon="loop" id="loopAddition"}}
-    <p>Colorloop</p>
+    <p data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip" data-title="Selected lights will slowly cycle through all the colors">Colorloop</p>
     {{#paper-switch checked=colorLoopOn disabled=trial skipProxy=trial}} {{colorloopOnTxt}} {{/paper-switch}}
   {{/paper-item}}
 {{/paper-list}}

app/pods/components/music-tab/component.js

@@ -43,7 +43,7 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
               if(result.streamable === true){
                 result.tracks.forEach(processResult);
               } else {
-                failedSongs.push(result.title)
+                failedSongs.push(result.title);
               }
             }
           },
@@ -146,10 +146,15 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
         if(scrollToSong){
           var playListArea = Em.$('#playListArea');
 
+          // this is just a bad workaround to make sure that the track has been rendered to the playlist
           Em.run.later(()=>{
-            playListArea.animate({
+            var track = Em.$('.track'+index);
-              scrollTop: Em.$('.track'+index).offset().top - playListArea.offset().top + playListArea.scrollTop()
+
-            });
+            if(!Em.isNone(track)) {
+              playListArea.animate({
+                scrollTop: track.offset().top - playListArea.offset().top + playListArea.scrollTop()
+              });
+            }
           }, 1000);
         }
       }
@@ -229,7 +234,11 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
       this.get('beatHistory').clear();
 
       if(repeat === 2){ // repeating one song takes precedence over shuffling
-        nextSong = playQueuePointer;
+        if(playQueuePointer === -1 && playQueueLength > 0) {
+          nextSong = 0;
+        } else {
+          nextSong = playQueuePointer;
+        }
       } else if(shuffle){
         var shufflePlayed = this.get('shufflePlayed');
 

app/pods/components/music-tab/template.hbs

@@ -23,8 +23,7 @@
       {{/if}}
 
       <span class="pull-right">
-            <span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip" data-title="Visualizations" {{action "toggleVisualizations"}}>{{paper-icon icon="remove-red-eye"  class="playerControllIcon"}}
+            <span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip" data-title="Visualizations" {{action "toggleVisualizations"}}>{{paper-icon icon="remove-red-eye"  class="playerControllIcon"}}</span>
-            </span>
             <span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip" data-title="Full screen" {{action "fullscreen"}}>{{paper-icon icon="fullscreen"  class="playerControllIcon"}}
             </span>
           </span>

app/styles/app.scss

@@ -9,6 +9,7 @@ $playerDefaultIconColor: #BBBBBB;
 $footerHeight: 40px;
 $playerBottomHeight: 340px;
 $secondaryThemeColor: #F12B24;
+$glowingText: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF;
 
   // BRIDGE FINDER
 html {
@@ -22,6 +23,12 @@ body {
   position: static;
 }
 
+body.dimmerOn {
+  .navigationItem {
+    text-shadow: $glowingText;
+  }
+}
+
 // temporary HAX...not working in FF
 md-progress-circular[md-mode=indeterminate] .md-spinner-wrapper {
   transform: none !important;
@@ -44,6 +51,9 @@ md-progress-circular[md-mode=indeterminate] .md-spinner-wrapper {
 .settingsItem {
   margin-left: 15px;
   position: relative;
+  display: inline-block;
+  transition: 0.1s all ease-in-out;
+  cursor: pointer;
 }
 
 md-switch[disabled=disabled], md-switch[disabled=disabled] .md-container, md-slider[disabled=disabled] {
@@ -75,9 +85,14 @@ md-switch[disabled=disabled], md-switch[disabled=disabled] .md-container, md-sli
   background: darken(white, 20%);
 }
 
-.settingsItem:hover md-icon.group,
+.settingsItem span:hover {
-.settingsItem:hover md-icon.settings {
+  text-decoration: underline;
-  color: black !important;
+  md-icon.group {
+    color: black !important;
+  }
+  md-icon.settings {
+    color: black !important;
+  }
 }
 
 .ember-app {
@@ -90,10 +105,8 @@ md-switch[disabled=disabled], md-switch[disabled=disabled] .md-container, md-sli
   bottom: 0;
   width: 100%;
   height: $footerHeight;
-  z-index: -1;
   p {
     padding-left: 0;
-    margin-top: 10px;
     text-align: center;
   }
 }
@@ -149,9 +162,11 @@ md-progress-linear {
   background: white;
   box-shadow: 5px 10px 15px 5px rgba(0, 0, 0, 0.3);
   width: 210px;
-  left: -182px;
+  left: -172px;
-  top: 25px;
+  top: 44px;
   padding: 0;
+  border: none;
+  color: black;
 }
 
 .bootstrapTooltip md-icon {
@@ -168,6 +183,14 @@ md-list-item .md-no-style {
   padding: 0;
 }
 
+.lightsTab * .tooltip {
+  left: -20px !important;
+}
+
+.colorRow * .tooltip {
+  left: -7px !important;
+}
+
 #hueControls {
   max-width: 1200px;
   position: relative;
@@ -242,13 +265,15 @@ md-slider.md-default-theme .md-thumb:after {
   box-shadow: 5px 10px 15px 5px rgba(0, 0, 0, 0.3);
   border-radius: 0 0 5px 5px;
   width: 300px;
-  top: 20px;
+  top: 40px;
-  left: -269px;
+  left: -245px;
   position: absolute;
   background-color: white;
   max-height: 400px;
   overflow: auto;
   text-align: left;
+  padding: 0;
+  color: black;
 }
 
 .lightGroup {
@@ -262,8 +287,6 @@ md-slider.md-default-theme .md-thumb:after {
   }
 }
 
-.hueLight {}
-
 .lightInactive {
   cursor: pointer;
   position: relative;
@@ -317,14 +340,9 @@ md-icon {
 }
 
 .addButton {
-  .group-add {
+  width: 100%;
-    color: $secondaryThemeColor;
+  cursor: pointer;
-    margin-right: 15px;
+  margin-left: 10px;
-    font-size: 28px;
-  }
-  .group-add:hover {
-    color: darken(#333333, 5%) !important;
-  }
 }
 
 .removeButton {
@@ -360,6 +378,7 @@ md-toolbar {
 }
 
 .groupSelect {
+  cursor: pointer;
   padding: 10px 0 10px 10px;
   width: 70%;
   font-family: 'Open Sans', sans-serif;
@@ -975,16 +994,35 @@ body.dimmerOn {
   background: #242424;
 }
 
-md-icon.dimmerOn {
+body.dimmerOn #bridgeInput label,
+.group.dimmerOn,
+.settings.dimmerOn,
+.power-settings-new.dimmerOn,
+.brightness-4.dimmerOn,
+.color-lens.dimmerOn,
+.flare.dimmerOn,
+.loop.dimmerOn,
+.library-music.dimmerOn {
   color: inherit !important;
+  text-shadow: $glowingText;
+  opacity: 1 !important;
+}
+
+body.dimmerOn {
+  .md-track, .color {
+    background: white !important;
+  }
 }
 
 .dimmerWrapper {
   font-size: 40px;
-  position: relative;
+  position: absolute;
-  top: 7px;
+  left: -50px;
-  margin-right: 20px;
+  bottom: -16px;
   cursor: pointer;
+  i.active {
+    text-shadow: $glowingText;
+  }
 }
 
 .noUi-value-vertical {