From 795f816fbdcd3479f2bba269d04805cd9294c44e Mon Sep 17 00:00:00 2001
From: Jamal Jackson <jamal@bitpay.com>
Date: Mon, 21 Nov 2016 10:39:38 -0500
Subject: [PATCH] added styling and needed improvements to html organization on
 disclaimer view to create animation for terms display

---
 src/js/controllers/onboarding/disclaimer.js   |  2 +-
 .../views/onboarding/onboard-disclaimer.scss  | 40 ++++++++++++++++++-
 www/views/onboarding/disclaimer.html          | 16 +++++++-
 3 files changed, 54 insertions(+), 4 deletions(-)

diff --git a/src/js/controllers/onboarding/disclaimer.js b/src/js/controllers/onboarding/disclaimer.js
index dd527ac59..7609b64f5 100644
--- a/src/js/controllers/onboarding/disclaimer.js
+++ b/src/js/controllers/onboarding/disclaimer.js
@@ -34,7 +34,7 @@ angular.module('copayApp.controllers').controller('disclaimerController', functi
   };
 
   $scope.openTerms = function() {
-    $scope.shrinkView = true;
+    $scope.shrinkView = !$scope.shrinkView;
   }
 
   $scope.goBack = function() {
diff --git a/src/sass/views/onboarding/onboard-disclaimer.scss b/src/sass/views/onboarding/onboard-disclaimer.scss
index 281976e71..70ceca8e3 100644
--- a/src/sass/views/onboarding/onboard-disclaimer.scss
+++ b/src/sass/views/onboarding/onboard-disclaimer.scss
@@ -1,9 +1,9 @@
 #onboarding-disclaimer {
   color: #fff;
   height: 100%;
-  transition: transform 1s ease;
+  transition: transform 2.5s ease;
   &.shrink{
-    transform: scale(.98);
+    transform: scale(.8);
   }
   &-container {
     max-width: 450px;
@@ -83,6 +83,41 @@
     left:0;
   }
 }
+#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;
+    width: 100%;
+    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;
@@ -90,6 +125,7 @@
   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();
diff --git a/www/views/onboarding/disclaimer.html b/www/views/onboarding/disclaimer.html
index 557b574ae..f728ccd9e 100644
--- a/www/views/onboarding/disclaimer.html
+++ b/www/views/onboarding/disclaimer.html
@@ -10,7 +10,7 @@
     </ion-nav-bar>
     <ion-content scroll="false" ng-class="{'has-header': backedUp == 'false'}">
       <div id="onboarding-disclaimer-container">
-        <div ng-show="resume" class="onboarding-topic" id="disclaimer-topic" translate>Quick review! {{shrinkView}}</div>
+        <div ng-show="resume" class="onboarding-topic" id="disclaimer-topic" translate>Quick review!</div>
         <div ng-show="!resume" class="onboarding-topic" id="disclaimer-topic" translate>Almost done! Let's 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>
         <ion-list>
@@ -24,6 +24,20 @@
       </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>
+  </div>
+</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>