mirror of
https://github.com/bitwarden/browser.git
synced 2024-11-24 12:06:15 +01:00
UI adjustments for premium adverts
This commit is contained in:
parent
ed13644a02
commit
b380d723b7
@ -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) {
|
||||
|
@ -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();
|
||||
};
|
||||
});
|
||||
|
@ -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">
|
||||
|
@ -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'
|
||||
});
|
||||
};
|
||||
});
|
||||
|
@ -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'
|
||||
});
|
||||
};
|
||||
});
|
||||
|
@ -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>
|
||||
|
@ -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
BIN
src/images/totp-countdown.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.6 KiB |
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user