diff --git a/scss/ionic.app.scss b/scss/ionic.app.scss index 8f7eeec2beb0056bba80b6425fc7cd8c6808601a..cd5d6799724d728c750e8cc49400e3f0cf6ca84f 100644 --- a/scss/ionic.app.scss +++ b/scss/ionic.app.scss @@ -989,36 +989,6 @@ body { height: 200px; } - .qrcode { - position: absolute; - top: 30px; - padding: 3px; - background: #fff; - width: 90px; - max-width: 30%; - right: -170px; - -webkit-backface-visibility: hidden !important; - backface-visibility: hidden !important; - -webkit-transition: all 0.5s ease-out !important; - transition: all 0.5s ease-out !important; - - img { - width: 100%; - } - } - - .qrcode.on { - right: 30px; - } - - .qrcode.active { - top: 0px !important; - right: 0px !important; - padding: 10px; - width: 200px; - max-width: 50%; - } - .item-text-wrap { white-space: normal !important; } @@ -1059,8 +1029,43 @@ body { } + +.view-wallet, +.view-identity { + .qrcode { + position: absolute; + top: 30px; + padding: 3px; + background: #fff; + width: 90px; + max-width: 30%; + right: -170px; + -webkit-backface-visibility: hidden !important; + backface-visibility: hidden !important; + -webkit-transition: all 0.5s ease-out !important; + transition: all 0.5s ease-out !important; + + img { + width: 100%; + } + } + + .qrcode.on { + right: 30px; + } + + .qrcode.active { + top: 0px !important; + right: 0px !important; + padding: 10px; + width: 200px; + max-width: 50%; + } +} + @media screen and (max-width: $screen-sm-max) { - .view-wallet { + .view-wallet, + .view-identity { .qrcode { top: 8px; width: 60px; @@ -1077,6 +1082,11 @@ body { } } } + .view-identity { + .qrcode.active { + width: 180px; + } + } } @@ -1164,8 +1174,10 @@ body { background-color: var(--refresher-background-color); } + } + /****** * Cards *******/ diff --git a/www/js/controllers/wot-controllers.js b/www/js/controllers/wot-controllers.js index 82e2f5ac59a98ca8f1eca01edadf20ecd2b5fccb..db0194e04dfff9af984cba81d37c2ecce90534d0 100644 --- a/www/js/controllers/wot-controllers.js +++ b/www/js/controllers/wot-controllers.js @@ -1038,6 +1038,7 @@ function WotIdentityViewController($scope, $rootScope, $controller, $timeout, $s angular.extend(this, $controller('WotIdentityAbstractCtrl', {$scope: $scope})); $scope.motion = UIUtils.motion.fadeSlideInRight; + $scope.qrcodeId = 'qrcode-wot-' + $scope.$id; $scope.$on('$ionicView.enter', function(e, state) { @@ -1050,6 +1051,8 @@ function WotIdentityViewController($scope, $rootScope, $controller, $timeout, $s $scope.removeActionParamInLocationHref(state); } + + $scope.showQRCode(); }; var options = { cache: true, @@ -1127,6 +1130,32 @@ function WotIdentityViewController($scope, $rootScope, $controller, $timeout, $s }); }); }; + + $scope.showQRCode = function(timeout) { + if (!$scope.qrcode) { + $scope.qrcode = new QRCode( + $scope.qrcodeId, + { + text: $scope.formData.pubkey, + width: 200, + height: 200, + correctLevel: QRCode.CorrectLevel.L + }); + UIUtils.motion.toggleOn({selector: '#'+$scope.qrcodeId}, timeout || 1100); + } + else { + $scope.qrcode.clear(); + $scope.qrcode.makeCode($scope.formData.pubkey); + UIUtils.motion.toggleOn({selector: '#'+$scope.qrcodeId}, timeout || 1100); + } + }; + + $scope.hideQRCode = function() { + if ($scope.qrcode) { + $scope.qrcode.clear(); + UIUtils.motion.toggleOff({selector: '#'+$scope.qrcodeId}); + } + }; } /** diff --git a/www/templates/wot/view_identity.html b/www/templates/wot/view_identity.html index 776b1476eb8f51a33bf80b6e1656ab140636c78c..8e820bc9557616ee3bf78cc13e7b61e5d7069947 100644 --- a/www/templates/wot/view_identity.html +++ b/www/templates/wot/view_identity.html @@ -38,6 +38,11 @@ </div> + <div ng-attr-id="{{ qrcodeId }}" + class="qrcode spin" + ng-class="{'active': toggleQRCode}" + ng-click="toggleQRCode = !toggleQRCode"></div> + <!-- button bar--> <a id="wot-share-anchor-{{::formData.pubkey}}"></a> <div class="hidden-xs hidden-sm padding text-center">