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

ionic side menu

Browse source
This commit is contained in:
Gabriel Bazán 2016-05-18 15:15:14 -03:00 • committed by Javier
commit d468c28cd0
7 changed files with 105 additions and 161 deletions
Download patch file Download diff file Expand all files Collapse all files

45
public/index.html
View file

@ -16,32 +16,31 @@
</head>
<body ng-cloak class="ng-cloak">
<div class="page" ng-controller="indexController as index">
<div notifications="right top"></div>
<div ng-include="'views/includes/tx-details.html'" ng-if="index.showTx"></div>
<div ng-include="'views/includes/password.html'" ng-if="index.askPassword"></div>
<div ng-include="'views/includes/alert.html'" ng-if="index.showAlert"></div>
<div ng-include="'views/includes/confirm-tx.html'" ng-if="index.confirmTx"></div>
<ion-side-menus class="page" ng-controller="indexController as index">
<div class="off-canvas-wrap" id="off-canvas-wrap"
ng-swipe-disable-mouse
ng-swipe-left="index.closeMenu()"
ng-swipe-right="index.openMenu()">
<div class="inner-wrap">
<div ng-include="'views/includes/sidebar.html'" ng-if="index.hasProfile"></div>
<div id="sectionContainer">
<div id="mainSection">
<section ui-view="main"
ng-class="{
'main': index.hasProfile
}"></section>
</div>
<!-- Left menu -->
<ion-side-menu side="left">
<div ng-include="'views/includes/sidebar.html'" ng-if="index.hasProfile"></div>
</ion-side-menu>
<!-- Main content -->
<ion-side-menu-content>
<div notifications="right top"></div>
<div ng-include="'views/includes/tx-details.html'" ng-if="index.showTx"></div>
<div ng-include="'views/includes/password.html'" ng-if="index.askPassword"></div>
<div ng-include="'views/includes/alert.html'" ng-if="index.showAlert"></div>
<div ng-include="'views/includes/confirm-tx.html'" ng-if="index.confirmTx"></div>
<div id="sectionContainer">
<div id="mainSection">
<section ui-view="main"
ng-class="{
'main': index.hasProfile
}"></section>
</div>
<a class="close-menu" ng-click="index.closeMenu()"></a>
</div>
</div>
</div>
</ion-side-menu-content>
</ion-side-menus>
<script src="lib/ionic.bundle.js"></script>
<script src="lib/angular.js"></script>

102
public/views/includes/sidebar.html
View file

@ -1,51 +1,53 @@
<nav class="sidebar left-off-canvas-menu" ng-controller="sidebarController as sidebar">
<header>
<logo ng-if="!sidebar.isWindowsPhoneApp" negative="true" width="80"></logo>
<img ng-if="sidebar.isWindowsPhoneApp" src="img/logo-negative.png" alt="Copay" width="80">
<div ng-include="'views/includes/version.html'"></div>
</header>
<ul class="off-canvas-list">
<li ng-show="sidebar.wallets[0]"
ng-repeat="item in sidebar.wallets track by $index"
ng-class="{'selected': item.id == index.walletId}"
class="nav-item">
<a ng-click="sidebar.closeMenu(); sidebar.switchWallet(item.id, index.walletId)" class="oh">
<div class="avatar-wallet"
ng-style="{'background-color':item.color}">
<i class="icon-wallet size-21"></i>
</div>
<div class="name-wallet" ng-class="{'m8t':item.n == 1}">{{item.name || item.id}}</div>
<div class="size-12" ng-show="item.n > 1" translate>{{item.m}}-of-{{item.n}}</div>
</a>
</li>
<li>
<a ng-click="sidebar.closeMenu(); $root.go('add')" class="oh">
<i class="icon-arrow-right3 size-18 right m10t vm"></i>
<i class="fi-plus size-24 icon vm"></i>
<div class="tu text-bold">
<span class="size-12" translate>Add wallet</span>
</div>
<div translate>Create, join or import</div>
</a>
</li>
<li ng-show="!index.isWindowsPhoneApp && index.isComplete && (index.glideraEnabled || index.coinbaseEnabled)">
<a ng-click="sidebar.closeMenu(); $root.go('buyandsell')" class="oh">
<i class="icon-arrow-right3 size-18 right m10t vm"></i>
<i class="icon-bank size-24 icon vm"></i>
<div class="tu text-bold m5t">
<span class="size-12" translate>Buy &amp; Sell</span>
</div>
</a>
</li>
<li>
<a ng-click="sidebar.closeMenu(); $root.go('preferencesGlobal')" class="oh">
<i class="icon-arrow-right3 size-18 right m10t vm"></i>
<i class="fi-widget size-24 icon vm"></i>
<div class="tu text-bold">
<span class="size-12" translate>Settings</span>
</div>
<div translate>Global preferences</div>
</a>
</li>
</ul>
<nav class="sidebar" ng-controller="sidebarController as sidebar">
<header>
<logo ng-if="!sidebar.isWindowsPhoneApp" negative="true" width="80"></logo>
<img ng-if="sidebar.isWindowsPhoneApp" src="img/logo-negative.png" alt="Copay" width="80">
<div ng-include="'views/includes/version.html'"></div>
</header>
<ion-content overflow-scroll="true">
<ul class="pr">
<li ng-show="sidebar.wallets[0]"
ng-repeat="item in sidebar.wallets track by $index"
ng-class="{'selected': item.id == index.walletId}"
class="nav-item">
<a menu-toggle ng-click="$root.go('walletHome'); sidebar.switchWallet(item.id, index.walletId)" class="oh">
<div class="avatar-wallet"
ng-style="{'background-color':item.color}">
<i class="icon-wallet size-21"></i>
</div>
<div class="name-wallet" ng-class="{'m8t':item.n == 1}">{{item.name || item.id}}</div>
<div class="size-12" ng-show="item.n > 1" translate>{{item.m}}-of-{{item.n}}</div>
</a>
</li>
<li>
<a menu-toggle ng-click="$root.go('add')" class="oh">
<i class="icon-arrow-right3 size-18 right m10t vm"></i>
<i class="fi-plus size-24 icon vm"></i>
<div class="tu text-bold">
<span class="size-12" translate>Add wallet</span>
</div>
<div translate>Create, join or import</div>
</a>
</li>
<li ng-show="!index.isWindowsPhoneApp && index.isComplete && (index.glideraEnabled || index.coinbaseEnabled)">
<a menu-toggle ng-click="$root.go('buyandsell')" class="oh">
<i class="icon-arrow-right3 size-18 right m10t vm"></i>
<i class="icon-bank size-24 icon vm"></i>
<div class="tu text-bold m5t">
<span class="size-12" translate>Buy &amp; Sell</span>
</div>
</a>
</li>
<li>
<a menu-toggle ng-click="$root.go('preferencesGlobal')" class="oh">
<i class="icon-arrow-right3 size-18 right m10t vm"></i>
<i class="fi-widget size-24 icon vm"></i>
<div class="tu text-bold">
<span class="size-12" translate>Settings</span>
</div>
<div translate>Global preferences</div>
</a>
</li>
</ul>
</ion-content>
</nav>

2
public/views/includes/topbar.html
View file

@ -3,7 +3,7 @@
ng-style="{'background-color': noColor ? '#4B6178' : index.backgroundColor}">
<section class="left-small">
<a id="hamburger" class="p10" ng-show="!goBackToState && !closeToHome && !index.noFocusedWallet"
ng-click="index.openMenu()"><i class="fi-list size-24"></i>
ng-click="index.toggleLeftMenu()"><i class="fi-list size-24"></i>
</a>
<a ng-show="goBackToState"
ng-click="$root.go(goBackToState); goBackToState = null"><i class="icon-arrow-left3 icon-back"></i>

8
src/js/controllers/index.js
View file

@ -1155,18 +1155,14 @@ angular.module('copayApp.controllers').controller('indexController', function($r
});
};
self.openMenu = function() {
self.toggleLeftMenu = function() {
profileService.isDisclaimerAccepted(function(val) {
if (val) go.swipe(true);
if (val) go.toggleLeftMenu();
else
$log.debug('Disclaimer not accepted, cannot open menu');
});
};
self.closeMenu = function() {
go.swipe();
};
self.retryScan = function() {
var self = this;
self.startScan(self.walletId);

5
src/js/controllers/sidebar.js
View file

@ -20,11 +20,6 @@ angular.module('copayApp.controllers').controller('sidebarController',
self.setWallets();
});
self.closeMenu = function() {
go.swipe();
};
self.signout = function() {
profileService.signout();
};

35
src/js/services/go.js
View file

@ -1,36 +1,10 @@
'use strict';
angular.module('copayApp.services').factory('go', function($window, $rootScope, $location, $state, $timeout, $log, profileService, platformInfo, nodeWebkit) {
angular.module('copayApp.services').factory('go', function($window, $ionicSideMenuDelegate, $rootScope, $location, $state, $timeout, $log, profileService, platformInfo, nodeWebkit) {
var root = {};
var hideSidebars = function() {
if (typeof document === 'undefined')
return;
var elem = document.getElementById('off-canvas-wrap');
elem.className = 'off-canvas-wrap';
};
var toggleSidebar = function(invert) {
if (typeof document === 'undefined')
return;
var elem = document.getElementById('off-canvas-wrap');
var leftbarActive = elem.className.indexOf('move-right') >= 0;
if (invert) {
if (profileService.profile && !$rootScope.hideNavigation) {
elem.className = 'off-canvas-wrap move-right';
}
} else {
if (leftbarActive) {
hideSidebars();
}
}
};
root.openExternalLink = function(url, target) {
if ( platformInfo.isNW) {
if (platformInfo.isNW) {
nodeWebkit.openExternalLink(url);
} else {
target = target || '_blank';
@ -49,11 +23,10 @@ angular.module('copayApp.services').factory('go', function($window, $rootScope,
}, function() {
if (cb) return cb('animation in progress');
});
hideSidebars();
};
root.swipe = function(invert) {
toggleSidebar(invert);
root.toggleLeftMenu = function() {
$ionicSideMenuDelegate.toggleLeft()
};
root.walletHome = function() {

67
src/sass/main.scss
View file

@ -833,10 +833,6 @@ ul.manage li {
}
}
.sidebar li.nav-item.selected .name-wallet {
color: #fff;
}
.locked {
font-size: 11px;
color: #7A8C9E;
@ -1606,14 +1602,6 @@ input.ng-invalid-match {
left: 0;
}
.right-off-canvas-menu {
background-color: #213140;
}
.off-canvas-wrap, .inner-wrap {
height: 100%;
}
.walletHome {
.avatar-wallet {
padding: 0.5rem;
@ -1687,6 +1675,11 @@ a.missing-copayers {
margin-bottom: 50px;
}
.sidebar ion-content {
background: #2C3E50;
top: 115px;
}
.sidebar {
background: #2C3E50;
.icon {
@ -1757,16 +1750,24 @@ a.missing-copayers {
color: #fff;
}
}
ul.off-canvas-list {
margin-bottom: 30px;
li a {
font-size: 12px;
font-weight: 300;
border-bottom: transparent;
color: #A5B2BF;
padding: 1rem 0.7rem;
}
}
}
.sidebar li {
overflow: hidden;
border-bottom-style: solid;
border-bottom-width: 1px;
padding: 1rem 0.7rem;
font-size: 12px;
font-weight: 300;
}
.sidebar ul {
margin: 0 0 30px 0;
}
.sidebar a {
color: #A5B2BF;
}
.modal-content ul li a {
@ -1790,11 +1791,6 @@ a.missing-copayers {
}
}
.sidebar .left-off-canvas-menu {
background: #E4E8EC;
line-height: 24px;
}
/*
* Remove all vendors hover / shadow / fade
*/
@ -1807,23 +1803,6 @@ a.missing-copayers {
box-shadow: none;
}
ul.off-canvas-list li a:hover {
background: none;
}
.move-right .close-menu {
cursor: pointer;
box-shadow: none;
display: block;
position: absolute;
background: none;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1002;
}
/* === */
/* Have to set height explicity on ui-view