Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-11-24 12:06:15 +01:00
Code Issues Projects Releases Wiki Activity

UI adjustments for premium adverts

Browse Source
This commit is contained in:
Kyle Spearrin 2017-07-07 09:11:45 -04:00
parent ed13644a02
commit b380d723b7
9 changed files with 68 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/app/directives/passwordMeterDirective.js
View File

@ -3,15 +3,14 @@ angular
.directive('passwordMeter', function () {
return {
template: '<div class="progress {{outerClass}}" style="{{outerStyle}}"><div class="progress-bar progress-bar-{{valueClass}}" ' +
template: '<div class="progress {{outerClass}}"><div class="progress-bar progress-bar-{{valueClass}}" ' +
'role="progressbar" aria-valuenow="{{value}}" aria-valuemin="0" aria-valuemax="100" ' +
'ng-style="{width : ( value + \'%\' ) }"><span class="sr-only">{{value}}%</span></div></div>',
restrict: 'A',
scope: {
password: '=passwordMeter',
username: '=passwordMeterUsername',
outerClass: '@?',
outerStyle: '@?'
outerClass: '@?'
},
link: function (scope) {
var measureStrength = function (username, password) {

4
src/app/global/premiumRequiredController.js
View File

@ -1,7 +1,7 @@
angular
.module('bit.global')
.controller('premiumRequiredController', function ($scope, $state, $uibModalInstance, $analytics) {
.controller('premiumRequiredController', function ($scope, $state, $uibModalInstance, $analytics, $uibModalStack) {
$analytics.eventTrack('premiumRequiredController', { category: 'Modal' });
$scope.go = function () {
@ -12,6 +12,6 @@ angular
};
$scope.close = function () {
$uibModalInstance.dismiss('close');
$uibModalStack.dismissAll();
};
});

7
src/app/settings/views/settingsTwoStep.html
View File

@ -30,8 +30,11 @@
</a>
</td>
<td>
<a href="#" stop-click ng-click="edit(provider)">{{::provider.name}}</a>
<span class="label label-info" ng-if="!premium && !provider.free">PREMIUM</span>
<a href="#" stop-click ng-click="edit(provider)">
{{::provider.name}}
<span class="label label-info" ng-if="!premium && !provider.free"
style="margin-left: 5px;">PREMIUM</span>
</a>
<div class="text-muted text-sm">{{::provider.description}}</div>
</td>
<td style="width: 100px;" class="text-right">

10
src/app/vault/vaultAddLoginController.js
View File

@ -2,7 +2,7 @@
.module('bit.vault')
.controller('vaultAddLoginController', function ($scope, apiService, $uibModalInstance, cryptoService, cipherService,
passwordService, selectedFolder, $analytics, checkedFavorite, $rootScope, authService) {
passwordService, selectedFolder, $analytics, checkedFavorite, $rootScope, authService, $uibModal) {
$analytics.eventTrack('vaultAddLoginController', { category: 'Modal' });
$scope.folders = $rootScope.vaultFolders;
$scope.login = {
@ -61,4 +61,12 @@
$scope.close = function () {
$uibModalInstance.dismiss('close');
};
$scope.showPremium = function () {
$uibModal.open({
animation: true,
templateUrl: 'app/views/premiumRequired.html',
controller: 'premiumRequiredController'
});
};
});

10
src/app/vault/vaultEditLoginController.js
View File

@ -2,7 +2,7 @@
.module('bit.vault')
.controller('vaultEditLoginController', function ($scope, apiService, $uibModalInstance, cryptoService, cipherService,
passwordService, loginId, $analytics, $rootScope, authService) {
passwordService, loginId, $analytics, $rootScope, authService, $uibModal) {
$analytics.eventTrack('vaultEditLoginController', { category: 'Modal' });
$scope.folders = $rootScope.vaultFolders;
$scope.login = {};
@ -98,4 +98,12 @@
$scope.close = function () {
$uibModalInstance.dismiss('cancel');
};
$scope.showPremium = function () {
$uibModal.open({
animation: true,
templateUrl: 'app/views/premiumRequired.html',
controller: 'premiumRequiredController'
});
};
});

9
src/app/vault/views/vaultAddLogin.html
View File

@ -76,7 +76,7 @@
</div>
</div>
<div password-meter="login.password" password-meter-username="login.username"
outer-class="xs" outer-style="margin: 0;"></div>
outer-class="xs" class="password-meter"></div>
</div>
</div>
<div class="row">
@ -87,9 +87,12 @@
ng-readonly="readOnly" api-field />
</div>
</div>
<div class="col-md-6">
<label class="invisible hidden-sm" for="verification-code">Verification Code</label>
<div class="col-md-6 totp-col">
<div totp="login.totp" id="verification-code" ng-if="premium"></div>
<div ng-if="!premium">
<a href="#" stop-click ng-click="showPremium()"><img src="images/totp-countdown.png" alt="" /></a>
<span class="label label-info clickable" ng-click="showPremium()">PREMIUM</span>
</div>
</div>
</div>
<div class="form-group" show-errors>

9
src/app/vault/views/vaultEditLogin.html
View File

@ -88,7 +88,7 @@
</div>
</div>
<div password-meter="login.password" password-meter-username="login.username"
outer-class="xs" outer-style="margin: 0;"></div>
outer-class="xs" class="password-meter"></div>
</div>
</div>
<div class="row">
@ -99,9 +99,12 @@
ng-readonly="readOnly" api-field />
</div>
</div>
<div class="col-md-6">
<label class="invisible hidden-sm hidden-xs" for="verification-code">Verification Code</label>
<div class="col-md-6 totp-col">
<div totp="login.totp" id="verification-code" ng-if="premium"></div>
<div ng-if="!premium">
<a href="#" stop-click ng-click="showPremium()"><img src="images/totp-countdown.png" alt="" /></a>
<span class="label label-info clickable" ng-click="showPremium()">PREMIUM</span>
</div>
</div>
</div>
<div class="form-group" show-errors>

BIN
src/images/totp-countdown.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

31
src/less/vault.less
View File

@ -620,14 +620,29 @@ h1, h2, h3, h4, h5, h6 {
}
}
.clickable {
cursor: pointer;
}
.label-full {
font-size: 85%;
font-weight: normal;
}
.totp {
margin-bottom: 10px;
.totp-col {
margin: -10px 0 10px 0;
@media (min-width: @screen-md) {
padding-top: 26px;
margin: 0;
}
img {
margin-right: 10px;
}
}
.totp {
.totp-code {
font-family: @font-family-monospace;
font-size: 1.2em;
@ -681,3 +696,15 @@ h1, h2, h3, h4, h5, h6 {
}
}
}
.password-meter {
.progress {
margin-bottom: 10px;
}
@media (min-width: @screen-md) {
.progress {
margin-bottom: 0;
}
}
}