mirror of https://github.com/BTCPrivate/copay.git
feat(design): improve design of wallet color selection
This commit is contained in:
parent
9ec7d5f38c
commit
d4cd402294
|
@ -61,6 +61,7 @@
|
||||||
width: 25px;
|
width: 25px;
|
||||||
height: 25px;
|
height: 25px;
|
||||||
padding:.1rem;
|
padding:.1rem;
|
||||||
|
box-shadow: 0px 1px 5px rgba($mid-gray, .1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -112,3 +113,14 @@
|
||||||
border-style: solid;
|
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
|
||||||
|
}
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<ion-view class="settings">
|
<ion-view class="settings">
|
||||||
<ion-nav-bar class="bar-royal">
|
<ion-nav-bar class="bar-royal">
|
||||||
<ion-nav-title>
|
<ion-nav-title>
|
||||||
{{'Wallet Preferences'|translate}}
|
{{'Wallet Settings'|translate}}
|
||||||
</ion-nav-title>
|
</ion-nav-title>
|
||||||
<ion-nav-back-button>
|
<ion-nav-back-button>
|
||||||
</ion-nav-back-button>
|
</ion-nav-back-button>
|
||||||
|
@ -24,8 +24,8 @@
|
||||||
</div>
|
</div>
|
||||||
<a class="item item-icon-right" ui-sref="tabs.preferences.preferencesColor">
|
<a class="item item-icon-right" ui-sref="tabs.preferences.preferencesColor">
|
||||||
<span translate>Color</span>
|
<span translate>Color</span>
|
||||||
<span class="item-note" ng-style="{'color': wallet.color}">
|
<span class="item-note">
|
||||||
█
|
<span class="settings-color-block" ng-style="{'background-color': wallet.color, 'color': wallet.color}"></span>
|
||||||
</span>
|
</span>
|
||||||
<i class="icon bp-arrow-right"></i>
|
<i class="icon bp-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
|
|
|
@ -9,7 +9,7 @@
|
||||||
<ion-content>
|
<ion-content>
|
||||||
<div class="settings-explaination">
|
<div class="settings-explaination">
|
||||||
<div class="settings-heading" translate>What do you call this wallet?</div>
|
<div class="settings-heading" translate>What do you call this wallet?</div>
|
||||||
<div class="settings-description" translate>When this wallet was created, it was called "{{walletName}}". You can change how the name is displayed on this device below.</div>
|
<div class="settings-description" translate>When this wallet was created, it was called “{{walletName}}”. You can change the name displayed on this device below.</div>
|
||||||
</div>
|
</div>
|
||||||
<form name="aliasForm" ng-submit="save(aliasForm)" novalidate>
|
<form name="aliasForm" ng-submit="save(aliasForm)" novalidate>
|
||||||
<div class="list settings-list">
|
<div class="list settings-list">
|
||||||
|
|
|
@ -1,15 +1,15 @@
|
||||||
<ion-view>
|
<ion-view id="settings-color" class="settings">
|
||||||
<ion-nav-bar class="bar-royal">
|
<ion-nav-bar class="bar-royal">
|
||||||
<ion-nav-title>
|
<ion-nav-title>
|
||||||
{{'Color'|translate}}
|
{{'Wallet Color'|translate}}
|
||||||
</ion-nav-title>
|
</ion-nav-title>
|
||||||
<ion-nav-back-button>
|
<ion-nav-back-button>
|
||||||
</ion-nav-back-button>
|
</ion-nav-back-button>
|
||||||
</ion-nav-bar>
|
</ion-nav-bar>
|
||||||
<ion-content>
|
<ion-content>
|
||||||
<ion-radio ng-repeat="c in colorList" ng-value="c" ng-model="currentColor" ng-click="save(c.color)">
|
<ion-radio ng-repeat="c in colorList" ng-value="c" ng-model="currentColor" ng-click="save(c.color)">
|
||||||
<span ng-style="{'color': c.color}">█</span>
|
<span ng-style="{'background-color': c.color, 'color' : c.color}" class="settings-color-block"></span>
|
||||||
<span> {{c.name}}</span>
|
<span class="settings-color-name"> {{c.name}}</span>
|
||||||
</ion-radio>
|
</ion-radio>
|
||||||
</ion-content>
|
</ion-content>
|
||||||
</ion-view>
|
</ion-view>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<ion-view id="tab-settings" class="settings">
|
<ion-view id="tab-settings" class="settings">
|
||||||
<ion-nav-bar class="bar-royal">
|
<ion-nav-bar class="bar-royal">
|
||||||
<ion-nav-title>{{'Global Settings' | translate}}</ion-nav-title>
|
<ion-nav-title>{{'Settings' | translate}}</ion-nav-title>
|
||||||
</ion-nav-bar>
|
</ion-nav-bar>
|
||||||
|
|
||||||
<ion-content>
|
<ion-content>
|
||||||
|
|
Loading…
Reference in New Issue