remove rzslider in favor or native input range

This commit is contained in:
Kyle Spearrin 2017-06-14 16:36:27 -04:00
parent 6fee59373b
commit 57a5a90183
9 changed files with 35 additions and 52 deletions

View File

@ -93,10 +93,6 @@ gulp.task('lib', ['clean:lib'], function () {
src: paths.npmDir + 'ngclipboard/dist/ngclipboard.js', src: paths.npmDir + 'ngclipboard/dist/ngclipboard.js',
dest: paths.libDir + 'ngclipboard' dest: paths.libDir + 'ngclipboard'
}, },
{
src: paths.npmDir + 'angularjs-slider/dist/rzslider.js',
dest: paths.libDir + 'angularjs-slider'
},
{ {
src: paths.npmDir + 'clipboard/dist/clipboard.js', src: paths.npmDir + 'clipboard/dist/clipboard.js',
dest: paths.libDir + 'clipboard' dest: paths.libDir + 'clipboard'

View File

@ -22,7 +22,6 @@
"merge-stream": "1.0.1", "merge-stream": "1.0.1",
"angular-toastr": "2.1.1", "angular-toastr": "2.1.1",
"q": "1.5.0", "q": "1.5.0",
"angularjs-slider": "6.1.1",
"sweetalert": "1.1.3", "sweetalert": "1.1.3",
"angular-sweetalert": "1.1.2", "angular-sweetalert": "1.1.2",
"angulartics": "1.4.0", "angulartics": "1.4.0",

View File

@ -1,2 +1,2 @@
angular angular
.module('bit.tools', ['ngAnimate', 'ngclipboard', 'toastr', 'rzModule', 'oitozero.ngSweetAlert']); .module('bit.tools', ['ngAnimate', 'ngclipboard', 'toastr', 'oitozero.ngSweetAlert']);

View File

@ -12,32 +12,22 @@
utilsService.initListSectionItemListeners($(document), angular); utilsService.initListSectionItemListeners($(document), angular);
$scope.password = '-'; $scope.password = '-';
$scope.slider = {
value: 12,
options: {
floor: 5,
ceil: 128,
step: 1,
hideLimitLabels: true,
hidePointerLabels: true,
onChange: function () {
$scope.options.length = $scope.slider.value;
$scope.regenerate(false);
},
onEnd: function () {
$analytics.eventTrack('Generated Password');
$scope.saveOptions($scope.options);
}
}
};
$q.when(passwordGenerationService.getOptions()).then(function (options) { $q.when(passwordGenerationService.getOptions()).then(function (options) {
$scope.options = options; $scope.options = options;
$scope.slider.value = options.length;
$scope.regenerate(false); $scope.regenerate(false);
$analytics.eventTrack('Generated Password'); $analytics.eventTrack('Generated Password');
}); });
$scope.sliderMoved = function () {
$scope.regenerate(false);
};
$('#length').change(function (e) {
e.preventDefault();
$analytics.eventTrack('Generated Password');
$scope.saveOptions($scope.options);
});
$scope.regenerate = function (trackRegenerateEvent) { $scope.regenerate = function (trackRegenerateEvent) {
if (trackRegenerateEvent) { if (trackRegenerateEvent) {
$analytics.eventTrack('Regenerated Password'); $analytics.eventTrack('Regenerated Password');

View File

@ -5,7 +5,7 @@
<div class="list"> <div class="list">
<div class="list-section"> <div class="list-section">
<div class="list-section-items"> <div class="list-section-items">
<a class="list-section-item wrap" href="" ui-sref="passwordGenerator({animation: 'in-slide-up'})"> <a class="list-section-item wrap" ui-sref="passwordGenerator({animation: 'in-slide-up'})">
<span class="leading-icon" style="color: #eba776;"><i class="fa fa-refresh fa-fw"></i></span> <span class="leading-icon" style="color: #eba776;"><i class="fa fa-refresh fa-fw"></i></span>
<span class="text">{{i18n.passGen}}</span> <span class="text">{{i18n.passGen}}</span>
<span class="detail">{{i18n.passGenInfo}}</span> <span class="detail">{{i18n.passGenInfo}}</span>
@ -35,7 +35,7 @@
<span class="text">{{i18n.importLogins}}</span> <span class="text">{{i18n.importLogins}}</span>
<span class="detail">{{i18n.importLoginsInfo}}</span> <span class="detail">{{i18n.importLoginsInfo}}</span>
</a> </a>
<a class="list-section-item wrap" href="" ui-sref="export({animation: 'in-slide-up'})"> <a class="list-section-item wrap" ui-sref="export({animation: 'in-slide-up'})">
<span class="leading-icon" style="color: #ff6f6f;"><i class="fa fa-cloud-download fa-fw"></i></span> <span class="leading-icon" style="color: #ff6f6f;"><i class="fa fa-cloud-download fa-fw"></i></span>
<span class="text">{{i18n.exportVault}}</span> <span class="text">{{i18n.exportVault}}</span>
<span class="detail">{{i18n.exportVaultInfo}}</span> <span class="detail">{{i18n.exportVaultInfo}}</span>

View File

@ -30,9 +30,11 @@
<div class="list-section-items"> <div class="list-section-items">
<div class="list-section-item list-section-item-slider"> <div class="list-section-item list-section-item-slider">
<label for="length">{{i18n.length}}</label> <label for="length">{{i18n.length}}</label>
<span class="slider-value">{{slider.value}}</span> <span class="slider-value">{{options.length}}</span>
<rzslider rz-slider-model="slider.value" <div class="slider-wrapper">
rz-slider-options="slider.options"></rzslider> <input id="length" type="range" min="5" max="128" step="1" ng-model="options.length"
ng-change="sliderMoved()">
</div>
</div> </div>
<div class="list-section-item list-section-item-checkbox"> <div class="list-section-item list-section-item-checkbox">
<label for="uppercase">A-Z</label> <label for="uppercase">A-Z</label>

View File

@ -25,7 +25,6 @@
<script src="../lib/ngclipboard/ngclipboard.js"></script> <script src="../lib/ngclipboard/ngclipboard.js"></script>
<script src="../lib/sweetalert/sweetalert-dev.js"></script> <script src="../lib/sweetalert/sweetalert-dev.js"></script>
<script src="../lib/sweetalert/SweetAlert.js"></script> <script src="../lib/sweetalert/SweetAlert.js"></script>
<script src="../lib/angularjs-slider/rzslider.js"></script>
<script src="../lib/angulartics/angulartics.js"></script> <script src="../lib/angulartics/angulartics.js"></script>
<script src="../lib/angulartics/angulartics-ga.js"></script> <script src="../lib/angulartics/angulartics-ga.js"></script>
<script src="../lib/ng-infinite-scroll/ng-infinite-scroll.js"></script> <script src="../lib/ng-infinite-scroll/ng-infinite-scroll.js"></script>

View File

@ -409,10 +409,24 @@
&.list-section-item-slider { &.list-section-item-slider {
.slider-value { .slider-value {
color: @gray-light; color: @gray-light;
text-align: right;
&:before { min-width: 45px;
content: "\00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0";
} }
> * {
display: table-cell !important;
vertical-align: middle;
}
input {
width: 100%;
margin: 0;
}
.slider-wrapper {
width: 100%;
padding: 0 0 0 20px;
max-width: 500px;
} }
} }

View File

@ -1,21 +1,4 @@
@import (reference) "variables.less"; @import (reference) "variables.less";
@import "../../../node_modules/angularjs-slider/src/rzslider.less";
/* Slider */
@handleSize: 15px;
@barDimension: 2px;
@handleBgColor: @brand-primary;
@handleInnerColor: @handleBgColor;
@handleActiveColor: @handleBgColor;
@handleHoverColor: @handleBgColor;
@barNormalColor: @border-color-dark;
.list-section-item-slider .rzslider {
width: 160px;
margin: 9px 0 0 5px;
float: right;
}
/* Toastr */ /* Toastr */