moparisthebest
/
mail
mirror of https://github.com/moparisthebest/mail
1
0
Fork 0
Code Issues Releases Wiki Activity

listing folders in ui works

This commit is contained in:
Tankred Hase 2013-08-20 18:27:12 +02:00
parent 898a934291
commit e57ae0282f
5 changed files with 56 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/js/app-controller.js
View File

@ -20,8 +20,9 @@ define(function(require) {
*/
self.start = function(callback) {
// the views to load
var views = ['login', 'compose', 'folderlist', 'messagelist',
'messagelistitem', 'read'
var views = [
'login', 'compose', 'folderlist', 'folderlistitem',
'messagelist', 'messagelistitem', 'read'
];
// are we running in native app or in browser?

31
src/js/view/folderlist-view.js
View File

@ -1,4 +1,6 @@
define(['jquery', 'underscore', 'backbone', 'js/app-config'], function($, _, Backbone, app) {
define(['jquery', 'underscore', 'backbone', 'js/app-config',
'js/view/folderlistitem-view'
], function($, _, Backbone, app, FolderListItemView) {
'use strict';
var FolderListView = Backbone.View.extend({
@ -23,7 +25,10 @@ define(['jquery', 'underscore', 'backbone', 'js/app-config'], function($, _, Bac
},
listFolder: function() {
// var page = $(this.el);
var self = this,
page = $(this.el),
list = page.find('#folder-list'),
listItemArgs;
// show loading msg during init
$.mobile.loading('show', {
@ -36,13 +41,27 @@ define(['jquery', 'underscore', 'backbone', 'js/app-config'], function($, _, Bac
app.util.postMessage('listFolders', {}, function(resArgs) {
var err = resArgs.err;
$.mobile.loading('hide');
if (err) {
window.alert(err.errMsg);
if (err || !resArgs.folders) {
$.mobile.loading('hide');
window.alert('Error listing folders: ' + err.errMsg);
return;
}
console.log(resArgs);
// clear list
list.html('');
// append folder to list
resArgs.folders.forEach(function(folder) {
listItemArgs = {
account: self.options.account,
model: folder
};
list.append(new FolderListItemView(listItemArgs).render().el);
});
// refresh list view
list.listview('refresh');
$.mobile.loading('hide');
});
}
});

22
src/js/view/folderlistitem-view.js Normal file
View File

@ -0,0 +1,22 @@
define(['jquery', 'underscore', 'backbone', 'js/app-config'], function($, _, Backbone, app) {
'use strict';
var FolderListItemView = Backbone.View.extend({
tagName: "li",
initialize: function() {
this.template = _.template(app.util.tpl.get('folderlistitem'));
},
render: function() {
var params = this.model;
params.account = this.options.account;
$(this.el).html(this.template(params));
return this;
}
});
return FolderListItemView;
});

28
src/tpl/folderlist.html
View File

@ -4,33 +4,7 @@
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview">
<li><a href="#accounts/<%- account %>/folders/inbox">
<img src="css/icons/glyphicons_130_inbox.png" class="ui-li-icon ui-corner-none">
Inbox
<!--<span class="ui-li-count">12</span>-->
</a></li>
<li><a href="#accounts/<%- account %>/folders/outbox">
<img src="css/icons/glyphicons_135_inbox_out.png" class="ui-li-icon ui-corner-none">
Outbox
<!--<span class="ui-li-count">0</span>-->
</a></li>
<li><a href="#accounts/<%- account %>/folders/drafts">
<img src="css/icons/glyphicons_030_pencil.png" class="ui-li-icon ui-corner-none">
Drafts
<!--<span class="ui-li-count">4</span>-->
</a></li>
<li><a href="#accounts/<%- account %>/folders/sent">
<img src="css/icons/glyphicons_010_envelope.png" class="ui-li-icon ui-corner-none">
Sent
<!--<span class="ui-li-count">328</span>-->
</a></li>
<li><a href="#accounts/<%- account %>/folders/trash">
<img src="css/icons/glyphicons_016_bin.png" class="ui-li-icon ui-corner-none">
Trash
<!--<span class="ui-li-count">62</span>-->
</a></li>
</ul>
<ul id="folder-list" data-role="listview"></ul>
</div><!-- /content -->
<div data-role="footer" data-position="fixed">

5
src/tpl/folderlistitem.html Normal file
View File

@ -0,0 +1,5 @@
<a href="#accounts/<%- account %>/folders/<%- name %>">
<img src="css/icons/glyphicons_130_inbox.png" class="ui-li-icon ui-corner-none">
<%- name %>
<!--<span class="ui-li-count">12</span>-->
</a>