Adds expand-content component, update various UI measurements

This commit is contained in:
Sam Cheng Hung 2018-07-24 15:27:21 +08:00
commit 4b18e4b1c3
11 changed files with 133 additions and 59 deletions

View file

@ -7,9 +7,9 @@
</ion-nav-back-button>
</ion-nav-bar>
<ion-content class="padded-bottom-cta bg-neutral">
<ion-content class="padded-bottom-cta bg-neutral"
ng-init="memoExpanded = false">
<div class="header">
<h1 class="title" translate>You are sending</h1>
<div class="content" translate>
<p class="large">13.98 USD</p>
<p>0.014 BCH</p>
@ -17,7 +17,7 @@
</div>
<div class="content-frame negative-top">
<div class="card">
<div class="card card-gutter-compact">
<div class="item item-compact">From:</div>
<div class="item item-gutterless item-complex item-avatar">
<div class="item-content item-content-avatar">
@ -31,21 +31,8 @@
</div>
</div>
</div>
<div class="card">
<div class="item item-compact">From:</div>
<div class="item item-gutterless item-complex item-avatar">
<div class="item-content item-content-avatar">
<i class="icon big-icon-svg theme-circle theme-circle-services">
<div class="bg icon-wallet"
ng-style="{'background-color': '#535353'}"></div>
</i>
<h2>Personal Wallet <span class="highlight" ng-style="{'color': '#535353'}">(BTC)</span></h2>
<p>128.67</p>
</div>
</div>
</div>
<div class="card">
<div class="item item-compact">To:</div>
<div class="card card-gutter-compact">
<div class="item item-compact" translate>To:</div>
<div class="item item-gutterless item-complex item-avatar">
<div class="item-content item-content-avatar">
<img src="img/contact-placeholder.svg" class="bg">
@ -57,9 +44,22 @@
</div>
</div>
</div>
<div class="action-minor mt-negative right">
<img src="img/icon-bookmark.svg" class="action-icon">
<span class="action-text">Add a personal note</span>
<div class="expand-content-frame">
<div class="action-minor mt-negative text-right expand-content-trigger"
ng-class="{ 'expand-content-revealed': memoExpanded }"
ng-click="memoExpanded = !memoExpanded">
<img src="img/icon-bookmark.svg" class="action-icon">
<span class="action-text">Add a personal note</span>
</div>
<div class="card card-gutter-compact expand-content"
ng-class="{ 'expand-content-revealed': memoExpanded }">
<div class="item item-compact" translate>Personal Note:</div>
<div class="item">
<div class="item-content">
<textarea elastic placeholder="{{btx.note.body || btx.message || 'Enter text here'}}" class="elastic"></textarea>
</div>
</div>
</div>
</div>
</div>
</ion-content>