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() {
+  $scope.openTerms = function() {
-    $ionicModal.fromTemplateUrl('views/modals/terms.html', {
+    $scope.shrinkView = !$scope.shrinkView;
-      scope: $scope
+  }
-    }).then(function(modal) {
-      $scope.termsModal = modal;
-      $scope.termsModal.show();
-    });
-  };
 
   $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{
+    z-index: 15;
-      bottom: 38px;
+  }
-    }
+  .has-header{
-    &-content{
+    width:100%;
-      max-width: 600px;
+    background:#fff;
-      @include center-block();
+    overflow-y:scroll;
-    }
+    position:relative;
-    .item{
+    #terms{
-      color:rgb(58,58,58);
+      max-width:400px;
-      padding-bottom: 2.5rem;
+      padding-top:.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;
       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";

www/views/onboarding/disclaimer.html

@@ -1,32 +1,48 @@
-<ion-view id="onboarding-disclaimer" class="onboarding" ng-controller="disclaimerController" ng-init=init()>
+<ion-pane class="pane-onboarding">
-  <ion-nav-bar class="bar-stable" ng-if="backedUp == 'false'">
+  <ion-view id="onboarding-disclaimer" class="onboarding" ng-class="{'shrink': shrinkView}" ng-init=init()>
-    <ion-nav-title></ion-nav-title>
+    <ion-nav-bar class="bar-stable" ng-if="backedUp == 'false'">
-    <ion-nav-buttons side="primary">
+      <ion-nav-title></ion-nav-title>
-      <button class="button back-button button-clear" ng-click="goBack()">
+      <ion-nav-buttons side="primary">
-        <i class="icon ion-ios-arrow-thin-left"></i>
+        <button class="button back-button button-clear" ng-click="goBack()">
-      </button>
+          <i class="icon ion-ios-arrow-thin-left"></i>
-    </ion-nav-buttons>
+        </button>
-  </ion-nav-bar>
+      </ion-nav-buttons>
-  <ion-content scroll="false" ng-class="{'has-header': backedUp == 'false'}">
+    </ion-nav-bar>
-    <div id="onboarding-disclaimer-container">
+    <ion-content scroll="false" ng-class="{'has-header': backedUp == 'false'}">
-      <div ng-show="resume" class="onboarding-topic" id="disclaimer-topic" translate>Quick review!</div>
+      <div id="onboarding-disclaimer-container">
-      <div ng-show="!resume" class="onboarding-topic" id="disclaimer-topic" translate>Almost done! Let's review.</div>
+        <div ng-show="resume" class="onboarding-topic" id="disclaimer-topic" translate>Quick review!</div>
-      <div class="onboarding-description" id="disclaimer-description" translate>Bitcoin is different &ndash; it cannot be safely held with a bank or web service.</div>
+        <div ng-show="!resume" class="onboarding-topic" id="disclaimer-topic" translate>Almost done! Let's review.</div>
-      <ion-list>
+        <div class="onboarding-description" id="disclaimer-description" translate>Bitcoin is different &ndash; it cannot be safely held with a bank or web service.</div>
-        <ion-checkbox ng-model="accept1">
+        <ion-list>
-          <span translate>I understand that my funds are held securely on this device, not by a company.</span>
+          <ion-checkbox ng-model="accepted.first">
-        </ion-checkbox>
+            <span translate>I understand that my funds are held securely on this device, not by a company.</span>
-        <ion-checkbox ng-model="accept2">
+          </ion-checkbox>
-          <span translate>I understand that if this app is moved to another device or deleted, my bitcoin can only be recovered with the backup phrase.</span>
+          <ion-checkbox ng-model="accepted.second">
-        </ion-checkbox>
+            <span translate>I understand that if this app is moved to another device or deleted, my bitcoin can only be recovered with the backup phrase.</span>
-      </ion-list>
+          </ion-checkbox>
-    </div>
+        </ion-list>
-    <div id="agree-to-terms" ng-if="accept1 && accept2" ng-class="{'header-present': backedUp == 'false'}">
-      <div id="agree-to-terms-content" class="center-block">
-        <ion-checkbox ng-model="terms.accept3"></ion-checkbox>
-        <p translate>I have read, understood, and agree to the <a ng-click="openTermsModal()" translate>Terms of Use</a>.</p>
-        <button ng-disabled="!accept1 || !accept2 || !terms.accept3" class="button button-block button-positive" ng-click="confirm()" translate>Confirm &amp; Finish</button>
       </div>
+    </ion-content>
+  </ion-view>
+  <div id="terms-of-use" ng-class="{'slideUp': shrinkView}">
+    <ion-nav-bar class="bar-ligt">
+      <ion-nav-title>{{'Terms of Use' | translate}}</ion-nav-title>
+      <ion-nav-buttons side="primary">
+        <button class="button no-border" ng-click="openTerms()">
+          <i class="ion-ios-arrow-down"></i>
+        </button>
+      </ion-nav-buttons>
+    </ion-nav-bar>
+    <div class="has-header">
+      <div ng-include="'views/includes/terms.html'" direction="y"></div>
     </div>
-  </ion-content>
+  </div>
-</ion-view>
+</div>
+  <div id="agree-to-terms" ng-if="accepted.first && accepted.second" ng-class="{'header-present': backedUp == 'false'}">
+    <div id="agree-to-terms-content" class="center-block">
+      <ion-checkbox ng-model="terms.accepted"></ion-checkbox>
+      <p translate>I have read, understood, and agree to the <a ng-click="openTerms()" translate>Terms of Use</a>.</p>
+      <button ng-disabled="!accepted.first || !accepted.second || !terms.accepted" class="button button-block button-positive" ng-click="confirm()" translate>Confirm &amp; Finish</button>
+    </div>
+  </div>
+</ion-pane>