diff --git a/web/app/pods/components/bridge-finder/component.js b/web/app/pods/components/bridge-finder/component.js index 32940ca..9424574 100644 --- a/web/app/pods/components/bridge-finder/component.js +++ b/web/app/pods/components/bridge-finder/component.js @@ -10,7 +10,8 @@ const { } = Ember; export default Component.extend({ - classNames: ['container', 'bridge-finder'], + elementId: 'bridge-finder', + classNames: ['container'], bridgeIp: null, trial: false, bridgeUsername: null, @@ -28,9 +29,7 @@ export default Component.extend({ multipleBridgeIps: [], error: false, - isAuthenticating: computed('bridgePingIntervalHandle', function(){ - return this.get('bridgePingIntervalHandle') !== null; - }), + isAuthenticating: computed.notEmpty('bridgePingIntervalHandle'), // try to authenticate against the bridge here onBridgeIpChange: on('init', observer('bridgeIp', function(){ @@ -118,6 +117,7 @@ export default Component.extend({ clearBridgePingIntervalHandle(){ clearInterval(this.get('bridgePingIntervalHandle')); + this.set('bridgePingIntervalHandle', null); }, actions: { diff --git a/web/app/pods/components/bridge-finder/template.hbs b/web/app/pods/components/bridge-finder/template.hbs index a6ec041..b8a409a 100644 --- a/web/app/pods/components/bridge-finder/template.hbs +++ b/web/app/pods/components/bridge-finder/template.hbs @@ -4,14 +4,17 @@ {{#if error}}

Huegasm encountered a critical error while trying to connect to your bridge.

This likely happened because you're using an outdated browser and/or because your browser does not support CORS. Feel free to contact me through the link at the bottom of the page if you feel like this is not the case.
- For the best browsing experience on this site ( and every other one known to man ) please switch to Google Chrome or Firefox

. + For the best browsing experience on this site ( and every other one known to man ) please switch to Google Chrome or Firefox.

{{else}} {{paper-progress-linear warn=true value=bridgeUserNamePingIntervalProgress}} {{#if isAuthenticating}} -

Your bridge IP is {{bridgeIp}}
- Press the button on your bridge to authenticate this application.

+

+ Your bridge IP is {{bridgeIp}} +
+ Press the button on your bridge to authenticate this application. +

{{else}}

You failed to press the button. RETRY

{{/if}} diff --git a/web/app/pods/components/hue-controls/component.js b/web/app/pods/components/hue-controls/component.js index cacc833..619e765 100644 --- a/web/app/pods/components/hue-controls/component.js +++ b/web/app/pods/components/hue-controls/component.js @@ -171,7 +171,7 @@ export default Component.extend({ 'You may toggle a light\'s state by clicking on it.' }, { - element: '#settings-icon', + element: '#settings', intro: 'A few miscellaneous settings can be found here.

' + 'WARNING: clearing application settings will restore the application to its original state. This will even delete your playlist and any saved song beat preferences.', position: 'bottom' @@ -249,6 +249,10 @@ export default Component.extend({ if(elem.html() === ''){ $('.introjs-nextbutton').click(); } + + run.later(this, function() { + $('.introjs-tooltip').velocity('scroll'); + }, 500); }).onexit(onExit).oncomplete(onFinish).start(); } } diff --git a/web/app/pods/components/hue-controls/template.hbs b/web/app/pods/components/hue-controls/template.hbs index 85884e6..572cc3a 100644 --- a/web/app/pods/components/hue-controls/template.hbs +++ b/web/app/pods/components/hue-controls/template.hbs @@ -1,33 +1,34 @@ {{#if ready}} -
-
- {{#each tabData as |tab|}} - {{tab.name}} - {{/each}} -
-
- {{#paper-menu as |menu|}} - {{#paper-button target=menu action="toggleMenu" icon-button=true}} - {{paper-icon "settings" class=dimmerOnClass id="settings-icon"}} - {{/paper-button}} - {{else}} - {{#paper-menu-item action="clearBridge"}} - {{paper-icon "settings" class="md-menu-align-target"}} - Switch bridge - {{/paper-menu-item}} - {{#paper-menu-item action="startIntro"}} - {{paper-icon "settings" class="md-menu-align-target"}} - Restart tutorial - {{/paper-menu-item}} - {{#paper-menu-item action="clearAllSettings"}} - {{paper-icon "settings" class="md-menu-align-target"}} - Reset settings - {{/paper-menu-item}} - {{/paper-menu}} + - {{light-group lightsData=lightsData activeLights=activeLights syncLight=syncLight apiURL=apiURL classNames="horizontal-light-group" dimmerOn=dimmerOn id="active-lights"}} + {{light-group lightsData=lightsData activeLights=activeLights syncLight=syncLight apiURL=apiURL dimmerOn=dimmerOn}} {{lights-tab apiURL=apiURL lightsData=lightsData activeLights=activeLights syncLight=syncLight trial=trial active=lightsTabSelected colorLoopOn=colorLoopOn dimmerOn=dimmerOn}} diff --git a/web/app/pods/components/light-group/component.js b/web/app/pods/components/light-group/component.js index c991ff5..21dc857 100644 --- a/web/app/pods/components/light-group/component.js +++ b/web/app/pods/components/light-group/component.js @@ -9,7 +9,8 @@ const { } = Ember; export default Component.extend({ - classNames: ['light-group'], + elementId: 'active-lights', + classNames: ['light-group', 'horizontal-light-group'], isHovering: false, activeLights: A(), diff --git a/web/app/pods/components/music-tab/mixins/helpers.js b/web/app/pods/components/music-tab/mixins/helpers.js index 50c9a53..24baa45 100644 --- a/web/app/pods/components/music-tab/mixins/helpers.js +++ b/web/app/pods/components/music-tab/mixins/helpers.js @@ -379,7 +379,7 @@ export default Mixin.create({ this.changeTooltipText(type, tooltipTxt); })), - onPrevChange: observer('timeElapsed', 'playQueueNotEmpty', 'playQueue.[]', function() { + onPrevChange: on('init', observer('timeElapsed', 'playQueueNotEmpty', 'playQueue.[]', function() { if(this.get('playQueueNotEmpty')){ let tooltipTxt = 'Previous', type = 'prev'; @@ -389,7 +389,7 @@ export default Mixin.create({ this.changeTooltipText(type, tooltipTxt); } - }), + })), onPlayingChange: on('init', observer('playing', function () { let tooltipTxt = 'Play', type = 'playing'; diff --git a/web/app/pods/components/music-tab/template.hbs b/web/app/pods/components/music-tab/template.hbs index 45bf565..190ed7a 100644 --- a/web/app/pods/components/music-tab/template.hbs +++ b/web/app/pods/components/music-tab/template.hbs @@ -44,7 +44,7 @@
  • {{name}} {{#if (eq currentVisName name)}} - {{paper-icon "check"}} + {{paper-icon "check" class=dimmerOnClass}} {{/if}}
    • diff --git a/web/app/styles/app.scss b/web/app/styles/app.scss index 0ce961e..d1ac42a 100644 --- a/web/app/styles/app.scss +++ b/web/app/styles/app.scss @@ -7,7 +7,6 @@ @import 'bridge-finder'; @import 'common'; @import 'dimmer'; -@import 'ember-notify'; @import 'fancy-speaker'; @import 'introjs'; @import 'hue-controls'; @@ -57,15 +56,6 @@ body, button { border: none; } -#settings { - z-index: 3; - padding-right: 0; - text-align: right; -} - -.settings:before { - transition: 0.1s all ease-in-out; -} .title { margin-bottom: 30px; @@ -89,6 +79,13 @@ div.ember-modal-dialog { } } +.dropdown-menu { + font-size: 14px; + a { + line-height: 2 !important; + } + +} // fancy webkit scrollbars ::-webkit-scrollbar { -webkit-appearance: none; diff --git a/web/app/styles/bridge-finder.scss b/web/app/styles/bridge-finder.scss index 2139190..b693b2a 100644 --- a/web/app/styles/bridge-finder.scss +++ b/web/app/styles/bridge-finder.scss @@ -24,12 +24,16 @@ font-size: 16px; } -.bridge-finder, .ready-block { +#bridge-finder, .ready-block { text-align: center; padding-top: 10px; font-size: 16px; } +#bridge-finder .md-bar { + background-color: $secondaryThemeColor !important; +} + // preloading image .ready-block:after { display: none; diff --git a/web/app/styles/dimmer.scss b/web/app/styles/dimmer.scss index 750d7eb..c59e088 100644 --- a/web/app/styles/dimmer.scss +++ b/web/app/styles/dimmer.scss @@ -19,11 +19,11 @@ body.dimmerOn { .color { border: 1px solid white; } - .playlist-item, #add-music-choices, .add-new-music { + .playlist-item, .dropdown-menu, .add-new-music { color: $whitish; background-color: $dimmerOnButtonColor; } - #add-music-choices { + .dropdown-menu { a { color: $whitish; &:hover { @@ -78,6 +78,7 @@ body.dimmerOn { .group.dimmerOn, .settings.dimmerOn, .mic.dimmerOn, +.check.dimmerOn, .star.dimmerOn, .library-music.dimmerOn { color: inherit !important; diff --git a/web/app/styles/ember-notify.scss b/web/app/styles/ember-notify.scss deleted file mode 100644 index 240a4a2..0000000 --- a/web/app/styles/ember-notify.scss +++ /dev/null @@ -1,102 +0,0 @@ -.ember-notify-default.ember-notify-cn { - position: fixed; - z-index: 5000; - right: 0; - top: 20px; -} - -.ember-notify-default .ember-notify { - display: block; - margin: 10px; - position: relative; - width: 300px; -} - -.ember-notify-default .ember-notify-show { - -webkit-animation-duration: 500ms; - animation-duration: 500ms; - -webkit-animation-name: ember-notify-show; - animation-name: ember-notify-show; - -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275); -} - -.ember-notify-default .ember-notify-hide { - -webkit-animation-duration: 250ms; - animation-duration: 250ms; - -webkit-animation-name: ember-notify-hide; - animation-name: ember-notify-hide; - -webkit-animation-timing-function: cubic-bezier(0.600, -0.280, 0.735, 0.045); - animation-timing-function: cubic-bezier(0.600, -0.280, 0.735, 0.045); -} - -.ember-notify-hide:hover { - -webkit-animation-play-state: paused; - -moz-animation-play-state: paused; - -o-animation-play-state: paused; - animation-play-state: paused; -} - -@-webkit-keyframes ember-notify-show { - from { - right: -310px; - } - to { - right: 0; - } -} - -@keyframes ember-notify-show { - from { - right: -310px; - } - to { - right: 0; - } -} -@-webkit-keyframes ember-notify-hide { - from { - right: 0; - } - to { - right: -310px; - } -} -@keyframes ember-notify-hide { - from { - right: 0; - } - to { - right: -310px; - } -} - -.ember-notify-default .ember-notify .close { - float: right; - cursor: pointer; -} - - -@media only screen and (max-width: 680px) { - .ember-notify-default.ember-notify-cn { - width: 100%; - padding-left: 20px; - box-sizing: border-box; - } - .ember-notify-default .ember-notify { - width: 100%; - float: right; - } -} - -.ember-notify-cn .clearfix { - *zoom: 1; -} -.ember-notify-cn .clearfix:before, -.ember-notify-cn .clearfix:after { - content: " "; - display: table; -} -.ember-notify-cn .clearfix:after { - clear: both; -} \ No newline at end of file diff --git a/web/app/styles/hue-controls.scss b/web/app/styles/hue-controls.scss index 7ca1925..77e3a80 100644 --- a/web/app/styles/hue-controls.scss +++ b/web/app/styles/hue-controls.scss @@ -6,17 +6,13 @@ } .lights-control-tooltip + .tooltip { - left: -20px !important; + left: 0 !important; } #color-row { cursor: pointer; } -#color-row * .tooltip { - left: -7px !important; -} - #hue-controls { max-width: 1200px; position: relative; @@ -28,25 +24,22 @@ content: url(images/colormap.png) url(images/missingArtwork.png) url(images/sc-white.png) url(/favicon-96x96.png) url(images/lights/a19.svg) url(images/lights/a19w.svg) url(images/lights/br30.svg) url(images/lights/br30w.svg) url(images/lights/gu10.svg) url(images/lights/gu10w.svg) url(images/lights/huego.svg) url(images/lights/huegow.svg) url(images/lights/lc_aura.svg) url(images/lights/lc_auraw.svg) url(images/lights/lc_bloom.svg) url(images/lights/lc_bloomw.svg) url(images/lights/lc_iris.svg) url(images/lights/lc_irisw.svg) url(images/lights/lightstrip.svg) url(images/lights/lightstripw.svg) url(images/lights/storylight.svg) url(images/lights/storylightw.svg); } -.navigation { +#navigation { + padding: 10px 0; text-align: center; - padding: 10px 0 0 0; } .navigation-item { font-size: 18px; padding: 0 10px 0 10px; - line-height: 3; -} - -.navigation-item.active { - font-weight: bold; - cursor: default; - text-decoration: none !important; -} - -.navigation-item:hover { - text-decoration: underline; + &.active { + font-weight: bold; + cursor: default; + text-decoration: none !important; + } + &:hover { + text-decoration: underline; + } } .color { @@ -79,3 +72,31 @@ top: 15px; font-size: 16px; } + +#settings { + z-index: 3; + text-align: right; + cursor: pointer; + float: right; + position: relative; +} + +#settings-menu { + position: absolute; + box-shadow: 1px 10px 15px 1px rgba(0, 0, 0, 0.3); + left: -135px; + top: 25px; + border: none; + padding: 0; +} + +#settings-icon { + transition: 0.1s all ease-in-out; + &:hover { + -webkit-transform: scale(1.1); + transform: scale(1.1); + } + &:before { + transition: 0.1s all ease-in-out; + } +} diff --git a/web/app/styles/huegasm-variables.scss b/web/app/styles/huegasm-variables.scss index 5c8aafc..c59a2ef 100644 --- a/web/app/styles/huegasm-variables.scss +++ b/web/app/styles/huegasm-variables.scss @@ -3,7 +3,7 @@ $playerDefaultIconColor: #BBBBBB; $footerHeight: 45px; $playerBottomHeight: 255px; $secondaryThemeColor: #F12B24; -$glowingText: 0 0 2px #fff, 0 0 8px #fff, 0 0 20px #228DFF; +$glowingText: 0 0 2px #fff, 0 0 4px #fff, 0 0 2px #228DFF; $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 a3d7487..2496a6d 100644 --- a/web/app/styles/music-tab.scss +++ b/web/app/styles/music-tab.scss @@ -383,6 +383,11 @@ } } +.ember-notify-default.ember-notify-cn { + top: 0; + bottom: initial; +} + // mobile overrides @media(max-width:767px) { #seek-slider { @@ -397,4 +402,4 @@ .beat-option { text-align: center !important; } -} \ No newline at end of file +} diff --git a/web/app/styles/noui-slider.scss b/web/app/styles/noui-slider.scss index 6c2e569..651bf6b 100644 --- a/web/app/styles/noui-slider.scss +++ b/web/app/styles/noui-slider.scss @@ -34,7 +34,7 @@ width: 0.4em; height: 1.3em; left: -0.071em; - top: -0.500em; + top: -0.550em; transition-duration: 0.1s; background: $playerDefaultIconColor !important; } @@ -56,4 +56,4 @@ height: 200px; margin-top: 10px; margin-bottom: 15px; -} \ No newline at end of file +} diff --git a/web/app/styles/paper.scss b/web/app/styles/paper.scss index b50bf44..6f23229 100644 --- a/web/app/styles/paper.scss +++ b/web/app/styles/paper.scss @@ -60,3 +60,9 @@ md-toolbar { md-switch.md-default-theme.md-checked .md-thumb { background-color: $secondaryThemeColor; } + +@media(max-width:500px) { + md-checkbox .md-label { + width: 100px; + } +} diff --git a/web/public/humans.txt b/web/public/humans.txt index 1408b60..d5c830d 100644 --- a/web/public/humans.txt +++ b/web/public/humans.txt @@ -6,6 +6,7 @@ Location: Vancouver, Canada. /* THANKS */ Edmond Cheung - favicons + huegasm logo Liviu Antonescu - filming + video editing of the intro +Olamide Omorodion - business consultation /* SITE */ Last update: 2015