From 91206135e44495add70509f2923ad0814dc25992 Mon Sep 17 00:00:00 2001
From: Egor! <ephilippov@absolute.com>
Date: Thu, 13 Oct 2016 17:21:30 -0700
Subject: [PATCH] trying to make CSS more manageable...why so many bugs :(

---
 .../pods/components/hue-controls/component.js |  4 +-
 .../pods/components/hue-controls/template.hbs | 35 +++++-----
 .../pods/components/lights-tab/template.hbs   | 10 +--
 .../pods/components/music-tab/component.js    | 12 ++--
 .../pods/components/music-tab/template.hbs    | 40 ++++++-----
 web/app/styles/app.scss                       | 12 +---
 web/app/styles/dimmer.scss                    | 68 ++++++++++---------
 web/app/styles/hue-controls.scss              |  4 +-
 web/app/styles/huegasm-variables.scss         |  4 +-
 web/app/styles/music-tab.scss                 | 30 ++++----
 web/app/styles/paper.scss                     | 36 ----------
 11 files changed, 104 insertions(+), 151 deletions(-)

diff --git a/web/app/pods/components/hue-controls/component.js b/web/app/pods/components/hue-controls/component.js
index fc90917..35b0a61 100644
--- a/web/app/pods/components/hue-controls/component.js
+++ b/web/app/pods/components/hue-controls/component.js
@@ -177,10 +177,10 @@ export default Component.extend({
             'You may toggle a light\'s state by clicking on it.'
           },
           {
-            element: $('.settings-item')[1],
+            element: '#settings-icon',
             intro: 'A few miscellaneous settings can be found here.<br><br>' +
             '<b>WARNING</b>: clearing application settings will restore the application to its original state. This will even delete your playlist and any saved song beat preferences.',
-            position: 'left'
+            position: 'bottom'
           },
           {
             element: '#dimmer',
diff --git a/web/app/pods/components/hue-controls/template.hbs b/web/app/pods/components/hue-controls/template.hbs
index e4d2783..a259d24 100644
--- a/web/app/pods/components/hue-controls/template.hbs
+++ b/web/app/pods/components/hue-controls/template.hbs
@@ -6,23 +6,24 @@
       {{/each}}
     </div>
     <div id="settings" class="col-xs-2">
-      <div class="settings-item">
-        {{#paper-menu as |menu|}}
-          {{#paper-button target=menu action="toggleMenu" icon-button=true}}
-            {{paper-icon "settings" class=dimmerOnClass}}
-          {{/paper-button}}
-        {{else}}
-          {{#paper-menu-item action="clearBridge"}}
-            <span class="md-menu-align-target">Switch bridge</span>
-          {{/paper-menu-item}}
-          {{#paper-menu-item action="startIntro"}}
-            <span>Restart tutorial</span>
-          {{/paper-menu-item}}
-          {{#paper-menu-item action="clearAllSettings"}}
-            <span>Reset settings</span>
-          {{/paper-menu-item}}
-        {{/paper-menu}}
-      </div>
+      {{#paper-menu as |menu|}}
+        {{#paper-button target=menu action="toggleMenu" icon-button=true}}
+          {{paper-icon "settings" class=dimmerOnClass id="settings-icon" size=3}}
+        {{/paper-button}}
+      {{else}}
+        {{#paper-menu-item action="clearBridge"}}
+          {{paper-icon "settings" class="md-menu-align-target"}}
+          <span>Switch bridge</span>
+        {{/paper-menu-item}}
+        {{#paper-menu-item action="startIntro"}}
+          {{paper-icon "settings" class="md-menu-align-target"}}
+          <span>Restart tutorial</span>
+        {{/paper-menu-item}}
+        {{#paper-menu-item action="clearAllSettings"}}
+          {{paper-icon "settings" class="md-menu-align-target"}}
+          <span>Reset settings</span>
+        {{/paper-menu-item}}
+      {{/paper-menu}}
     </div>
   </div>
 
diff --git a/web/app/pods/components/lights-tab/template.hbs b/web/app/pods/components/lights-tab/template.hbs
index 1899123..9fe1907 100644
--- a/web/app/pods/components/lights-tab/template.hbs
+++ b/web/app/pods/components/lights-tab/template.hbs
@@ -4,19 +4,19 @@
   {{/paper-item}}
 
   {{#paper-item}}
-    {{paper-icon icon="power-settings-new" class=dimmerOnClass}}
+    {{paper-icon "power-settings-new" class=dimmerOnClass}}
     <p data-toggle="tooltip" data-placement="bottom auto" class="bootstrap-tooltip lights-control-tooltip" data-title="Turn the selected lights on/off">Power</p>
     {{#paper-switch checked=lightsOn disabled=trial skipProxy=trial}} {{lightsOnTxt}} {{/paper-switch}}
   {{/paper-item}}
 
   {{#paper-item}}
-    {{paper-icon icon="brightness-4" class=dimmerOnClass}}
+    {{paper-icon "brightness-4" class=dimmerOnClass}}
     <p data-toggle="tooltip" data-placement="bottom auto" class="bootstrap-tooltip lights-control-tooltip" data-title="The brightness level of the selected lights">Brightness</p>
     {{paper-slider flex=true min='1' max='254' value=lightsBrightness disabled=brightnessControlDisabled}}
   {{/paper-item}}
 
   {{#paper-item elementId="color-row"}}
-    {{paper-icon icon="color-lens" class=dimmerOnClass}}
+    {{paper-icon "color-lens" class=dimmerOnClass}}
     <p data-toggle="tooltip" data-placement="bottom auto" class="bootstrap-tooltip lights-control-tooltip" data-title="The color of the selected lights">Color</p>
   {{/paper-item}}
 
@@ -29,13 +29,13 @@
   </div>
 
   {{#paper-item}}
-    {{paper-icon icon="flare" class=dimmerOnClass}}
+    {{paper-icon "flare" class=dimmerOnClass}}
     <p data-toggle="tooltip" data-placement="bottom auto" class="bootstrap-tooltip lights-control-tooltip" 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" class=dimmerOnClass}} {{paper-icon icon="loop" id="loop-addition" class=dimmerOnClass}}
+    {{paper-icon "color-lens" class=dimmerOnClass}} {{paper-icon "loop" id="loop-addition" class=dimmerOnClass}}
     <p data-toggle="tooltip" data-placement="bottom auto" class="bootstrap-tooltip lights-control-tooltip" 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}}
diff --git a/web/app/pods/components/music-tab/component.js b/web/app/pods/components/music-tab/component.js
index 03aab72..9f5c326 100644
--- a/web/app/pods/components/music-tab/component.js
+++ b/web/app/pods/components/music-tab/component.js
@@ -555,7 +555,7 @@ export default Component.extend(helperMixin, visualizerMixin, {
     slideTogglePlayerBottom(){
       let elem = this.$('#player-bottom');
 
-      elem.velocity(elem.is(':visible') ? 'slideUp' : 'slideDown', { duration: 500 });
+      elem.velocity(elem.is(':visible') ? 'slideUp' : 'slideDown', { duration: 300 });
       this.changePlayerControl('playerBottomDisplayed', !this.get('playerBottomDisplayed'));
     },
     goToSong(index, playSong, scrollToSong){
@@ -618,13 +618,9 @@ export default Component.extend(helperMixin, visualizerMixin, {
 
         if(scrollToSong){
           // this is just a bad workaround to make sure that the track has been rendered to the playlist
-          run.later(()=>{
-            let track = $('.track'+index);
-
-            if(!isNone(track) && !isNone(track.offset())) {
-              track.velocity('scroll', { container: $('#play-list-area') });
-            }
-          }, 1000);
+          run.next(this, ()=>{
+            $('.track'+index).velocity('scroll', { container: $('#play-list-area'), duration: 200 });
+          });
         }
       }
     },
diff --git a/web/app/pods/components/music-tab/template.hbs b/web/app/pods/components/music-tab/template.hbs
index 01192d7..45bf565 100644
--- a/web/app/pods/components/music-tab/template.hbs
+++ b/web/app/pods/components/music-tab/template.hbs
@@ -10,13 +10,13 @@
 
         {{#if playQueueNotEmpty}}
           <span data-toggle="tooltip" data-placement="top" class="bootstrap-tooltip" id="prevTooltip"
-                data-title={{prevTooltipTxt}} {{action "previous"}}>{{paper-icon icon="skip-previous" class="player-control-icon"}}</span><!--
+                data-title={{prevTooltipTxt}} {{action "previous"}}>{{paper-icon "skip-previous" class="player-control-icon"}}</span><!--
           -->{{/if}}<!--
                     --><span data-toggle="tooltip" data-placement="top" id="playingTooltip" class="bootstrap-tooltip"
-                             data-title={{playingTooltipTxt}} {{action "play"}}>{{paper-icon icon=playingIcon class="player-control-icon"}}</span><!--
+                             data-title={{playingTooltipTxt}} {{action "play"}}>{{paper-icon playingIcon class="player-control-icon"}}</span><!--
                   -->{{#if playQueueMultiple}}<!--
                 --><span data-toggle="tooltip" data-placement="top" class="bootstrap-tooltip"
-                         data-title="Next" {{action "next" true}}>{{paper-icon icon="skip-next" action="" class="player-control-icon"}}</span><!--
+                         data-title="Next" {{action "next" true}}>{{paper-icon "skip-next" action="" class="player-control-icon"}}</span><!--
                   -->{{/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><!--
@@ -35,13 +35,19 @@
         <span class="dropup">
           <span class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
             <span data-toggle="tooltip" data-placement="top" class="bootstrap-tooltip" data-title="Visualizations" {{action "hideTooltip"}}>
-              {{paper-icon icon="remove-red-eye" class="player-control-icon"}}
+              {{paper-icon "remove-red-eye" class="player-control-icon"}}
             </span>
           </span>
 
           <ul class="dropdown-menu visualizers-menu">
             {{#each visNames as |name|}}
-              <li><a href="#" {{action "setVisName" name}}>{{name}} {{#if (eq currentVisName name)}}{{paper-icon icon="check"}}{{/if}}</a></li>
+              <li>
+                <a href="#" {{action "setVisName" name}}>{{name}}
+                  {{#if (eq currentVisName name)}}
+                    {{paper-icon "check"}}
+                  {{/if}}
+                </a>
+              </li>
             {{/each}}
           </ul>
         </span>
@@ -63,14 +69,6 @@
       <li><a href="#" {{action "addLocalAudio"}}>Local</a></li>
       <li><a href="#" {{action "toggleIsShowingAddSoundCloudModal"}}>SoundCloud</a></li>
     </ul>
-
-    {{!--{{#if (and usingLocalAudio playQueueNotEmpty)}}
-        <div id="extra-options-menu" class="hidden-xs">
-            <span data-toggle="tooltip" data-placement="bottom auto" class="bootstrap-tooltip" id="shuffleTooltip" data-title={{shuffleTooltipTxt}} {{action "shuffleChanged"}}>{{paper-icon icon="shuffle" class=shuffleClass}}</span>
-            <span data-toggle="tooltip" data-placement="bottom auto" class="bootstrap-tooltip" id="repeatTooltip" data-title={{repeatTooltipTxt}} {{action "repeatChanged"}}>{{paper-icon icon=repeatIcon class=repeatClass}}</span>
-            <span data-toggle="tooltip" data-placement="bottom auto" class="bootstrap-tooltip" data-title="Clear playlist" {{action "clearPlaylist"}}>{{paper-icon icon="clear-all" class="player-control-icon"}}</span>
-        </div>
-    {{/if}} --}}
   {{/if}}
 
   {{#if usingMicSupported}}
@@ -78,15 +76,15 @@
   {{/if}}
 
   {{#if usingLocalAudio}}
-    <span data-toggle="tooltip" data-placement="bottom auto" class="bootstrap-tooltip" id="shuffleTooltip" data-title={{shuffleTooltipTxt}} {{action "shuffleChanged"}}>{{paper-icon icon="shuffle" class=shuffleClass}}</span>
-    <span data-toggle="tooltip" data-placement="bottom auto" class="bootstrap-tooltip" id="repeatTooltip" data-title={{repeatTooltipTxt}} {{action "repeatChanged"}}>{{paper-icon icon=repeatIcon class=repeatClass}}</span>
-    <span data-toggle="tooltip" data-placement="bottom auto" class="bootstrap-tooltip" data-title="Clear playlist" {{action "clearPlaylist"}}>{{paper-icon icon="clear-all" class="player-control-icon"}}</span>
+    <span data-toggle="tooltip" data-placement="bottom auto" class="bootstrap-tooltip" id="shuffleTooltip" data-title={{shuffleTooltipTxt}} {{action "shuffleChanged"}}>{{paper-icon "shuffle" class=shuffleClass}}</span>
+    <span data-toggle="tooltip" data-placement="bottom auto" class="bootstrap-tooltip" id="repeatTooltip" data-title={{repeatTooltipTxt}} {{action "repeatChanged"}}>{{paper-icon repeatIcon class=repeatClass}}</span>
+    <span data-toggle="tooltip" data-placement="bottom auto" class="bootstrap-tooltip" data-title="Clear playlist" {{action "clearPlaylist"}}>{{paper-icon "clear-all" class="player-control-icon"}}</span>
   {{/if}}
 </div>
 
 {{#if usingMicAudio}}
   <div id="play-area-mic" class="{{if dimmerOn "dimmerOn"}}">
-    {{paper-icon icon="mic" class=dimmerOnClass}}
+    {{paper-icon "mic" class=dimmerOnClass}}
   </div>
 {{else}}
   {{#if usingLocalAudio}}
@@ -99,7 +97,7 @@
             Add your music files here
           {{/if}}
         </div>
-        {{paper-icon icon="library-music" class=dimmerOnClass}}
+        {{paper-icon "library-music" class=dimmerOnClass}}
       {{/if}}
 
       {{#each playQueue as |item index|}}
@@ -125,7 +123,7 @@
             {{/if}}
           </div>
 
-          <span data-toggle="tooltip" data-placement="bottom auto" data-title="Remove" data-container="body" class="audio-remove-button pointer bootstrap-tooltip" {{action "removeAudio" index bubbles=false}}>{{paper-icon icon="close"}}</span>
+          <span data-toggle="tooltip" data-placement="bottom auto" data-title="Remove" data-container="body" class="audio-remove-button pointer bootstrap-tooltip" {{action "removeAudio" index bubbles=false}}>{{paper-icon "close"}}</span>
         </div>
       {{/each}}
     </div>
@@ -136,7 +134,7 @@
 
 <div id="slide-toggle" class="text-center pointer row" {{action "slideTogglePlayerBottom"}}>
 <div class="col-xs-offset-5 col-xs-2">
-  {{paper-icon icon=beatDetectionAreaArrowIcon id="beat-detection-area-arrow-icon"}}
+  {{paper-icon beatDetectionAreaArrowIcon id="beat-detection-area-arrow-icon"}}
 </div>
 </div>
 
@@ -144,7 +142,7 @@
   <div id="beat-area" class="col-sm-7 col-xs-12">
     {{#if usingBeatPreferences}}
       <span data-toggle="tooltip" data-placement="bottom" data-title="Using the saved sensitivity preference from the last time you listened to this song" class="bootstrap-tooltip" id="save-beat-preferences-star">
-      {{paper-icon class=dimmerOnClass icon="star"}}
+      {{paper-icon "star" class=dimmerOnClass}}
       </span>
     {{/if}}
 
diff --git a/web/app/styles/app.scss b/web/app/styles/app.scss
index 217e859..6923725 100644
--- a/web/app/styles/app.scss
+++ b/web/app/styles/app.scss
@@ -58,18 +58,12 @@ body, button {
 }
 
 #settings {
-  padding-right: 5px;
-  text-align: right;
   z-index: 3;
-  font-size: 16px;
+  padding-right: 0;
+  text-align: right;
 }
 
-.settings-item:nth-of-type(2){
-  margin-left: 10px;
-}
-
-.settings-item .settings::before {
-  font-size: 28px;
+.settings::before {
   transition: 0.1s all ease-in-out;
 }
 
diff --git a/web/app/styles/dimmer.scss b/web/app/styles/dimmer.scss
index f6d83c7..750d7eb 100644
--- a/web/app/styles/dimmer.scss
+++ b/web/app/styles/dimmer.scss
@@ -1,69 +1,73 @@
 @import 'huegasm-variables';
 
 div.dimmerOn {
-  color: white !important;
-  background: #171717 !important;
+  color: $whitish !important;
+  background: $blackish !important;
 }
 
 html.dimmerOn {
   color: white;
-  background: #242424;
+  background: $blackish;
 }
 
 body.dimmerOn {
-  color: white;
-  background: #242424;
+  color: $whitish;
+  background: $blackish;
   .md-track {
-    background: white;
+    background: $whitish;
   }
   .color {
     border: 1px solid white;
   }
+  .playlist-item, #add-music-choices, .add-new-music {
+    color: $whitish;
+    background-color: $dimmerOnButtonColor;
+  }
+  #add-music-choices {
+    a {
+      color: $whitish;
+      &:hover {
+        background-color: darken($dimmerOnButtonColor, 10%) !important;
+      }
+    }
+  }
   .playlist-item {
-    color: #cdcdcd;
-    background: $dimmerOnButtonColor;
-  }
-  .playlist-item.active {
-    background: darken($dimmerOnButtonColor, 15%) !important;
-  }
-  .playlist-item:hover {
-    background: darken($dimmerOnButtonColor, 10%);
-  }
-  .playlist-item .close {
-    color: #cdcdcd !important;
-  }
-  .playlist-item .close:hover {
-    color: white !important;
+    &.active {
+      background: darken($dimmerOnButtonColor, 15%) !important;
+    }
+    &:hover {
+      background: darken($dimmerOnButtonColor, 10%);
+    }
+    .close {
+      color: $whitish !important;
+      &:hover {
+        color: white !important;
+      }
+    }
   }
   svg {
     -webkit-filter: drop-shadow(0 0 5px #228DFF);
   }
   md-input-container {
     label {
-      color: white;
+      color: $whitish;
     }
     input {
-      border-bottom-color: white !important;
+      border-bottom-color: $whitish !important;
     }
     input {
-      color: white !important;
+      color: $whitish !important;
     }
   }
-  .add-new-music {
-    background: $dimmerOnButtonColor
-  }
   .add-new-music:hover {
     background: darken($dimmerOnButtonColor, 5%);
   }
-  #extra-options-menu {
-    opacity: 0.8;
-  }
-  #extra-options-menu:hover {
-    background: rgba(0, 0, 0, 0.9);
-  }
   .popover-content {
     color: black !important;
   }
+  .md-bar {
+    background-color: darken(white, 60%) !important;
+  }
 }
 
 .power-settings-new.dimmerOn,
diff --git a/web/app/styles/hue-controls.scss b/web/app/styles/hue-controls.scss
index 3ef7fbf..18b0faa 100644
--- a/web/app/styles/hue-controls.scss
+++ b/web/app/styles/hue-controls.scss
@@ -71,7 +71,7 @@
 
 #loop-addition {
   position: absolute;
-  left: 18px;
-  top: 13px;
+  left: 35px;
+  top: 15px;
   font-size: 16px;
 }
diff --git a/web/app/styles/huegasm-variables.scss b/web/app/styles/huegasm-variables.scss
index 7e363ca..5c8aafc 100644
--- a/web/app/styles/huegasm-variables.scss
+++ b/web/app/styles/huegasm-variables.scss
@@ -4,4 +4,6 @@ $footerHeight: 45px;
 $playerBottomHeight: 255px;
 $secondaryThemeColor: #F12B24;
 $glowingText: 0 0 2px #fff, 0 0 8px #fff, 0 0 20px #228DFF;
-$dimmerOnButtonColor: #404040;
\ No newline at end of file
+$dimmerOnButtonColor: #404040;
+$blackish: #242424;
+$whitish: #e0e0e0;
\ No newline at end of file
diff --git a/web/app/styles/music-tab.scss b/web/app/styles/music-tab.scss
index bedaaaf..a3d7487 100644
--- a/web/app/styles/music-tab.scss
+++ b/web/app/styles/music-tab.scss
@@ -365,27 +365,24 @@
   font-size: 20px;
 }
 
-#extra-options-menu {
-  z-index: 1;
-  background: rgba(0, 0, 0, 0.5);
-  padding: 3px 15px;
-  position: absolute;
-  bottom: -39px;
-  right: 17px;
-  border-radius: 0 0 5px 5px;
-}
-
-#extra-options-menu:hover {
-  opacity: 1;
-  background: rgba(0, 0, 0, 0.8);
-}
-
 .check {
   margin-left: 10px;
   position: relative;
   top: -4px;
 }
 
+.close {
+  font-size: 18px !important;
+  color: rgb(51, 51, 51);
+  display: none;
+  opacity: 1;
+  text-shadow: none;
+  &:hover {
+    color: darken(#333333, 5%) !important;
+    opacity: 1
+  }
+}
+
 // mobile overrides
 @media(max-width:767px) {
   #seek-slider {
@@ -394,9 +391,6 @@
       opacity: 1 !important;
     }
   }
-  .settings-item:nth-of-type(2){
-    margin-left: 0;
-  }
   #seek-slider {
     margin-bottom: 15px;
   }
diff --git a/web/app/styles/paper.scss b/web/app/styles/paper.scss
index 75ca4ec..b50bf44 100644
--- a/web/app/styles/paper.scss
+++ b/web/app/styles/paper.scss
@@ -35,39 +35,11 @@ md-progress-linear {
   margin-bottom: 50px;
 }
 
-.settings-item span:hover {
-  text-decoration: underline;
-  md-icon.settings {
-    color: black !important;
-  }
-}
-
-.settings-item {
-  position: relative;
-  display: inline-block;
-  transition: 0.1s all ease-in-out;
-  cursor: pointer;
-  span md-icon {
-    position: relative;
-    bottom: 5px;
-    right: 5px;
-  }
-}
-
 .bootstrap-tooltip md-icon {
-  font-size: 22px;
   cursor: pointer;
   -webkit-transform: translate3d(0, 0, 0); // hack for chrome to force hardware acceleration and stop flickering
 }
 
-md-list {
-  padding: 0;
-}
-
-md-list-item .md-no-style {
-  padding: 0;
-}
-
 md-slider {
   cursor: pointer;
 }
@@ -77,10 +49,6 @@ md-slider.md-default-theme .md-thumb:after {
   background-color: $secondaryThemeColor;
 }
 
-.paper-sidenav {
-  overflow: visible;
-}
-
 md-icon {
   color: rgba(0, 0, 0, 0.54) !important;
 }
@@ -89,10 +57,6 @@ md-toolbar {
   background-color: inherit !important;
 }
 
-md-switch.md-default-theme.md-checked .md-bar {
-  background-color: rgba(241, 43, 36, 0.5);
-}
-
 md-switch.md-default-theme.md-checked .md-thumb {
   background-color: $secondaryThemeColor;
 }