BTCPrivate
/
copay
mirror of https://github.com/BTCPrivate/copay.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat(design): polish all settings views 

Closes #424
This commit is contained in:
Jason Dreyzehner 2016-10-12 22:01:48 -04:00
parent b755f915c0
commit 4f8758c6d7
12 changed files with 60 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/sass/icons.scss
View File

@ -1,19 +1,19 @@
.icon.bp-arrow-right {
@extend .ion-ios-arrow-right;
@extend %just-a-hint;
@extend .just-a-hint;
}
.icon.bp-arrow-down {
@extend .ion-ios-arrow-down;
@extend %just-a-hint;
@extend .just-a-hint;
}
.icon.bp-arrow-up {
@extend .ion-ios-arrow-up;
@extend %just-a-hint;
@extend .just-a-hint;
}
%just-a-hint {
.just-a-hint {
opacity: 0.2;
}

12
src/sass/views/advancedSettings.scss
View File

@ -8,10 +8,6 @@
#advanced-settings {
.list {
.item {
color: #444;
border-top: none;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
&:before {
display: block;
position: absolute;
@ -39,15 +35,13 @@
color: rgb(58, 58, 58);
}
}
.has-comment {
border-bottom: 0 none;
}
.comment {
padding: 15px;
background-color: #fff;
color: rgba(74, 74, 74, 0.8);
}
.divider-comment {
padding: 15px;
color: rgba(74, 74, 74, 0.8);
font-size: 15px;
}
}
}

24
src/sass/views/tab-settings.scss
View File

@ -27,7 +27,7 @@
color: $light-gray;
font-size: 14px;
}
.settings-list {
.settings-input-group {
background-color: #fff;
.item-stacked-label {
padding: 1rem;
@ -37,16 +37,25 @@
font-size: 12px;
font-weight: bold;
}
}
.settings-list {
.item {
color: $dark-gray;
border-top: none;
padding-top: 1.3rem;
padding-bottom: 1.3rem;
&.item-divider {
color: $mid-gray;
padding-bottom: .5rem;
font-size: .9rem;
}
}
}
}
#tab-settings {
.list {
.item {
color: $dark-gray;
border-top: none;
padding-top: 1.3rem;
padding-bottom: 1.3rem;
.big-icon-svg {
& > .bg{
width:20px;
@ -75,11 +84,6 @@
right: 0;
content: '';
}
&.item-divider {
color: $mid-gray;
padding-bottom: .5rem;
font-size: .9rem;
}
&.item-heading {
&:before {
top: 99%

4
www/img/icon-link.svg
View File

@ -5,7 +5,7 @@
<desc>Created with sketchtool.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Icons" transform="translate(-712.000000, -769.000000)" stroke="#8F8F90">
<g id="Icons" transform="translate(-712.000000, -769.000000)" stroke="#666677">
<g id="ui-24px-outline-2_link-69" transform="translate(713.384615, 770.000000)">
<g id="Group">
<path d="M8.1,3.6 L10.35,1.35 C12.06,-0.36 14.94,-0.36 16.65,1.35 L16.65,1.35 C18.36,3.06 18.36,5.94 16.65,7.65 L14.4,9.9" id="Shape"></path>
@ -15,4 +15,4 @@
</g>
</g>
</g>
</svg>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

12
www/views/advancedSettings.html
View File

@ -6,7 +6,7 @@
</ion-nav-bar>
<ion-content>
<div class="list">
<div class="settings-list list">
<div class="item item-divider" translate>Enabled Integrations</div>
<ion-toggle ng-show="!isWP" ng-model="bitpayCardEnabled.value" toggle-class="toggle-balanced" ng-change="bitpayCardChange()">
@ -30,7 +30,7 @@
<div class="item item-divider" translate>Wallet Operation</div>
<ion-toggle ng-model="spendUnconfirmed.value" toggle-class="toggle-balanced" ng-change="spendUnconfirmedChange()">
<ion-toggle class="has-comment" ng-model="spendUnconfirmed.value" toggle-class="toggle-balanced" ng-change="spendUnconfirmedChange()">
<span class="toggle-label" translate>Use Unconfirmed Funds</span>
</ion-toggle>
<div class="comment">
@ -38,11 +38,13 @@
</div>
<div class="item item-divider" translate>Experimental Features</div>
<div class="divider-comment">
<span translate>These features aren't quite ready for primetime. They may change, stop working, or disappear at any time.</span>
<div class="settings-explaination">
<div class="settings-description" translate>
These features aren't quite ready for primetime. They may change, stop working, or disappear at any time.
</div>
</div>
<ion-toggle ng-show="!isWP" ng-model="recentTransactionsEnabled.value" toggle-class="toggle-balanced" ng-change="recentTransactionsChange()">
<ion-toggle class="has-comment" ng-show="!isWP" ng-model="recentTransactionsEnabled.value" toggle-class="toggle-balanced" ng-change="recentTransactionsChange()">
<span class="toggle-label" translate>Recent Transaction Card</span>
</ion-toggle>
<div class="comment">

20
www/views/paperWallet.html
View File

@ -6,21 +6,13 @@
</ion-nav-bar>
<ion-content>
<div class="row" ng-show="needsBackup">
<div class="columns">
<h4></h4>
<div class="size-14 text-warning m20b">
<i class="fi-alert size-12"></i>
<span class="text-warning" translate>Backup Needed</span>.
<span translate>
Before receiving funds, you must backup your wallet. If this device is lost, it is impossible to access your funds without a backup.
</span>
</div>
<div class="text-center m20t">
<a class="button outline round dark-gray" href ui-sref="tabs.preferences.preferencesAdvanced">
<span translate>Preferences</span>
</a>
<div class="settings" class="row" ng-show="needsBackup">
<div class="settings-explaination">
<div class="settings-heading" translate>Backup Needed</div>
<div class="settings-description" translate>
Before receiving funds, you must backup your wallet. If this device is lost, it is impossible to access your funds without a backup.
</div>
<a class="button button-standard button-primary" href ui-sref="tabs.preferences.preferencesAdvanced" translate>Preferences</a>
</div>
</div>

4
www/views/preferences.html
View File

@ -7,7 +7,7 @@
</ion-nav-back-button>
</ion-nav-bar>
<ion-content>
<div class="list">
<div class="list settings-list">
<div class="item item-divider"></div>
<a class="item item-icon-right" ui-sref="tabs.preferences.preferencesAlias">
<span translate>Name</span>
@ -56,7 +56,7 @@
</div>
<div class="item item-divider"></div>
<a class="item item-icon-right" ui-sref="tabs.preferences.preferencesAdvanced">
<span translate>Advanced</span>
<span translate>More Options</span>
<i class="icon bp-arrow-right"></i>
</a>
</div>

2
www/views/preferencesAdvanced.html
View File

@ -1,6 +1,6 @@
<ion-view class="settings">
<ion-nav-bar class="bar-royal">
<ion-nav-title>{{'Advanced Preferences' | translate}}</ion-nav-title>
<ion-nav-title>{{'More Options' | translate}}</ion-nav-title>
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>

2
www/views/preferencesAlias.html
View File

@ -12,7 +12,7 @@
<div class="settings-description" translate>When this wallet was created, it was called &ldquo;{{walletName}}&rdquo;. You can change the name displayed on this device below.</div>
</div>
<form name="aliasForm" ng-submit="save(aliasForm)" novalidate>
<div class="list settings-list">
<div class="list settings-input-group">
<label class="item item-input item-stacked-label">
<span class="input-label" transalate>Name</span>
<input type="text" id="alias" name="alias" ng-model="alias.value" placeholder="Personal Wallet" required>

11
www/views/preferencesEmail.html
View File

@ -1,4 +1,4 @@
<ion-view>
<ion-view class="settings">
<ion-nav-bar class="bar-royal">
<ion-nav-title>
{{'Email Notifications'|translate}}
@ -7,10 +7,15 @@
</ion-nav-back-button>
</ion-nav-bar>
<ion-content>
<div class="settings-explaination">
<div class="settings-description" translate>
You'll receive email notifications about payments sent and received from this wallet.
</div>
</div>
<form name="emailForm" ng-submit="save(emailForm)" novalidate>
<div class="card list">
<div class="list settings-input-group">
<label class="item item-input item-stacked-label">
<span class="input-label" transalate>Email for wallet notifications</span>
<span class="input-label" transalate>Email Address</span>
<input type="email" id="email" name="email" ng-model="email.value" required></input>
</label>
</div>

14
www/views/preferencesInformation.html
View File

@ -88,15 +88,21 @@
<div ng-show="addrs">
<div class="item item-divider" translate>
Last Wallet Addresses
Latest Wallet Addresses
</div>
<div class="settings-explaination">
<div class="settings-description" translate>
Only &ldquo;main&rdquo; addresses are shown below. This excludes &ldquo;change&rdquo; address.
</div>
</div>
<div class="item" ng-repeat="a in addrs" class="oh" copy-to-clipboard="a.address">
<span>{{a.address}}</span>
<span class="item-note">{{a.path}} &middot; {{a.createdOn *1000 | amDateFormat:'MMMM Do YYYY, h:mm a' }}</span>
</div>
<div class="padding text-center" translate>
Only Main (not change) addresses are shown. The addresses on this list were not verified locally at this time.
<div class="settings-explaination">
<div class="settings-description" translate>
Please note: due to resource constraints, this list of addresses is not verified locally. A compromised BWS node could return addresses which are not controlled by this wallet.
</div>
</div>
<button class="button button-standard button-primary" ng-click="scan()" translate>
Scan addresses for funds

4
www/views/tab-settings.html
View File

@ -4,7 +4,7 @@
</ion-nav-bar>
<ion-content>
<div class="list">
<div class="settings-list list">
<div class="item item-divider"></div>
<a class="ng-hide item item-icon-left item-icon-right" ng-hide="true">
<i class="icon big-icon-svg">
@ -26,7 +26,7 @@
</i>
<span translate>Help &amp; Support</span>
<i class="icon big-icon-svg">
<img src="img/icon-link.svg" class="bg"/>
<img src="img/icon-link.svg" class="bg just-a-hint"/>
</i>
</a>
<a class="ng-hide item item-icon-left item-icon-right" ng-hide="true">