Merge pull request #5092 from jamal-jackson/feature/terms_conditions_polish

terms of use disclaimer view animation

src/js/controllers/onboarding/disclaimer.js

@@ -1,17 +1,18 @@
 'use strict';
 
-angular.module('copayApp.controllers').controller('disclaimerController', function($scope, $timeout, $state, $log, $ionicModal, profileService, uxLanguage, externalLinkService, storageService, $stateParams, startupService) {
+angular.module('copayApp.controllers').controller('disclaimerController', function($scope, $timeout, $state, $log, $ionicModal, profileService, uxLanguage, externalLinkService, storageService, $stateParams, startupService, $rootScope) {
 
   $scope.$on("$ionicView.afterEnter", function() {
     startupService.ready();
   });
-
   $scope.init = function() {
     $scope.lang = uxLanguage.currentLanguage;
     $scope.terms = {};
-    $scope.accept1 = $scope.accept2 = $scope.accept3 = false;
+    $scope.accepted = {};
+    $scope.accepted.first = $scope.accepted.second = $scope.accepted.third = false;
     $scope.backedUp = $stateParams.backedUp;
     $scope.resume = $stateParams.resume;
+    $scope.shrinkView = false;
     $timeout(function() {
       $scope.$apply();
     }, 1);
@@ -32,14 +33,9 @@ angular.module('copayApp.controllers').controller('disclaimerController', functi
     externalLinkService.open(url, target);
   };
 
-  $scope.openTermsModal = function() {
-    $ionicModal.fromTemplateUrl('views/modals/terms.html', {
-      scope: $scope
-    }).then(function(modal) {
-      $scope.termsModal = modal;
-      $scope.termsModal.show();
-    });
-  };
+  $scope.openTerms = function() {
+    $scope.shrinkView = !$scope.shrinkView;
+  }
 
   $scope.goBack = function() {
     $state.go('onboarding.backupRequest', {

src/js/routes.js

@@ -737,7 +737,8 @@ angular.module('copayApp').config(function(historicLogProvider, $provide, $logPr
         url: '/disclaimer/:walletId/:backedUp/:resume',
         views: {
           'onboarding': {
-            templateUrl: 'views/onboarding/disclaimer.html'
+            templateUrl: 'views/onboarding/disclaimer.html',
+            controller: 'disclaimerController'
           }
         }
       })

src/sass/views/onboarding/onboard-disclaimer.scss

@@ -1,6 +1,10 @@
 #onboarding-disclaimer {
   color: #fff;
   height: 100%;
+  transition: transform 2.5s ease;
+  &.shrink{
+    transform: scale(.8);
+  }
   &-container {
     max-width: 450px;
     display: flex;
@@ -78,57 +82,94 @@
     top:30%;
     left:0;
   }
-  #agree-to-terms {
+}
+#terms-of-use{
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 10;
+  transition: top 1s ease;
+  transition-delay: .25s;
+  width: 100%;
+  overflow: scroll;
+  background: #fff;
+  height: 100%;
+  ion-nav-bar{
+    position: fixed;
     background: #fff;
-    padding:1rem;
-    position: absolute;
-    bottom: 0;
     width: 100%;
-    &.header-present{
-      bottom: 38px;
-    }
-    &-content{
-      max-width: 600px;
-      @include center-block();
-    }
-    .item{
-      color:rgb(58,58,58);
-      padding-bottom: 2.5rem;
-      float: left;
-      .item-content{
-        white-space: normal;
-      }
-    }
-    p{
-      color:rgb(58,58,58);
-      text-align: left;
-    }
-    @media (min-width:450px){
-      p{
-        position: relative;
-        top: .6rem;
-      }
-    }
-    .checkbox input:before,
-    .checkbox .checkbox-icon:before{
-      border-color:$soft-blue;
-    }
-    .checkbox input:checked:before,
-    .checkbox input:checked + .checkbox-icon:before {
-      border-color: rgb(19, 229, 182);
-    }
-    button{
-      margin-top:1.5rem;
+    z-index: 15;
+  }
+  .has-header{
+    width:100%;
+    background:#fff;
+    overflow-y:scroll;
+    position:relative;
+    #terms{
+      max-width:400px;
+      padding-top:.5rem;
       position: relative;
+      margin: 0 auto;
+      padding-bottom: 165px;
+      width:90%;
     }
   }
+  &.slideUp{
+    top:0;
+  }
+}
+#agree-to-terms {
+  background: #fff;
+  padding:1rem;
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  z-index: 10;
+  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.25);
+  &-content{
+    max-width: 450px;
+    @include center-block();
+  }
+  .item{
+    color:rgb(58,58,58);
+    padding-bottom: 2.5rem;
+    float: left;
+    border:none;
+    .item-content{
+      white-space: normal;
+    }
+  }
+  p{
+    color:rgb(58,58,58);
+    text-align: left;
+  }
+  @media (min-width:450px){
+    p{
+      position: relative;
+      top: .6rem;
+    }
+  }
+  .checkbox input:before,
+  .checkbox .checkbox-icon:before{
+    border-color:$soft-blue;
+    background:#fff;
+  }
+  .checkbox input:after,
+  .checkbox .checkbox-icon:after{
+    border-color:#13e5b6;
+  }
+  .checkbox input:checked:before,
+  .checkbox input:checked + .checkbox-icon:before {
+    border-color: rgb(19, 229, 182);
+  }
+  button{
+    margin-top:1.5rem;
+    position: relative;
+  }
 }
-
 @media (max-height:460px){
-  #onboarding-disclaimer{
     #agree-to-terms{
       position: relative;
       float:left;
     }
-  }
 }

src/sass/views/onboarding/onboarding.scss

@@ -53,6 +53,10 @@
   width: 100%;
 }
 
+.pane-onboarding{
+  background: #0B1E4F;
+}
+
 @import "terms-of-use";
 @import "onboard-welcome";
 @import "onboard-tour";