From 79350b44b31cef5c0185d63f754e29838e9fcae9 Mon Sep 17 00:00:00 2001 From: JDonadio Date: Tue, 18 Jul 2017 17:23:00 -0300 Subject: [PATCH] custom check-bar for filtered logs --- src/js/controllers/preferencesLogs.js | 71 ++++++++++++++++----------- src/js/directives/logOptions.js | 7 ++- src/sass/views/includes/checkBar.scss | 60 ++++++++++++++++++++++ src/sass/views/views.scss | 1 + www/views/includes/checkBar.html | 10 ++++ www/views/includes/logOptions.html | 5 +- www/views/preferencesLogs.html | 4 +- 7 files changed, 126 insertions(+), 32 deletions(-) create mode 100644 src/sass/views/includes/checkBar.scss create mode 100644 www/views/includes/checkBar.html diff --git a/src/js/controllers/preferencesLogs.js b/src/js/controllers/preferencesLogs.js index af1de847c..bcc060d0e 100644 --- a/src/js/controllers/preferencesLogs.js +++ b/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'; diff --git a/src/js/directives/logOptions.js b/src/js/directives/logOptions.js index 6947daeb6..8fbeb439f 100644 --- a/src/js/directives/logOptions.js +++ b/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); + }; } }; }); diff --git a/src/sass/views/includes/checkBar.scss b/src/sass/views/includes/checkBar.scss new file mode 100644 index 000000000..cc124a0e2 --- /dev/null +++ b/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; + } + } + } + } +} diff --git a/src/sass/views/views.scss b/src/sass/views/views.scss index 7a8058339..e55a1f36b 100644 --- a/src/sass/views/views.scss +++ b/src/sass/views/views.scss @@ -47,3 +47,4 @@ @import "integrations/integrations"; @import "custom-amount"; @import "includes/pin"; +@import "includes/checkBar"; diff --git a/www/views/includes/checkBar.html b/www/views/includes/checkBar.html new file mode 100644 index 000000000..4621caa70 --- /dev/null +++ b/www/views/includes/checkBar.html @@ -0,0 +1,10 @@ +
+
+
+
+
+ + +
+
+
diff --git a/www/views/includes/logOptions.html b/www/views/includes/logOptions.html index 798e0fdb0..5811bb3cc 100644 --- a/www/views/includes/logOptions.html +++ b/www/views/includes/logOptions.html @@ -1,7 +1,8 @@
{{title}}
-
+ +
diff --git a/www/views/preferencesLogs.html b/www/views/preferencesLogs.html index 7008b693f..317f5b377 100644 --- a/www/views/preferencesLogs.html +++ b/www/views/preferencesLogs.html @@ -33,6 +33,8 @@ + log-options-fill-class="fillClass" + log-options="logOptions" + log-options-on-select="setOptionSelected">