Merge branch 'feature/settings_views_polish' of https://github.com/jamal-jackson/bitpay-wallet into feature/address_book

# Conflicts: # src/sass/views/address-book.scss
2016-09-23 10:11:19 -04:00 · 2016-09-23 10:11:19 -04:00 · 4004efd5e4
parent ee10ebff9c 097e6f6d86
commit 4004efd5e4
16 changed files with 138 additions and 36 deletions
--- a/public/img/item-ico-contact.svg
+++ b/public/img/item-ico-contact.svg
@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="35px" height="35px" viewBox="0 0 35 35" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
+    <title>Contact Avatar</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.100000001">
+        <g id="Card/Item/Contact" transform="translate(-19.000000, -12.000000)" fill="#000000">
+            <g id="Card/List/Contact">
+                <path d="M36.3869177,12 C26.8241129,12 19,19.8024979 19,29.3388843 C19,38.8752706 26.8241129,46.6777685 36.3869177,46.6777685 C45.9497224,46.6777685 53.7738353,38.8752706 53.7738353,29.3388843 C53.7738353,19.8024979 45.9497224,12 36.3869177,12 L36.3869177,12 Z M47.3986322,38.7307799 C46.3843953,36.4189287 44.2110306,35.4074938 42.0376659,34.6850402 C41.023429,34.3960588 40.4438651,33.3846239 40.2989741,32.5176797 C42.1825569,31.3617541 43.6314667,29.0499029 43.6314667,26.4490702 L43.6314667,25.0041632 C43.6314667,20.9584235 40.4438651,17.7796281 36.3869177,17.7796281 C32.3299702,17.7796281 29.1423686,20.9584235 29.1423686,25.0041632 L29.1423686,26.4490702 C29.1423686,29.0499029 30.5912784,31.3617541 32.6197522,32.6621704 C32.3299702,33.5291146 31.8952973,34.3960588 30.8810604,34.8295309 C28.7076957,35.5519845 26.534331,36.5634194 25.5200941,38.8752706 C23.2018384,36.274438 21.8978196,32.9511518 21.8978196,29.3388843 C21.8978196,21.3918956 28.4179137,14.889814 36.3869177,14.889814 C44.3559216,14.889814 50.8760157,21.3918956 50.8760157,29.3388843 C50.8760157,32.9511518 49.5719969,36.274438 47.3986322,38.7307799 L47.3986322,38.7307799 Z" id="Contact-Avatar"></path>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/public/views/preferences.html
+++ b/public/views/preferences.html
@ -1,4 +1,4 @@
-<ion-view>
+<ion-view class="settings">
  <ion-nav-bar class="bar-royal">
    <ion-nav-title>
      {{'Wallet Preferences'|translate}}
--- a/public/views/preferencesAdvanced.html
+++ b/public/views/preferencesAdvanced.html
@ -1,4 +1,4 @@
-<ion-view >
+<ion-view class="settings">
  <ion-nav-bar class="bar-royal">
    <ion-nav-title>{{'Advanced Preferences' | translate}}</ion-nav-title>
    <ion-nav-back-button>
--- a/public/views/preferencesAltCurrency.html
+++ b/public/views/preferencesAltCurrency.html
@ -1,4 +1,4 @@
-<ion-view>
+<ion-view class="settings">
  <ion-nav-bar class="bar-royal">
    <ion-nav-title>
      {{'Alternative Currency'|translate}}
--- a/public/views/preferencesColor.html
+++ b/public/views/preferencesColor.html
@ -7,8 +7,9 @@
    </ion-nav-back-button>
  </ion-nav-bar>
  <ion-content>
-    <ion-radio ng-repeat="c in colorList" ng-value="c" ng-model="currentColor" ng-click="save(c)">
-      <span ng-style="{'color': c}">&block;</span>
+    <ion-radio ng-repeat="c in colorList" ng-value="c.color" ng-model="currentColor" ng-click="save(c.color)">
+      <span ng-style="{'color': c.color}">&block;</span>
+      <span> {{c.name}}</span>
    </ion-radio>
  </ion-content>
 </ion-view>
--- a/public/views/preferencesFee.html
+++ b/public/views/preferencesFee.html
@ -1,4 +1,4 @@
-<ion-view>
+<ion-view class="settings">
  <ion-nav-bar class="bar-royal">
    <ion-nav-title>
      {{'Bitcoin Network Fee Policy'|translate}}
--- a/public/views/preferencesInformation.html
+++ b/public/views/preferencesInformation.html
@ -1,4 +1,4 @@
-<ion-view>
+<ion-view class="settings">
  <ion-nav-bar class="bar-royal">
    <ion-nav-title>{{'Wallet Information' | translate}}</ion-nav-title>
    <ion-nav-back-button>
--- a/public/views/preferencesLanguage.html
+++ b/public/views/preferencesLanguage.html
@ -1,4 +1,4 @@
-<ion-view>
+<ion-view id="preferences-language" class="settings">
  <ion-nav-bar class="bar-royal">
    <ion-nav-title>
      {{'Language'|translate}}
@ -7,9 +7,11 @@
    </ion-nav-back-button>
  </ion-nav-bar>
  <ion-content>
-    <ion-radio ng-repeat="lang in availableLanguages" ng-value="lang.isoCode" ng-model="currentLanguage"
-      ng-click="save(lang.isoCode)">{{lang.name}}
-    </ion-radio>
+    <div class="list">
+      <ion-radio ng-repeat="lang in availableLanguages" ng-value="lang.isoCode" ng-model="currentLanguage"
+        ng-click="save(lang.isoCode)">{{lang.name}}
+      </ion-radio>
+    </div>
    <div class="padding">
      <span translate>All contributions to Copay's translation are welcome. Sign up at crowdin.com and join the Copay project at</span>
      <a ng-click="openExternalLink('https://crowdin.com/project/copay', '_system')">https://crowdin.com/project/copay</a>.
@ -18,4 +20,4 @@
      </span>
    </div>
  </ion-content>
-</ion-view>
+</ion-view>
--- a/public/views/preferencesUnit.html
+++ b/public/views/preferencesUnit.html
@ -1,4 +1,4 @@
-<ion-view>
+<ion-view class="settings">
  <ion-nav-bar class="bar-royal">
    <ion-nav-title>
      {{'Unit'|translate}}
--- a/public/views/tab-settings.html
+++ b/public/views/tab-settings.html
@ -1,4 +1,4 @@
-<ion-view id="tab-settings">
+<ion-view id="tab-settings" class="settings">
  <ion-nav-bar class="bar-royal">
    <ion-nav-title>{{'Global Settings' | translate}}</ion-nav-title>
  </ion-nav-bar>
--- a/public/views/translators.html
+++ b/public/views/translators.html
@ -1,4 +1,4 @@
-<ion-view>
+<ion-view class="settings">
  <ion-nav-bar class="bar-royal">
    <ion-nav-title>{{'Translators' | translate}}</ion-nav-title>
    <ion-nav-back-button>
--- a/src/js/controllers/preferencesColor.js
+++ b/src/js/controllers/preferencesColor.js
@ -1,21 +1,21 @@
 'use strict';

 angular.module('copayApp.controllers').controller('preferencesColorController', function($scope, $log, $stateParams, $ionicHistory, gettextCatalog, configService, profileService) {
-  $scope.colorList = [
-        '#DD4B39',
-        '#F38F12',
-        '#FAA77F',
-        '#D0B136',
-        '#9EDD72',
-        '#29BB9C',
-        '#019477',
-        '#77DADA',
-        '#4A90E2',
-        '#484ED3',
-        '#9B59B6',
-        '#E856EF',
-        '#FF599E',
-        '#7A8C9E',
+      $scope.colorList = [
+        {color: "#DD4B39", name: "Cinnabar"},
+        {color: "#F38F12", name: "Carrot Orange"},
+        {color: "#FAA77F", name: "Light Salmon"},
+        {color: "#D0B136", name: "Metallic Gold"},
+        {color: "#9EDD72", name: "Feijoa"},
+        {color: "#29BB9C", name: "Shamrock"},
+        {color: "#019477", name: "Observatory"},
+        {color: "#77DADA", name: "Turquoise Blue"},
+        {color: "#4A90E2", name: "Cornflower Blue"},
+        {color: "#484ED3", name: "Free Speech Blue"},
+        {color: "#9B59B6", name: "Deep Lilac"},
+        {color: "#E856EF", name: "Free Speech Magenta"},
+        {color: "#FF599E", name: "Brilliant Rose"},
+        {color: "#7A8C9E", name: "Light Slate Grey"}
      ];

  var wallet = profileService.getWallet($stateParams.walletId);
--- a/src/sass/main.scss
+++ b/src/sass/main.scss
@ -993,6 +993,7 @@ input[type=number] {
@import "views/tab-settings";
@import "views/walletDetails";
@import "views/bitpayCard";
+@import "views/address-book";
@import "views/wallet-backup-phrase";
@import "views/address-book";
@import 'views/onboarding/onboarding';
--- a/src/sass/mixins/layout.scss
+++ b/src/sass/mixins/layout.scss
@ -1,8 +1,19 @@
@mixin center-block($topBottom: 0) {
-  float:none;
+  float: none;
  margin: $topBottom auto;
 }

-.center-block{
+@mixin absolute-center() {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  top: 50%;
+  left: 50%;
+}
+
+.center-block {
  @include center-block();
+}
+
+.absolute-center{
+  @include absolute-center();
 }
--- a/src/sass/views/address-book.scss
+++ b/src/sass/views/address-book.scss
@ -2,4 +2,70 @@
  .list{
    background: #ffffff;
  }
+}
+#view-address-book {
+  .scroll{
+    height:100%;
+  }
+  #add-contact{
+    img{
+      width: 6rem;
+      display: inline-block;
+    }
+    a{
+      text-decoration: none;
+    }
+  }
+  .list {
+    .item {
+      color: #444;
+      border-top: none;
+      padding-top: 1.5rem;
+      padding-bottom: 1.5rem;
+      &:before {
+        display: block;
+        position: absolute;
+        width: 100%;
+        height: 1px;
+        background: rgba(221, 221, 221, 0.3);
+        top: 0;
+        right: 0;
+        content: '';
+      }
+      &.item-divider {
+        color: rgba(74, 74, 74, .8);
+      }
+      &.item-heading {
+        &:before {
+          top: 99%
+        }
+      }
+      &.item-icon-left{
+        padding-left:80px;
+      }
+      &:nth-child(2) {
+        &:before {
+          width: 0;
+        }
+      }
+      .item-note {
+        color: rgb(58, 58, 58);
+      }
+      .big-icon-svg {
+        padding: 0 7px;
+        > .bg {
+          border-radius: 50%;
+          width: 40px;
+          height: 40px;
+          box-shadow: none;
+          background-repeat: no-repeat;
+          background-clip: padding-box;
+          background-size: 103%;
+          &.green {
+            background: rgb(1, 209, 162);
+          }
+        }
+      }
+    }
+  }
 }
--- a/src/sass/views/tab-settings.scss
+++ b/src/sass/views/tab-settings.scss
@ -1,3 +1,10 @@
+.settings {
+  .item {
+    color: #444;
+    border-color: rgba(221, 221, 221, 0.3);
+  }
+}
+
 #tab-settings {
  .list {
    .item {
@ -15,8 +22,8 @@
        right: 0;
        content: '';
      }
-      &.item-divider{
-        color:rgba(74, 74, 74, .8);
+      &.item-divider {
+        color: rgba(74, 74, 74, .8);
      }
      &.item-heading {
        &:before {
@ -28,8 +35,8 @@
          width: 0;
        }
      }
-      .item-note{
-        color:rgb(58, 58, 58);
+      .item-note {
+        color: rgb(58, 58, 58);
      }
    }
  }