feat(citSci): style tweaks, onboarding fix, background image fix

- fixed placement of minicheckbox - smaller volume and no download on label example audio - moved some onboarding into a factory so that different components can add steps - fixed background image service so that it actually works:w
QutEcoacoustics · Jun 27, 2019 · 8e836b7 · 8e836b7
1 parent 537bcd9
commit 8e836b7
Show file tree

Hide file tree

Showing 15 changed files with 250 additions and 200 deletions.
diff --git a/src/app/annotationLibrary/annotationItem.js b/src/app/annotationLibrary/annotationItem.js
@@ -3,16 +3,21 @@ angular.module("bawApp.components.annotationItem", [])
         templateUrl: "annotationLibrary/annotationItem.tpl.html",
         controller: [
             "$scope",
-            "$http",
-            function ($scope, $http) {
+            function ($scope) {
 
                 this.audioElement = {
                      volume: 1,
                      position: 0
                 };
 
+                $scope.showDownload = this.download === undefined ? true : this.download;
+                $scope.miniVolume = this.miniVolume === undefined ? false : this.miniVolume;
+
+
             }],
         bindings: {
             annotation: "=annotation",
+            download: "<",
+            miniVolume: "<"
         }
     });
diff --git a/src/app/annotationLibrary/annotationItem.tpl.html b/src/app/annotationLibrary/annotationItem.tpl.html
@@ -21,8 +21,9 @@
     <previous-play-next audio-element-model="$ctrl.audioElement"></previous-play-next>
     <volume-slider
             class="form-group form-group-without-feedback progressCell"
+            ng-class="{'mini-volume': miniVolume}"
             audio-element-model="$ctrl.audioElement"></volume-slider>
-    <download media="$ctrl.annotation.media"></download>
+    <download ng-if="showDownload" media="$ctrl.annotation.media"></download>
 
 
 </div>
diff --git a/src/app/audioControls/_volumeControl.scss b/src/app/audioControls/_volumeControl.scss
@@ -1,7 +1,12 @@
 //noinspection CssInvalidHtmlTagReference
 volume-slider {
 
-  width: 200px;
+
+  &.mini-volume .volume-container {
+      max-width: 100px;
+  }
+
+
   position: relative;
 
   #volumeControl-mute {
@@ -29,14 +34,18 @@ volume-slider {
 
   }
 
-  #volumeControl-slider {
+  .btn-group {
+
+
+
+  .volumeControl-slider {
 
     -webkit-appearance: none;
     position:relative;
     display: inline-block;
     vertical-align: middle;
     width: calc(100% - 45px);
-    margin-left: 45px;
+    left: 46px;
     border-left: none;
 
 
@@ -119,6 +128,7 @@ volume-slider {
     }
   }
 
+  }
 
 }
 

diff --git a/src/app/audioControls/volumeSlider.tpl.html b/src/app/audioControls/volumeSlider.tpl.html
@@ -1,5 +1,5 @@
 
-<div class="btn-group">
+<div class="btn-group volume-container">
     <button id="volumeControl-mute"
             class="btn btn-default"
             ng-click="toggleMute()"
@@ -8,8 +8,7 @@
         <span></span>
     </button>
 
-    <input id="volumeControl-slider"
-           class="form-control btn btn-default"
+    <input class="volumeControl-slider form-control btn btn-default"
            type="range" ng-model="$ctrl.audioElementModel.volume"
            max="1" min="0" step="0.01"
            ng-disabled="$ctrl.audioElementModel.muted"

diff --git a/src/app/citizenScience/citizenScience.js b/src/app/citizenScience/citizenScience.js
@@ -10,8 +10,14 @@ class CitizenScienceAboutController {
 
         $scope.study = $routeParams.studyName;
 
-        // todo: random background image or background image slideshow (but from dataset ... how?)
-        //backgroundImage.currentBackground = paths.site.assets.backgrounds.citizenScience;
+        var backgroundFiles = {
+            "bristlebird": "2.jpg",
+            "koala-verification": "3.jpg"
+        };
+        var backgroundFile = backgroundFiles.hasOwnProperty($routeParams.studyName) ? backgroundFiles[$routeParams.studyName] : "1.jpg";
+
+
+        backgroundImage.currentBackground = paths.site.assets.backgrounds.citizenScience + backgroundFile;
     }
 }
 

diff --git a/src/app/citizenScience/labels/textLabels/_citizenScienceLabels.scss b/src/app/citizenScience/labels/textLabels/_citizenScienceLabels.scss
@@ -12,14 +12,15 @@
 
   #label-buttons, .label-check {
 
+    padding-top: 8px;
+
     a {
 
       display: inline-block;
       margin-left: auto;
       margin-right: auto;
-      margin-top: 5px;
       width: auto;
-      padding: 5px 8px 5px 8px;
+      padding: 2px 1px 2px 1px;
       font-size: 18px;
       cursor: pointer;
       line-height: 1em;
@@ -28,11 +29,10 @@
 
       &:hover {
         .label-check-shell {
-          background-color: rgba(60,60,60,0.8);
+          background-color: rgba(60, 60, 60, 0.8);
         }
       }
 
-
       &.example-toggle {
         text-decoration: none;
 
@@ -62,6 +62,8 @@
 
       .label-value-text {
 
+        padding-left: 0.1em;
+
       }
 
       .label-check-shell {
@@ -74,7 +76,7 @@
         margin-left: 0.3em;
         margin-right: 0.3em;
         vertical-align: middle;
-        background: rgba(0,0,0,0.5);
+        background: rgba(0, 0, 0, 0.5);
 
       }
 
@@ -96,7 +98,7 @@
       }
       &.no {
         b {
-          color: #d00900;
+          color: #ff2c25;
           &:before {
             content: "\f00d";
           }
@@ -105,6 +107,7 @@
 
       b {
         font-size: 1.3em;
+        text-shadow: 0px 2px 0px rgba(0, 0, 0, 1);
         &.grey {
           color: #666666;
           opacity: 0.5;
@@ -113,101 +116,7 @@
 
     }
 
-
-
-
-
-
-
-
-
-
-/*
-
-     a {
-
-       .label-value-text {
-         width: 40px;
-         display: inline-block;
-       }
-
-       &.empty {
-
-       }
-       &.yes {
-         i {
-           b {
-             color: #8cc967;
-             &:before {
-               content: "\f00c";
-             }
-           }
-         }
-       }
-       &.maybe {
-         i {
-           b {
-             color: #ffbc3e;
-             &:before {
-               content: "\f128";
-               padding-left:0.18em;
-             }
-           }
-         }
-       }
-       &.no {
-         i {
-           b {
-             color: #d00900;
-             &:before {
-               content: "\f00d";
-               padding-left:0.06em;
-             }
-           }
-         }
-       }
-
-       i {
-         position: relative;
-         height:1em;
-         &:before {
-           content: "\f096";
-           position:absolute;
-           top:0.15em;
-           left:0px;
-         }
-         &.radio:before {
-           content: "\f10c";
-         }
-         b {
-           position: absolute;
-           top:0.15em;
-           font-size: 0.9em;
-           &.grey {
-             color: #666666;
-             opacity: 0.5;
-           }
-         }
-       }
-
-     }
-
-    i {
-      display: inline-block;
-      text-align: left;
-      vertical-align: middle;
-      width: 1.0em;
-      font-size: 2em;
-      position: relative;
-      top: -0.25em;
-    }
-
-*/
-
-
   }
 
-
-
 }
 
diff --git a/src/app/citizenScience/labels/textLabels/labels.js b/src/app/citizenScience/labels/textLabels/labels.js
@@ -6,14 +6,18 @@ angular.module("bawApp.components.citizenScienceTextLabels",
     .component("citizenScienceTextLabels", {
         templateUrl: "citizenScience/labels/textLabels/labels.tpl.html",
         controller: [
-            "$scope",
-            "SampleLabels",
-            function ($scope, SampleLabels) {
-                //console.log("dataset progress component scope");console.log($scope);
+            "onboardingService",
+            function (onboardingService) {
 
-                var self = this;
 
-                console.log(self);
+                onboardingService.addSteps([
+                    {
+                        element: "label-check:first-of-type div",
+                        intro: `Make your selection about whether ${this.labels[0].name} is in the recording`,
+                        order: 5
+                    }
+
+                ]);
 
 
             }],

diff --git a/src/app/citizenScience/labels/thumbLabels/_thumbs.scss b/src/app/citizenScience/labels/thumbLabels/_thumbs.scss
@@ -58,6 +58,15 @@ $triangle: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.o
           top:0px;
           left:0px;
 
+
+        .label-check {
+          padding-top: 0px;
+        }
+
+        .label-check-shell {
+          margin-left:0px;
+        }
+
       }
 
     }

diff --git a/src/app/citizenScience/labels/thumbLabels/examples.tpl.html b/src/app/citizenScience/labels/thumbLabels/examples.tpl.html
@@ -12,7 +12,7 @@
              style="background-image: url(/public/citizen_science/labels/images/{{$ctrl.label.examples[currentExample].image}})"
              >&nbsp;
         </div>
-        <annotation-item annotation="$ctrl.label.examples[currentExample].annotation" class="dark"></annotation-item>
+        <annotation-item annotation="$ctrl.label.examples[currentExample].annotation" download="false" mini-volume="true" class="dark"></annotation-item>
             </div>
 
 </div>
diff --git a/src/app/citizenScience/labels/thumbLabels/labels.js b/src/app/citizenScience/labels/thumbLabels/labels.js
@@ -12,12 +12,14 @@ angular.module("bawApp.components.citizenScienceThumbLabels",
             "annotationLibraryCommon",
             "AudioEvent",
             "SampleLabels",
+            "onboardingService",
             function ($scope,
                       $http,
                       CitizenScienceCommon,
                       libraryCommon,
                       AudioEventService,
-                      SampleLabels) {
+                      SampleLabels,
+                      onboardingService) {
 
                 var self = this;
 
@@ -113,6 +115,40 @@ angular.module("bawApp.components.citizenScienceThumbLabels",
                                 console.error("Failed to load citizen science example item response.", httpResponse);
                         });
                 };
+
+
+                onboardingService.addSteps([
+                    {
+                        element: ".citizen-science-thumb",
+                        intro: "See if you can identify the events that are in these small spectrogram thumbnails in the audio clip above. " +
+                        "Tap the thumbnail for a closer look and to listen to the audio.",
+                        order: 5
+                    },
+                    {
+                        element: ".label-check a",
+                        intro: "Use the checkbox to indicate if the this kind of event occurs in the audio clip above",
+                        order: 5
+
+                    },
+                    {
+                        element: ".label-examples-annotations .label-check a",
+                        intro: "You can also use this checkbox to select the call",
+                        order: 5
+
+                    }
+
+                ]);
+
+                onboardingService.addCallbacks({
+                    onBeforeStart: function () {
+                        $scope.$broadcast("show-label-details");
+                    },
+                    onExit: function () {
+                        $scope.$broadcast("hide-label-details");
+                    }
+                });
+
+
             }],
         bindings: {
             labels: "=",