haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-01 15:09:14 +00:00
Code Issues Releases Wiki Activity

Restructure views

Browse Source 
Conflicts:
	seahub/templates/libraries.html
	static/scripts/app/router.js
	static/scripts/app/views/group.js
	static/scripts/app/views/organization.js
This commit is contained in:
Daniel Pan
2016-03-24 14:43:20 +08:00
parent dd906d7f68
commit 45a7ba13e7
16 changed files with 460 additions and 483 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
seahub/templates/base_for_backbone.html
View File

@@ -117,13 +117,15 @@
<div id="main" class="clear">
<div id="left-panel">
{% block left_panel %}{% endblock %}
<div class="side-tabnav hide" id="side-nav"></div>
</div>
<div id="right-panel">
{% block right_panel %}{% endblock %}
</div>
<div id="main-panel" class="clear w100 ovhd">
{% block main_panel %} {% endblock %}
<div id="initial-loading-view">
<span class="loading-icon loading-tip"></span>
</div>
</div>
<div id="confirm-popup" class="hide">
@@ -131,6 +133,19 @@
<button id="confirm-yes" class="btn">{% trans "Yes"%}</button>
<button class="simplemodal-close btn">{% trans "No"%}</button>
</div>
<div id="guide-for-new" class="hide">
<span class="icon-lightbulb fleft"></span>
<div class="txt">
<h3>{% trans "Welcome to Seafile!" %}</h3>
{% if user.permissions.can_add_repo %}
<p>{% trans "Seafile organizes files into libraries. Each library can be synced and shared separately. We have created a personal library for you. You can create more libraries later." %}</p>
{% else %}
<p>{% trans "Seafile organizes files into libraries. Each library can be synced and shared separately. Howerver, since you are a guest user now, you can not create libraries." %}</p>
{% endif %}
<button class="simplemodal-close" style="margin:8px 0 0 0;">{% trans "Close" %}</button>
</div>
</div>
</div>
{% include 'footer.html' %}

4
seahub/templates/js/dir-view.html
View File

@@ -1,5 +1,5 @@
{% load i18n %}
<div id="dir-view" class="hide">
<script type="text/template" id="dir-view-tmpl">
<div class="repo-file-list-topbar">
<p class="path"></p>
<div class="repo-op"></div>
@@ -14,4 +14,4 @@
</div>
<span class="loading-icon loading-tip"></span>
<p class="error hide"></p>
</div>
</script>

234
seahub/templates/libraries.html
View File

@@ -4,19 +4,11 @@
{% block sub_title %}{% trans "Libraries" %} - {% endblock %}
{% block main_panel %}
<div id="initial-loading-view">
<span class="loading-icon loading-tip"></span>
</div>
{% endblock %}
{% block left_panel %}
<div class="side-tabnav hide" id="side-nav"></div>
{% endblock %}
{% block right_panel %}
{% if user.permissions.can_add_repo %}
<div id="my-own-repos" class="hide">
{% endblock %}
{% block extra_script %}
<script type="text/template" id="my-own-repos-tmpl">
<div class="hd ovhd">
<h3 class="fleft">{% trans "Mine" %}</h3>
<button class="repo-create fright"><span class="icon-plus-square add vam"></span><span class="vam">{% trans "New Library" %}</span></button>
@@ -31,10 +23,9 @@
</div>
<span class="loading-icon loading-tip"></span>
<p class="error error-tip hide"></p>
</div>
{% endif %}
</script>
<div id="repos-shared-to-me" class="hide">
<script type="text/template" id="repos-shared-to-me-tmpl">
<h3 class="hd">{% trans "Shared" %}</h3>
<table class="hide">
<thead></thead>
@@ -45,72 +36,66 @@
</div>
<span class="loading-icon loading-tip"></span>
<p class="error error-tip hide"></p>
</div>
</script>
<div id="starred-file" class="hide">
<h3 class="hd">{% trans "Starred" %}</h3>
<table class="hide">
<thead>
<tr>
<th width="5%"></th>
<th width="40%">{% trans "File Name" %}</th>
<th width="32%">{% trans "Library" %}</th>
<th width="18%">{% trans "Last Update" %}</th>
<th width="5%"></th>
</tr>
</thead>
<tbody></tbody>
</table>
<span class="loading-icon loading-tip"></span>
<div class="empty-tips hide">
<h2 class="alc">{% trans "You don't have any starred files yet" %}</h2>
<p>{% blocktrans %}You can star important files by clicking the "Star" button on file viewing page, and they will be listed here.{% endblocktrans %}</p>
<script type="text/template" id="organization-repos-tmpl">
<div class="hd">
<h3 class="fleft">{% trans "Organization" %}</h3>
{% if can_add_pub_repo %}
<div class="fright dropdown dropdown js-add-pub-lib-dropdown">
<button class="dropdown-toggle"><span class="icon-plus-square add vam"></span><span class="vam">{% trans "Add Library"%}</span></button>
<ul class="add-pub-lib-dropdown-menu dropdown-menu dropdown-content hide">
<li><a class="op js-repo-rename share-existing" href="#">{% trans "Share existing libraries" %}</a></li>
<li><a class="op js-repo-rename create-new" href="#">{% trans "Create a new library" %}</a></li>
</ul>
</div>
</div>
<div id="activities" class="hide">
<div id="activities-body" class="hide"></div>
<span class="loading-icon loading-tip"></span>
<button id="activities-more" class="hide">{% trans 'More' %}</button>
</div>
<div id="devices" class="hide">
<h3 class="hd">{% trans "Devices" %}</h3>
<table class="hide">
<thead>
<tr>
<th width="13%">{% trans "Platform" %}</th>
<th width="25%">{% trans "Device Name" %}</th>
<th width="20%">{% trans "IP" %}</th>
<th width="17%">{% trans "Last Access" %}</th>
<th width="15%">{% trans "# Libraries" %}</th>
<th width="10%"></th>
</tr>
</thead>
<tbody></tbody>
</table>
<span class="loading-icon loading-tip"></span>
<div class="empty-tips hide">
<h2 class="alc">{% trans "You do not have connected devices" %}</h2>
<p>{% trans "Your clients (Desktop/Android/iOS) will be listed here." %}</p>
</div>
</div>
<div id="guide-for-new" class="hide">
<span class="icon-lightbulb fleft"></span>
<div class="txt">
<h3>{% trans "Welcome to Seafile!" %}</h3>
{% if user.permissions.can_add_repo %}
<p>{% trans "Seafile organizes files into libraries. Each library can be synced and shared separately. We have created a personal library for you. You can create more libraries later." %}</p>
{% else %}
<p>{% trans "Seafile organizes files into libraries. Each library can be synced and shared separately. Howerver, since you are a guest user now, you can not create libraries." %}</p>
{% endif %}
<button class="simplemodal-close" style="margin:8px 0 0 0;">{% trans "Close" %}</button>
</div>
</div>
<div id="group" class="hide">
<table class="repo-list hide">
<thead></thead>
<tbody></tbody>
</table>
<div class="empty-tips hide">
<h2 class="alc">{% trans "No public library" %}</h2>
<p>{% blocktrans %}You can create a public library by clicking "New Library" button, others can view and download this library.{% endblocktrans %}</p>
</div>
<span class="loading-icon loading-tip"></span>
<p class="error error-tip hide"></p>
</script>
<script type="text/template" id="groups-tmpl">
<div class="hd ovhd">
<h3 class="fleft">{% trans "My Groups" %}</h3>
{% if user.permissions.can_add_group %}
<button id="add-group" class="fright"><span class="icon-plus-square add vam"></span><span class="vam">{% trans "New Group" %}</span></button>
{% endif %}
</div>
<div id="group-list" class="hide"></div>
<div class="empty-tips hide">
<h2 class="alc">{% trans "You are not in any group" %}</h2>
{% if user.permissions.can_add_group %}
<p>{% blocktrans %}Group is a place for you and your friends leaving messages and collaborating on libraries. You can create a group by clicking "New Group" button.{% endblocktrans %}</p>
{% else %}
<p>{% trans "Group is a place for you and your friends leaving messages and collaborating on libraries. Groups you join will be listed here." %}</p>
{% endif %}
</div>
<span class="loading-icon loading-tip"></span>
<p class="error error-tip hide"></p>
{% if user.permissions.can_add_group %}
<form id="group-add-form" action="" method="post" class="hide">{% csrf_token %}
<h3>{% trans "New Group" %}</h3>
<label>{% trans "Group Name" %}</label><br />
<input name="group_name" value="" class="input" /><br />
<p class="error hide"></p>
<input type="submit" class="submit" value="{% trans "Submit" %}" />
</form>
{% endif %}
</script>
<script type="text/template" id="group-tmpl">
<div id="group-top"></div>
<div id="group-repos">
@@ -174,72 +159,59 @@
</form>
</div>
</div>
</script>
</div>
<div id="organization-repos" class="hide">
<div class="hd">
<h3 class="fleft">{% trans "Organization" %}</h3>
{% if can_add_pub_repo %}
<div class="fright dropdown dropdown js-add-pub-lib-dropdown">
<button class="dropdown-toggle"><span class="icon-plus-square add vam"></span><span class="vam">{% trans "Add Library"%}</span></button>
<ul class="add-pub-lib-dropdown-menu dropdown-menu dropdown-content hide">
<li><a class="op js-repo-rename share-existing" href="#">{% trans "Share existing libraries" %}</a></li>
<li><a class="op js-repo-rename create-new" href="#">{% trans "Create a new library" %}</a></li>
</ul>
</div>
{% endif %}
</div>
<table class="repo-list hide">
<thead></thead>
<script type="text/template" id="starred-file-tmpl">
<h3 class="hd">{% trans "Starred" %}</h3>
<table class="hide">
<thead>
<tr>
<th width="5%"></th>
<th width="40%">{% trans "File Name" %}</th>
<th width="32%">{% trans "Library" %}</th>
<th width="18%">{% trans "Last Update" %}</th>
<th width="5%"></th>
</tr>
</thead>
<tbody></tbody>
</table>
<div class="empty-tips hide">
<h2 class="alc">{% trans "No public library" %}</h2>
<p>{% blocktrans %}You can create a public library by clicking "New Library" button, others can view and download this library.{% endblocktrans %}</p>
</div>
<span class="loading-icon loading-tip"></span>
<p class="error error-tip hide"></p>
</div>
<div id="groups" class="hide">
<div class="hd ovhd">
<h3 class="fleft">{% trans "My Groups" %}</h3>
{% if user.permissions.can_add_group %}
<button id="add-group" class="fright"><span class="icon-plus-square add vam"></span><span class="vam">{% trans "New Group" %}</span></button>
{% endif %}
</div>
<div id="group-list" class="hide"></div>
<div class="empty-tips hide">
<h2 class="alc">{% trans "You are not in any group" %}</h2>
{% if user.permissions.can_add_group %}
<p>{% blocktrans %}Group is a place for you and your friends leaving messages and collaborating on libraries. You can create a group by clicking "New Group" button.{% endblocktrans %}</p>
{% else %}
<p>{% trans "Group is a place for you and your friends leaving messages and collaborating on libraries. Groups you join will be listed here." %}</p>
{% endif %}
<h2 class="alc">{% trans "You don't have any starred files yet" %}</h2>
<p>{% blocktrans %}You can star important files by clicking the "Star" button on file viewing page, and they will be listed here.{% endblocktrans %}</p>
</div>
<span class="loading-icon loading-tip"></span>
<p class="error error-tip hide"></p>
</script>
{% if user.permissions.can_add_group %}
<form id="group-add-form" action="" method="post" class="hide">{% csrf_token %}
<h3>{% trans "New Group" %}</h3>
<label>{% trans "Group Name" %}</label><br />
<input name="group_name" value="" class="input" /><br />
<p class="error hide"></p>
<input type="submit" class="submit" value="{% trans "Submit" %}" />
</form>
{% endif %}
<script type="text/template" id="activities-tmpl">
<div id="activities-body" class="hide"></div>
<span class="loading-icon loading-tip"></span>
<button id="activities-more" class="hide">{% trans 'More' %}</button>
</script>
<script type="text/template" id="devices-tmpl">
<h3 class="hd">{% trans "Devices" %}</h3>
<table class="hide">
<thead>
<tr>
<th width="13%">{% trans "Platform" %}</th>
<th width="25%">{% trans "Device Name" %}</th>
<th width="20%">{% trans "IP" %}</th>
<th width="17%">{% trans "Last Access" %}</th>
<th width="15%">{% trans "# Libraries" %}</th>
<th width="10%"></th>
</tr>
</thead>
<tbody></tbody>
</table>
<span class="loading-icon loading-tip"></span>
<div class="empty-tips hide">
<h2 class="alc">{% trans "You do not have connected devices" %}</h2>
<p>{% trans "Your clients (Desktop/Android/iOS) will be listed here." %}</p>
</div>
</script>
{% include "js/dir-view.html" %}
{% endblock %}
{% block extra_script %}
{% include "js/lib-op-popups.html" %}
<script type="text/javascript">
app["pageOptions"] = {

112
static/scripts/app/router.js
View File

@@ -4,13 +4,18 @@ define([
'backbone',
'common',
'app/views/side-nav',
'app/views/myhome',
'app/views/myhome-repos',
'app/views/myhome-shared-repos',
'app/views/groups',
'app/views/group',
'app/views/organization',
'app/views/dir'
], function($, Backbone, Common, SideNavView, MyHomeView, GroupsView, GroupView,
OrgView, DirView) {
'app/views/dir',
'app/views/starred-file',
'app/views/devices',
'app/views/activities'
], function($, Backbone, Common, SideNavView, MyReposView,
SharedReposView, GroupsView, GroupView,
OrgView, DirView, StarredFileView, DevicesView, ActivitiesView) {
"use strict";
var Router = Backbone.Router.extend({
@@ -36,6 +41,8 @@ define([
},
initialize: function() {
$('#initial-loading-view').hide();
Common.prepareApiCsrf();
Common.initLocale();
Common.initAccountPopup();
@@ -46,15 +53,16 @@ define([
this.dirView = new DirView();
this.myHomeView = new MyHomeView({dirView: this.dirView});
this.groupView = new GroupView({
dirView: this.dirView
});
this.orgView = new OrgView({dirView: this.dirView});
this.myReposView = new MyReposView();
this.sharedReposView = new SharedReposView();
this.orgView = new OrgView();
this.groupView = new GroupView();
this.groupsView = new GroupsView();
this.starredFileView = new StarredFileView();
this.devicesView = new DevicesView();
this.activitiesView = new ActivitiesView();
this.currentView = this.myHomeView;
this.currentView = this.myReposView;
$('#info-bar .close').click(Common.closeTopNoticeBar);
$('#top-browser-tip .close').click(function () {
@@ -70,53 +78,33 @@ define([
},
showRepos: function() {
this.switchCurrentView(this.myHomeView);
if (app.pageOptions.can_add_repo) {
this.myHomeView.showMyRepos();
this.showMyRepos();
} else {
this.myHomeView.showSharedRepos();
this.sideNavView.setCurTab('shared');
this.showSharedRepos();
}
},
showMyRepos: function() {
this.switchCurrentView(this.myHomeView);
this.myHomeView.showMyRepos();
this.switchCurrentView(this.myReposView);
this.myReposView.show();
this.sideNavView.setCurTab('mine');
},
showSharedRepos: function() {
this.switchCurrentView(this.myHomeView);
this.myHomeView.showSharedRepos();
this.switchCurrentView(this.sharedReposView);
this.sharedReposView.show();
this.sideNavView.setCurTab('shared');
},
showStarredFile: function() {
this.switchCurrentView(this.myHomeView);
this.myHomeView.showStarredFile();
this.sideNavView.setCurTab('starred');
},
showDevices: function() {
this.switchCurrentView(this.myHomeView);
this.myHomeView.showDevices();
this.sideNavView.setCurTab('devices');
},
showActivities: function() {
this.switchCurrentView(this.myHomeView);
this.myHomeView.showActivities();
this.sideNavView.setCurTab('activities');
},
showMyRepoDir: function(repo_id, path) {
if (path) {
path = '/' + path;
} else {
path = '/';
}
this.switchCurrentView(this.myHomeView);
this.myHomeView.showDir('my-libs', repo_id, path);
this.switchCurrentView(this.dirView);
this.dirView.showDir('my-libs', repo_id, path);
this.sideNavView.setCurTab('mine');
},
@@ -126,8 +114,8 @@ define([
} else {
path = '/';
}
this.switchCurrentView(this.myHomeView);
this.myHomeView.showDir('common', repo_id, path);
this.switchCurrentView(this.dirView);
this.dirView.showDir('common', repo_id, path);
this.sideNavView.setCurTab('mine');
},
@@ -137,8 +125,8 @@ define([
} else {
path = '/';
}
this.switchCurrentView(this.myHomeView);
this.myHomeView.showDir('shared-libs', repo_id, path);
this.switchCurrentView(this.dirView);
this.dirView.showDir('shared-libs', repo_id, path);
this.sideNavView.setCurTab('shared');
},
@@ -153,7 +141,7 @@ define([
showGroup: function(group_id, options) {
this.switchCurrentView(this.groupView);
this.groupView.showRepoList(group_id, options);
this.groupView.show(group_id, options);
this.sideNavView.setCurTab('group', {
'cur_group_tab': '',
'cur_group_id': group_id
@@ -166,12 +154,20 @@ define([
} else {
path = '/';
}
this.switchCurrentView(this.groupView);
this.groupView.showDir(group_id, repo_id, path);
var group_name = Common.groupId2Name(group_id);
if (group_name) {
this.switchCurrentView(this.dirView);
this.dirView.showDir('group/' + group_id, repo_id, path,
{'group_name': group_name});
this.sideNavView.setCurTab('group', {
'cur_group_tab': '',
'cur_group_id': group_id
});
} else {
// the group does not exist
Common.feedback('Group {group_id} not found'.replace('{group_id}', group_id), 'error');
app.router.navigate('', {trigger: true});
}
},
showGroupMembers: function(group_id) {
@@ -185,7 +181,7 @@ define([
showOrgRepos: function() {
this.switchCurrentView(this.orgView);
this.orgView.showRepoList();
this.orgView.show();
this.sideNavView.setCurTab('org');
},
@@ -195,9 +191,27 @@ define([
} else {
path = '/';
}
this.switchCurrentView(this.orgView);
this.orgView.showDir(repo_id, path);
this.switchCurrentView(this.dirView);
this.dirView.showDir('org', repo_id, path);
this.sideNavView.setCurTab('org');
},
showStarredFile: function() {
this.switchCurrentView(this.starredFileView);
this.starredFileView.show();
this.sideNavView.setCurTab('starred');
},
showDevices: function() {
this.switchCurrentView(this.devicesView);
this.devicesView.show();
this.sideNavView.setCurTab('devices');
},
showActivities: function() {
this.switchCurrentView(this.activitiesView);
this.activitiesView.show();
this.sideNavView.setCurTab('activities');
}
});

39
static/scripts/app/views/activities.js
View File

@@ -10,19 +10,17 @@ define([
var ActivitiesView = Backbone.View.extend({
el: $('#activities'),
id: 'activities',
template: _.template($('#activities-tmpl').html()),
activityGroupHdTemplate: _.template($('#activity-group-hd-tmpl').html()),
activityGroupBdTemplate: _.template($('#activity-group-bd-tmpl').html()),
initialize: function () {
this.activities = new ActivityCollection();
this.$activitiesBody = this.$('#activities-body');
this.$activitiesMore = this.$('#activities-more');
this.$loadingTip = this.$('.loading-tip');
this.moreOffset = 0;
this.render();
},
events: {
@@ -37,12 +35,12 @@ define([
remove: false,
data: {'start': _this.moreOffset},
success: function() {
_this.render();
_this.renderActivities();
}
});
},
render: function () {
renderActivities: function () {
var activitiesJson = this.activities.toJSON(),
len = activitiesJson.length,
more = activitiesJson[len-1]['more'],
@@ -79,12 +77,7 @@ define([
},
hide: function () {
this.$el.hide();
},
show: function () {
this.$el.show();
showActivities: function() {
this.$activitiesBody.hide();
this.$activitiesMore.hide();
this.$loadingTip.show();
@@ -94,9 +87,25 @@ define([
this.activities.fetch({
data: {'start': 0},
success: function() {
_this.render();
_this.renderActivities();
}
});
},
render: function() {
this.$el.html(this.template());
this.$activitiesBody = this.$('#activities-body');
this.$activitiesMore = this.$('#activities-more');
this.$loadingTip = this.$('.loading-tip');
},
show: function() {
$("#right-panel").html(this.$el);
this.showActivities();
},
hide: function () {
this.$el.detach();
}
});

29
static/scripts/app/views/devices.js
View File

@@ -10,17 +10,14 @@ define([
var DevicesView = Backbone.View.extend({
el: $('#devices'),
id: 'devices',
template: _.template($('#devices-tmpl').html()),
initialize: function() {
this.$table = this.$('table');
this.$tableBody = this.$('tbody');
this.$loadingTip = this.$('.loading-tip');
this.$emptyTip = this.$('.empty-tips');
this.devices = new DevicesCollection();
this.listenTo(this.devices, 'reset', this.reset);
this.render();
},
addOne: function(device) {
@@ -41,15 +38,23 @@ define([
}
},
hide: function() {
this.$el.hide();
render: function() {
this.$el.html(this.template());
$("#right-panel").html(this.$el);
this.$table = this.$('table');
this.$tableBody = this.$('tbody');
this.$loadingTip = this.$('.loading-tip');
this.$emptyTip = this.$('.empty-tips');
},
show: function() {
this.$el.show();
this.$table.hide();
this.$loadingTip.show();
$("#right-panel").html(this.$el);
this.devices.fetch({reset: true});
},
hide: function() {
this.$el.detach();
}
});

117
static/scripts/app/views/dir.js
View File

@@ -14,11 +14,14 @@ define([
'app/views/fileupload',
'app/views/share'
], function($, progressbar, magnificPopup, simplemodal, _, Backbone, Common,
FileTree, Cookies, DirentCollection, DirentView, DirentGridView, FileUploadView, ShareView) {
FileTree, Cookies, DirentCollection, DirentView, DirentGridView,
FileUploadView, ShareView) {
'use strict';
var DirView = Backbone.View.extend({
el: $('#dir-view'),
id: 'dir-view',
template: _.template($('#dir-view-tmpl').html()),
path_bar_template: _.template($('#dir-path-bar-tmpl').html()),
dir_op_bar_template: _.template($('#dir-op-bar-tmpl').html()),
@@ -31,14 +34,6 @@ define([
mvProgressTemplate: _.template($("#mv-progress-popup-template").html()),
initialize: function(options) {
this.$dirent_list = this.$('.repo-file-list');
this.$dirent_grid = this.$('.grid-view');
this.$dirent_list_body = this.$('.repo-file-list tbody');
this.$path_bar = this.$('.path');
// For compatible with css, we use .repo-op instead of .dir-op
this.$dir_op_bar = this.$('.repo-op');
var view_mode = Cookies.get('view_mode');
if (view_mode == 'grid') {
this.view_mode = 'grid';
@@ -65,45 +60,8 @@ define([
this.fileUploadView = new FileUploadView({dirView: this});
// magnificPopup for image files
var magnificPopupOptions = {
type: 'image',
tClose: gettext("Close (Esc)"), // Alt text on close button
tLoading: gettext("Loading..."), // Text that is displayed during loading. Can contain %curr% and %total% keys
gallery: {
enabled: true,
tPrev: gettext("Previous (Left arrow key)"), // Alt text on left arrow
tNext: gettext("Next (Right arrow key)"), // Alt text on right arrow
tCounter: gettext("%curr% of %total%") // Markup for "1 of 7" counter
},
image: {
tError: gettext('<a href="%url%" target="_blank">The image</a> could not be loaded.') // Error message when image could not be loaded
}
};
// magnificPopup: for 'list view'
this.$dirent_list.magnificPopup($.extend({}, magnificPopupOptions, {
delegate: '.img-name-link',
image: {
titleSrc: function(item) {
var el = item.el;
var img_name = el[0].innerHTML;
var img_link = '<a href="' + el.attr('href') + '" target="_blank">' + gettext("Open in New Tab") + '</a>';
return img_name + '<br />' + img_link;
}
}
}));
// magnificPopup: for 'grid view'
this.$dirent_grid.magnificPopup($.extend({}, magnificPopupOptions, {
delegate: '.image-grid-item',
image: {
titleSrc: function(item) {
var $el = $(item.el);
var img_name = Common.HTMLescape($el.attr('data-name'));
var img_link = '<a href="' + $el.attr('data-url') + '" target="_blank">' + gettext("Open in New Tab") + '</a>';
return img_name + '<br />' + img_link;
}
}
}));
this.render();
// scroll window: get 'more', fix 'op bar'
var _this = this;
@@ -167,6 +125,59 @@ define([
},
render: function() {
this.$el.html(this.template());
this.attached = false;
this.$dirent_list = this.$('.repo-file-list');
this.$dirent_grid = this.$('.grid-view');
this.$dirent_list_body = this.$('.repo-file-list tbody');
this.$path_bar = this.$('.path');
// For compatible with css, we use .repo-op instead of .dir-op
this.$dir_op_bar = this.$('.repo-op');
// magnificPopup for image files
var magnificPopupOptions = {
type: 'image',
tClose: gettext("Close (Esc)"), // Alt text on close button
tLoading: gettext("Loading..."), // Text that is displayed during loading. Can contain %curr% and %total% keys
gallery: {
enabled: true,
tPrev: gettext("Previous (Left arrow key)"), // Alt text on left arrow
tNext: gettext("Next (Right arrow key)"), // Alt text on right arrow
tCounter: gettext("%curr% of %total%") // Markup for "1 of 7" counter
},
image: {
tError: gettext('<a href="%url%" target="_blank">The image</a> could not be loaded.') // Error message when image could not be loaded
}
};
// magnificPopup: for 'list view'
this.$dirent_list.magnificPopup($.extend({}, magnificPopupOptions, {
delegate: '.img-name-link',
image: {
titleSrc: function(item) {
var el = item.el;
var img_name = el[0].innerHTML;
var img_link = '<a href="' + el.attr('href') + '" target="_blank">' + gettext("Open in New Tab") + '</a>';
return img_name + '<br />' + img_link;
}
}
}));
// magnificPopup: for 'grid view'
this.$dirent_grid.magnificPopup($.extend({}, magnificPopupOptions, {
delegate: '.image-grid-item',
image: {
titleSrc: function(item) {
var $el = $(item.el);
var img_name = Common.HTMLescape($el.attr('data-name'));
var img_link = '<a href="' + $el.attr('data-url') + '" target="_blank">' + gettext("Open in New Tab") + '</a>';
return img_name + '<br />' + img_link;
}
}
}));
},
// public function
// show a folder
// 'category' is sth. like url prefix
@@ -177,7 +188,10 @@ define([
}));
this.contextOptions = options;
this.$el.show();
if (!this.attached) {
this.attached = true;
$("#right-panel").html(this.$el);
}
this.dir.setPath(category, repo_id, path);
this.renderDir();
},
@@ -189,7 +203,8 @@ define([
search_repo_id: ''
}));
this.$el.hide();
this.$el.detach();
this.attached = false;
},
/***** private functions *****/

3
static/scripts/app/views/group-members.js
View File

@@ -22,6 +22,9 @@ define([
var _this = this;
$(window).resize(function() {
if (!$('#group-members:visible').length) {
return;
}
_this.setConMaxHeight();
});
$(document).click(function(e) {

3
static/scripts/app/views/group-settings.js
View File

@@ -25,6 +25,9 @@ define([
var _this = this;
$(window).resize(function() {
if (!$('#group-settings:visible').length) {
return;
}
_this.setConMaxHeight();
});
$(document).click(function(e) {

53
static/scripts/app/views/group.js
View File

@@ -14,8 +14,9 @@ define([
'use strict';
var GroupView = Backbone.View.extend({
el: '#group',
id: 'group',
template: _.template($('#group-tmpl').html()),
groupTopTemplate: _.template($('#group-top-tmpl').html()),
reposHdTemplate: _.template($('#shared-repos-hd-tmpl').html()),
@@ -30,21 +31,12 @@ define([
},
initialize: function(options) {
this.$tabs = this.$el;
this.$table = this.$('table');
this.$tableHead = this.$('thead');
this.$tableBody = this.$('tbody');
this.$loadingTip = this.$('#group-repos .loading-tip');
this.$emptyTip = this.$('#group-repos .empty-tips');
this.group = {}; // will be fetched when rendering the top bar
this.repos = new GroupRepos();
this.listenTo(this.repos, 'add', this.addOne);
this.listenTo(this.repos, 'reset', this.reset);
this.dirView = options.dirView;
this.membersView = new GroupMembersView();
this.settingsView = new GroupSettingsView({
groupView: this
@@ -52,6 +44,7 @@ define([
this.discussionsView = new GroupDiscussionsView({
groupView: this
});
this.render();
},
addOne: function(repo, collection, options) {
@@ -119,7 +112,6 @@ define([
showRepoList: function(group_id, options) {
this.group_id = group_id;
this.dirView.hide();
this.$emptyTip.hide();
this.renderGroupTop(options);
this.$tabs.show();
@@ -152,22 +144,29 @@ define([
});
},
hideRepoList: function() {
this.$tabs.hide();
render: function() {
this.$el.html(this.template());
this.$table = this.$('table');
this.$tableHead = this.$('thead');
this.$tableBody = this.$('tbody');
this.$loadingTip = this.$('#group-repos .loading-tip');
this.$emptyTip = this.$('#group-repos .empty-tips');
this.attached = false;
},
showDir: function(group_id, repo_id, path) {
this.group_id = group_id;
this.hideRepoList();
var group_name = Common.groupId2Name(group_id);
if (group_name) {
this.dirView.showDir('group/' + this.group_id, repo_id, path, {'group_name': group_name});
} else {
// the group does not exist
Common.feedback('Group {group_id} not found'.replace('{group_id}', group_id), 'error');
app.router.navigate('my-libs/', {trigger: true});
show: function(group_id, options) {
if (!this.attached) {
// if the user swith bettern different groups,
// the group view is already attached.
$("#right-panel").html(this.$el);
this.attached = true;
}
this.showRepoList(group_id, options);
},
hide: function() {
this.attached = false;
this.$el.detach();
},
createRepo: function() {
@@ -211,12 +210,6 @@ define([
repos.comparator = null;
},
hide: function() {
this.hideRepoList();
this.dirView.hide();
this.$emptyTip.hide();
},
showSettings: function() {
this.settingsView.show({
'group': this.group

23
static/scripts/app/views/groups.js
View File

@@ -9,17 +9,16 @@ define([
'use strict';
var GroupsView = Backbone.View.extend({
el: '#groups',
id: 'groups',
template: _.template($('#groups-tmpl').html()),
initialize: function(options) {
this.groups = new Groups();
this.listenTo(this.groups, 'add', this.addOne);
this.listenTo(this.groups, 'reset', this.reset);
this.$loadingTip = this.$('.loading-tip');
this.$groupList = $('#group-list');
this.$emptyTip = this.$('.empty-tips');
this.$error = this.$('.error');
this.render();
},
events: {
@@ -52,6 +51,14 @@ define([
},
render: function() {
this.$el.html(this.template());
this.$loadingTip = this.$('.loading-tip');
this.$groupList = this.$('#group-list');
this.$emptyTip = this.$('.empty-tips');
this.$error = this.$('.error');
},
showGroups: function() {
this.$groupList.hide();
this.$emptyTip.hide();
this.$loadingTip.show();
@@ -81,12 +88,12 @@ define([
},
show: function() {
this.$el.show();
this.render();
$("#right-panel").html(this.$el);
this.showGroups();
},
hide: function() {
this.$el.hide();
this.$el.detach();
},
addGroup: function () {

32
static/scripts/app/views/myhome-repos.js
View File

@@ -10,8 +10,9 @@ define([
'use strict';
var ReposView = Backbone.View.extend({
el: $('#my-own-repos'),
id: "my-own-repos",
template: _.template($('#my-own-repos-tmpl').html()),
reposHdTemplate: _.template($('#my-repos-hd-tmpl').html()),
events: {
@@ -21,17 +22,12 @@ define([
},
initialize: function(options) {
this.$table = this.$('table');
this.$tableHead = $('thead', this.$table);
this.$tableBody = $('tbody', this.$table);
this.$loadingTip = this.$('.loading-tip');
this.$emptyTip = this.$('.empty-tips');
this.$repoCreateBtn = this.$('.repo-create');
this.repos = new RepoCollection();
this.listenTo(this.repos, 'add', this.addOne);
this.listenTo(this.repos, 'reset', this.reset);
this.render();
// hide 'hidden-op' popup
$(document).click(function(e) {
var target = e.target || event.srcElement;
@@ -92,10 +88,8 @@ define([
},
showMyRepos: function() {
this.$el.show();
this.$table.hide();
var $loadingTip = this.$loadingTip;
$loadingTip.show();
this.$loadingTip.show();
var _this = this;
this.repos.fetch({
cache: false, // for IE
@@ -103,7 +97,7 @@ define([
success: function (collection, response, opts) {
},
error: function (collection, response, opts) {
$loadingTip.hide();
_this.$loadingTip.hide();
var $error = _this.$('.error');
var err_msg;
if (response.responseText) {
@@ -120,12 +114,24 @@ define([
});
},
render: function() {
this.$el.html(this.template());
this.$table = this.$('table');
this.$tableHead = $('thead', this.$table);
this.$tableBody = $('tbody', this.$table);
this.$loadingTip = this.$('.loading-tip');
this.$emptyTip = this.$('.empty-tips');
this.$repoCreateBtn = this.$('.repo-create');
return this;
},
show: function() {
$("#right-panel").html(this.$el);
this.showMyRepos();
},
hide: function() {
this.$el.hide();
this.$el.detach();
},
createRepo: function() {

23
static/scripts/app/views/myhome-shared-repos.js
View File

@@ -9,20 +9,16 @@ define([
'use strict';
var SharedReposView = Backbone.View.extend({
el: $('#repos-shared-to-me'),
id: 'repos-shared-to-me',
template: _.template($('#repos-shared-to-me-tmpl').html()),
reposHdTemplate: _.template($('#shared-repos-hd-tmpl').html()),
initialize: function(options) {
this.$table = this.$('table');
this.$tableHead = $('thead', this.$table);
this.$tableBody = $('tbody', this.$table);
this.$loadingTip = this.$('.loading-tip');
this.$emptyTip = this.$('.empty-tips');
this.repos = new RepoCollection({type: 'shared'});
this.listenTo(this.repos, 'add', this.addOne);
this.listenTo(this.repos, 'reset', this.reset);
this.render();
},
addOne: function(repo, collection, options) {
@@ -81,12 +77,23 @@ define([
});
},
render: function() {
this.$el.html(this.template());
this.$table = this.$('table');
this.$tableHead = this.$('thead');
this.$tableBody = this.$('tbody');
this.$loadingTip = this.$('.loading-tip');
this.$emptyTip = this.$('.empty-tips');
return this;
},
show: function() {
$("#right-panel").html(this.$el);
this.showSharedRepos();
},
hide: function() {
this.$el.hide();
this.$el.detach();
},
events: {

76
static/scripts/app/views/myhome.js
View File

@@ -1,76 +0,0 @@
define([
'jquery',
'underscore',
'backbone',
'common',
'app/views/myhome-repos',
'app/views/myhome-shared-repos',
'app/views/starred-file',
'app/views/devices',
'app/views/activities'
], function($, _, Backbone, Common, ReposView,
SharedReposView, StarredFileView, DevicesView, ActivitiesView) {
'use strict';
var MyHomeView = Backbone.View.extend({
el: '#main',
initialize: function(options) {
this.reposView = new ReposView();
this.sharedReposView = new SharedReposView();
this.starredFileView = new StarredFileView();
this.devicesView = new DevicesView();
this.activitiesView = new ActivitiesView();
this.dirView = options.dirView;
this.currentView = this.reposView;
$('#initial-loading-view').hide();
},
showMyRepos: function() {
this.currentView.hide();
this.reposView.show();
this.currentView = this.reposView;
},
showSharedRepos: function() {
this.currentView.hide();
this.sharedReposView.show();
this.currentView = this.sharedReposView;
},
showStarredFile: function() {
this.currentView.hide();
this.starredFileView.show();
this.currentView = this.starredFileView;
},
showDevices: function() {
this.currentView.hide();
this.devicesView.show();
this.currentView = this.devicesView;
},
showActivities: function() {
this.currentView.hide();
this.activitiesView.show();
this.currentView = this.activitiesView;
},
showDir: function(category, repo_id, path) {
var path = path || '/';
this.currentView.hide();
this.dirView.showDir(category, repo_id, path);
this.currentView = this.dirView;
},
hide: function() {
this.currentView.hide();
}
});
return MyHomeView;
});

44
static/scripts/app/views/organization.js
View File

@@ -13,29 +13,41 @@ define([
'use strict';
var OrganizationView = Backbone.View.extend({
el: '#organization-repos',
id: 'organization-repos-tmpl',
template: _.template($('#organization-repos-tmpl').html()),
reposHdTemplate: _.template($('#shared-repos-hd-tmpl').html()),
initialize: function(options) {
this.repos = new PubRepoCollection();
this.listenTo(this.repos, 'add', this.addOne);
this.listenTo(this.repos, 'reset', this.reset);
this.render();
},
render: function() {
this.$el.html(this.template());
this.$table = this.$('table');
this.$tableHead = $('thead', this.$table);
this.$tableBody = $('tbody', this.$table);
this.$loadingTip = this.$('.loading-tip');
this.$emptyTip = this.$('.empty-tips');
this.repos = new PubRepoCollection();
this.listenTo(this.repos, 'add', this.addOne);
this.listenTo(this.repos, 'reset', this.reset);
this.dirView = options.dirView;
this.dropdown = new DropdownView({
el: this.$('.js-add-pub-lib-dropdown'),
right: '0px'
});
},
show: function() {
$("#right-panel").html(this.$el);
this.showRepoList();
},
hide: function() {
this.$el.detach();
},
events: {
'click .share-existing': 'addRepo',
'click .create-new': 'createRepo',
@@ -84,8 +96,6 @@ define([
},
showRepoList: function() {
this.dirView.hide();
this.$el.show();
var $loadingTip = this.$loadingTip;
$loadingTip.show();
var _this = this;
@@ -112,16 +122,6 @@ define([
});
},
hideRepoList: function() {
this.$el.hide();
},
showDir: function(repo_id, path) {
var path = path || '/';
this.hideRepoList();
this.dirView.showDir('org', repo_id, path);
},
sortByName: function() {
$('.by-time .sort-icon', this.$table).hide();
var repos = this.repos;
@@ -157,12 +157,6 @@ define([
repos.each(this.addOne, this);
el.toggleClass('icon-caret-up icon-caret-down').show();
repos.comparator = null;
},
hide: function() {
this.hideRepoList();
this.$emptyTip.hide();
this.dirView.hide();
}
});

72
static/scripts/app/views/starred-file.js
View File

@@ -11,18 +11,49 @@ define([
'use strict';
var StarredFileView = Backbone.View.extend({
id: 'starred-file',
el: $('#starred-file'),
template: _.template($('#starred-file-tmpl').html()),
initialize: function() {
this.starredFiles = new StarredFilesCollection();
this.listenTo(this.starredFiles, 'reset', this.reset);
this.render();
},
addOne: function(starredFile) {
var view = new StarredFileItem({model: starredFile});
this.$tableBody.append(view.render().el);
},
reset: function() {
this.$tableBody.empty();
this.$loadingTip.hide();
this.starredFiles.each(this.addOne, this);
if (this.starredFiles.length) {
this.$emptyTip.hide();
this.$table.show();
} else {
this.$emptyTip.show();
this.$table.hide();
}
},
showStarredFiles: function() {
this.$table.hide();
this.$loadingTip.show();
this.starredFiles.fetch({reset: true});
},
render: function() {
this.$el.html(this.template());
$("#right-panel").html(this.$el);
this.$table = this.$('table');
this.$tableBody = this.$('tbody');
this.$loadingTip = this.$('.loading-tip');
this.$emptyTip = this.$('.empty-tips');
this.starredFiles = new StarredFilesCollection();
this.listenTo(this.starredFiles, 'reset', this.reset);
this.$el.magnificPopup({
type: 'image',
delegate: '.img-name-link',
@@ -44,36 +75,15 @@ define([
tError: gettext('<a href="%url%" target="_blank">The image</a> could not be loaded.') // Error message when image could not be loaded
}
});
},
addOne: function(starredFile) {
var view = new StarredFileItem({model: starredFile});
this.$tableBody.append(view.render().el);
},
reset: function() {
this.$tableBody.empty();
this.$loadingTip.hide();
this.starredFiles.each(this.addOne, this);
if (this.starredFiles.length) {
this.$emptyTip.hide();
this.$table.show();
} else {
this.$emptyTip.show();
this.$table.hide();
}
},
hide: function() {
this.$el.hide();
},
show: function() {
this.$el.show();
this.$table.hide();
this.$loadingTip.show();
this.starredFiles.fetch({reset: true});
$("#right-panel").html(this.$el);
this.showStarredFiles();
},
hide: function() {
this.$el.detach();
}
});