update uislider, remove fancy speaker from mobile, active lights overflow if they don't fit on a single line, dont alert lights on hover if they're user disabled, new ember paper should fix slider issues
This commit is contained in:
Egor
parent
8a25407680
commit
261d2951ab
15 changed files with 19 additions and 149 deletions
|
|
@ -125,9 +125,10 @@ export default Component.extend({
|
|||
}
|
||||
},
|
||||
lightStartHover(id) {
|
||||
let hoveredLight = this.get('lightsList').filter(function (light) {
|
||||
return light.activeClass !== 'unreachable' && light.id === id[0];
|
||||
});
|
||||
let activeLights = this.get('activeLights'),
|
||||
hoveredLight = this.get('lightsList').filter(function (light) {
|
||||
return light.activeClass !== 'unreachable' && light.id === id[0] && activeLights.indexOf(id) !== -1;
|
||||
});
|
||||
|
||||
if (!isEmpty(hoveredLight) && this.get('noHover') !== true) {
|
||||
$.ajax(this.get('apiURL') + '/lights/' + id + '/state', {
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
margin: 5px auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
.tooltip.top {
|
||||
margin-top: 1px;
|
||||
margin-left: 2px;
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
"ember-cli-htmlbars": "^1.0.1",
|
||||
"ember-cli-htmlbars-inline-precompile": "^0.3.1",
|
||||
"ember-cli-inject-live-reload": "^1.3.1",
|
||||
"ember-cli-nouislider": "^0.12.0",
|
||||
"ember-cli-nouislider": "^0.13.0",
|
||||
"ember-cli-release": "0.2.8",
|
||||
"ember-cli-shims": "^1.0.2",
|
||||
"ember-cli-sass": "^6.0.0",
|
||||
|
|
@ -40,7 +40,6 @@
|
|||
"ember-resolver": "^2.0.3",
|
||||
"ember-truth-helpers": "^1.2.0",
|
||||
"ember-source": "^2.11.0",
|
||||
"loader.js": "^4.0.7",
|
||||
"nouislider": "^9.0.0"
|
||||
"loader.js": "^4.0.7"
|
||||
}
|
||||
}
|
||||
|
|
@ -195,12 +195,6 @@ export default Component.extend({
|
|||
'<i><b>TIP</b>: Your sensitivity settings are saved per song as indicated by the red star icon in the top left corner. These settings they will be restored if you ever listen to the same song again.</i>',
|
||||
position: 'top'
|
||||
},
|
||||
{
|
||||
element: '#beat-container',
|
||||
intro: 'An interactive speaker that will bump when a beat is registered. <br><br>' +
|
||||
'<i><b>TIP</b>: Click on the center of the speaker to simulate a beat.</i>',
|
||||
position: 'top'
|
||||
},
|
||||
{
|
||||
element: '#lights-tab',
|
||||
intro: 'This is the lights tab. Here you\'ll be able to change various light properties:<br>' +
|
||||
|
|
@ -232,7 +226,7 @@ export default Component.extend({
|
|||
|
||||
// it's VERY ugly but it works... the jQuery massacre :'(
|
||||
intro.onchange((element) => {
|
||||
if(element.id === '' || element.id === 'music-tab' || element.id === 'playlist' || element.id === 'player-area' || element.id === 'beat-option-row' || element.id === 'beat-option-button-group' || element.id === 'beat-container' || element.id === 'using-mic-audio-tooltip' || element.nodeName === 'MD-MENU'){
|
||||
if(element.id === '' || element.id === 'music-tab' || element.id === 'playlist' || element.id === 'player-area' || element.id === 'beat-option-row' || element.id === 'beat-option-button-group' || element.id === 'using-mic-audio-tooltip' || element.nodeName === 'MD-MENU'){
|
||||
$('.navigation-item').eq(1).click();
|
||||
} else {
|
||||
$('.navigation-item').eq(0).click();
|
||||
|
|
|
|||
|
|
@ -244,11 +244,6 @@ export default Component.extend(helperMixin, visualizerMixin, {
|
|||
$(event.target).addClass('removed');
|
||||
});
|
||||
|
||||
// prevent space/text selection when the user repeatedly clicks on the center
|
||||
$('#beat-container').on('mousedown', '#beat-speaker-center-inner', function (event) {
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
$(document).keypress((event) => {
|
||||
if (event.which === 32 && event.target.type !== 'text') {
|
||||
this.send('play');
|
||||
|
|
|
|||
|
|
@ -160,23 +160,6 @@
|
|||
<div class="beat-option col-xs-6">
|
||||
{{paper-checkbox value=colorloopMode onChange=(action (mut colorloopMode)) label="Colorloop"}}
|
||||
</div>
|
||||
|
||||
<div id="beat-container" class="col-xs-12">
|
||||
<div class="bezel">
|
||||
<div class="rivet1"></div>
|
||||
<div class="rivet2"></div>
|
||||
<div class="rivet3"></div>
|
||||
<div class="rivet4"></div>
|
||||
<div class="rivet5"></div>
|
||||
<div class="rivet6"></div>
|
||||
<div class="rivet7"></div>
|
||||
<div class="rivet8"></div>
|
||||
|
||||
<div id="beat-speaker-center-outer">
|
||||
<div id="beat-speaker-center-inner" {{action "clickSpeaker"}}></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{music-tab/add-soundcloud-sound-modal action="handleNewSoundCloudURL" isShowingModal=isShowingAddSoundCloudModal}}
|
||||
|
|
@ -9,7 +9,6 @@
|
|||
@import 'bridge-finder';
|
||||
@import 'common';
|
||||
@import 'dimmer';
|
||||
@import 'fancy-speaker';
|
||||
@import 'introjs';
|
||||
@import 'hue-controls';
|
||||
@import 'light-group';
|
||||
|
|
|
|||
|
|
@ -1,98 +0,0 @@
|
|||
$centersize: 80px;
|
||||
$center1size: 205px;
|
||||
$bezelsize: 240px;
|
||||
|
||||
%base {
|
||||
border-radius: 100%;
|
||||
}
|
||||
%rivet {
|
||||
position: absolute;
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
background-color: #555;
|
||||
border-radius: 100%;
|
||||
box-shadow: inset 0 0 3px #000, 0 0 2px #000;
|
||||
}
|
||||
|
||||
#beat-speaker-center-inner {
|
||||
@extend %base;
|
||||
height: $centersize;
|
||||
width: $centersize;
|
||||
position: absolute;
|
||||
bottom: 47px;
|
||||
right: 47px;
|
||||
-webkit-filter: blur(1px);
|
||||
filter: blur(1px);
|
||||
background: rgb(0,0,0);
|
||||
background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 0%, rgba(79,79,79,1) 0%, rgba(0,0,0,1) 100%);
|
||||
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,1)), color-stop(0%,rgba(79,79,79,1)), color-stop(100%,rgba(0,0,0,1)));
|
||||
background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 0%,rgba(79,79,79,1) 0%,rgba(0,0,0,1) 100%);
|
||||
background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 0%,rgba(79,79,79,1) 0%,rgba(0,0,0,1) 100%);
|
||||
background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 0%,rgba(79,79,79,1) 0%,rgba(0,0,0,1) 100%);
|
||||
background: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%,rgba(79,79,79,1) 0%,rgba(0,0,0,1) 100%);
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 1);
|
||||
}
|
||||
#beat-speaker-center-outer {
|
||||
@extend %base;
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: 16px;
|
||||
height: $center1size;
|
||||
width: $center1size;
|
||||
border: 15px solid #333;
|
||||
box-shadow: -3px -3px 15px rgba(0, 0, 0, 0.4), inset -3px -3px 15px rgba(0, 0, 0, 0.5);
|
||||
background: -moz-linear-gradient(130deg, rgba(117, 117, 117, 1) 55%, rgba(220, 220, 220, 1) 100%);
|
||||
background: -webkit-linear-gradient(130deg, rgba(117, 117, 117, 1) 55%, rgba(220, 220, 220, 1) 100%);
|
||||
background: -o-linear-gradient(130deg, rgba(117, 117, 117, 1) 55%, rgba(220, 220, 220, 1) 100%);
|
||||
background: -ms-linear-gradient(130deg, rgba(117, 117, 117, 1) 55%, rgba(220, 220, 220, 1) 100%);
|
||||
background: linear-gradient(130deg, rgba(117, 117, 117, 1) 55%, rgba(220, 220, 220, 1) 100%);
|
||||
}
|
||||
.bezel {
|
||||
@extend %base;
|
||||
margin: 0 auto;
|
||||
height: $bezelsize;
|
||||
width: $bezelsize;
|
||||
position: relative;
|
||||
background-color: #A8A8A8;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.8), inset 3px 3px 10px rgba(0, 0, 0, 0.8), 0 0 2px rgba(0, 0, 0, 0.8), inset 0 0 30px -5px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
.rivet1 {
|
||||
@extend %rivet;
|
||||
top: 6px;
|
||||
left: 50%;
|
||||
}
|
||||
.rivet2 {
|
||||
@extend %rivet;
|
||||
bottom: 6px;
|
||||
left: 50%;
|
||||
}
|
||||
.rivet3 {
|
||||
@extend %rivet;
|
||||
top: 50%;
|
||||
left: 6px;
|
||||
}
|
||||
.rivet4 {
|
||||
@extend %rivet;
|
||||
top: 50%;
|
||||
right: 6px;
|
||||
}
|
||||
.rivet5 {
|
||||
@extend %rivet;
|
||||
top: 18%;
|
||||
left: 13.7%;
|
||||
}
|
||||
.rivet6 {
|
||||
@extend %rivet;
|
||||
top: 18%;
|
||||
right: 13.5%;
|
||||
}
|
||||
.rivet7 {
|
||||
@extend %rivet;
|
||||
bottom: 17%;
|
||||
left: 13.5%;
|
||||
}
|
||||
.rivet8 {
|
||||
@extend %rivet;
|
||||
bottom: 17%;
|
||||
right: 13.5%;
|
||||
}
|
||||
|
|
@ -3,6 +3,7 @@
|
|||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.toggleable-light {
|
||||
|
|
|
|||
|
|
@ -266,11 +266,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
#beat-container {
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#add-music-choices {
|
||||
min-width: initial;
|
||||
right: 0;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<?xml version='1.0' encoding='utf-8'?>
|
||||
<widget id="com.hoboman313.huegasm" version="1.1.7" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
|
||||
<widget id="com.hoboman313.huegasm" version="1.1.8" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
|
||||
<name>Huegasm</name>
|
||||
<content src="index.html" />
|
||||
<plugin name="cordova-plugin-inappbrowser" spec="~1.6.1" />
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
"ember-cli-htmlbars": "^1.0.1",
|
||||
"ember-cli-htmlbars-inline-precompile": "^0.3.1",
|
||||
"ember-cli-inject-live-reload": "^1.3.1",
|
||||
"ember-cli-nouislider": "^0.12.0",
|
||||
"ember-cli-nouislider": "^0.13.0",
|
||||
"ember-cli-release": "^0.2.8",
|
||||
"ember-cli-shims": "^1.0.2",
|
||||
"ember-cli-sass": "^6.0.0",
|
||||
|
|
@ -43,7 +43,6 @@
|
|||
"ember-resolver": "^2.0.3",
|
||||
"ember-truth-helpers": "^1.2.0",
|
||||
"ember-source": "^2.11.0",
|
||||
"loader.js": "^4.0.7",
|
||||
"nouislider": "^9.0.0"
|
||||
"loader.js": "^4.0.7"
|
||||
}
|
||||
}
|
||||
|
|
@ -125,9 +125,10 @@ export default Component.extend({
|
|||
},
|
||||
lightStartHover(id) {
|
||||
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];
|
||||
});
|
||||
let activeLights = this.get('activeLights'),
|
||||
hoveredLight = this.get('lightsList').filter(function (light) {
|
||||
return light.activeClass !== 'unreachable' && light.id === id[0] && activeLights.indexOf(id) !== -1;
|
||||
});
|
||||
|
||||
if (!isEmpty(hoveredLight) && this.get('noHover') !== true) {
|
||||
$.ajax(this.get('apiURL') + '/lights/' + id + '/state', {
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
max-width: 800px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
.tooltip.top {
|
||||
margin-top: 1px;
|
||||
margin-left: 2px;
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
"ember-cli-htmlbars": "^1.0.1",
|
||||
"ember-cli-htmlbars-inline-precompile": "^0.3.1",
|
||||
"ember-cli-inject-live-reload": "^1.3.1",
|
||||
"ember-cli-nouislider": "^0.12.0",
|
||||
"ember-cli-nouislider": "^0.13.0",
|
||||
"ember-cli-release": "0.2.8",
|
||||
"ember-cli-shims": "^1.0.2",
|
||||
"ember-cli-sass": "^6.0.0",
|
||||
|
|
@ -40,7 +40,6 @@
|
|||
"ember-resolver": "^2.0.3",
|
||||
"ember-truth-helpers": "^1.2.0",
|
||||
"ember-source": "^2.11.0",
|
||||
"loader.js": "^4.0.7",
|
||||
"nouislider": "^9.0.0"
|
||||
"loader.js": "^4.0.7"
|
||||
}
|
||||
}
|
||||
Reference in a new issue