From 424156142da0ec908dd3f551f758507fb19f2c70 Mon Sep 17 00:00:00 2001 From: Egor Date: Thu, 3 Sep 2015 09:33:20 -0700 Subject: [PATCH] WIP --- app/components/controls/group-control.js | 2 +- app/components/controls/music-control.js | 36 ++++++-- app/styles/app.scss | 88 +++++++++++++------ .../components/controls/music-control.hbs | 34 ++++--- ember-cli-build.js | 1 + package.json | 18 ++-- 6 files changed, 123 insertions(+), 56 deletions(-) diff --git a/app/components/controls/group-control.js b/app/components/controls/group-control.js index bd9a1d3..47d96c6 100644 --- a/app/components/controls/group-control.js +++ b/app/components/controls/group-control.js @@ -1,7 +1,7 @@ import Em from 'ember'; export default Em.Component.extend({ - classNames: ['innerControlFrame'], + classNames: ['innerControlFrame', 'groupPanel'], tagName: null, diff --git a/app/components/controls/music-control.js b/app/components/controls/music-control.js index 43ad904..36e89c2 100644 --- a/app/components/controls/music-control.js +++ b/app/components/controls/music-control.js @@ -40,6 +40,18 @@ export default Em.Component.extend({ } }, + volumeTooltipTxt: function() { + var tooltipTxt = 'Mute'; + + if(this.get('volumeMuted')) { + tooltipTxt = 'Unmute'; + } + + // change the tooltip text if it's already visible + Em.$('#volumeTooltip + .tooltip .tooltip-inner').html(tooltipTxt); + //change the tooltip text for hover + Em.$('#volumeTooltip').attr('data-original-title', tooltipTxt); + }.observes('volumeMuted'), volumeMuted: false, volumeClass: function(){ var volume = this.get('volume'); @@ -68,6 +80,14 @@ export default Em.Component.extend({ timeRemainingTxt: '0:00', volume: 100, + playButtonTooltipTxt: function() { + if(this.get('status') === 'playing'){ + return 'Pause'; + } else { + return 'Play'; + } + }.property('status'), + playButton: function(){ if(this.get('status') === 'playing'){ return 'pause'; @@ -128,13 +148,15 @@ export default Em.Component.extend({ didInsertElement: function () { var dancer = this.get('dancer'), self = this; - audio_file.onchange = function(){ - var files = this.files, a = new Audio(); - var file = URL.createObjectURL(files[0]); - a.src = file; - dancer.load(a); - self.set('status', 'paused'); - }; + /*audio_file.onchange = function(){ + var files = this.files, a = new Audio(); + var file = URL.createObjectURL(files[0]); + a.src = file; + dancer.load(a); + self.set('status', 'paused'); + };*/ + + Em.$('[data-toggle="tooltip"]').tooltip(); }, paused: false diff --git a/app/styles/app.scss b/app/styles/app.scss index 45d8edc..53d1f9b 100644 --- a/app/styles/app.scss +++ b/app/styles/app.scss @@ -3,6 +3,10 @@ @import 'ember-modal-dialog/ember-modal-structure'; @import 'ember-modal-dialog/ember-modal-appearance'; +$playerBackColor: #F12B24; +$playerHeight: 400px; +$playListBackgroundColor: #1E1E1E; + // BRIDGE FINDER #pressButtonBridgeImg { width: 200px; @@ -46,6 +50,10 @@ md-content { } // LIGHT GROUP +.groupPanel { + border-right: 1px solid black; +} + .lightGroup { margin: 0 auto 0 auto; } @@ -163,12 +171,6 @@ md-toolbar { } // MUSIC CONTROL -#playListContainer { - height: 600px; - width: 200px; - color: red; -} - #playerControls { opacity: 0; transition: all 0.2s ease-in-out; @@ -194,17 +196,17 @@ md-toolbar { } .playerControllIcon { - color: white !important; + color: #BBBBBB !important; cursor: pointer; transition-duration: 0.1s; } .playerControllIcon:hover { - transform: scale(1.1) + color: white !important; } #playerArea { - height: 300px; + height: $playerHeight; background-color: black; display: inline-block; } @@ -214,8 +216,8 @@ md-toolbar { } #playlist { - height: 300px; - background-color: #1E1E1E; + height: $playerHeight; + background-color: $playListBackgroundColor; } .noUi-origin { @@ -224,7 +226,7 @@ md-toolbar { } .noUi-base { - background-color: #F12B24; + background-color: $playerBackColor; border-radius: 5px; } @@ -234,11 +236,6 @@ md-toolbar { display: inline-block; } -#seekSlider { - height: 12px; - margin-bottom: 10px; -} - .noUi-horizontal .noUi-handle { width: 7px; height: 21px; @@ -246,21 +243,62 @@ md-toolbar { top: -8px; cursor: pointer; transition-duration: 0.1s; + background: #BBBBBB !important; } .noUi-horizontal .noUi-handle:hover { - transform: scale(1.1); + background: white !important; } .noUi-handle:after, .noUi-handle:before { content: none; } -#seekSlider * .noUi-handle { - height: 20px; - width: 20px; - border-radius: 50%; - background: #F12B24; - top: -7px; - left: -10px; +#seekSlider { + height: 6px; + margin-bottom: 10px; + transition-duration: 0.2s; +} + +#addMusicIcon { + float: right; +} + +#seekSlider:hover { + height: 8px; +} + +#seekSlider:hover * .noUi-handle { + opacity: 1; +} + +#seekSlider * .noUi-handle { + border: none; + height: 13px; + width: 13px; + border-radius: 50%; + top: -4px; + left: -6px; + opacity: 0; + transition-duration: 0.1s; + background-color: $playerBackColor !important; + box-shadow: none; +} + +#playListControls { + margin-top: 10px; + padding-bottom: 10px; + border-bottom: 1px solid #3a3a3a; +} + +.smallMarginRight { + margin-right:10px; +} + +#playListArea { + background: lighten($playListBackgroundColor, 20%); + width: 100%; + height: 333px; + margin: 10px auto 0 auto; + border-radius: 5px; } diff --git a/app/templates/components/controls/music-control.hbs b/app/templates/components/controls/music-control.hbs index 8519745..77ffc2f 100644 --- a/app/templates/components/controls/music-control.hbs +++ b/app/templates/components/controls/music-control.hbs @@ -4,35 +4,41 @@
{{range-slider start=0 min=0 max=100 id="seekSlider" change="seekChanged" }} - {{#if nextPrevEnabled}} - {{paper-icon icon="skip-previous" class="playerControllIcon"}} ` - {{/if}} - - {{paper-icon icon=playButton class="playerControllIcon"}} - {{#if nextPrevEnabled}} - {{paper-icon icon="skip-next" action="" class="playerControllIcon"}} + {{paper-icon icon="skip-previous" class="playerControllIcon"}} ` {{/if}} - {{paper-icon icon=volumeClass class="playerControllIcon volumeButton"}} + {{paper-icon icon=playButton class="playerControllIcon"}} + + {{#if nextPrevEnabled}} + {{paper-icon icon="skip-next" action="" class="playerControllIcon"}} + {{/if}} + + {{paper-icon icon=volumeClass class="playerControllIcon volumeButton"}} {{range-slider start=volume min=0 max=100 change="volumeSliderChanged" id="volumeBar"}} - {{timeElapsedTxt}} / {{timeRemainingTxt}} + {{timeElapsedTxt}} / {{timeRemainingTxt}} - {{paper-icon icon="fullscreen" class="playerControllIcon"}} + {{paper-icon icon="fullscreen" class="playerControllIcon"}}
- + - {{paper-icon icon="shuffle" class="playerControllIcon"}} +
+ {{paper-icon icon="shuffle" class="playerControllIcon"}} - {{paper-icon icon="repeat" class="playerControllIcon"}} + {{paper-icon icon="repeat" class="playerControllIcon"}} - {{paper-icon icon="add" class="playerControllIcon"}} + {{paper-icon icon="add" class="playerControllIcon" }} +
+ +
+ +
\ No newline at end of file diff --git a/ember-cli-build.js b/ember-cli-build.js index df45e41..2cbcbd4 100644 --- a/ember-cli-build.js +++ b/ember-cli-build.js @@ -7,6 +7,7 @@ module.exports = function(defaults) { }); app.import('vendor/dancer.js'); + app.import('bower_components/bootstrap-sass/assets/javascripts/bootstrap/tooltip.js'); // Use `app.import` to add additional libraries to the generated // output files. diff --git a/package.json b/package.json index d4c53ae..de198ca 100644 --- a/package.json +++ b/package.json @@ -20,27 +20,27 @@ "license": "MIT", "devDependencies": { "broccoli-asset-rev": "^2.0.2", - "ember-cli": "1.13.7", - "ember-cli-app-version": "0.4.0", + "ember-cli": "1.13.8", + "ember-cli-app-version": "1.0.0", "ember-cli-babel": "^5.0.0", "ember-cli-content-security-policy": "0.4.0", "ember-cli-dependency-checker": "^1.0.0", - "ember-cli-htmlbars": "0.7.9", - "ember-cli-htmlbars-inline-precompile": "^0.1.1", + "ember-cli-htmlbars": "1.0.0", + "ember-cli-htmlbars-inline-precompile": "^0.3.0", "ember-cli-ic-ajax": "0.2.1", "ember-cli-inject-live-reload": "^1.3.0", "ember-cli-nouislider": "0.7.0", - "ember-cli-qunit": "0.3.20", - "ember-cli-release": "0.2.3", - "ember-cli-sass": "4.0.1", + "ember-cli-qunit": "1.0.1", + "ember-cli-release": "0.2.6", + "ember-cli-sass": "4.2.0", "ember-cli-sri": "^1.0.1", "ember-cli-uglify": "^1.0.1", "ember-cli-windows-addon": "^1.2.2", - "ember-data": "1.13.7", + "ember-data": "1.13.11", "ember-disable-proxy-controllers": "^1.0.0", "ember-export-application-global": "^1.0.3", "ember-modal-dialog": "0.7.7", - "ember-paper": "0.2.6", + "ember-paper": "0.2.7", "liquid-fire": "0.21.2" } }