From 3c4603c91afd55d3a68f9a797a5b3af7728232e5 Mon Sep 17 00:00:00 2001 From: lone-cloud Date: Fri, 9 Oct 2015 16:50:35 -0700 Subject: [PATCH] adding font awesome, starting on soundcloud integration --- .../components/add-group-modal/component.js | 15 ++++---- .../components/add-group-modal/template.hbs | 2 +- .../add-soundcloud-sound-modal/component.js | 12 +++++++ .../add-soundcloud-sound-modal/template.hbs | 10 ++++++ .../delete-group-modal/template.hbs | 2 +- app/pods/components/groups-list/template.hbs | 5 ++- app/pods/components/music-tab/component.js | 9 ++--- .../components/music-tab/mixins/music-tab.js | 1 + app/pods/components/music-tab/template.hbs | 11 +++--- app/styles/app.scss | 35 +++++++++++++------ bower.json | 3 +- package.json | 1 + .../component-test.js | 26 ++++++++++++++ 13 files changed, 100 insertions(+), 32 deletions(-) create mode 100644 app/pods/components/add-soundcloud-sound-modal/component.js create mode 100644 app/pods/components/add-soundcloud-sound-modal/template.hbs create mode 100644 tests/integration/pods/components/add-soundcloud-sound-modal/component-test.js diff --git a/app/pods/components/add-group-modal/component.js b/app/pods/components/add-group-modal/component.js index 5660917..10ea863 100644 --- a/app/pods/components/add-group-modal/component.js +++ b/app/pods/components/add-group-modal/component.js @@ -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()); diff --git a/app/pods/components/add-group-modal/template.hbs b/app/pods/components/add-group-modal/template.hbs index 56a16ed..f9e3c74 100644 --- a/app/pods/components/add-group-modal/template.hbs +++ b/app/pods/components/add-group-modal/template.hbs @@ -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}} diff --git a/app/pods/components/add-soundcloud-sound-modal/component.js b/app/pods/components/add-soundcloud-sound-modal/component.js new file mode 100644 index 0000000..b489bd8 --- /dev/null +++ b/app/pods/components/add-soundcloud-sound-modal/component.js @@ -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.[]') +}); diff --git a/app/pods/components/add-soundcloud-sound-modal/template.hbs b/app/pods/components/add-soundcloud-sound-modal/template.hbs new file mode 100644 index 0000000..fce97f1 --- /dev/null +++ b/app/pods/components/add-soundcloud-sound-modal/template.hbs @@ -0,0 +1,10 @@ +{{#if isShowingModal}} + {{#modal-dialog close="close" alignment="center" translucentOverlay=true}} + +

Enter a SoundCloud URL for a track or a playlist/set

+ + {{#paper-button action="close"}}Close{{/paper-button}} + {{#paper-button class="pull-right" action="delete" primary=true}}Add Music{{/paper-button}} + + {{/modal-dialog}} +{{/if}} \ No newline at end of file diff --git a/app/pods/components/delete-group-modal/template.hbs b/app/pods/components/delete-group-modal/template.hbs index 9dbae1a..2ea092e 100644 --- a/app/pods/components/delete-group-modal/template.hbs +++ b/app/pods/components/delete-group-modal/template.hbs @@ -1,4 +1,4 @@ -{{#if isShowingConfirmDeleteModal}} +{{#if isShowingModal}} {{#modal-dialog close="close" alignment="center" translucentOverlay=true}}

Are you sure you want to delete group "{{groupName}}"?

diff --git a/app/pods/components/groups-list/template.hbs b/app/pods/components/groups-list/template.hbs index 91a0994..5ff422d 100644 --- a/app/pods/components/groups-list/template.hbs +++ b/app/pods/components/groups-list/template.hbs @@ -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"}} \ No newline at end of file +{{delete-group-modal groupName=deleteGroupName groupId=deleteGroupId groupsData=groupsData isShowingModal=isShowingConfirmDeleteModal apiURL=apiURL updateGroupsData=updateGroupsData groupIdSelection=groupIdSelection action="toggleConfirmDeleteGroupsModal"}} \ No newline at end of file diff --git a/app/pods/components/music-tab/component.js b/app/pods/components/music-tab/component.js index 93347c5..d0d10fb 100644 --- a/app/pods/components/music-tab/component.js +++ b/app/pods/components/music-tab/component.js @@ -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); }, diff --git a/app/pods/components/music-tab/mixins/music-tab.js b/app/pods/components/music-tab/mixins/music-tab.js index 2a1dc08..3b950a5 100644 --- a/app/pods/components/music-tab/mixins/music-tab.js +++ b/app/pods/components/music-tab/mixins/music-tab.js @@ -91,6 +91,7 @@ export default Em.Mixin.create({ audioStream: null, dimmerOn: false, dimmerEnabled: false, + isShowingAddSoundCloudModal: false, notFoundHtml: '', diff --git a/app/pods/components/music-tab/template.hbs b/app/pods/components/music-tab/template.hbs index fe8974f..93064d1 100644 --- a/app/pods/components/music-tab/template.hbs +++ b/app/pods/components/music-tab/template.hbs @@ -38,7 +38,9 @@
{{#if usingLocalAudio}} - {{paper-icon icon="add" class="playerControllIcon"}} + {{paper-icon icon="add" class="playerControllIcon"}} + {{fa-icon "soundcloud" classNames="playerControllIcon"}} + {{paper-icon icon="shuffle" class=shuffleClass}} {{paper-icon icon=repeatIcon class=repeatClass}} {{/if}} @@ -54,8 +56,7 @@
{{else}} {{#if usingLocalAudio}} -
+
{{#if (or playQueueEmpty dragging)}}
{{#if dragging}} @@ -178,4 +179,6 @@
{{ember-notify closeAfter=5000}} -
\ No newline at end of file +
+ +{{add-soundcloud-sound-modal action="toggleIsShowingAddSoundCloudModal" isShowingModal=isShowingAddSoundCloudModal}} \ No newline at end of file diff --git a/app/styles/app.scss b/app/styles/app.scss index fcbf2d7..68e3a52 100644 --- a/app/styles/app.scss +++ b/app/styles/app.scss @@ -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; + } +} diff --git a/bower.json b/bower.json index 2a01613..67470a9 100644 --- a/bower.json +++ b/bower.json @@ -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", diff --git a/package.json b/package.json index e9ad855..a67416d 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/tests/integration/pods/components/add-soundcloud-sound-modal/component-test.js b/tests/integration/pods/components/add-soundcloud-sound-modal/component-test.js new file mode 100644 index 0000000..2c2d873 --- /dev/null +++ b/tests/integration/pods/components/add-soundcloud-sound-modal/component-test.js @@ -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'); +});