Showing the session log some love. Replaced slider with checkbox bar.
This commit is contained in:
Andy Phillipson
parent
4f5d806ff7
commit
adc81ffa4c
16 changed files with 192 additions and 212 deletions
|
|
@ -137,7 +137,6 @@ module.exports = function(grunt) {
|
|||
'bower_components/angular-md5/angular-md5.js',
|
||||
'bower_components/angular-mocks/angular-mocks.js',
|
||||
'bower_components/ngtouch/src/ngTouch.js',
|
||||
'bower_components/angularjs-slider/dist/rzslider.min.js',
|
||||
'angular-bitauth/angular-bitauth.js',
|
||||
'angular-bitcore-wallet-client/angular-bitcore-wallet-client.js'
|
||||
],
|
||||
|
|
@ -162,13 +161,6 @@ module.exports = function(grunt) {
|
|||
'node_modules/cordova-plugin-qrscanner/dist/cordova-plugin-qrscanner-lib.min.js'
|
||||
],
|
||||
dest: 'www/js/app.js'
|
||||
},
|
||||
css: {
|
||||
src: [
|
||||
'www/css/main.css',
|
||||
'bower_components/angularjs-slider/dist/rzslider.css'
|
||||
],
|
||||
dest: 'www/css/main.css'
|
||||
}
|
||||
},
|
||||
uglify: {
|
||||
|
|
|
|||
|
|
@ -11,7 +11,6 @@ var modules = [
|
|||
'ngLodash',
|
||||
'ngCsv',
|
||||
'angular-md5',
|
||||
'rzModule',
|
||||
'bwcModule',
|
||||
'bitauthModule',
|
||||
'copayApp.filters',
|
||||
|
|
|
|||
|
|
@ -1,91 +1,73 @@
|
|||
'use strict';
|
||||
|
||||
angular.module('copayApp.controllers').controller('preferencesLogs',
|
||||
function($scope, historicLog, platformInfo, lodash, gettextCatalog) {
|
||||
function($scope, historicLog, lodash, configService, gettextCatalog) {
|
||||
|
||||
var config = configService.getSync();
|
||||
var logLevels = historicLog.getLevels();
|
||||
var defaultLevel = historicLog.getDefaultLevel();
|
||||
var selectedLevel;
|
||||
|
||||
// Log level slider setup.
|
||||
// var logLevelSliderInitialValue = logFilterWeight;
|
||||
// var logLevelSliderCeil = logFilterWeight;
|
||||
// var logLevelSliderStepsArray = [];
|
||||
$scope.logOptions = {};
|
||||
$scope.logOptions = lodash.indexBy(logLevels, 'level');
|
||||
|
||||
// for (var i = 0; i < logLevels.length; i++) {
|
||||
// logLevelSliderStepsArray.push({
|
||||
// value: logLevels[i].weight,
|
||||
// legend: logLevels[i].label
|
||||
// });
|
||||
// }
|
||||
var filterLogs = function(weight) {
|
||||
$scope.filteredLogs = historicLog.get(weight);
|
||||
};
|
||||
|
||||
$scope.setOptionSelected = function(level) {
|
||||
var weight = $scope.logOptions[level].weight;
|
||||
$scope.fillClass = 'fill-bar-' + level;
|
||||
$scope.filteredLogs = historicLog.get(weight);
|
||||
filterLogs(weight);
|
||||
lodash.each($scope.logOptions, function(opt) {
|
||||
opt.selected = opt.weight <= weight ? true : false;
|
||||
opt.head = opt.weight == weight;
|
||||
});
|
||||
|
||||
// Save the setting.
|
||||
var opts = {
|
||||
log: {
|
||||
filter: level
|
||||
}
|
||||
};
|
||||
configService.set(opts, function(err) {
|
||||
if (err) $log.debug(err);
|
||||
});
|
||||
};
|
||||
|
||||
// $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.prepareLogs = function() {
|
||||
var log = 'Copay Session Logs\n Be careful, this could contain sensitive private data\n\n';
|
||||
log += '\n\n';
|
||||
log += historicLog.get().map(function(v) {
|
||||
return '[' + v.timestamp + '][' + v.level + ']' + v.msg;
|
||||
}).join('\n');
|
||||
|
||||
return log;
|
||||
};
|
||||
|
||||
$scope.sendLogs = function() {
|
||||
var body = $scope.prepareLogs();
|
||||
|
||||
window.plugins.socialsharing.shareViaEmail(
|
||||
body,
|
||||
'Copay Logs',
|
||||
null, // TO: must be null or an array
|
||||
null, // CC: must be null or an array
|
||||
null, // BCC: must be null or an array
|
||||
null, // FILES: can be null, a string, or an array
|
||||
function() {},
|
||||
function() {}
|
||||
);
|
||||
};
|
||||
|
||||
$scope.showOptionsMenu = function() {
|
||||
$scope.showOptions = true;
|
||||
};
|
||||
|
||||
$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);
|
||||
selectedLevel = lodash.has(config, 'log.filter') ? historicLog.getLevel(config.log.filter) : historicLog.getDefaultLevel();
|
||||
$scope.setOptionSelected(selectedLevel.level);
|
||||
});
|
||||
|
||||
$scope.$on("$ionicView.enter", function(event, data) {
|
||||
$scope.allLogs = historicLog.get();
|
||||
$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';
|
||||
log += '\n\n';
|
||||
log += $scope.allLogs.map(function(v) {
|
||||
return v.msg;
|
||||
}).join('\n');
|
||||
|
||||
return log;
|
||||
};
|
||||
|
||||
$scope.sendLogs = function() {
|
||||
var body = $scope.prepare();
|
||||
|
||||
window.plugins.socialsharing.shareViaEmail(
|
||||
body,
|
||||
'Copay Logs',
|
||||
null, // TO: must be null or an array
|
||||
null, // CC: must be null or an array
|
||||
null, // BCC: must be null or an array
|
||||
null, // FILES: can be null, a string, or an array
|
||||
function() {},
|
||||
function() {}
|
||||
);
|
||||
};
|
||||
|
||||
$scope.showOptionsMenu = function() {
|
||||
$scope.showOptions = true;
|
||||
};
|
||||
filterLogs(selectedLevel.weight);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
'use strict';
|
||||
|
||||
angular.module('copayApp.directives')
|
||||
.directive('logOptions', function($timeout) {
|
||||
.directive('logOptions', function($timeout, platformInfo) {
|
||||
return {
|
||||
restrict: 'E',
|
||||
templateUrl: 'views/includes/logOptions.html',
|
||||
|
|
@ -10,13 +10,17 @@ angular.module('copayApp.directives')
|
|||
show: '=logOptionsShow',
|
||||
options: '=logOptions',
|
||||
fillClass: '=logOptionsFillClass',
|
||||
title: '=logOptionsTitle',
|
||||
onSelect: '=logOptionsOnSelect'
|
||||
onSelect: '=logOptionsOnSelect',
|
||||
onCopy: '=logOptionsOnCopy',
|
||||
onSend: '=logOptionsOnSend'
|
||||
},
|
||||
link: function(scope, element, attrs) {
|
||||
scope.isCordova = platformInfo.isCordova;
|
||||
|
||||
scope.hide = function() {
|
||||
scope.show = false;
|
||||
};
|
||||
|
||||
scope.getFillClass = function(index) {
|
||||
scope.onSelect(index);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -76,9 +76,7 @@ angular.module('copayApp').config(function(historicLogProvider, $provide, $logPr
|
|||
console.log('Error at log decorator:', e);
|
||||
v = 'undefined';
|
||||
}
|
||||
var ts = '[' + new Date().toISOString() + ']';
|
||||
var lvl = '[' + level + '] ';
|
||||
return ts + lvl + v;
|
||||
return v;
|
||||
});
|
||||
|
||||
try {
|
||||
|
|
|
|||
|
|
@ -83,6 +83,10 @@ angular.module('copayApp.services').factory('configService', function(storageSer
|
|||
emailNotifications: {
|
||||
enabled: false,
|
||||
},
|
||||
|
||||
log: {
|
||||
filter: 'debug',
|
||||
},
|
||||
};
|
||||
|
||||
var configCache = null;
|
||||
|
|
|
|||
|
|
@ -5,10 +5,10 @@ angular.module('copayApp.services')
|
|||
var root = {};
|
||||
|
||||
var levels = [
|
||||
{ level: 'info', weight: 0, label: 'Info'},
|
||||
{ level: 'error', weight: 0, label: 'Error'},
|
||||
{ level: 'warn', weight: 1, label: 'Warning'},
|
||||
{ level: 'error', weight: 2, label: 'Error'},
|
||||
{ level: 'debug', weight: 3, label: 'Debug', default: true}
|
||||
{ level: 'info', weight: 2, label: 'Info', default: true},
|
||||
{ level: 'debug', weight: 3, label: 'Debug'}
|
||||
];
|
||||
|
||||
// Create an array of level weights for performant filtering.
|
||||
|
|
@ -21,6 +21,12 @@ angular.module('copayApp.services')
|
|||
return levels;
|
||||
};
|
||||
|
||||
root.getLevel = function(level) {
|
||||
return lodash.find(levels, function(l) {
|
||||
return l.level == level;
|
||||
});
|
||||
};
|
||||
|
||||
root.getDefaultLevel = function() {
|
||||
return lodash.find(levels, function(l) {
|
||||
return l.default;
|
||||
|
|
@ -29,6 +35,7 @@ angular.module('copayApp.services')
|
|||
|
||||
root.add = function(level, msg) {
|
||||
logs.push({
|
||||
timestamp: new Date().toISOString(),
|
||||
level: level,
|
||||
msg: msg,
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,2 +1 @@
|
|||
@import "gravatar";
|
||||
@import "rzslider";
|
||||
|
|
|
|||
|
|
@ -1,47 +0,0 @@
|
|||
.stable-slider.rzslider .rz-bar {
|
||||
background: $v-light-gray;
|
||||
height: 2px;
|
||||
}
|
||||
.stable-slider.rzslider .rz-selection {
|
||||
background: $v-accent-color;
|
||||
}
|
||||
|
||||
.stable-slider.rzslider .rz-pointer {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
top: -9px;
|
||||
bottom: 0;
|
||||
background-color: $v-accent-color;
|
||||
}
|
||||
|
||||
.stable-slider.rzslider .rz-pointer:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.stable-slider.rzslider .rz-bubble {
|
||||
bottom: 14px;
|
||||
}
|
||||
|
||||
.stable-slider.rzslider .rz-limit {
|
||||
font-weight: bold;
|
||||
color: $v-accent-color;
|
||||
}
|
||||
|
||||
.stable-slider.rzslider .rz-tick {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin-left: 4px;
|
||||
border-radius: 50%;
|
||||
background: $v-light-gray;
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
.stable-slider.rzslider .rz-tick.rz-selected {
|
||||
background: $v-accent-color;
|
||||
}
|
||||
|
||||
.stable-slider.rzslider .rz-tick-legend {
|
||||
top: 20px;
|
||||
font-size: 12px;
|
||||
color: $v-dark-gray;
|
||||
}
|
||||
|
|
@ -1,9 +1,10 @@
|
|||
#check-bar {
|
||||
$bar-widths: (
|
||||
info: 3rem,
|
||||
warn: 37%,
|
||||
error: 65%,
|
||||
debug: 104%,
|
||||
// defined by user, example:
|
||||
// error: 10%,
|
||||
// warn: 37%,
|
||||
// info: 65%,
|
||||
// debug: 90%
|
||||
);
|
||||
.item {
|
||||
padding: 40px;
|
||||
|
|
@ -17,16 +18,17 @@
|
|||
}
|
||||
.check-bar {
|
||||
position: relative;
|
||||
.initial-bar-default {
|
||||
border: 2px solid $v-success-color;
|
||||
width: 0%;
|
||||
top: 40px;
|
||||
z-index: 99;
|
||||
border-radius: 10px;
|
||||
position: absolute;
|
||||
}
|
||||
.initial-bar {
|
||||
}
|
||||
@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;
|
||||
|
|
|
|||
|
|
@ -7,62 +7,82 @@ log-options {
|
|||
padding-right: .75rem;
|
||||
}
|
||||
|
||||
.log-options {
|
||||
.option {
|
||||
border: 0;
|
||||
padding-right: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 1px;
|
||||
overflow: visible;
|
||||
.entry {
|
||||
border: 0;
|
||||
padding-right: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 1px;
|
||||
overflow: visible;
|
||||
|
||||
> i {
|
||||
color: $v-accent-color;
|
||||
padding: 0 0 5px 0;
|
||||
margin-left: -5px;
|
||||
> i {
|
||||
color: $v-accent-color;
|
||||
padding: 0 0 5px 0;
|
||||
margin-left: -5px;
|
||||
|
||||
> img {
|
||||
height: 39px;
|
||||
width: 39px;
|
||||
padding: 4px;
|
||||
}
|
||||
> img {
|
||||
height: 39px;
|
||||
width: 39px;
|
||||
padding: 4px;
|
||||
}
|
||||
}
|
||||
.log-options-inner {
|
||||
display: flex;
|
||||
position: relative;
|
||||
padding-top: 16px;
|
||||
padding-bottom: 16px;
|
||||
|
||||
&::after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: $border-color;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.check {
|
||||
padding: 0 1.2rem;
|
||||
}
|
||||
}
|
||||
.log-options-details {
|
||||
flex-grow: 1;
|
||||
|
||||
.log-options-name {
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.log-level-slider {
|
||||
width: 90%;
|
||||
margin: auto;
|
||||
font-size: 12px;
|
||||
height: 90px;
|
||||
}
|
||||
}
|
||||
|
||||
.entry-inner {
|
||||
display: flex;
|
||||
position: relative;
|
||||
padding-top: 16px;
|
||||
padding-bottom: 16px;
|
||||
|
||||
&::after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: $border-color;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
.entry-details {
|
||||
flex-grow: 1;
|
||||
|
||||
.entry-name {
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
#check-bar {
|
||||
$bar-widths: (
|
||||
// Order must match weight, see services/historicLog.js
|
||||
error: 10%,
|
||||
warn: 35%,
|
||||
info: 65%,
|
||||
debug: 90%
|
||||
);
|
||||
.check-bar {
|
||||
.initial-bar {
|
||||
border: 2px solid $v-accent-color;
|
||||
}
|
||||
@each $name, $bar-width in $bar-widths {
|
||||
.fill-bar-#{$name} {
|
||||
width: $bar-width !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.head .checkbox-icon {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.checkbox-icon {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
top: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -119,9 +119,19 @@
|
|||
color: #00901B;
|
||||
}
|
||||
}
|
||||
.log-text {
|
||||
.log-bg {
|
||||
background: white;
|
||||
}
|
||||
.log-entry {
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
border: none;
|
||||
}
|
||||
.log-timestamp {
|
||||
font-weight: bold;
|
||||
}
|
||||
.log-level {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -47,4 +47,5 @@
|
|||
@import "integrations/integrations";
|
||||
@import "custom-amount";
|
||||
@import "includes/pin";
|
||||
@import "includes/logOptions";
|
||||
@import "includes/checkBar";
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<div id="check-bar">
|
||||
<div class="check-bar list">
|
||||
<div ng-class="fillClass" class="initial-bar"></div>
|
||||
<div ng-class="fillClass" class="initial-bar-default initial-bar"></div>
|
||||
<div class="base-bar"></div>
|
||||
<div class="custom-checkbox" ng-repeat="option in options track by $index">
|
||||
<div class="custom-checkbox" ng-repeat="option in options track by $index" ng-class="{'head': option.head}">
|
||||
<label>{{option.label}}</label>
|
||||
<ion-checkbox ng-model="option.selected" ng-change="getFillClass(option.level)"></ion-checkbox>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,21 @@
|
|||
<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">
|
||||
<rzslider class="stable-slider" rz-slider-model="options.logLevelSlider.value" rz-slider-options="options.logLevelSlider.opts"></rzslider>
|
||||
</div> -->
|
||||
<div class="header" translate="">Log options</div>
|
||||
<div ng-include="'views/includes/checkBar.html'"></div>
|
||||
<a class="item item-icon-left entry no-border" copy-to-clipboard="onCopy()">
|
||||
<i class="icon ion-clipboard"></i>
|
||||
<div class="entry-inner">
|
||||
<div class="entry-details">
|
||||
<div class="entry-name" translate>Copy to clipboard</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="item item-icon-left entry no-border" ng-click="onSend()" ng-show="isCordova">
|
||||
<i class="icon ion-ios-email-outline"></i>
|
||||
<div class="entry-inner">
|
||||
<div class="entry-details">
|
||||
<div class="entry-name" translate>Send by email</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</action-sheet>
|
||||
|
|
|
|||
|
|
@ -9,20 +9,15 @@
|
|||
</button>
|
||||
</ion-nav-buttons>
|
||||
</ion-nav-bar>
|
||||
<ion-content>
|
||||
<div class="settings-button-group">
|
||||
<button class="button button-standard button-primary" copy-to-clipboard="prepare()">
|
||||
<span translate>Copy to clipboard</span>
|
||||
</button>
|
||||
<button class="button button-standard button-secondary" ng-show="isCordova" ng-click="sendLogs()">
|
||||
<span translate>Send by email</span>
|
||||
</button>
|
||||
</div>
|
||||
<ion-content class="log-bg">
|
||||
<div class="list">
|
||||
<div class="item item-text-wrap enable_text_select log-text">
|
||||
<ul>
|
||||
<div class="item item-text-wrap enable_text_select log-entry">
|
||||
<div class="centered" ng-show="filteredLogs.length == 0" translate>No entries for this log level <a ng-click="showOptionsMenu()">filter setting</a>.</div>
|
||||
<ul ng-show="filteredLogs.length > 0">
|
||||
<li ng-repeat="l in filteredLogs">
|
||||
<span ng-class="{'energized': l.level=='warn', 'dark': l.level=='debug', 'positive': l.level=='info', 'assertive': l.level=='error'}">
|
||||
<span class="log-timestamp">[{{l.timestamp}}]</span>
|
||||
<span class="log-level">[{{l.level}}]</span>
|
||||
{{l.msg}}
|
||||
</span>
|
||||
</li>
|
||||
|
|
@ -31,10 +26,11 @@
|
|||
</div>
|
||||
</ion-content>
|
||||
<log-options
|
||||
log-options-title="logOptionsTitle"
|
||||
log-options-show="showOptions"
|
||||
log-options-fill-class="fillClass"
|
||||
log-options="logOptions"
|
||||
log-options-on-select="setOptionSelected">
|
||||
log-options-fill-class="fillClass"
|
||||
log-options-on-select="setOptionSelected"
|
||||
log-options-on-copy="prepareLogs"
|
||||
log-options-on-send="sendLogs">
|
||||
</log-options>
|
||||
</ion-view>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue