anders/Wallet
1
0
Fork 0
Code Issues Projects Releases Packages Wiki Activity

Merge branch 'ref/design' of https://github.com/bitpay/bitpay-wallet into feature/recieve_view_polish

Browse source
This commit is contained in:
Jamal Jackson 2016-10-13 10:09:23 -04:00
commit 31e2d072cf
55 changed files with 809 additions and 472 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/js/controllers/confirm.js
View file

@ -40,6 +40,8 @@ angular.module('copayApp.controllers').controller('confirmController', function(
$scope.toAmount = parseInt($scope.toAmount);
$scope.amountStr = txFormatService.formatAmountStr($scope.toAmount);
$scope.displayAmount = getDisplayAmount($scope.amountStr);
$scope.displayUnit = getDisplayUnit($scope.amountStr);
var networkName = (new bitcore.Address($scope.toAddress)).network.name;
$scope.network = networkName;
@ -65,6 +67,7 @@ angular.module('copayApp.controllers').controller('confirmController', function(
if (err || !status) {
$log.error(err);
} else {
w.status = status;
if (!status.availableBalanceSat) $log.debug('No balance available in: ' + w.name);
if (status.availableBalanceSat > $scope.toAmount) {
filteredWallets.push(w);
@ -75,6 +78,7 @@ angular.module('copayApp.controllers').controller('confirmController', function(
if (++index == wallets.length) {
if (!lodash.isEmpty(filteredWallets)) {
$scope.wallets = lodash.clone(filteredWallets);
setWallet($scope.wallets[0]);
} else {
if (!enoughFunds)
@ -108,6 +112,14 @@ angular.module('copayApp.controllers').controller('confirmController', function(
setWallet(wallet, true);
});
$scope.showWalletSelector = function() {
$scope.showWallets = true;
};
$scope.onWalletSelect = function(wallet) {
setWallet(wallet);
};
$scope.showDescriptionPopup = function() {
var message = gettextCatalog.getString('Add description');
@ -123,6 +135,14 @@ angular.module('copayApp.controllers').controller('confirmController', function(
});
};
function getDisplayAmount(amountStr) {
return amountStr.split(' ')[0];
}
function getDisplayUnit(amountStr) {
return amountStr.split(' ')[1];
}
var setFromPayPro = function(uri, cb) {
if (!cb) cb = function() {};

14
src/js/controllers/import.js
View file

@ -1,7 +1,7 @@
'use strict';
angular.module('copayApp.controllers').controller('importController',
function($scope, $timeout, $log, $state, $stateParams, $ionicHistory, profileService, configService, sjcl, ledger, trezor, derivationPathHelper, platformInfo, bwcService, ongoingProcess, walletService, popupService, gettextCatalog) {
function($scope, $timeout, $log, $state, $stateParams, $ionicHistory, $ionicScrollDelegate, profileService, configService, sjcl, ledger, trezor, derivationPathHelper, platformInfo, bwcService, ongoingProcess, walletService, popupService, gettextCatalog) {
var isChromeApp = platformInfo.isChromeApp;
var isDevel = platformInfo.isDevel;
@ -350,4 +350,16 @@ angular.module('copayApp.controllers').controller('importController',
fromOnboarding: $stateParams.fromOnboarding
});
};
$scope.showAdvChange = function() {
$scope.showAdv = !$scope.showAdv;
$scope.resizeView();
};
$scope.resizeView = function() {
$timeout(function() {
$ionicScrollDelegate.resize();
});
};
});

18
src/js/directives/actionSheet.js Normal file
View file

@ -0,0 +1,18 @@
'use strict';
angular.module('copayApp.directives')
.directive('actionSheet', function() {
return {
restrict: 'E',
templateUrl: 'views/includes/actionSheet.html',
transclude: true,
scope: {
show: '=actionSheetShow',
},
link: function(scope, element, attrs) {
scope.hide = function() {
scope.show = false;
};
}
};
});

27
src/js/directives/walletSelector.js Normal file
View file

@ -0,0 +1,27 @@
'use strict';
angular.module('copayApp.directives')
.directive('walletSelector', function($timeout) {
return {
restrict: 'E',
templateUrl: 'views/includes/walletSelector.html',
transclude: true,
scope: {
show: '=walletSelectorShow',
wallets: '=walletSelectorWallets',
selectedWallet: '=walletSelectorSelectedWallet',
onSelect: '=walletSelectorOnSelect'
},
link: function(scope, element, attrs) {
scope.hide = function() {
scope.show = false;
};
scope.selectWallet = function(wallet) {
$timeout(function() {
scope.hide();
}, 100);
scope.onSelect(wallet);
};
}
};
});

3
src/sass/buttons.scss
View file

@ -19,7 +19,8 @@ $button-secondary-border: transparent;
$button-secondary-active-bg: darken($subtle-gray, 5%);
$button-secondary-active-border: transparent;
%button-standard {
%button-standard,
click-to-accept {
width: 85%;
max-width: 300px;
margin-left: auto;

16
src/sass/directives/gravatar.scss
View file

@ -1,18 +1,4 @@
.gravatar {
border-radius: 50%;
}
.gravatar-content {
position: relative;
height: 70px;
border-color: #172565;
background-color: #1e3186;
background-image: linear-gradient(0deg, #172565, #172565 0%, transparent 0%);
color: #fff;
margin-bottom: 50px;
.gravatar {
position: absolute;
bottom: -30px;
left: 41%;
}
display: inline-block;
}

7
src/sass/icons.scss
View file

@ -1,13 +1,20 @@
.icon.bp-arrow-right {
@extend .ion-ios-arrow-right;
@extend .just-a-hint;
}
.icon.bp-arrow-down {
@extend .ion-ios-arrow-down;
@extend .just-a-hint;
}
.icon.bp-arrow-up {
@extend .ion-ios-arrow-up;
@extend .just-a-hint;
}
.just-a-hint {
opacity: 0.2;
}
.item.item-big-icon-left {

18
src/sass/ionic.scss
View file

@ -15,19 +15,6 @@ ion-tabs.ion-tabs-transparent {
background: none transparent;
}
// Some overrides for the card class which can't be set by variable
.card, .list {
.icon {
color: $light-gray;
}
& > .item-heading {
font-weight: 700;
.icon {
color: $mid-gray;
}
}
}
// .placeholder-icon padding cannot be modified by a variable
$placeholder-icon-padding: 10px;
.placeholder-icon {
@ -38,3 +25,8 @@ $placeholder-icon-padding: 10px;
padding-left: $placeholder-icon-padding;
}
}
// .item-input-wrapper background cannot be modified by a variable
.item-input-wrapper {
background: none transparent;
}

39
src/sass/variables.scss
View file

@ -2,7 +2,7 @@
$royal: #1e3186;
$soft-blue: #647ce8;
$fill-blue: #D5DFFF;
$subtle-gray: #f7f7f7;
$subtle-gray: darken(#fff, 5%);
$roboto: "Roboto", sans-serif;
$roboto-light: "Roboto-Light", sans-serif-light;
$success-green: #17ae8c;
@ -10,7 +10,7 @@ $warning-orange: #ffa500;
$dark-gray: #445;
$mid-gray: #667;
$light-gray: #9b9bab;
$subtle-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
$subtle-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
$hovering-box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.3);
$subtle-radius: 3px;
$visible-radius: 6px;
@ -18,21 +18,34 @@ $unmistakable-radius: 12px;
/* Set ionic variables */
$positive: $soft-blue;
$positive: $soft-blue;
$font-size-base: 16px;
$font-size-small: 12px;
$font-family-sans-serif: $roboto;
$font-family-light-sans-serif: $roboto-light;
$font-size-base: 16px;
$font-size-small: 12px;
$font-family-sans-serif: $roboto;
$font-family-light-sans-serif: $roboto-light;
$button-border-radius: $visible-radius;
$button-height: 52px;
$button-padding: 16px;
$button-border-radius: $visible-radius;
$button-height: 52px;
$button-padding: 16px;
$base-background-color: $subtle-gray;
$base-background-color: $subtle-gray;
$item-default-active-bg: $subtle-gray;
$item-icon-font-size: 24px;
$item-default-active-bg: $subtle-gray;
$item-icon-font-size: 24px;
$input-color: $dark-gray;
$input-border: $light-gray;
$input-label-color: $mid-gray;
$input-color-placeholder: lighten($dark-gray, 40%);
$item-default-bg: #ffffff;
$item-default-border: $subtle-gray;
$item-default-text: $dark-gray;
$item-default-active-bg: darken(#ffffff, 7%);
$item-default-active-border: darken($subtle-gray, 7%);
$bar-default-border: $subtle-gray;
$tabs-icon-size: 22px;

3
src/sass/views/add.scss
View file

@ -12,6 +12,9 @@
margin-top: 25px;
}
}
.add-type {
color: $dark-gray;
}
.bg{
background-color:rgb(100,124,232);
height: 50px;

45
src/sass/views/address-book.scss
View file

@ -1,22 +1,15 @@
#add-address{
.list{
background: #ffffff;
#add-address {
.zero-state-cta {
padding-bottom: 3vh;
}
.list {
background-color: #fff;
}
}
#view-address-book {
.scroll{
.scroll {
height:100%;
}
#add-contact{
min-width: 300px;
img{
width: 10rem;
display: inline-block;
}
a{
text-decoration: none;
}
}
.list {
.item {
color: #444;
@ -67,4 +60,26 @@
}
}
}
}
}
#address-book-view {
.bar.bar-royal {
border: 0 transparent;
}
.gravatar-content {
position: relative;
height: 70px;
border-color: $royal;
background-color: $royal;
padding-top: 20px;
margin-bottom: 50px;
text-align: center;
}
.address-book-field-label {
text-transform: uppercase;
font-weight: bold;
font-size: 12px;
display: block;
color: $mid-gray;
}
}

35
src/sass/views/advancedSettings.scss
View file

@ -1,17 +1,6 @@
.settings {
.item {
color: #444;
border-color: rgba(221, 221, 221, 0.3);
}
}
#advanced-settings {
.list {
.item {
color: #444;
border-top: none;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
&:before {
display: block;
position: absolute;
@ -23,31 +12,19 @@
content: '';
}
&.item-divider {
color: rgba(74, 74, 74, .8);
}
&.item-heading {
&:before {
top: 99%
}
}
&:nth-child(2) {
&:before {
width: 0;
}
color: $dark-gray;
}
.item-note {
color: rgb(58, 58, 58);
color: $dark-gray;
}
}
.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;
color: $mid-gray;
}
}
}

29
src/sass/views/confirm.scss
View file

@ -1,30 +1,3 @@
#view-confirm {
.icon-bitpay-card {
background-image: url("../img/icon-bitpay.svg");
}
.slide-to-pay{
bottom: 149px;
}
.send-gravatar {
left: 11px;
position: absolute;
top: 10px;
}
.accept-slide {
position: fixed;
bottom: 0;
width: 100%;
height: 100px;
background-color: #647CE8;
color: #ffffff;
font-size: 25px;
text-align: center;
padding-top: 34px;
line-height: 32px;
}
.accept-slide i {
float: right;
font-size: 32px;
margin-right: 20px;
}
}

58
src/sass/views/includes/actionSheet.scss Normal file
View file

@ -0,0 +1,58 @@
action-sheet {
.bp-action-sheet {
$border-color: #EFEFEF;
&__sheet {
background: #fff;
width: calc(100% + 1px);
position: fixed;
bottom: 0;
left: 50%;
transform: translateY(100%) translateX(-50%);
transition: transform 250ms cubic-bezier(0.4, 0.0, 0.2, 1);
z-index: 100;
padding-top: 1.75rem;
padding-left: 2rem;
padding-right: .75rem;
color: #2f2f2f;
padding-bottom: 3.5rem;
max-width: 550px;
max-height: 100vh;
overflow: scroll;
&.slide-up {
transform: translateY(0) translateX(-50%);
box-shadow: 0px 2px 13px 3px rgba(0, 0, 0, .3);
}
.back-arrow {
padding-bottom: 1.25rem;
cursor: pointer;
}
.header {
font-weight: 600;
padding-bottom: 1rem;
border-bottom: 1px solid $border-color;
margin-bottom: 1px;
}
}
&__backdrop {
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0);
transition: background 250ms cubic-bezier(0.4, 0.0, 0.2, 1);;
pointer-events: none;
z-index: 99;
&.fade-in {
background: rgba(0, 0, 0, .4);
pointer-events: all;
}
}
}
}

44
src/sass/views/includes/txp-details.scss
View file

@ -1,4 +1,5 @@
#txp-details {
#txp-details,
#view-confirm {
$item-lateral-padding: 20px;
$item-vertical-padding: 10px;
$item-border-color: #EFEFEF;
@ -8,7 +9,7 @@
background: #f5f5f5;
}
.slide-to-pay {
bottom: 100px;
bottom: 92px;
}
.head {
padding: 30px $item-lateral-padding 4rem;
@ -48,9 +49,19 @@
span {
display: block;
}
.badge {
border-radius: 0;
padding: .5rem;
}
.item {
color: #4A4A4A;
padding: $item-vertical-padding $item-lateral-padding;
padding-top: $item-vertical-padding;
padding-bottom: $item-vertical-padding;
padding-left: $item-lateral-padding;
&:not(.item-icon-right) {
padding-right: $item-lateral-padding;
}
.label {
font-size: 14px;
@ -61,7 +72,8 @@
&.single-line {
display: flex;
align-items: center;
padding: 17px $item-lateral-padding;
padding-top: 17px;
padding-bottom: 17px;
.label {
margin: 0;
@ -112,15 +124,23 @@
display: flex;
align-items: center;
padding: .2rem 0;
i {
padding: 0;
margin-bottom: 5px;
~ .bp-arrow-right {
top: 14px;
}
img {
height: 24px;
width: 24px;
padding: 2px;
margin-right: .7rem;
box-shadow: none;
> i {
padding: 0;
position: static;
> img {
height: 24px;
width: 24px;
padding: 2px;
margin-right: .7rem;
box-shadow: none;
}
}
}

62
src/sass/views/includes/walletSelector.scss Normal file
View file

@ -0,0 +1,62 @@
wallet-selector {
$border-color: #EFEFEF;
.wallet-selector {
.wallet {
border: 0;
padding-right: 0;
padding-top: 0;
padding-left: 65px;
padding-bottom: 0;
margin-bottom: 1px;
overflow: visible;
> i {
padding: 0;
margin-left: -5px;
> img {
height: 39px;
width: 39px;
padding: 4px;
}
}
}
.wallet-inner {
display: flex;
position: relative;
padding-top: 16px;
padding-bottom: 16px;
&::after {
display: block;
position: absolute;
width: 100%;
height: 1px;
background: $border-color;
bottom: 0;
right: 0;
content: '';
}
.check {
padding: 0 1.2rem;
}
}
.wallet-details {
flex-grow: 1;
.wallet-name {
padding-bottom: 5px;
}
.wallet-balance {
color: #3A3A3A;
font-family: "Roboto-Light";
}
}
}
}

2
src/sass/views/onboarding/onboard-disclaimer.scss
View file

@ -66,7 +66,7 @@
input:checked + .checkbox-icon:after {
border-color: rgb(19, 229, 182);
top: 4px;
left: 5px;
left: 3px;
}
.item-content {
width: 90%;

35
src/sass/views/tab-home.scss
View file

@ -22,6 +22,18 @@
border-top:none;
padding-bottom: 1.5rem;
padding-top:1.5rem;
&.wallet{
.big-icon-svg{
& > .bg{
padding: .25rem
}
}
}
}
.item-sub {
&:first-child:before {
width: 100%
}
&:before {
display: block;
position: absolute;
@ -37,29 +49,6 @@
}
}
}
&.item-heading{
&:before{
width:100% !important;
top:99%
}
}
&:nth-child(1){
&:before{
width:0;
}
}
&:nth-child(2):last-child{
&:before{
width:0;
}
}
&.wallet{
.big-icon-svg{
& > .bg{
padding: .25rem
}
}
}
}
}
.next-step.item {

100
src/sass/views/tab-settings.scss
View file

@ -1,17 +1,60 @@
.settings {
.item {
color: #444;
color: $dark-gray;
border-color: rgba(221, 221, 221, 0.3);
}
&-explaination, &-button-group {
padding: 0 1rem;
margin: 1rem 0;
}
&-heading {
font-size: 17px;
color: $dark-gray;
margin: 1rem 0;
}
&-description {
font-size: 15px;
color: $mid-gray;
margin: 1rem 0;
}
.setting-title, .setting-value {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.setting-value {
color: $light-gray;
font-size: 14px;
}
.settings-input-group {
background-color: #fff;
.item-stacked-label {
padding: 1rem;
}
.input-label {
text-transform: uppercase;
font-size: 12px;
font-weight: bold;
}
}
.settings-list {
.item {
color: $dark-gray;
padding-top: 1.3rem;
padding-bottom: 1.3rem;
&.item-divider {
color: $mid-gray;
padding-bottom: .5rem;
font-size: .9rem;
}
}
}
}
#tab-settings {
.list {
.item {
color: #444;
border-top: none;
padding-top: 1.3rem;
padding-bottom: 1.3rem;
.big-icon-svg {
& > .bg{
width:20px;
@ -23,9 +66,10 @@
left:8px;
.bg {
border-radius: 50%;
width:30px;
height:30px;
width: 25px;
height: 25px;
padding:.1rem;
box-shadow: 0px 1px 5px rgba($mid-gray, .1);
}
}
}
@ -39,11 +83,6 @@
right: 0;
content: '';
}
&.item-divider {
color: $mid-gray;
padding-bottom: .5rem;
font-size: .9rem;
}
&.item-heading {
&:before {
top: 99%
@ -54,12 +93,43 @@
width: 0;
}
}
.item-note {
color: $light-gray;
}
}
}
.item-radio .radio-icon {
font-size: 18px;
}
}
#settings-fee {
.estimates {
font-size: 15px;
color: $dark-gray;
}
.fee-minutes, .fee-rate {
font-weight: bold;
display: block;
margin-bottom: .5rem;
}
.fee-policies {
border-color: #fff;
border-width: 2px 0;
border-style: solid;
}
}
.settings-color-name {
margin-left: 1rem;
}
.settings-color-block {
display: inline-block;
width: 24px;
height: 24px;
border-radius: 50%;
box-shadow: 0px 0px 10px;
float: left; // we don't want these indicators to affect their container's sizing
}
#settings-tos {
p {
margin-bottom: 1rem;
}
}

14
src/sass/views/tabs.scss
View file

@ -35,3 +35,17 @@
}
}
}
#tab-home, #tab-send {
.card, .list {
.icon {
color: $light-gray;
}
& > .item-heading {
font-weight: 700;
.icon {
color: $mid-gray;
}
}
}
}

3
src/sass/views/views.scss
View file

@ -14,9 +14,9 @@
@import "bitpayCard";
@import "address-book";
@import "wallet-backup-phrase";
@import "address-book";
@import "zero-state";
@import "onboarding/onboarding";
@import "includes/actionSheet";
@import "includes/walletActivity";
@import "includes/wallets";
@import "includes/modals/modals";
@ -26,4 +26,5 @@
@import "includes/tx-details";
@import "includes/txp-details";
@import "includes/tx-status";
@import "includes/walletSelector";
@import "integrations/coinbase.scss";