ripplerm · jsrj78 · Feb 13, 2016 · Feb 13, 2016 · Feb 14, 2016 · Feb 14, 2016
diff --git a/css/index.css b/css/index.css
@@ -0,0 +1,159 @@
+.menu {
+    overflow: auto;
+    padding: 0;
+}
+
+.menu, .menu * {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+}
+
+.menu ul {
+    padding: 0;
+    margin: 7px 0;
+}
+
+.menu ul li {
+    list-style: none;
+    padding: 20px 0 20px 50px;
+    font-size: 15px;
+    font-weight: normal;
+    cursor: pointer;
+}
+
+.menu ul li.active {
+    background-color: #dedede;
+    position: relative;
+}
+
+.menu ul li a {
+    color: rgb(51, 51, 51);
+    text-decoration: none;
+}
+
+.pages {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 4;
+    padding: 0;
+    overflow: auto;
+}
+
+.pages > div {
+    padding: 0 5px;
+    padding-top: 64px;
+}
+
+.pages .header {
+    color: rgb(82, 101, 162);
+    /*font-size: 24px;*/
+    /*font-weight: normal;*/
+    /*margin-top: 5px;*/
+    /*margin-bottom: 60px;*/
+    /*letter-spacing: 1.20000004768372px;*/
+}
+
+.page {
+    transform: translateY(1080px);
+    transition: transform 0 linear;
+    display: none;
+    opacity: 0;
+    font-size: 16px;
+}
+
+.page.active {
+    transform: translateY(0px);
+    transition: all 0.3s ease-out;
+    display: block;
+    opacity: 1;
+}
+
+
+
+label.input-toggle {
+  line-height: 0;
+  font-size: 0;
+  display: inline-block;
+  margin: 0;
+}
+label.input-toggle > span {
+  display: inline-block;
+  position: relative;
+  background-image: -webkit-linear-gradient(left, #848484 0%, #848484 50%, #7cbcbf 50%, #7cbcbf 100%);
+  background-image: linear-gradient(to right, #848484 0%, #848484 50%, #7cbcbf 50%, #7cbcbf 100%);
+  background-size: 64px 14px;
+  background-position: 0%;
+  border-radius: 32px;
+  width: 32px;
+  height: 14px;
+  cursor: pointer;
+  -webkit-transition: background-position 0.2s ease-in;
+  transition: background-position 0.2s ease-in;
+}
+label.input-toggle > input:checked + span {
+  background-position: -100%;
+}
+label.input-toggle > span:after {
+  content: "";
+  display: block;
+  position: absolute;
+  width: 18px;
+  height: 18px;
+  background: #F1F1F1;
+  -webkit-align-self: center;
+      -ms-flex-item-align: center;
+          align-self: center;
+  top: 50%;
+  left: 0;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+  border-radius: 100%;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
+  -webkit-transition: left 0.2s ease-in, background-color 0.2s ease-in, -webkit-transform 0.3s ease;
+  transition: left 0.2s ease-in, background-color 0.2s ease-in, -webkit-transform 0.3s ease;
+  transition: left 0.2s ease-in, background-color 0.2s ease-in, transform 0.3s ease;
+  transition: left 0.2s ease-in, background-color 0.2s ease-in, transform 0.3s ease, -webkit-transform 0.3s ease;
+}
+label.input-toggle > input:checked + span:after {
+  left: calc(100% -  18px);
+  background-color: #1D8B90;
+}
+label.input-toggle > span:active:after {
+  -webkit-transform: translateY(-50%) scale3d(1.15, 0.85, 1);
+          transform: translateY(-50%) scale3d(1.15, 0.85, 1);
+}
+label.input-toggle > input:disabled + span:active:after {
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+}
+label.input-toggle > input:disabled + span {
+  cursor: default;
+}
+label.input-toggle > input:disabled + span {
+  background: #D5D5D5;
+}
+label.input-toggle > input:disabled + span:after {
+  background: #BDBDBD;
+}
+label.input-toggle > input {
+  display: block;
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.qrcode {
+      display: block;
+      margin: 24px auto 16px;
+      max-width: 100%;
+}
+.qrcode-link {
+      display: table;
+      margin: 24px auto 16px;
+}
+.qrcode-link .qrcode {
+      margin: 0;
+}
diff --git a/favicon.ico b/favicon.ico
diff --git a/index.html b/index.html
@@ -1,45 +1,138 @@
 <!DOCTYPE html>
-<html ng-app="walletApp">
+<html ng-app="walletApp" id="ng-app">
 
 <head>
-  <script src="lib/ripple-0.12.9.1-min.js"></script>
-  <script src="lib/angular-1.4.4.min.js"></script> 
-  <script src="lib/bootstrap/js/ui-bootstrap-tpls-0.14.3.min.js"></script>
-  <script src="lib/highcharts/lib/adapters/standalone-framework.js"></script>
-  <script src="lib/highcharts/lib/highstock.js"></script>
-  <script src="lib/md5.js"></script>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="description" content="Material Design Ripple Wallet">
+    <meta name="keywords" content="Material Design Ripple Wallet">
+    <meta name="author" content="Federico Zivolo, Kevin Ross, and Bootstrap Material Design contributors,ripplerm,yxxyun">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <title>
 
-  <script src="js/mywallet.js"></script>
+        Ripple Wallet &middot; Material Design
+
+    </title>
+
+
+    <!-- Material Design fonts http://fonts.googleapis.com/css?family=Roboto:300,400,500,700 https://fonts.googleapis.com/icon?family=Material+Icons-->
+    <link rel="stylesheet" href="lib/Roboto/Roboto.css">
+    <link rel="stylesheet" href="lib/Roboto/MaterialIcons.css">
+
+    <!-- Material Design for Bootstrap generic -->
+
+    <link href="lib/bootstrap-material-design/css/bootstrap-material-design.min.css" rel="stylesheet">
+
+    <script src="lib/ripple-0.12.9.1-min.js"></script>
+    <script src="lib/angular-1.4.7.min.js"></script>
+    <script src="lib/bootstrap/js/ui-bootstrap-tpls-0.14.3.min.js"></script>
+    <script src="lib/highcharts/lib/adapters/standalone-framework.js"></script>
+    <script src="lib/highcharts/lib/highstock.js"></script>
+    <script src="lib/md5.js"></script>
+
+    <script src="lib/angular-cookies.min.js"></script>
+    <script src="lib/angular-translate.min.js"></script>
+    <script src="lib/angular-translate-storage-cookie.min.js"></script>
+    <script src="lib/angular-translate-storage-local.min.js"></script>
+
+    <!-- Page style -->
+    <link href="css/index.css" rel="stylesheet">
+
+    <script src="js/mywallet.js"></script>
 
-  <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">  
 </head>
 
 <body>
-  <div ng-controller="walletCtrl" class="container">    
-    <table class="table table-bordered table-condensed" style="text-align: center"> 
-      <tr>
-        <td style="text-align: center">Network: <font color="{{(state == 'online') ? 'green' : 'red'}}">{{state}}</font></td>
-        <td style="text-align: center;">Server: {{server}} </td>
-        <td style="text-align: center">Last-Closed-Ledger: <font color="blue"> {{ledgerIndex}} </font></td>
-      </tr>
-    </table>
-    <font size="5">Wallet Account: <b>{{activeAccount ? activeAccount : "-"}} </b></font>
-    <button class="btn btn-primary" ng-click="prepareSetWalletAccount()"><span class="glyphicon glyphicon-pencil"> Change</button></span>
-
-    <br>
-    secret set: <font color="{{remote.secrets[activeAccount] ? 'green' : 'red' }}">{{remote.secrets[activeAccount] ? "&#10004" : "&#10008"}}</font>
-    <button ng-click="prepareSetWalletSecret()"><span class="glyphicon glyphicon-pencil"></span> {{remote.secrets[activeAccount] ? 'Change' : 'Set' }}</button>
-    <button ng-show="remote.secrets[activeAccount]" ng-click="showSecret = !showSecret">{{showSecret ? "Hide" : "Show"}}</button> {{remote.secrets[activeAccount] && showSecret ? remote.secrets[activeAccount] : '' }} 
-    <hr>
-
-    <!-- Tabs -->
-    <uib-tabset>
-      <uib-tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disable="tab.disabled" select="tab.select()">
-        <div ng-include="tab.templete"></div>
-      </uib-tab>
-    </uib-tabset>
-
-  </div>  
+    <div ng-controller="walletCtrl" class="bmd-layout-container bmd-drawer-f-l bmd-drawer-overlay-md-down bmd-drawer-in-lg-up">
+        <header class="bmd-layout-header">
+            <div class="navbar navbar-light bg-faded">
+                <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="drawer" data-target="#dw-1">
+        <span class="sr-only">Toggle drawer</span>
+        <i class="material-icons">menu</i>
+      </button>
+                <ul class="nav navbar-nav">
+                    <li class="nav-item">{{ 'Network' | translate }}
+                        <font color="{{(state == 'online') ? 'green' : 'red'}}">{{state? "&#10004" : "&#10008"}}</font>
+                    </li>
+                    <li class="nav-item">{{ 'Secret' | translate }}
+                        <font color="{{remote.secrets[activeAccount] ? 'green' : 'red' }}">{{remote.secrets[activeAccount] ? "&#10004" : "&#10008"}}</font>
+                    </li>
+                </ul>
+                <ul class="nav navbar-nav pull-xs-right">
+                    <li class="nav-item">
+                        <div class="bmd-form-group bmd-collapse-inline pull-xs-right">
+                            <button class="btn bmd-btn-icon" ng-click="prepareSetWalletAccount()">
+              <i class="material-icons">account_circle</i>
+            </button>
+                        </div>
+                    </li>
+            <!--        <li class="nav-item">-->
+            <!--            <div class="bmd-form-group bmd-collapse-inline pull-xs-right">-->
+            <!--                <button class="btn bmd-btn-icon" ng-click="prepareSetWalletSecret()">-->
+            <!--  <i class="material-icons">vpn_key</i>-->
+            <!--</button>-->
+            <!--            </div>-->
+            <!--        </li>-->
+                    <li class="nav-item">
+                        <div class="dropdown">
+                            <button class="btn bmd-btn-icon btn-secondary dropdown-toggle" type="button" id="more-menu-1" data-toggle="dropdown" aria-haspopup="true">
+              <i class="material-icons">more_vert</i>
+            </button>
+                            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="more-menu-1">
+                                <button class="dropdown-item" type="button">{{ 'Account' | translate }} <b>{{activeAccount ? activeAccount : "-"}} </b></button>
+                                <button class="dropdown-item" type="button">{{ 'Server' | translate }}: {{server}}</button>
+                                <button class="dropdown-item" type="button">{{ 'LCL' | translate }}: <font color="blue"> {{ledgerIndex}} </font></button>
+                                <button class="dropdown-item" type="button" ng-click="changeLanguage('en')" translate="BUTTON_LANG_EN">English</button>
+                                <button class="dropdown-item" type="button" ng-click="changeLanguage('cn')" translate="BUTTON_LANG_CN">中文</button>
+                            </div>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+        </header>
+
+        <div id="dw-1" class="bmd-layout-drawer bg-faded menu">
+            <header>
+                <a class="navbar-brand">{{ 'Ripple_Wallet' | translate }}</a>
+            </header>
+            <ul class="list-group">
+                <a class="list-group-item" data-target="#Info"><i class="material-icons" role="presentation">info_outline</i>{{ 'Info' | translate }}</a>
+                <a class="list-group-item" data-target="#Trustlines"><i class="material-icons" role="presentation">playlist_add_check</i>{{ 'Trustlines' | translate }}</a>
+                <a class="list-group-item" data-target="#Payment"><i class="material-icons" role="presentation">low_priority</i>{{ 'Payment' | translate }}</a>
+                <a class="list-group-item" data-target="#Trading"><i class="material-icons" role="presentation">trending_up</i>{{ 'Trading' | translate }}</a>
+                <a class="list-group-item" data-target="#Offers"><i class="material-icons" role="presentation">repeat</i>{{ 'Offers' | translate }}</a>
+
+            </ul>
+        </div>
+        <main class="bmd-layout-content">
+            <div class="card page active" style="margin: 1em;padding:2em;word-wrap: break-word;  overflow:auto;">
+                <!-- main content -->
+                <h4 class="card-title">{{ 'Ripple_Wallet' | translate }}</h4>
+                <p class="card-text">The Ripple Wallet is an open-source GUI for the Ripple network that facilitates the peer-to-peer exchange of any store of value.</p>
+            </div>
+            <div class="page" ng-repeat="tab in tabs" id="{{tab.title}}" ng-init="tab.select()">
+                <div ng-include="tab.templete"></div>
+            </div>
+            <div class="card active" style="margin: 1em;padding:2em;word-wrap: break-word;  overflow:auto;">
+                <!-- main content -->
+                <h4 class="card-title">{{'Disclaimer'|translate}}</h4>
+                <p class="card-text">This product is provided "as is" without warranty of any kind and is not endorsed by Ripple Labs inc.</p>
+            </div>
+        </main>
+    </div>
+    <script src="lib/jquery-2.2.3.min.js"></script>
+    <script src="lib/tether/js/tether.min.js"></script>
+    <script src="lib/bootstrap-material-design/js/bootstrap-material-design.iife.min.js"></script>
+    <script src="lib/qrcode.js"></script>
+    <script src="lib/qrcode_UTF8.js"></script>
+    <script src="lib/angular-qrcode.js"></script>
+    <script src="lib/browser.js"></script>
+    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
+    <script src=""></script>
+    <script src="js/load.js"></script>
+
 </body>
 
 </html>
diff --git a/js/launch.js b/js/launch.js
@@ -0,0 +1,27 @@
+chrome.app.runtime.onLaunched.addListener(function() {
+  chrome.storage.local.get('bounds', function(o){
+    var bounds = {width: 300, height: 400, top: 20, left: 20};
+    if(typeof o.bounds !== 'undefined') {
+      if(typeof o.bounds.width  === 'number' &&
+         typeof o.bounds.height === 'number' &&
+         typeof o.bounds.top    === 'number' &&
+         typeof o.bounds.left   === 'number') {
+        // assign values directly to avoid injection
+        bounds = {width  : o.bounds.width, 
+                  height : o.bounds.height, 
+                  top    : o.bounds.top, 
+                  left   : o.bounds.left};
+      }
+    }
+    chrome.app.window.create('index.html', {
+      bounds: bounds,
+      minWidth: 300,
+      minHeight: 250
+    }, function(w){
+      w.onClosed.addListener(function(){
+        chrome.storage.local.set({'bounds': w.getBounds()});
+      });
+    });
+  });
+
+});