Merge branch 'development' into 66_infinite-scroll

app/main.js

@@ -49,12 +49,35 @@ function createWindow() {
     template.unshift({
       label: name,
       submenu: [
+        {
+          role: 'about',
+          label: 'About',
+        },
         {
           role: 'quit',
           label: 'Quit',
         },
       ],
     });
+  } else {
+    template.push({
+      label: "Help",
+      submenu: [
+        {
+          label: 'About',
+          click: function (item, focusedWindow) {
+            if (focusedWindow) {
+              const options = {
+                buttons: ['OK'],
+                icon: `${__dirname}/assets/lisk.png`,
+                message: `Lisk Nano\nVersion ${app.getVersion()}\nCopyright © 2017 Lisk Foundation`,
+              }
+              electron.dialog.showMessageBox(focusedWindow, options, function () {})
+            }
+          }
+        }
+    ]
+    });
   }
 
   const menu = Menu.buildFromTemplate(template);
@@ -63,6 +86,36 @@ function createWindow() {
   win.loadURL(`file://${__dirname}/index.html`);
 
   win.on('closed', () => win = null);
+
+  setupContextMenu(win);
+}
+
+function setupContextMenu(window) {
+  const selectionMenu = Menu.buildFromTemplate([
+    {role: 'copy'},
+    {type: 'separator'},
+    {role: 'selectall'},
+  ]);
+
+  const inputMenu = Menu.buildFromTemplate([
+    {role: 'undo'},
+    {role: 'redo'},
+    {type: 'separator'},
+    {role: 'cut'},
+    {role: 'copy'},
+    {role: 'paste'},
+    {type: 'separator'},
+    {role: 'selectall'},
+  ]);
+
+  window.webContents.on('context-menu', (e, props) => {
+    const { selectionText, isEditable } = props;
+    if (isEditable) {
+      inputMenu.popup(window);
+    } else if (selectionText && selectionText.trim() !== '') {
+      selectionMenu.popup(window);
+    }
+  });
 }
 
 app.on('ready', createWindow);

app/package.json

@@ -3,8 +3,5 @@
   "version": "0.2.0",
   "description": "Lisk Nano",
   "main": "main.js",
-  "author":{
-    "name": "Ricardo Ferro",
-    "email": "[email protected]"
-  }
+  "author": "Lisk Foundation <[email protected]>, lightcurve GmbH <[email protected]>"
 }

src/.eslintrc.json

@@ -19,6 +19,12 @@
     "no-plusplus": "off",
     "no-restricted-properties": "off",
     "no-return-assign": "off",
-    "no-underscore-dangle": "off"
+    "no-underscore-dangle": "off",
+    "no-param-reassign": [
+      "error", {
+        "props": true,
+        "ignorePropertyModificationsFor": ["scope", "$scope", "rootScope", "$rootScope"]
+      }
+    ]
   }
 }

src/app/components/main/main.js

@@ -7,13 +7,14 @@ const UPDATE_INTERVAL_BALANCE = 10000;
 app.component('main', {
   template: require('./main.pug')(),
   controller: class main {
-    constructor($scope, $rootScope, $timeout, $q, $peers, error) {
+    constructor($scope, $rootScope, $timeout, $q, $peers, error, SendModal) {
       this.$scope = $scope;
       this.$rootScope = $rootScope;
       this.$timeout = $timeout;
       this.$q = $q;
       this.$peers = $peers;
       this.error = error;
+      this.sendModal = SendModal;
 
       this.$scope.$on('login', this.login.bind(this));
     }
@@ -71,6 +72,7 @@ app.component('main', {
       return this.$peers.active.getAccountPromise(this.address)
         .then((res) => {
           this.account = res;
+          this.sendModal.init(this.account, this.passphrase);
         })
         .catch((res) => {
           this.account.balance = undefined;

src/app/components/main/main.pug

@@ -1,16 +1,16 @@
-md-content(layout='row')
+md-content(layout='row', id="main")
   md-content(flex='100', flex-gt-sm='80', flex-offset-gt-sm='10')
     md-content.header(layout='row', layout-align='center center', layout-padding)
       img.logo(src=require('./images/LISK-nano.png'))
       div(flex)
-      md-button.md-raised.md-primary.logout(ng-click='$ctrl.logout()', ng-if='$ctrl.logged') Logout
+      md-button.md-raised.md-primary.send(data-show-send-modal, ng-if='$ctrl.logged') Send
+      md-button.md-raised.md-secondary.logout(ng-click='$ctrl.logout()', ng-if='$ctrl.logged') Logout
     div(layout='row', layout-align='space-around', ng-show='$ctrl.prelogged')
       md-progress-circular.md-warn(md-mode='indeterminate', md-diameter='80')
     div(ng-show='!$ctrl.prelogged && !$ctrl.logged')
       login(passphrase='$ctrl.passphrase', on-login='$ctrl.login()')
     div(ng-if='$ctrl.logged', ng-class='{ online: $ctrl.$peers.online, offline: !$ctrl.$peers.online }')
       top(account='$ctrl.account')
-      send(passphrase='$ctrl.passphrase', account='$ctrl.account')
       md-tabs(md-selected='selectedIndex', md-dynamic-height='true', md-stretch-tabs='always')
         md-tab(md-on-select='onTabSelected(tab)', md-on-deselect='announceDeselected(tab)', ng-disabled='tab.disabled')
           md-tab-label Transactions

src/app/components/send/send.js

@@ -8,6 +8,8 @@ app.component('send', {
   bindings: {
     account: '<',
     passphrase: '<',
+    recipientId: '<',
+    transferAmount: '<',
   },
   controller: class send {
     constructor($scope, $peers, lsk, success, error, $mdDialog, $q, $rootScope) {
@@ -21,11 +23,15 @@ app.component('send', {
 
       this.recipient = {
         regexp: ADDRESS_VALID_RE,
+        value: $scope.$ctrl.recipientId,
       };
 
       this.amount = {
         regexp: AMOUNT_VALID_RE,
       };
+      if ($scope.$ctrl.transferAmount) {
+        this.amount.value = parseInt(lsk.normalize($scope.$ctrl.transferAmount), 10);
+      }
 
       this.$scope.$watch('$ctrl.amount.value', () => {
         this.amount.raw = lsk.from(this.amount.value) || 0;
@@ -111,6 +117,10 @@ app.component('send', {
     setMaxAmount() {
       this.amount.value = Math.max(0, this.amount.max);
     }
+
+    cancel() {
+      this.$mdDialog.cancel();
+    }
   },
 });
 

src/app/components/send/send.less

@@ -22,7 +22,9 @@ send {
     transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
     color: grey;
   }
-
+  md-card {
+    margin: 0;
+  }
   md-card-title md-menu {
     margin: -8px -14px;
   }

src/app/components/send/send.pug

@@ -1,31 +1,33 @@
-md-card.offline-hide
-  md-card-title
-    md-card-title-text
-      span.md-title Send
-    md-menu(md-position-mode='target-right target')
-      md-button.md-icon-button(ng-click='$mdOpenMenu()')
-        i.material-icons more_vert
-      md-menu-content(width='4')
-        md-menu-item
-          md-button(ng-click='$ctrl.setMaxAmount()')
-            div(layout='row', flex='')
-              p(flex='') Set maximum amount
-  md-card-content
-    form(name='$ctrl.sendForm')
-      md-content(flex='100', flex-gt-sm='70', flex-offset-gt-sm='15')
-        md-input-container.md-block
-          label Recipient Address
-          input(type='text', name='recipient', ng-model='$ctrl.recipient.value', required, ng-pattern='$ctrl.recipient.regexp', ng-disabled='$ctrl.loading')
-          div(ng-messages='$ctrl.sendForm.recipient.$error')
-            div(ng-message='required') Required
-            div(ng-message='pattern') Invalid
-        md-input-container.md-block
-          label Transaction Amount
-          input(type='number', name='amount', ng-model='$ctrl.amount.value', required, ng-pattern='$ctrl.amount.regexp', ng-disabled='$ctrl.loading', ng-max='$ctrl.amount.max', ignore-mouse-wheel)
-          div.fee(ng-show='$ctrl.amount.value') Fee: 0.1 LSK
-          div(ng-messages='$ctrl.sendForm.amount.$error')
-            div(ng-message='required') Required
-            div(ng-message='pattern') Invalid
-            div(ng-message='max') Insufficient funds
-    md-content(layout='row', layout-align='center center')
-      md-button.md-raised.md-primary(ng-disabled='!$ctrl.sendForm.$valid || $ctrl.loading', ng-click='$ctrl.go()') {{ $ctrl.loading ? 'Sending...' : 'Send' }}
+md-dialog.dialog-send(aria-label='Transfering', style='width: 700px; max-width: 700px')
+  md-card.offline-hide
+    md-card-title
+      md-card-title-text
+        span.md-title Send
+      md-menu(md-position-mode='target-right target')
+        md-button.md-icon-button(ng-click='$mdOpenMenu()')
+          i.material-icons more_vert
+        md-menu-content(width='4')
+          md-menu-item
+            md-button(ng-click='$ctrl.setMaxAmount()')
+              div(layout='row', flex='')
+                p(flex='') Set maximum amount
+    md-card-content
+      form(name='$ctrl.sendForm')
+        md-content(flex='100', flex-gt-sm='70', flex-offset-gt-sm='15')
+          md-input-container.md-block
+            label Recipient Address
+            input(type='text', name='recipient', ng-model='$ctrl.recipient.value', required, ng-pattern='$ctrl.recipient.regexp', ng-disabled='$ctrl.loading')
+            div(ng-messages='$ctrl.sendForm.recipient.$error')
+              div(ng-message='required') Required
+              div(ng-message='pattern') Invalid
+          md-input-container.md-block
+            label Transaction Amount
+            input(type='number', name='amount', ng-model='$ctrl.amount.value', required, ng-pattern='$ctrl.amount.regexp', ng-disabled='$ctrl.loading', ng-max='$ctrl.amount.max', ignore-mouse-wheel)
+            div.fee(ng-show='$ctrl.amount.value') Fee: 0.1 LSK
+            div(ng-messages='$ctrl.sendForm.amount.$error')
+              div(ng-message='required') Required
+              div(ng-message='pattern') Invalid
+              div(ng-message='max') Insufficient funds
+      md-content(layout='row', layout-align='center center')
+        md-button.md-raised.md-secondary(ng-disabled='$ctrl.loading', ng-click='$ctrl.cancel()') {{ 'Cancel' }}
+        md-button.md-raised.md-primary(ng-disabled='!$ctrl.sendForm.$valid || $ctrl.loading', ng-click='$ctrl.go()') {{ $ctrl.loading ? 'Sending...' : 'Send' }}

src/app/components/send/sendModalDirective.js

@@ -0,0 +1,16 @@
+app.directive('showSendModal', (SendModal) => {
+  const ShowSendModalLink = function (scope, element) {
+    element.bind('click', () => {
+      SendModal.show(scope.recipientId, scope.amount);
+    });
+  };
+
+  return {
+    restrict: 'A',
+    scope: {
+      recipientId: '<',
+      amount: '<',
+    },
+    link: ShowSendModalLink,
+  };
+});

src/app/components/send/sendModalService.js

@@ -0,0 +1,32 @@
+app.factory('SendModal', ($mdDialog) => {
+  let account = null;
+  let passphrase = null;
+
+  const init = (_account, _passphrase) => {
+    account = _account;
+    passphrase = _passphrase;
+  };
+
+  const hide = () => {
+  };
+
+  const show = (recipientId, amount) => ($mdDialog.show({
+    template: '<send account="ms.account" passphrase="ms.passphrase" recipient-id="ms.recipientId" transfer-amount="ms.amount"></send>',
+    parent: angular.element('#main'),
+    locals: {
+      account, passphrase, recipientId, amount,
+    },
+    bindToController: true,
+    controller: ['$scope', ($scope) => {
+      $scope.account = account;
+      $scope.recipientId = recipientId;
+      $scope.passphrase = passphrase;
+      $scope.amount = amount;
+    }],
+    controllerAs: 'ms',
+  }));
+
+  return {
+    hide, show, init,
+  };
+});

src/app/components/transactions/transactions.less

@@ -1,6 +1,7 @@
 
 @in: #73C8A9;
 @out: #F45D4C;
+@btn: rgb(2,136,209);
 
 transactions {
   md-card-content {
@@ -73,4 +74,14 @@ transactions {
       font-weight: normal;
     }
   }
+
+  .expanding-button {
+    color: #555;
+    cursor: pointer;
+    background-color: #eee;
+    border-radius: 3px;
+    &:hover {
+      color: @btn;
+    }
+  }
 }

src/app/components/transactions/transactions.pug

@@ -12,7 +12,7 @@ md-card.offline-hide
               th(md-column) Time
               th(md-column) Transaction ID
               th(md-column) From / To
-              th(md-column)
+              th(md-column) Send to this
               th(md-column) Amount
               th(md-column) Fee
           tbody(md-body, infinite-scroll='$ctrl.showMore()')
@@ -34,6 +34,9 @@ md-card.offline-hide
                 span(ng-switch-default)
                   span(ng-bind='transaction.senderId', ng-if='transaction.senderId !== $ctrl.account.address')
                   span(ng-bind='transaction.recipientId', ng-if='transaction.senderId === $ctrl.account.address')
+              td(md-cell)
+                i.material-icons.expanding-button(ng-if='transaction.senderId !== $ctrl.account.address', data-show-send-modal, data-recipient-id='transaction.senderId') arrow_forward
+                i.material-icons.expanding-button(ng-if='transaction.senderId === $ctrl.account.address', data-show-send-modal, data-recipient-id='transaction.recipientId') arrow_forward
               td(md-cell)
                 i.material-icons.in(ng-if='transaction.senderId !== $ctrl.account.address') call_received
                 i.material-icons.out(ng-if='transaction.senderId === $ctrl.account.address') call_made

src/app/index.less

@@ -5,6 +5,9 @@
 
 body {
   min-width: 320px;
+  & > main, & > main > md-content {
+    height: 100%;
+  }
 }
 
 md-card {

src/app/lisk-nano.js

@@ -6,6 +6,8 @@ import './components/main/main';
 import './components/login/login';
 import './components/top/top';
 import './components/send/send';
+import './components/send/sendModalService';
+import './components/send/sendModalDirective';
 import './components/transactions/transactions';
 import './components/timestamp/timestamp';
 import './components/lsk/lsk';

src/package.json

@@ -45,7 +45,6 @@
     "exports-loader": "=0.6.3",
     "extract-text-webpack-plugin": "=1.0.1",
     "file-loader": "=0.9.0",
-    "git-hooks": "=1.1.8",
     "grunt": "=1.0.1",
     "grunt-eslint": "=19.0.0",
     "grunt-newer": "^1.2.0",