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> </head>
<body ng-cloak class="ng-cloak"> <body ng-cloak class="ng-cloak">
<div class="page" ng-controller="indexController as index"> <ion-side-menus 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>
<div class="off-canvas-wrap" id="off-canvas-wrap" <!-- Left menu -->
ng-swipe-disable-mouse <ion-side-menu side="left">
ng-swipe-left="index.closeMenu()" <div ng-include="'views/includes/sidebar.html'" ng-if="index.hasProfile"></div>
ng-swipe-right="index.openMenu()"> </ion-side-menu>
<div class="inner-wrap">
<div ng-include="'views/includes/sidebar.html'" ng-if="index.hasProfile"></div> <!-- Main content -->
<div id="sectionContainer">
<div id="mainSection"> <ion-side-menu-content>
<section ui-view="main" <div notifications="right top"></div>
ng-class="{ <div ng-include="'views/includes/tx-details.html'" ng-if="index.showTx"></div>
'main': index.hasProfile <div ng-include="'views/includes/password.html'" ng-if="index.askPassword"></div>
}"></section> <div ng-include="'views/includes/alert.html'" ng-if="index.showAlert"></div>
</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> </div>
<a class="close-menu" ng-click="index.closeMenu()"></a>
</div> </div>
</div> </ion-side-menu-content>
</div> </ion-side-menus>
<script src="lib/ionic.bundle.js"></script> <script src="lib/ionic.bundle.js"></script>
<script src="lib/angular.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"> <nav class="sidebar" ng-controller="sidebarController as sidebar">
<header> <header>
<logo ng-if="!sidebar.isWindowsPhoneApp" negative="true" width="80"></logo> <logo ng-if="!sidebar.isWindowsPhoneApp" negative="true" width="80"></logo>
<img ng-if="sidebar.isWindowsPhoneApp" src="img/logo-negative.png" alt="Copay" width="80"> <img ng-if="sidebar.isWindowsPhoneApp" src="img/logo-negative.png" alt="Copay" width="80">
<div ng-include="'views/includes/version.html'"></div> <div ng-include="'views/includes/version.html'"></div>
</header> </header>
<ul class="off-canvas-list"> <ion-content overflow-scroll="true">
<li ng-show="sidebar.wallets[0]" <ul class="pr">
ng-repeat="item in sidebar.wallets track by $index" <li ng-show="sidebar.wallets[0]"
ng-class="{'selected': item.id == index.walletId}" ng-repeat="item in sidebar.wallets track by $index"
class="nav-item"> ng-class="{'selected': item.id == index.walletId}"
<a ng-click="sidebar.closeMenu(); sidebar.switchWallet(item.id, index.walletId)" class="oh"> class="nav-item">
<div class="avatar-wallet" <a menu-toggle ng-click="$root.go('walletHome'); sidebar.switchWallet(item.id, index.walletId)" class="oh">
ng-style="{'background-color':item.color}"> <div class="avatar-wallet"
<i class="icon-wallet size-21"></i> ng-style="{'background-color':item.color}">
</div> <i class="icon-wallet size-21"></i>
<div class="name-wallet" ng-class="{'m8t':item.n == 1}">{{item.name || item.id}}</div> </div>
<div class="size-12" ng-show="item.n > 1" translate>{{item.m}}-of-{{item.n}}</div> <div class="name-wallet" ng-class="{'m8t':item.n == 1}">{{item.name || item.id}}</div>
</a> <div class="size-12" ng-show="item.n > 1" translate>{{item.m}}-of-{{item.n}}</div>
</li> </a>
<li> </li>
<a ng-click="sidebar.closeMenu(); $root.go('add')" class="oh"> <li>
<i class="icon-arrow-right3 size-18 right m10t vm"></i> <a menu-toggle ng-click="$root.go('add')" class="oh">
<i class="fi-plus size-24 icon vm"></i> <i class="icon-arrow-right3 size-18 right m10t vm"></i>
<div class="tu text-bold"> <i class="fi-plus size-24 icon vm"></i>
<span class="size-12" translate>Add wallet</span> <div class="tu text-bold">
</div> <span class="size-12" translate>Add wallet</span>
<div translate>Create, join or import</div> </div>
</a> <div translate>Create, join or import</div>
</li> </a>
<li ng-show="!index.isWindowsPhoneApp && index.isComplete && (index.glideraEnabled || index.coinbaseEnabled)"> </li>
<a ng-click="sidebar.closeMenu(); $root.go('buyandsell')" class="oh"> <li ng-show="!index.isWindowsPhoneApp && index.isComplete && (index.glideraEnabled || index.coinbaseEnabled)">
<i class="icon-arrow-right3 size-18 right m10t vm"></i> <a menu-toggle ng-click="$root.go('buyandsell')" class="oh">
<i class="icon-bank size-24 icon vm"></i> <i class="icon-arrow-right3 size-18 right m10t vm"></i>
<div class="tu text-bold m5t"> <i class="icon-bank size-24 icon vm"></i>
<span class="size-12" translate>Buy &amp; Sell</span> <div class="tu text-bold m5t">
</div> <span class="size-12" translate>Buy &amp; Sell</span>
</a> </div>
</li> </a>
<li> </li>
<a ng-click="sidebar.closeMenu(); $root.go('preferencesGlobal')" class="oh"> <li>
<i class="icon-arrow-right3 size-18 right m10t vm"></i> <a menu-toggle ng-click="$root.go('preferencesGlobal')" class="oh">
<i class="fi-widget size-24 icon vm"></i> <i class="icon-arrow-right3 size-18 right m10t vm"></i>
<div class="tu text-bold"> <i class="fi-widget size-24 icon vm"></i>
<span class="size-12" translate>Settings</span> <div class="tu text-bold">
</div> <span class="size-12" translate>Settings</span>
<div translate>Global preferences</div> </div>
</a> <div translate>Global preferences</div>
</li> </a>
</ul> </li>
</ul>
</ion-content>
</nav> </nav>

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

@ -3,7 +3,7 @@
ng-style="{'background-color': noColor ? '#4B6178' : index.backgroundColor}"> ng-style="{'background-color': noColor ? '#4B6178' : index.backgroundColor}">
<section class="left-small"> <section class="left-small">
<a id="hamburger" class="p10" ng-show="!goBackToState && !closeToHome && !index.noFocusedWallet" <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>
<a ng-show="goBackToState" <a ng-show="goBackToState"
ng-click="$root.go(goBackToState); goBackToState = null"><i class="icon-arrow-left3 icon-back"></i> 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) { profileService.isDisclaimerAccepted(function(val) {
if (val) go.swipe(true); if (val) go.toggleLeftMenu();
else else
$log.debug('Disclaimer not accepted, cannot open menu'); $log.debug('Disclaimer not accepted, cannot open menu');
}); });
}; };
self.closeMenu = function() {
go.swipe();
};
self.retryScan = function() { self.retryScan = function() {
var self = this; var self = this;
self.startScan(self.walletId); 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.setWallets();
}); });
self.closeMenu = function() {
go.swipe();
};
self.signout = function() { self.signout = function() {
profileService.signout(); profileService.signout();
}; };

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

@ -1,36 +1,10 @@
'use strict'; '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 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) { root.openExternalLink = function(url, target) {
if ( platformInfo.isNW) { if (platformInfo.isNW) {
nodeWebkit.openExternalLink(url); nodeWebkit.openExternalLink(url);
} else { } else {
target = target || '_blank'; target = target || '_blank';
@ -49,11 +23,10 @@ angular.module('copayApp.services').factory('go', function($window, $rootScope,
}, function() { }, function() {
if (cb) return cb('animation in progress'); if (cb) return cb('animation in progress');
}); });
hideSidebars();
}; };
root.swipe = function(invert) { root.toggleLeftMenu = function() {
toggleSidebar(invert); $ionicSideMenuDelegate.toggleLeft()
}; };
root.walletHome = function() { 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 { .locked {
font-size: 11px; font-size: 11px;
color: #7A8C9E; color: #7A8C9E;
@ -1606,14 +1602,6 @@ input.ng-invalid-match {
left: 0; left: 0;
} }
.right-off-canvas-menu {
background-color: #213140;
}
.off-canvas-wrap, .inner-wrap {
height: 100%;
}
.walletHome { .walletHome {
.avatar-wallet { .avatar-wallet {
padding: 0.5rem; padding: 0.5rem;
@ -1687,6 +1675,11 @@ a.missing-copayers {
margin-bottom: 50px; margin-bottom: 50px;
} }
.sidebar ion-content {
background: #2C3E50;
top: 115px;
}
.sidebar { .sidebar {
background: #2C3E50; background: #2C3E50;
.icon { .icon {
@ -1757,16 +1750,24 @@ a.missing-copayers {
color: #fff; color: #fff;
} }
} }
ul.off-canvas-list { }
margin-bottom: 30px;
li a { .sidebar li {
font-size: 12px; overflow: hidden;
font-weight: 300; border-bottom-style: solid;
border-bottom: transparent; border-bottom-width: 1px;
color: #A5B2BF;
padding: 1rem 0.7rem; 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 { .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 * Remove all vendors hover / shadow / fade
*/ */
@ -1807,23 +1803,6 @@ a.missing-copayers {
box-shadow: none; 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 /* Have to set height explicity on ui-view