Updated icons and links (#255)

* added appropriate wallet design

* added new links to settings tab, and associated svg images

* added space below last link in settings list

* hiding links with views not ready

* added help and support link

* updated settings view

* removed empty param
This commit is contained in:
Jamal Jackson 2016-10-07 11:35:43 -04:00 committed by Jason Dreyzehner
parent d658a3a98c
commit 5559ce9b3f
8 changed files with 135 additions and 14 deletions

View File

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="19px" viewBox="0 0 20 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 40.1 (33804) - http://www.bohemiancoding.com/sketch -->
<title>59625EA8-8AF4-43EC-AEF5-596F03BE3707</title>
<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(-802.000000, -769.000000)" stroke="#8F8F90">
<g id="media-24px-outline-1_flash-21" transform="translate(802.723270, 769.877358)">
<g id="Group">
<polygon id="Shape" points="10 0 0 11 9 11 8 18 18 7 9 7"></polygon>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 841 B

13
public/img/icon-heart.svg Normal file
View File

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 40.1 (33804) - http://www.bohemiancoding.com/sketch -->
<g id="Settings" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Icons" transform="translate(-233.000000, -769.000000)" stroke="#8F8F90">
<g id="icons/list-items/sync" transform="translate(233.615385, 770.000000)">
<g id="Group" transform="translate(0.368286, 0.383523)">
<path d="M11.7851662,0 C10.2383632,0 8.91253197,0.84375 8.10230179,2.07102273 C7.29207161,0.84375 5.96624041,0 4.41943734,0 C1.9887468,0 0,2.07102273 0,4.60227273 C0,9.20454545 8.10230179,16.1079545 8.10230179,16.1079545 C8.10230179,16.1079545 16.2046036,9.20454545 16.2046036,4.60227273 C16.2046036,2.07102273 14.2158568,0 11.7851662,0 L11.7851662,0 Z" id="Shape"></path>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

View File

@ -0,0 +1,18 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 40.1 (33804) - http://www.bohemiancoding.com/sketch -->
<title>8BB4F43E-0712-4B4C-892E-C26DCD0E1646</title>
<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(-757.000000, -769.000000)" stroke="#8F8F90">
<g id="ui-24px-outline-2_alert-circle-?" transform="translate(758.000000, 770.000000)">
<g id="Group">
<circle id="Oval" cx="9" cy="9" r="9"></circle>
<path d="M9,10.6363636 L9,9.81818182 C10.3090909,9.81818182 11.4545455,8.67272727 11.4545455,7.36363636 C11.4545455,6.05454545 10.3090909,4.90909091 9,4.90909091 C8.01818182,4.90909091 7.11818182,5.64545455 6.70909091,6.46363636" id="Shape"></path>
<path d="M9,13.0909091 L9,13.9090909" id="Shape"></path>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

18
public/img/icon-link.svg Normal file
View File

@ -0,0 +1,18 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 40.1 (33804) - http://www.bohemiancoding.com/sketch -->
<title>6ACA215E-2C9D-419C-9E24-5CC78D09C2EA</title>
<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="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>
<path d="M9.9,14.4 L7.65,16.65 C5.94,18.36 3.06,18.36 1.35,16.65 L1.35,16.65 C-0.36,14.94 -0.36,12.06 1.35,10.35 L3.6,8.1" id="Shape"></path>
<path d="M6.3,11.7 L11.7,6.3" id="Shape"></path>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -1,6 +1,6 @@
'use strict';
angular.module('copayApp.controllers').controller('tabSettingsController', function($scope, $window, uxLanguage, platformInfo, profileService, feeService, configService) {
angular.module('copayApp.controllers').controller('tabSettingsController', function($scope, $window, uxLanguage, platformInfo, profileService, feeService, configService, externalLinkService) {
var updateConfig = function() {
@ -24,6 +24,10 @@ angular.module('copayApp.controllers').controller('tabSettingsController', funct
$scope.wallets = profileService.getWallets();
};
$scope.openExternalLink = function(url, target) {
externalLinkService.open(url, target);
};
$scope.$on("$ionicView.beforeEnter", function(event, data) {
updateConfig();
});

View File

@ -19,6 +19,15 @@
border-radius: 0;
box-shadow: none;
}
&.circle{
left:8px;
.bg {
border-radius: 50%;
width:30px;
height:30px;
padding:.1rem;
}
}
}
&:before {
display: block;

View File

@ -1,14 +1,21 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="19px" height="18px" viewBox="0 0 19 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg width="20px" height="19px" viewBox="0 0 20 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 40.1 (33804) - http://www.bohemiancoding.com/sketch -->
<title>C327FD1B-B044-4367-BB49-9491E30599E8</title>
<title>8A36B580-8A7A-4989-BE8C-FD9BAD98D91C</title>
<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(-231.000000, -769.000000)" stroke="#8F8F90">
<g id="icons/list-items/sync" transform="translate(232.000000, 770.000000)">
<g id="Icons" transform="translate(-666.000000, -770.000000)" stroke="#8F8F90">
<g id="icons/list-items/sync" transform="translate(666.769231, 770.000000)">
<g id="Group" transform="translate(0.368286, 0.383523)">
<path d="M11.7851662,0 C10.2383632,0 8.91253197,0.84375 8.10230179,2.07102273 C7.29207161,0.84375 5.96624041,0 4.41943734,0 C1.9887468,0 0,2.07102273 0,4.60227273 C0,9.20454545 8.10230179,16.1079545 8.10230179,16.1079545 C8.10230179,16.1079545 16.2046036,9.20454545 16.2046036,4.60227273 C16.2046036,2.07102273 14.2158568,0 11.7851662,0 L11.7851662,0 Z" id="Shape"></path>
<g id="holidays-24px-outline_message" transform="translate(0.298380, 0.949811)">
<g id="Group">
<polyline id="Shape" points="3.27272727 4.1727276 0 6.54545455 0 16.3636364 18 16.3636364 18 6.54545455 14.7272727 4.1727276"></polyline>
<path d="M0,6.54545455 L18,16.3636364" id="Shape"></path>
<path d="M18,6.54545455 L9,11.4545455" id="Shape"></path>
<path d="M10.5104891,0 C9.88111833,0 9.31468492,0.314685327 9,0.818181818 C8.68531426,0.314685327 8.11888085,0 7.4895102,0 C6.48251722,0 5.72727273,0.818181818 5.72727273,1.82517439 C5.72727273,3.58741227 9,6.29370614 9,6.29370614 C9,6.29370614 12.2727273,3.58741227 12.2727273,1.82517439 C12.2727273,0.818181818 11.517482,0 10.5104891,0 L10.5104891,0 Z" id="Shape"></path>
</g>
</g>
</g>
</g>
</g>

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

View File

@ -6,6 +6,13 @@
<ion-content>
<div class="list">
<div class="item item-divider"></div>
<a class="item item-icon-left item-icon-right" ui-sref="" ng-hide="true">
<i class="icon big-icon-svg">
<img src="img/icon-excahnge.svg" class="bg"/>
</i>
<span translate>Bitcoin Exchanges</span>
<i class="icon bp-arrow-right"></i>
</a>
<a class="item item-icon-left item-icon-right" ui-sref="tabs.addressbook">
<i class="icon big-icon-svg">
<img src="img/icon-address-book.svg" class="bg"/>
@ -13,6 +20,13 @@
<span translate>Address Book</span>
<i class="icon bp-arrow-right"></i>
</a>
<a class="item item-icon-left item-icon-right" ui-sref="" ng-hide="true">
<i class="icon big-icon-svg">
<img src="img/icon-send-feedback.svg" class="bg"/>
</i>
<span translate>Send Feedback</span>
<i class="icon bp-arrow-right"></i>
</a>
<div class="item item-divider" translate>Preferences</div>
@ -67,12 +81,21 @@
</span>
<i class="icon bp-arrow-right"></i>
</a>
<a class="item item-icon-right item-icon-left" href ui-sref="tabs.advanced">
<i class="icon big-icon-svg">
<img src="img/icon-advanced.svg" class="bg"/>
</i>
<span translate>Advanced</span>
<i class="icon bp-arrow-right"></i>
</a>
<div class="item item-divider" ng-show="wallets[0]" translate>Wallets Preferences</div>
<div class="item item-divider" ng-show="wallets[0]" translate>Wallets &amp; Integrations</div>
<a class="item item-icon-left item-icon-right" href
ui-sref="tabs.preferences({'walletId': item.id})"
ng-repeat="item in wallets track by $index">
<i class="icon ion-briefcase size-21" ng-style="{'color':item.color}"></i>
<i class="icon big-icon-svg circle">
<img src="img/icon-wallet.svg" ng-style="{'background-color': item.color}" class="bg"/>
</i>
{{item.name || item.id}}
<span ng-show="item.n > 1" class="text-light">
{{item.m}}-of-{{item.n}}
@ -83,12 +106,6 @@
<i class="icon bp-arrow-right"></i>
</a>
<div class="item item-divider"></div>
<a class="item item-icon-right" href ui-sref="tabs.advanced">
<span translate>Advanced</span>
<i class="icon bp-arrow-right"></i>
</a>
<div class="item item-divider"></div>
<a class="item item-icon-left item-icon-right" href ui-sref="tabs.about">
<i class="icon big-icon-svg">
@ -97,6 +114,25 @@
<span translate>About</span> {{appName}}
<i class="icon bp-arrow-right"></i>
</a>
<a class="item item-icon-left item-icon-right" href ng-hide="true">
<i class="icon big-icon-svg">
<img src="img/icon-heart.svg" class="bg"/>
</i>
<span translate>Tell a friend</span>
<i class="icon bp-arrow-right"></i>
</a>
<div class="item item-divider"></div>
<a class="item item-icon-left item-icon-right" ng-click=openExternalLink("https://help.bitpay.com")>
<i class="icon big-icon-svg">
<img src="img/icon-help-support.svg" class="bg"/>
</i>
<span translate>Help &amp; Support</span>
<i class="icon big-icon-svg">
<img src="img/icon-link.svg" class="bg"/>
</i>
</a>
<div class="item item-divider"></div>
</div>
</ion-content>
</ion-view>