custom check-bar for filtered logs

src/js/controllers/preferencesLogs.js

@@ -1,48 +1,63 @@
 'use strict';
 
 angular.module('copayApp.controllers').controller('preferencesLogs',
-  function($scope, historicLog, platformInfo) {
+  function($scope, historicLog, platformInfo, lodash, gettextCatalog) {
 
     var logLevels = historicLog.getLevels();
-    var logFilterWeight = historicLog.getDefaultLevel().weight;
+    var defaultLevel = historicLog.getDefaultLevel();
 
     // Log level slider setup.
-    var logLevelSliderInitialValue = logFilterWeight;
-    var logLevelSliderCeil = logFilterWeight;
-    var logLevelSliderStepsArray = [];
+    // var logLevelSliderInitialValue = logFilterWeight;
+    // var logLevelSliderCeil = logFilterWeight;
+    // var logLevelSliderStepsArray = [];
+    $scope.logOptions = {};
 
-    for (var i = 0; i < logLevels.length; i++) {
-      logLevelSliderStepsArray.push({value: logLevels[i].weight, legend: logLevels[i].label});
-    }
+    // for (var i = 0; i < logLevels.length; i++) {
+    //   logLevelSliderStepsArray.push({
+    //     value: logLevels[i].weight,
+    //     legend: logLevels[i].label
+    //   });
+    // }
 
-    $scope.logOptionsTitle = 'Filter log';
-    $scope.logOptions = {
-      logLevelSlider: {
-        value: logLevelSliderInitialValue,
-        opts: {
-          floor: 0,
-          ceil: logLevelSliderCeil,
-          step: 1,
-          hideLimitLabels: true,
-          hidePointerLabels: true,
-          showTicks: true,
-          showTicksValues: false,
-          showSelectionBar: true,
-          stepsArray: logLevelSliderStepsArray,
-          onEnd: function(sliderId, modelValue, highValue, pointerType) {
-            $scope.filteredLogs = historicLog.get(modelValue);
-          }
-        }
-      }
+    $scope.setOptionSelected = function(level) {
+      var weight = $scope.logOptions[level].weight;
+      $scope.fillClass = 'fill-bar-' + level;
+      $scope.filteredLogs = historicLog.get(weight);
+      lodash.each($scope.logOptions, function(opt) {
+        opt.selected = opt.weight <= weight ? true : false;
+      });
     };
 
+    // $scope.logOptions = {
+    //   logLevelSlider: {
+    //     value: logLevelSliderInitialValue,
+    //     opts: {
+    //       floor: 0,
+    //       ceil: logLevelSliderCeil,
+    //       step: 1,
+    //       hideLimitLabels: true,
+    //       hidePointerLabels: true,
+    //       showTicks: true,
+    //       showTicksValues: false,
+    //       showSelectionBar: true,
+    //       stepsArray: logLevelSliderStepsArray,
+    //       onEnd: function(sliderId, modelValue, highValue, pointerType) {
+    //         $scope.filteredLogs = historicLog.get(modelValue);
+    //       }
+    //     }
+    //   }
+    // };
+
     $scope.$on("$ionicView.beforeEnter", function(event, data) {
       $scope.isCordova = platformInfo.isCordova;
+      $scope.logOptionsTitle = gettextCatalog.getString('Filter log');
+      $scope.logOptions = lodash.indexBy(logLevels, 'level');
+      $scope.setOptionSelected(defaultLevel.level);
     });
 
     $scope.$on("$ionicView.enter", function(event, data) {
       $scope.allLogs = historicLog.get();
-      $scope.filteredLogs = historicLog.get(logFilterWeight);
+      $scope.filteredLogs = historicLog.get(defaultLevel.weight);
 
       $scope.prepare = function() {
         var log = 'Copay Session Logs\n Be careful, this could contain sensitive private data\n\n';

src/js/directives/logOptions.js

@@ -9,12 +9,17 @@ angular.module('copayApp.directives')
       scope: {
         show: '=logOptionsShow',
         options: '=logOptions',
-        title: '=logOptionsTitle'
+        fillClass: '=logOptionsFillClass',
+        title: '=logOptionsTitle',
+        onSelect: '=logOptionsOnSelect'
       },
       link: function(scope, element, attrs) {
         scope.hide = function() {
           scope.show = false;
         };
+        scope.getFillClass = function(index) {
+          scope.onSelect(index);
+        };
       }
     };
   });

src/sass/views/includes/checkBar.scss

@@ -0,0 +1,60 @@
+#check-bar {
+  $bar-widths: (
+    info: 3rem,
+    warn: 37%,
+    error: 65%,
+    debug: 104%,
+  );
+  .item {
+    padding: 40px;
+  }
+  .checkbox-icon {
+    width: 22px;
+    height: 22px;
+  }
+  .checkbox-icon:after {
+    border: none;
+  }
+  .check-bar {
+    position: relative;
+    @each $name, $bar-width in $bar-widths {
+      .initial-bar {
+        width: 0%;
+        border: 2px solid $v-success-color;
+        top: 40px;
+        left: -7px;
+        z-index: 99;
+        border-radius: 10px;
+        position: absolute;
+      }
+      .fill-bar-#{$name} {
+        width: $bar-width !important;
+        transition: width .2s;
+      }
+    }
+    .base-bar {
+      position: absolute;
+      width: 100%;
+      border-bottom: 2px solid #f2f2f2;
+      top: 41px;
+      z-index: 98;
+      left: 0px;
+    }
+    &.list {
+      margin-top: 20px;
+      display: flex;
+      justify-content: space-between;
+      .custom-checkbox {
+        text-align: -webkit-center;
+        .item {
+          border-style: none;
+          z-index: 999;
+          background-color: inherit;
+        }
+        label {
+          padding-top: 5px;
+        }
+      }
+    }
+  }
+}

src/sass/views/views.scss

@@ -47,3 +47,4 @@
 @import "integrations/integrations";
 @import "custom-amount";
 @import "includes/pin";
+@import "includes/checkBar";

www/views/includes/checkBar.html

@@ -0,0 +1,10 @@
+<div id="check-bar">
+  <div class="check-bar list">
+    <div ng-class="fillClass" class="initial-bar"></div>
+    <div class="base-bar"></div>
+    <div class="custom-checkbox" ng-repeat="option in options track by $index">
+      <label>{{option.label}}</label>
+      <ion-checkbox ng-model="option.selected" ng-change="getFillClass(option.level)"></ion-checkbox>
+    </div>
+  </div>
+</div>

www/views/includes/logOptions.html

@@ -1,7 +1,8 @@
 <action-sheet action-sheet-show="show" class="log-options">
   <img class="back-arrow" src="img/icon-back-arrow.svg" ng-click="hide()">
   <div class="header">{{title}}</div>
-  <div class="log-level-slider">
+  <!-- <div class="log-level-slider">
     <rzslider class="stable-slider" rz-slider-model="options.logLevelSlider.value" rz-slider-options="options.logLevelSlider.opts"></rzslider>
-  </div>
+  </div> -->
+  <div ng-include="'views/includes/checkBar.html'"></div>
 </action-sheet>

www/views/preferencesLogs.html

@@ -33,6 +33,8 @@
   <log-options
     log-options-title="logOptionsTitle"
     log-options-show="showOptions"
-    log-options="logOptions">
+    log-options-fill-class="fillClass"
+    log-options="logOptions"
+    log-options-on-select="setOptionSelected">
   </log-options>
 </ion-view>