moparisthebest/mail
1
0
Fork 0
mirror of https://github.com/moparisthebest/mail synced 2024-11-23 09:22:23 -05:00
Code Issues Releases Wiki Activity

integrate desktop navigation slider

Browse Source
This commit is contained in:
Tankred Hase 2013-09-17 19:11:30 +02:00
parent 8fe063c9ad
commit 45f9b07bb0
5 changed files with 117 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/index.html
View File

@ -8,9 +8,10 @@
<title>Mail</title> <title>Mail</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="all" href="css/all.css" type="text/css">
<link href="css/reset.css" rel="stylesheet"> <!--<link href="css/reset.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet">-->
<!-- The Scripts --> <!-- The Scripts -->
<script src="lib/require.js"></script> <script src="lib/require.js"></script>
@ -19,7 +20,7 @@
</head> </head>
<body> <body>
<div ng-view></div> <div ng-view class="main-app-view"></div>
</body> </body>
</html> </html>

7
src/js/app.js
View File

@ -6,9 +6,10 @@ require([
'js/controller/login', 'js/controller/login',
'js/controller/message-list', 'js/controller/message-list',
'js/controller/write', 'js/controller/write',
'js/controller/navigation',
'angularRoute', 'angularRoute',
'angularTouch' 'angularTouch'
], function(angular, LoginCtrl, MessageListCtrl, WriteCtrl) { ], function(angular, LoginCtrl, MessageListCtrl, WriteCtrl, NavigationCtrl) {
'use strict'; 'use strict';
var app = angular.module('mail', ['ngRoute', 'ngTouch', 'write']); var app = angular.module('mail', ['ngRoute', 'ngTouch', 'write']);
@ -29,6 +30,10 @@ require([
templateUrl: 'tpl/write.html', templateUrl: 'tpl/write.html',
controller: WriteCtrl controller: WriteCtrl
}); });
$routeProvider.when('/desktop', {
templateUrl: 'tpl/desktop.html',
controller: NavigationCtrl
});
$routeProvider.otherwise({ $routeProvider.otherwise({
redirectTo: '/login' redirectTo: '/login'
}); });

17
src/js/controller/navigation.js Normal file
View File

@ -0,0 +1,17 @@
define(function() {
'use strict';
var NavigationCtrl = function($scope) {
$scope.navOpen = false;
$scope.openNav = function() {
$scope.navOpen = true;
};
$scope.closeNav = function() {
$scope.navOpen = false;
};
};
return NavigationCtrl;
});

4
src/sass/_scaffolding.scss
View File

@ -33,6 +33,10 @@ textarea {
} }
// Basic layout // Basic layout
.main-app-view {
height: 100%;
}
.column { .column {
} }

86
src/tpl/desktop.html Normal file
View File

@ -0,0 +1,86 @@
<div class="nav-container nav-effect" ng-class="{'nav-menu-open': navOpen}">
<!-- main navigation -->
<nav class="nav-menu nav-effect">
<div class="content">
<header>
<h1>WHITEOUT.IO</h1>
</header>
<ul class="nav-primary">
<li>
<a href="#">
Inbox
<span class="label-wrapper"><span class="label label-light">1000+</span></span>
</a>
</li>
<li>
<a href="#">Sent</a>
</li>
<li>
<a href="#">Outbox</a>
</li>
<li>
<a href="#">
Drafts
<span class="label-wrapper"><span class="label label-light">2</span></span>
</a>
</li>
<li>
<a href="#">
Trash
<span class="label-wrapper"><span class="label label-light">100</span></span>
</a>
</li>
</ul>
<ul class="nav-secondary">
<li><a href="#">Account</a></li>
<li><a href="#">About whiteout.io</a></li>
<li><a href="#">Help</a></li>
</ul>
<footer>
Last update: 12:22 PM
</footer>
</div>
</nav><!--/.nav-menu-->
<!-- content wrapper pushed right -->
<div class="nav-pusher" ng-click="closeNav()">
<section class="content main-content">
<!-- left column: containing list view and navigation header -->
<div class="column view-mail-list">
<!-- nav controll and section headline -->
<header data-icon="&#xe004;" ng-click="openNav(); $event.stopPropagation()">
<h2>Inbox</h2>
</header>
<div class="">
</div>
</div>
<div class="column">
</div>
</section>
</div><!--/.nav-pusher-->
</div><!--/.nav-container-->
<!-- lightbox -->
<div class="lightbox-overlay">
<div class="lightbox lightbox-effect">
<div class="lightbox-body">
<header>
<!-- add lightbox title -->
<h2>New email</h2>
<button class="close" data-action="lightbox-close">&#xe007;</button>
</header>
<div class="content">
<!-- add lightbox content here -->
some content
</div>
</div>
</div>
</div><!--/.lightbox-->