adding font awesome, starting on soundcloud integration

This commit is contained in:
Egor Philippov 2015-10-09 16:50:35 -07:00
parent 4c1a091f70
commit 242bef45be
13 changed files with 100 additions and 32 deletions

View file

@ -49,15 +49,14 @@ export default Em.Component.extend({
selectedLights: [],
onIsShowingAddGroupsModalChange: function(){
if(this.get('isShowingAddGroupsModal')){
onIsShowingModalChange: function(){
if(this.get('isShowingModal')){
this.setProperties({
selectedLights: [],
groupName: null
});
}
this.setProperties({
selectedLights: [],
groupName: null
});
}.observes('isShowingAddGroupsModal'),
}.observes('isShowingModal'),
saveDisabled: function(){
return Em.isNone(this.get('groupName')) || Em.isEmpty(this.get('selectedLights')) || Em.isEmpty(this.get('groupName').trim());

View file

@ -1,4 +1,4 @@
{{#if isShowingAddGroupsModal}}
{{#if isShowingModal}}
{{#modal-dialog close="close" alignment="center" translucentOverlay=true}}
{{light-group lightsData=lightsData activeLights=selectedLights action= 'clickLight' apiURL=apiURL noHover=true}}

View file

@ -0,0 +1,12 @@
import Em from 'ember';
export default Em.Component.extend({
actions: {
close: function () {
this.sendAction();
}
},
saveDisabled: function(){
return Em.isNone(this.get('groupName')) || Em.isEmpty(this.get('selectedLights')) || Em.isEmpty(this.get('groupName').trim());
}.property('groupName', 'selectedLights.[]')
});

View file

@ -0,0 +1,10 @@
{{#if isShowingModal}}
{{#modal-dialog close="close" alignment="center" translucentOverlay=true}}
<p>Enter a SoundCloud URL for a track or a playlist/set</p>
{{#paper-button action="close"}}Close{{/paper-button}}
{{#paper-button class="pull-right" action="delete" primary=true}}Add Music{{/paper-button}}
{{/modal-dialog}}
{{/if}}

View file

@ -1,4 +1,4 @@
{{#if isShowingConfirmDeleteModal}}
{{#if isShowingModal}}
{{#modal-dialog close="close" alignment="center" translucentOverlay=true}}
<p>Are you sure you want to delete group "{{groupName}}"?</p>

View file

@ -8,7 +8,6 @@
{{/each}}
{{/paper-list}}
{{add-group-modal lightsData=lightsData groupsData=groupsData isShowingAddGroupsModal=isShowingAddGroupsModal apiURL=apiURL updateGroupsData=updateGroupsData
action="toggleAddGroupsModal"}}
{{add-group-modal lightsData=lightsData groupsData=groupsData isShowingModal=isShowingAddGroupsModal apiURL=apiURL updateGroupsData=updateGroupsData action="toggleAddGroupsModal"}}
{{delete-group-modal groupName=deleteGroupName groupId=deleteGroupId groupsData=groupsData isShowingConfirmDeleteModal=isShowingConfirmDeleteModal apiURL=apiURL updateGroupsData=updateGroupsData groupIdSelection=groupIdSelection action="toggleConfirmDeleteGroupsModal"}}
{{delete-group-modal groupName=deleteGroupName groupId=deleteGroupId groupsData=groupsData isShowingModal=isShowingConfirmDeleteModal apiURL=apiURL updateGroupsData=updateGroupsData groupIdSelection=groupIdSelection action="toggleConfirmDeleteGroupsModal"}}

View file

@ -16,6 +16,9 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
}.observes('active'),
actions: {
toggleIsShowingAddSoundCloudModal: function() {
this.toggleProperty('isShowingAddSoundCloudModal');
},
toggleDimming: function(){
this.changePlayerControl('dimmerEnabled', !this.get('dimmerEnabled'));
},
@ -199,7 +202,7 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
}
}
},
addAudio: function () {
addLocalAudio: function () {
Em.$('#fileInput').click();
},
shuffleChanged(value) {
@ -223,9 +226,6 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
frequencyChanged(value){
this.changePlayerControl('frequency', value, true);
},
playListAreaAddAudio(){
this.send('addAudio');
},
audioModeChanged(value){
if(value === 1) {
this.startUsingMic();
@ -310,6 +310,7 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
songBeatPreferences[title] = {threshold: this.get('threshold'), decay: this.get('decay'), frequency: this.get('frequency') };
this.set('usingBeatPreferences', true);
this.get('storage').set('huegasm.songBeatPreferences', songBeatPreferences);
},

View file

@ -91,6 +91,7 @@ export default Em.Mixin.create({
audioStream: null,
dimmerOn: false,
dimmerEnabled: false,
isShowingAddSoundCloudModal: false,
notFoundHtml: '<div class="alert alert-danger" role="alert">A microphone was not found.</div>',

View file

@ -38,7 +38,9 @@
<div id="playListControls">
{{#if usingLocalAudio}}
<span data-toggle="tooltip" data-placement="bottom auto" data-title="Add new music" class="pull-right bootstrapTooltip" {{action "addAudio"}}>{{paper-icon icon="add" class="playerControllIcon"}}</span>
<span data-toggle="tooltip" data-placement="bottom auto" data-title="Add local music" class="pull-right bootstrapTooltip" {{action "addLocalAudio"}}>{{paper-icon icon="add" class="playerControllIcon"}}</span>
<span data-toggle="tooltip" data-placement="bottom auto" data-title="Add music from SoundCloud" class="pull-right bootstrapTooltip soundCloudLogoIcon" {{action "toggleIsShowingAddSoundCloudModal"}}>{{fa-icon "soundcloud" classNames="playerControllIcon"}}</span>
<span data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip" id="shuffleTooltip" data-title={{shuffleTooltipTxt}} {{action "shuffleChanged"}}>{{paper-icon icon="shuffle" class=shuffleClass}}</span>
<span data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip" id="repeatTooltip" data-title={{repeatTooltipTxt}} {{action "repeatChanged"}}>{{paper-icon icon=repeatIcon class=repeatClass}}</span>
{{/if}}
@ -54,8 +56,7 @@
</div>
{{else}}
{{#if usingLocalAudio}}
<div id="playListArea"
class={{playListAreaClass}} {{action "playListAreaAddAudio"}} {{action "playListAreaDragOver" on="dragOver"}} {{action "playListAreaDragLeave" on="dragLeave"}} {{action "dropFiles" on="drop"}}>
<div id="playListArea" class={{playListAreaClass}} {{action "addLocalAudio"}} {{action "playListAreaDragOver" on="dragOver"}} {{action "playListAreaDragLeave" on="dragLeave"}} {{action "dropFiles" on="drop"}}>
{{#if (or playQueueEmpty dragging)}}
<div id="dragHere">
{{#if dragging}}
@ -178,4 +179,6 @@
</div>
{{ember-notify closeAfter=5000}}
<div id="dimmer" {{action "toggleDimming"}}></div>
<div id="dimmer" {{action "toggleDimming"}}></div>
{{add-soundcloud-sound-modal action="toggleIsShowingAddSoundCloudModal" isShowingModal=isShowingAddSoundCloudModal}}

View file

@ -2,6 +2,7 @@
@import 'bower_components/bootstrap-sass/assets/stylesheets/_bootstrap';
@import 'ember-modal-dialog/ember-modal-structure';
@import 'ember-modal-dialog/ember-modal-appearance';
@import "bower_components/font-awesome/scss/font-awesome";
$playerHeight: 400px;
$playerDefaultIconColor: #BBBBBB;
@ -26,7 +27,7 @@ body {
}
#settings {
padding-right: 0;
padding-right: 5px;
text-align: right;
z-index: 3;
}
@ -228,11 +229,11 @@ md-slider.md-default-theme .md-thumb:after {
}
#groupList {
box-shadow: 5px 10px 15px 5px rgba(0, 0, 0, .3);
box-shadow: 5px 10px 15px 5px rgba(0, 0, 0, 0.3);
border-radius: 0 0 5px 5px;
width: 300px;
top: 20px;
right: 0;
left: -269px;
position: absolute;
background-color: white;
max-height: 400px;
@ -309,12 +310,15 @@ md-icon {
color: rgba(0, 0, 0, 0.54) !important;
}
.addButton .group-add {
margin-right: 16px;
}
.addButton .group-add:hover {
color: darken(#333333, 5%) !important;
.addButton {
.group-add {
color: $secondaryThemeColor;
margin-right: 15px;
font-size: 28px;
}
.group-add:hover {
color: darken(#333333, 5%) !important;
}
}
.removeButton {
@ -436,7 +440,8 @@ md-switch.md-default-theme.md-checked .md-thumb {
.pull-right.bootstrapTooltip {
.playerControllIcon {
margin: 0;
margin-right: 0;
margin-left: 5px;
}
}
@ -963,3 +968,13 @@ $vibrateblurouter: 2px;
.md-warn {
background: $secondaryThemeColor;
}
.soundCloudLogoIcon {
line-height: 34px;
i {
font-size: 26px;
cursor: pointer;
line-height: 0;
color: #f70 !important;
}
}

View file

@ -19,7 +19,8 @@
"matchMedia": "~0.2.0",
"nouislider": "^8.0.1",
"qunit": "~1.18.0",
"three.js": "~0.72.0"
"three.js": "~0.72.0",
"font-awesome": "~4.4.0"
},
"resolutions": {
"ember": "~2.1.0",

View file

@ -25,6 +25,7 @@
"ember-cli-babel": "^5.0.0",
"ember-cli-content-security-policy": "0.4.0",
"ember-cli-dependency-checker": "^1.0.0",
"ember-cli-font-awesome": "0.1.1",
"ember-cli-htmlbars": "1.0.1",
"ember-cli-htmlbars-inline-precompile": "^0.3.0",
"ember-cli-ic-ajax": "0.2.1",

View file

@ -0,0 +1,26 @@
import { moduleForComponent, test } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';
moduleForComponent('add-soundcloud-sound-modal', 'Integration | Component | add soundcloud sound modal', {
integration: true
});
test('it renders', function(assert) {
assert.expect(2);
// Set any properties with this.set('myProperty', 'value');
// Handle any actions with this.on('myAction', function(val) { ... });
this.render(hbs`{{add-soundcloud-sound-modal}}`);
assert.equal(this.$().text().trim(), '');
// Template block usage:
this.render(hbs`
{{#add-soundcloud-sound-modal}}
template block text
{{/add-soundcloud-sound-modal}}
`);
assert.equal(this.$().text().trim(), 'template block text');
});