Add somes tooltips and improve style

bilazik · May 31, 2019 · 22976fd · 22976fd
1 parent 48c6ecc
commit 22976fd
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 9 deletions.
diff --git a/app/components/box-track.js b/app/components/box-track.js
@@ -1,15 +1,16 @@
 import Component from '@ember/component';
 
-import { alias } from '@ember/object/computed';
+import { alias, notEmpty } from '@ember/object/computed';
 import { isEmpty } from '@ember/utils';
 
 export default Component.extend({
 
   classNames: ['boxTrack', 'layout-col', 'flex-nogrow'],
 
-  classNameBindings: ['sampleColor', 'dragPending'],
+  classNameBindings: ['sampleColor', 'dragPending','hasSample'],
   sampleColor: alias('sample.color'),
   sampleIcon: alias('sample.icon'),
+  hasSample: notEmpty('sample'),
 
 
   //Sample to play

diff --git a/app/styles/app.scss b/app/styles/app.scss
@@ -19,7 +19,9 @@ $warn: "pink";
   max-width: 110px;
 }
 
-
+.boxTrack:hover:not(.has-sample){
+  border-color: gray !important;
+}
 .boxTrack md-divider{
   border-top-width: 2px;
 }

diff --git a/app/templates/components/box-main.hbs b/app/templates/components/box-main.hbs
@@ -4,17 +4,23 @@
     {{#paper-toolbar-tools}}
       {{#paper-button iconButton=true onClick=(action 'togglePlay')}}
         {{paper-icon (if playing "stop" "play_arrow")}}
+        {{#paper-tooltip position='right'}}
+          {{if playing "Stop" "Lecture"}}
+        {{/paper-tooltip}}
       {{/paper-button}}
       <span class="flex"></span>
       {{#paper-button iconButton=true onClick=(transition-to 'index')}}
-        {{paper-icon 'home'}}
+        {{paper-icon 'swap_horizontal_circle'}}
+        {{#paper-tooltip position='left'}}
+          Changer de style
+        {{/paper-tooltip}}
       {{/paper-button}}
       <h2>
         RomgereBox
       </h2>
       <span class="flex"></span>
-        <span id="loopSide">{{if loopSideA "A" "B"}}</span>
-        {{paper-progress-circular value=loopValue warn=(not loopSideA) accent=loopSideA diameter=40}}
+      <span id="loopSide">{{if loopSideA "A" "B"}}</span>
+      {{paper-progress-circular value=loopValue warn=(not loopSideA) accent=loopSideA diameter=40}}
     {{/paper-toolbar-tools}}
   {{/paper-toolbar}}
 

diff --git a/app/templates/components/box-sample.hbs b/app/templates/components/box-sample.hbs
@@ -8,8 +8,11 @@
 
   {{#draggable-object content=sample}}
 
-    {{#paper-button iconButton=true raised=true class=sample.color }}
+    {{#paper-button iconButton=true raised=true class=sample.color}}
       {{fa-icon sample.icon}}
+      {{#paper-tooltip position='top'}}
+        Fais glisser le sample sur une des 8 pistes
+      {{/paper-tooltip}}
     {{/paper-button}}
   {{/draggable-object}}
 

diff --git a/app/templates/components/box-track.hbs b/app/templates/components/box-track.hbs
@@ -4,34 +4,51 @@
   dragOutAction=(action 'onDragOutAction')
 }}
 
-  <div class="flex-initial layout-row layout-align-space-around-center" title={{if sampleIcon "" "Déposez un sample dans cette zone..."}}>
+  {{#unless sampleIcon}}
+    {{#paper-tooltip position='bottom'}}
+      Déposes un sample dans cette zone
+    {{/paper-tooltip}}
+  {{/unless}}
+
+  <div class="flex-initial layout-row layout-align-space-around-center" title=>
     {{fa-icon (if sampleIcon sampleIcon 'question-circle-o') size=2 class=(if sampleColor sampleColor 's-color-0') }}
+
+
   </div>
 
   <div class="flex layout-row layout-align-space-around-center">
     {{box-vu-metter sample=sample}}
   </div>
   <div class="flex-initial volumeBar">
-    {{paper-slider class="flex" disabled=(not sample) discrete=true value=volume step=1 min=0 max=100 onChange=(action 'setVolume')}}
+    {{paper-slider class="flex" disabled=(not sample) discrete=true value=volume step=1 min=0 max=100 onChange=(action 'setVolume') title="Volume"}}
   </div>
   <div class="flex-initial layout-row layout-wrap">
     <div class="flex"></div>
 
     {{#paper-button iconButton=true warn=mute onClick=(action 'muteToggle')  disabled=(not sample)}}
       {{paper-icon (if mute 'volume_off' 'volume_up')}}
+      {{#paper-tooltip position='left'}}
+        Muet ON/OFF
+      {{/paper-tooltip}}
     {{/paper-button}}
 
     <div class="flex"></div>
 
     {{#paper-button iconButton=true accent=solo onClick=(action 'soloAction') disabled=(not sample)}}
       {{paper-icon 'hearing'}}
+      {{#paper-tooltip position='right'}}
+        Solo ON/OFF
+      {{/paper-tooltip}}
     {{/paper-button}}
 
     <div class="flex"></div>
 
     <div class="flex-100 layout-row layout-align-space-around-center">
       {{#paper-button iconButton=true onClick=(action 'removeAction') disabled=(not sample)}}
         {{paper-icon 'delete'}}
+        {{#paper-tooltip position='bottom'}}
+          Supprimer le sample
+        {{/paper-tooltip}}
       {{/paper-button}}
     </div>
   </div>