more mobile improvements

mobile/app/pods/components/hue-controls/component.js

@@ -21,9 +21,25 @@ export default Component.extend({
 
   lightsTabSelected: computed.equal('selectedTab', 0),
   musicTabSelected: computed.equal('selectedTab', 1),
+  dimmerOn: false,
 
   dimmerOnClass: computed('dimmerOn', function(){
-    return this.get('dimmerOn') ? 'dimmerOn md-menu-origin' : 'md-menu-origin';
+    let dimmerOn = this.get('dimmerOn'),
+      storage = this.get('storage'),
+      dimmerOnClass = 'md-menu-origin';
+
+    if (dimmerOn) {
+      $('body').addClass('dimmerOn');
+      $('html').addClass('dimmerOn');
+      dimmerOnClass += ' dimmerOn';
+    } else {
+      $('body').removeClass('dimmerOn');
+      $('html').removeClass('dimmerOn');
+    }
+
+    storage.set('huegasm.dimmerOn', dimmerOn);
+
+    return dimmerOnClass;
   }),
 
   ready: computed('lightsData', 'trial', function() {
@@ -53,11 +69,17 @@ export default Component.extend({
   init() {
     this._super(...arguments);
 
+    let storage = this.get('storage');
+
     if(!this.get('trial')) {
       this.updateLightData();
       this.set('lightsDataIntervalHandle', setInterval(this.updateLightData.bind(this), 2000));
     }
 
+    if (!isNone(storage.get('huegasm.dimmerOn'))) {
+      this.set('dimmerOn', storage.get('huegasm.dimmerOn'));
+    }
+
     if (!isNone(this.get('storage').get('huegasm.selectedTab'))) {
       this.set('selectedTab', this.get('storage').get('huegasm.selectedTab'));
     }
@@ -217,7 +239,7 @@ export default Component.extend({
         onFinish();
         dimmer.popover({
           trigger: 'manual',
-          placement: 'top',
+          placement: 'right',
           content: 'Click on this icon to toggle the dark theme.'
         }).popover('show');
 
@@ -237,6 +259,9 @@ export default Component.extend({
           $('.introjs-tooltip').velocity('scroll');
         }, 500);
       }).onexit(onExit).oncomplete(onFinish).start();
+    },
+    toggleDimmer(){
+      this.toggleProperty('dimmerOn');
     }
   }
 });

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

@@ -1,8 +1,11 @@
 {{#if ready}}
   <div id="navigation">
+    <div id="dimmer" {{action "toggleDimmer"}} class={{dimmerOnClass}}></div>
+
     {{#each tabData as |tab|}}
       <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">
         {{paper-icon "settings" class=dimmerOnClass id="settings-icon" size=28}}

mobile/app/pods/components/huegasm-app/component.js

@@ -2,10 +2,7 @@ import Ember from 'ember';
 
 const {
   Component,
-  computed,
+  isEmpty
-  isEmpty,
-  isNone,
-  $
 } = Ember;
 
 export default Component.extend({
@@ -13,31 +10,6 @@ export default Component.extend({
   bridgeUsername: null,
   trial: false,
   storage: null,
-  dimmerOn: false,
-  ready: false,
-
-  year: computed(function(){
-    return new Date().getFullYear();
-  }),
-
-  dimmerOnClass: computed('dimmerOn', function(){
-    let dimmerOn = this.get('dimmerOn'),
-      storage = this.get('storage'),
-      dimmerOnClass = null;
-
-    if (dimmerOn) {
-      $('body').addClass('dimmerOn');
-      $('html').addClass('dimmerOn');
-      dimmerOnClass = 'active';
-    } else {
-      $('body').removeClass('dimmerOn');
-      $('html').removeClass('dimmerOn');
-    }
-
-    storage.set('huegasm.dimmerOn', dimmerOn);
-
-    return dimmerOnClass;
-  }),
 
   init(){
     this._super(...arguments);
@@ -45,24 +17,11 @@ export default Component.extend({
     let storage = new window.Locally.Store({compress: true});
     this.set('storage', storage);
 
-    if (!isNone(storage.get('huegasm.dimmerOn'))) {
-      this.set('dimmerOn', storage.get('huegasm.dimmerOn'));
-    }
-
     if (!isEmpty(storage.get('huegasm.bridgeIp')) && !isEmpty(storage.get('huegasm.bridgeUsername'))) {
       this.setProperties({
         bridgeIp: storage.get('huegasm.bridgeIp'),
         bridgeUsername: storage.get('huegasm.bridgeUsername')
       });
     }
-  },
-
-  actions: {
-    toggleDimmer(){
-      this.toggleProperty('dimmerOn');
-    },
-    isReady(){
-      this.set('ready', true);
-    }
   }
 });

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

@@ -1,39 +1,5 @@
 {{#if bridgeUsername}}
   {{hue-controls bridgeIp=bridgeIp bridgeUsername=bridgeUsername trial=trial dimmerOn=dimmerOn storage=storage}}
 {{else}}
-  {{#if ready}}
+  {{bridge-finder bridgeIp=bridgeIp bridgeUsername=bridgeUsername trial=trial storage=storage}}
-    {{bridge-finder bridgeIp=bridgeIp bridgeUsername=bridgeUsername trial=trial storage=storage}}
+{{/if}}
-  {{else}}
-    <div class="ready-block">
-      <div class="title">
-        <img src="assets/images/logo.png" alt="Huegasm">
-      </div>
-
-      <p id="intro">
-        Your lights, meet your music. Huegasm.
-      </p>
-      <p id="intro-paragraph">
-        Huegasm is a free web application for managing and synchronizing your <a target="_blank" href="http://www2.meethue.com">Philips Hue lights</a> with the beat of your music.
-      </p>
-
-      <div class="embed-container-wrapper">
-        <div class="embed-container">
-          <iframe width="560" height="315" src="https://www.youtube.com/embed/zi9J6Qg-MPw" frameborder="0" allowfullscreen></iframe>
-        </div>
-      </div>
-      {{paper-button raised=true primary=true onClick=(action "isReady") class="go-button center-block" label="Go!"}}
-    </div>
-  {{/if}}
-{{/if}}
-
-<footer id="footer">
-   <div id="dimmer" {{action "toggleDimmer"}} class={{dimmerOnClass}}></div>
-
-  <div id="footer-text">
-    © {{year}}
-
-    <a href="http://www.egorphilippov.me" target="_blank" rel="noopener noreferrer">
-      Egor Philippov
-    </a>
-  </div>
-</footer>

mobile/app/pods/components/light-group/component.js

@@ -4,10 +4,8 @@ const {
   A,
   Component,
   computed,
-  isEmpty,
   isNone,
-  observer,
+  observer
-  $
 } = Ember;
 
 export default Component.extend({

mobile/app/styles/app.scss

@@ -16,55 +16,24 @@
 @import 'music-tab';
 @import 'noui-slider';
 
-html {
+[data-ember-action] {
-  min-height: 100%;
+  cursor: pointer;
-  height: auto;
+  text-decoration: none;
 }
 
-body {
+-webkit-tap-highlight-color {
-  margin-bottom: $footerHeight;
+  rgba: (0, 0, 0, 0);
-  position: static;
 }
 
 body, button {
   font-family: 'Slabo 27px', serif;
 }
 
-.ember-app {
-  padding-bottom: 50px;
-}
-
-#footer {
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  width: 100%;
-  text-align: center;
-  height: $footerHeight;
-}
-
-#footer-text {
-  display: inline-block;
-  position: relative;
-  bottom: 10px;
-  a {
-    margin-left: 5px;
-  }
-}
-
 .alert {
   margin-bottom: 0;
   border: none;
 }
 
-
-.title {
-  margin-bottom: 20px;
-  img {
-    width: 200px;
-  }
-}
-
 button.md-warn {
   background: $secondaryThemeColor;
 }
@@ -80,12 +49,18 @@ div.ember-modal-dialog {
   }
 }
 
+.title {
+  margin-bottom: 30px;
+  img {
+    width: 200px;
+  }
+}
+
 .dropdown-menu {
   font-size: 14px;
   a {
     line-height: 2 !important;
   }
-
 }
 // fancy webkit scrollbars
 ::-webkit-scrollbar {

mobile/app/styles/bridge-finder.scss

@@ -15,16 +15,7 @@
   margin: 30px auto;
 }
 
-#intro {
+#bridge-finder {
-  font-size: 22px;
-}
-
-#intro-paragraph {
-  margin-bottom: 20px;
-  font-size: 16px;
-}
-
-#bridge-finder, .ready-block {
   text-align: center;
   padding: 10px 15px 0;
   font-size: 16px;
@@ -33,41 +24,3 @@
 #bridge-finder .md-bar {
   background-color: $secondaryThemeColor !important;
 }
-
-// preloading image
-.ready-block:after {
-  display: none;
-  content: url(images/pressButtonBridge.png);
-}
-
-.embed-container {
-  position:relative;
-  padding-bottom:56.25%;
-  padding-top:30px;
-  height:0;
-  overflow:hidden;
-}
-
-.embed-container-wrapper {
-  max-width: 550px;
-  margin: auto;
-}
-
-.embed-container iframe, .embed-container object, .embed-container embed {
-  position:absolute;
-  top:0;
-  left:0;
-  width:100%;
-  height:100%;
-}
-
-.go-button {
-  margin: 20px 0;
-  border-radius: 100% !important;
-  width: 100px;
-  height: 100px;
-  font-size: 28px;
-  &:hover {
-    background: darken(#3f51b5, 10%) !important;
-  }
-}

mobile/app/styles/dimmer.scss

@@ -69,7 +69,6 @@ body.dimmerOn {
   }
 }
 
-
 .paper-icon.dimmerOn {
   color: inherit !important;
   text-shadow: $glowingText;
@@ -77,9 +76,9 @@ body.dimmerOn {
 }
 
 #dimmer {
-  display: inline-block;
+  float: left;
-  width: 40px;
+  width: 30px;
-  height: 40px;
+  height: 30px;
-  background: url(images/huegasm.png) center center no-repeat;
+  background: url(images/huegasm.png) center center no-repeat !important;
-  background-size: 40px 40px;
+  background-size: 30px 30px !important;
 }

mobile/app/styles/huegasm-variables.scss

@@ -1,6 +1,5 @@
 $playerHeight: 400px;
 $playerDefaultIconColor: #BBBBBB;
-$footerHeight: 50px;
 $playerBottomHeight: 255px;
 $secondaryThemeColor: #F12B24;
 $glowingText: 0 0 2px #fff, 0 0 4px #fff, 0 0 20px #228DFF;

mobile/app/styles/music-tab.scss

@@ -9,13 +9,11 @@
 #light-option {
   text-align: left !important;
   top: 20%;
-  -webkit-transform: translateY(-20%);
-  transform: translateY(-20%);
 }
 
 #music-tab {
   padding: 0;
-  margin: 10px 0 $footerHeight + 20px;
+  margin: 10px 0 20px;
 }
 
 #slide-toggle {
@@ -369,4 +367,8 @@
   .beat-option {
     text-align: center !important;
   }
+  #save-beat-preferences-star {
+    right: 5px;
+    left: initial;
+  }
 }

mobile/app/styles/paper.scss

@@ -45,6 +45,6 @@ md-switch.md-default-theme.md-checked .md-thumb {
 
 @media(max-width:500px) {
   md-checkbox .md-label {
-    width: 100px;
+    width: 70px;
   }
 }

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

@@ -10,7 +10,7 @@
       </div>
 
       <p id="intro">
-        Your lights, meet your music. Huegasm.
+        Your lights meet your music.
       </p>
       <p id="intro-paragraph">
         Huegasm is a free web application for managing and synchronizing your <a target="_blank" href="http://www2.meethue.com">Philips Hue lights</a> with the beat of your music.

web/app/styles/music-tab.scss

@@ -9,8 +9,6 @@
 #light-option {
   text-align: left !important;
   top: 20%;
-  -webkit-transform: translateY(-20%);
-  transform: translateY(-20%);
   .tooltip {
     margin-top: 5px !important;
   }
@@ -404,4 +402,8 @@
   .close {
     display: block;
   }
+  #save-beat-preferences-star {
+    right: 5px;
+    left: initial;
+  }
 }

web/app/styles/paper.scss

@@ -57,6 +57,9 @@ md-switch.md-default-theme.md-checked .md-thumb {
 
 @media(max-width:500px) {
   md-checkbox .md-label {
-    width: 100px;
+    width: 70px;
+  }
+  #save-beat-preferences-star {
+    right: 5px;
   }
 }