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

Merge pull request #1435 from haiwen/mobile

Browse Source 
Mobile
This commit is contained in:
Daniel Pan
2017-01-16 14:31:14 +08:00
committed by GitHub
parent f8433686f1 01fb83c9b2
commit 86e9eb5fbc
30 changed files with 711 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -86,6 +86,38 @@ define([
this.currentView = this.myReposView;
var _this = this;
var originalWindowWidth = $(window).width();
$(window).resize(function() {
var curWidth = $(window).width();
if (_this.currentView.reset) {
if ((originalWindowWidth < 768 && curWidth >= 768 ) ||
(originalWindowWidth >= 768 && curWidth < 768)) {
_this.currentView.reset();
}
}
originalWindowWidth = curWidth;
});
// for popups such as '#share-popup'
$(window).resize(function() {
var $el = $('#share-popup, #repo-share-link-admin-dialog, #repo-folder-perm-popup, #folder-perm-popup');
if ($el.is(':visible')) {
if ($(window).width() < 768) {
$el.css({
'width': $(window).width() - 50,
'height': $(window).height() - 50,
'overflow': 'auto'
});
$.modal.update($(window).height() - 50, $(window).width() - 50);
} else {
$el.removeAttr('style');
$('#simplemodal-container').css({'width':'auto', 'height':'auto'});
}
}
});
$('#info-bar .close').click(Common.closeTopNoticeBar);
$('#top-browser-tip-close').click(function () {
$('#top-browser-tip').addClass('hide');

17
static/scripts/app/views/dialogs/repo-folder-perm-admin.js
View File

@@ -21,6 +21,13 @@ define([
this.render();
this.$('.op-target').css({'max-width':280}); // for long repo name
if ($(window).width() < 768) {
this.$el.css({
'width': $(window).width() - 50,
'height': $(window).height() - 50,
'overflow': 'auto'
});
}
this.$el.modal({
focus: false,
onClose: function() {
@@ -28,10 +35,12 @@ define([
$.modal.close();
}
});
$("#simplemodal-container").css({
'width':'auto',
'height':'auto'
});
if ($(window).width() >= 768) {
$("#simplemodal-container").css({
'width':'auto',
'height':'auto'
});
}
this.$('.js-tabs').tabs();
this.userPerm = new UserFolderPerm({repo_id: this.repo_id});

17
static/scripts/app/views/dialogs/repo-share-link-admin.js
View File

@@ -20,11 +20,18 @@ define([
this.render();
this.$('.op-target').css({'max-width':280}); // for long repo name
this.$el.modal();
$("#simplemodal-container").css({
'width':'auto',
'height':'auto'
});
if ($(window).width() >= 768) {
this.$el.modal({focus: false});
$('#simplemodal-container').css({'width':'auto', 'height':'auto'});
} else {
this.$el.css({
'width': $(window).width() - 50,
'height': $(window).height() - 50,
'overflow': 'auto'
}).modal({focus:false});
}
this.$('.js-tabs').tabs();
var downloadLinks = new DownloadLinks({repo_id: this.repo_id});

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

@@ -27,6 +27,7 @@ define([
path_bar_template: _.template($('#dir-path-bar-tmpl').html()),
dir_op_bar_template: _.template($('#dir-op-bar-tmpl').html()),
dirents_hd_template: _.template($('#dirents-hd-tmpl').html()),
dirents_hd_mobile_template: _.template($('#dirents-hd-mobile-tmpl').html()),
top_search_form_template: _.template($('#top-search-form-tmpl').html()),
newDirTemplate: _.template($("#add-new-dir-form-template").html()),
@@ -75,13 +76,16 @@ define([
this.render();
// scroll window: get 'more', fix 'op bar'
var _this = this;
// scroll window: get 'more', fix 'op bar'
$(window).scroll(function() {
if ($(_this.el).is(':visible')) {
_this.onWindowScroll();
}
});
$(window).resize(function() {
_this.updateDirOpBarUI();
});
// hide 'rename form'
$(document).click(function(e) {
@@ -168,10 +172,30 @@ define([
reset: function() {
this.renderPath();
this.renderDirOpBar();
this.$el_con.show();
this.setFileInput();
this.updateDirOpBarUI(); // should be after `setFileInput()`
// there may be a 'style' added via 'onWindowScroll()' when visiting last dir
this.$('.js-dir-content').removeAttr('style');
if (this.view_mode == 'list') {
this.renderDirentsHd();
}
this.$dirent_grid.empty();
this.$dirent_list_body.empty();
if (this.view_mode == 'list') {
this.$dirent_list.show();
this.$dirent_grid.hide();
} else {
this.$dirent_list.hide();
this.$dirent_grid.show();
}
// sort
Common.updateSortIconByMode({'context': this.$el});
this.sortDirents();
@@ -182,11 +206,20 @@ define([
this.dir.limit = 100;
this.render_dirents_slice(this.dir.last_start, this.dir.limit);
this.setFileInput();
this.getImageThumbnail();
},
updateDirOpBarUI: function() {
var width;
if ($(window).width() > 500) {
width = this.$('.repo-op').width() - parseInt(this.$('.repo-op-misc').css('margin-left')) - 5;
width -= $('#multi-dirents-op').is(':visible') ? $('#multi-dirents-op').width() : $('#cur-dir-ops').width();
this.$('.repo-op-misc').css({'width': width});
} else {
this.$('.repo-op-misc').removeAttr('style');
}
},
updateMagnificPopupOptions: function() {
var imgs = this.dir.where({is_img: true});
var items = [];
@@ -342,18 +375,8 @@ define([
renderDir: function() {
this.$loading_tip.show();
this.$error.hide();
this.$el_con.show();
this.$el_con.hide();
this.$dirent_grid.empty();
this.$dirent_list_body.empty();
if (this.view_mode == 'list') {
this.$dirent_list.show();
this.$dirent_grid.hide();
} else {
this.$dirent_list.hide();
this.$dirent_grid.show();
}
var _this = this;
var thumbnail_size = app.pageOptions.thumbnail_default_size;
@@ -440,7 +463,9 @@ define([
can_generate_share_link: app.pageOptions.can_generate_share_link,
can_generate_upload_link: app.pageOptions.can_generate_upload_link,
enable_upload_folder: app.pageOptions.enable_upload_folder
})));
})))
.removeAttr('style'); // there may be a 'style' added via 'onWindowScroll()' when visiting last dir
if (dir.user_perm == 'rw') {
// add new folder/file
@@ -451,7 +476,8 @@ define([
},
renderDirentsHd: function() {
this.$('thead').html(this.dirents_hd_template());
var tmpl = $(window).width() < 768 ? this.dirents_hd_mobile_template : this.dirents_hd_template;
this.$('thead').html(tmpl());
},
render_dirents_slice: function(start, limit) {
@@ -838,6 +864,8 @@ define([
$dirents_op.hide();
$curDirOps.show();
}
this.updateDirOpBarUI();
},
download: function () {
@@ -1279,7 +1307,7 @@ define([
// fixed 'dir-op-bar'
var op_bar = this.$dir_op_bar,
path_bar = this.$path_bar, // the element before op_bar
repo_file_list = this.$('.repo-file-list'); // the element after op_bar
repo_file_list = this.$('.js-dir-content'); // the element after op_bar
var op_bar_top = path_bar.offset().top + path_bar.outerHeight(true);
var fixed_styles = {
'position': 'fixed',
@@ -1288,6 +1316,9 @@ define([
'background-color': $('#header').css('background-color'),
'z-index': 12 // make 'op_bar' shown on top of the checkboxes
};
if (!op_bar_top) {
return;
}
if ($(window).scrollTop() >= op_bar_top) {
repo_file_list.css({'margin-top':op_bar.outerHeight(true)});
op_bar.outerWidth(this.$el.width()).css(fixed_styles);

18
static/scripts/app/views/dirent.js
View File

@@ -20,7 +20,9 @@ define([
},
fileTemplate: _.template($('#dirent-file-tmpl').html()),
fileMobileTemplate: _.template($('#dirent-file-mobile-tmpl').html()),
dirTemplate: _.template($('#dirent-dir-tmpl').html()),
dirMobileTemplate: _.template($('#dirent-dir-mobile-tmpl').html()),
renameTemplate: _.template($("#rename-form-template").html()),
initialize: function(options) {
@@ -41,9 +43,9 @@ define([
var file_icon_size = Common.isHiDPI() ? 48 : 24;
var template;
if (this.model.get('is_dir')) {
template = this.dirTemplate;
template = $(window).width() < 768 ? this.dirMobileTemplate : this.dirTemplate;
} else {
template = this.fileTemplate;
template = $(window).width() < 768 ? this.fileMobileTemplate : this.fileTemplate;
}
this.$el.html(template({
@@ -66,7 +68,8 @@ define([
}));
this.$('.file-locked-icon').attr('title', gettext("locked by {placeholder}").replace('{placeholder}', this.model.get('lock_owner_name')));
this.dropdown = new DropdownView({
el: this.$('.sf-dropdown')
el: this.$('.sf-dropdown'),
right: '0'
});
// for image files
@@ -78,6 +81,7 @@ define([
events: {
'click .select': 'select',
'click .file-star': 'starFile',
'click .dirent-name': 'visitDirent',
'click .img-name-link': 'viewImageWithPopup',
// mv by 'drag & drop'
@@ -130,6 +134,7 @@ define([
$dirents_op.hide();
$curDirOps.show();
}
dirView.updateDirOpBarUI();
if (checked_num == dirView.$('tr:gt(0)').length) {
$toggle_all_checkbox.prop('checked', true);
} else {
@@ -334,6 +339,13 @@ define([
return false;
},
visitDirent: function() {
if ($(window).width() < 768 &&
!this.model.get('is_img')) { // dir or non image file
location.href = this.$('.dirent-name a').attr('href');
}
},
viewImageWithPopup: function() {
var index = $('.img-name-link', this.dirView.$dirent_list).index(this.$('.img-name-link'));
$.magnificPopup.open(this.dirView.magnificPopupOptions, index);

11
static/scripts/app/views/folder-perm.js
View File

@@ -23,11 +23,20 @@ define([
this.render();
if ($(window).width() < 768) {
this.$el.css({
'width': $(window).width() - 50,
'height': $(window).height() - 50,
'overflow': 'auto'
});
}
this.$el.modal({
appendTo: "#main",
focus: false
});
$('#simplemodal-container').css({'width':'auto', 'height':'auto'});
if ($(window).width() >= 768) {
$('#simplemodal-container').css({'width':'auto', 'height':'auto'});
}
this.$("#folder-perm-tabs").tabs();

6
static/scripts/app/views/group-item.js
View File

@@ -11,6 +11,7 @@ define([
var GroupItemView = Backbone.View.extend({
template: _.template($('#group-item-tmpl').html()),
mobileTemplate: _.template($('#group-item-mobile-tmpl').html()),
events: {
},
@@ -19,7 +20,8 @@ define([
},
render: function() {
this.$el.html(this.template(this.model.attributes));
var tmpl = $(window).width() >= 768 ? this.template : this.mobileTemplate;
this.$el.html(tmpl(this.model.attributes));
var repos = this.model.get('repos');
if (repos.length) {
this.renderRepoList(repos);
@@ -27,7 +29,7 @@ define([
return this;
},
renderRepoList: function (repos) {
renderRepoList: function(repos) {
repos.sort(function(a, b) {
return Common.compareTwoWord(a.name, b.name);
});

4
static/scripts/app/views/group-repo.js
View File

@@ -11,6 +11,7 @@ define([
tagName: 'tr',
template: _.template($('#group-repo-tmpl').html()),
mobileTemplate: _.template($('#group-repo-mobile-tmpl').html()),
events: {
'click .cancel-share': 'unshare'
@@ -34,6 +35,7 @@ define([
var obj = this.model.toJSON();
var icon_size = Common.isHiDPI() ? 96 : 24;
var icon_url = this.model.getIconUrl(icon_size);
var tmpl = $(window).width() >= 768 ? this.template : this.mobileTemplate;
$.extend(obj, {
group_id: this.group_id,
is_staff: this.is_staff,
@@ -45,7 +47,7 @@ define([
icon_url: icon_url,
icon_title: this.model.getIconTitle()
});
this.$el.html(this.template(obj));
this.$el.html(tmpl(obj));
return this;
},

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

@@ -144,7 +144,7 @@ define([
var _this = this;
var $form = $(this.transferTemplate());
$form.modal({focus:false});
$form.modal({focus:false, minWidth:268});
$('#simplemodal-container').css({'width':'auto', 'height':'auto'});
$('[name="email"]', $form).select2($.extend(

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

@@ -19,6 +19,7 @@ define([
template: _.template($('#group-tmpl').html()),
groupTopTemplate: _.template($('#group-top-tmpl').html()),
reposHdTemplate: _.template($('#shared-repos-hd-tmpl').html()),
mobileReposHdTemplate: _.template($('#shared-repos-hd-mobile-tmpl').html()),
events: {
'click #group-settings-icon': 'toggleSettingsPanel',
@@ -56,7 +57,8 @@ define([
},
renderReposHd: function() {
this.$tableHead.html(this.reposHdTemplate());
var tmpl = $(window).width() >= 768 ? this.reposHdTemplate : this.mobileReposHdTemplate;
this.$tableHead.html(tmpl());
},
reset: function() {

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

@@ -14,6 +14,7 @@ define([
template: _.template($('#my-own-repos-tmpl').html()),
reposHdTemplate: _.template($('#my-repos-hd-tmpl').html()),
mobileReposHdTemplate: _.template($('#my-repos-hd-mobile-tmpl').html()),
events: {
'click .repo-create': 'createRepo',
@@ -39,7 +40,8 @@ define([
},
renderReposHd: function() {
this.$tableHead.html(this.reposHdTemplate());
var tmpl = $(window).width() >= 768 ? this.reposHdTemplate : this.mobileReposHdTemplate;
this.$tableHead.html(tmpl());
},
reset: function() {

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

@@ -13,6 +13,7 @@ define([
template: _.template($('#repos-shared-to-me-tmpl').html()),
reposHdTemplate: _.template($('#shared-repos-hd-tmpl').html()),
mobileReposHdTemplate: _.template($('#shared-repos-hd-mobile-tmpl').html()),
initialize: function(options) {
this.repos = new RepoCollection({type: 'shared'});
@@ -31,7 +32,8 @@ define([
},
renderReposHd: function() {
this.$tableHead.html(this.reposHdTemplate());
var tmpl = $(window).width() >= 768 ? this.reposHdTemplate : this.mobileReposHdTemplate;
this.$tableHead.html(tmpl());
},
reset: function() {

4
static/scripts/app/views/organization-repo.js
View File

@@ -11,6 +11,7 @@ define([
tagName: 'tr',
template: _.template($('#organization-repo-tmpl').html()),
mobileTemplate: _.template($('#organization-repo-mobile-tmpl').html()),
initialize: function() {
HLItemView.prototype.initialize.call(this);
@@ -20,11 +21,12 @@ define([
var obj = this.model.toJSON();
var icon_size = Common.isHiDPI() ? 96 : 24;
var icon_url = this.model.getIconUrl(icon_size);
var tmpl = $(window).width() >= 768 ? this.template : this.mobileTemplate;
_.extend(obj, {
'icon_url': icon_url,
'icon_title': this.model.getIconTitle()
});
this.$el.html(this.template(obj));
this.$el.html(tmpl(obj));
return this;
},

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

@@ -17,6 +17,7 @@ define([
template: _.template($('#organization-repos-tmpl').html()),
reposHdTemplate: _.template($('#shared-repos-hd-tmpl').html()),
mobileReposHdTemplate: _.template($('#shared-repos-hd-mobile-tmpl').html()),
initialize: function(options) {
this.repos = new PubRepoCollection();
@@ -77,7 +78,8 @@ define([
},
renderReposHd: function() {
this.$tableHead.html(this.reposHdTemplate());
var tmpl = $(window).width() >= 768 ? this.reposHdTemplate : this.mobileReposHdTemplate;
this.$tableHead.html(tmpl());
},
reset: function() {

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

@@ -19,10 +19,12 @@ define([
tagName: 'tr',
template: _.template($('#repo-tmpl').html()),
mobileTemplate: _.template($('#repo-mobile-tmpl').html()), // for extra small devices (phones, less than 768px)
renameTemplate: _.template($("#repo-rename-form-template").html()),
transferTemplate: _.template($('#repo-transfer-form-tmpl').html()),
events: {
'click td:lt(2)': 'visitRepo',
'click .repo-delete-btn': 'del',
'click .repo-share-btn': 'share',
'click .js-repo-rename': 'rename',
@@ -43,19 +45,32 @@ define([
var obj = this.model.toJSON();
var icon_size = Common.isHiDPI() ? 96 : 24;
var icon_url = this.model.getIconUrl(icon_size);
var tmpl, dropdownOptions = {};
if ($(window).width() >= 768) {
tmpl = this.template;
} else {
tmpl = this.mobileTemplate;
dropdownOptions = {'right': 0};
}
_.extend(obj, {
'icon_url': icon_url,
'icon_title': this.model.getIconTitle(),
'can_generate_share_link': app.pageOptions.can_generate_share_link,
'can_generate_upload_link': app.pageOptions.can_generate_upload_link
});
this.$el.html(this.template(obj));
this.dropdown = new DropdownView({
this.$el.html(tmpl(obj));
this.dropdown = new DropdownView($.extend({
el: this.$('.sf-dropdown')
});
}, dropdownOptions));
return this;
},
visitRepo: function() {
if ($(window).width() < 768) {
location.href = this.$('.repo-name-span a').attr('href');
}
},
del: function() {
var _this = this;
var repo_name = this.model.get('name');
@@ -201,7 +216,7 @@ define([
$('[name="email"]', $form).select2($.extend(
Common.contactInputOptionsForSelect2(), {
width: '300px',
width: '280px',
maximumSelectionSize: 1,
placeholder: gettext("Search user or enter email and press Enter"), // to override 'placeholder' returned by `Common.conta...`
formatSelectionTooBig: gettext("You cannot select any more choices")

12
static/scripts/app/views/share.js
View File

@@ -24,8 +24,16 @@ define([
this.render();
this.$el.modal({focus: false});
$('#simplemodal-container').css({'width':'auto', 'height':'auto'});
if ($(window).width() >= 768) {
this.$el.modal({focus: false});
$('#simplemodal-container').css({'width':'auto', 'height':'auto'});
} else {
this.$el.css({
'width': $(window).width() - 50,
'height': $(window).height() - 50,
'overflow': 'auto'
}).modal({focus:false});
}
this.$("#share-tabs").tabs();

4
static/scripts/app/views/shared-repo.js
View File

@@ -11,6 +11,7 @@ define([
tagName: 'tr',
template: _.template($('#shared-repo-tmpl').html()),
mobileTemplate: _.template($('#shared-repo-mobile-tmpl').html()),
events: {
'click .unshare-btn': 'removeShare'
@@ -48,11 +49,12 @@ define([
var obj = this.model.toJSON();
var icon_size = Common.isHiDPI() ? 96 : 24;
var icon_url = this.model.getIconUrl(icon_size);
var tmpl = $(window).width() >= 768 ? this.template : this.mobileTemplate;
_.extend(obj, {
'icon_url': icon_url,
'icon_title': this.model.getIconTitle()
});
this.$el.html(this.template(obj));
this.$el.html(tmpl(obj));
return this;
}

9
static/scripts/app/views/side-nav.js
View File

@@ -51,7 +51,14 @@ define([
'click #enable-mods': 'enableMods',
'click .js-close-side-nav': 'closeNav',
'click li > a': 'visitLink',
'click .js-about': 'showAbout'
'click .js-about': 'showAbout',
// for touch devices
'touchstart .side-nav-con': 'conTouchStart'
},
conTouchStart: function() {
this.$('.side-nav-con').css({'overflow':'auto'});
},
toggleGroupList: function() {

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

@@ -11,6 +11,7 @@ define([
tagName: 'tr',
template: _.template($('#starred-file-item-tmpl').html()),
mobileTemplate: _.template($('#starred-file-item-mobile-tmpl').html()),
events: {
'click .unstar': 'removeShare'
@@ -26,7 +27,8 @@ define([
data['is_img'] = Common.imageCheck(data['file_name']);
data['encoded_path'] = Common.encodePath(data['path']);
this.$el.html(this.template(data));
var tmpl = $(window).width() >= 768 ? this.template : this.mobileTemplate;
this.$el.html(tmpl(data));
return this;
},

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

@@ -14,6 +14,7 @@ define([
id: 'starred-file',
template: _.template($('#starred-file-tmpl').html()),
theadTemplate: _.template($('#starred-file-thead-tmpl').html()),
initialize: function() {
this.starredFiles = new StarredFilesCollection();
@@ -29,9 +30,10 @@ define([
reset: function() {
this.$tableBody.empty();
this.$loadingTip.hide();
this.starredFiles.each(this.addOne, this);
if (this.starredFiles.length) {
this.$emptyTip.hide();
this.renderThead();
this.starredFiles.each(this.addOne, this);
this.$table.show();
} else {
this.$emptyTip.show();
@@ -77,6 +79,10 @@ define([
});
},
renderThead: function() {
this.$('thead').html(this.theadTemplate());
},
show: function() {
$("#right-panel").html(this.$el);
this.showStarredFiles();

2
static/scripts/app/views/widgets/dropdown.js
View File

@@ -65,7 +65,7 @@ define([
var $toggle = this.$('.sf-dropdown-toggle');
var $menu = this.$('.sf-dropdown-menu');
app.ui.currentDropdown = this;
if (this.options.right) {
if (this.options.right != undefined) {
$menu.css('right', this.options.right);
} else {
$menu.css('left', this.options.left);

5
static/scripts/app/views/widgets/hl-item-view.js
View File

@@ -51,7 +51,10 @@ define([
return;
}
app.ui.currentHighlightedItem = null;
this.$el.removeClass('hl').find(this.hiddenOperationClass).addClass('vh');
this.$el.removeClass('hl');
if ($(window).width() >= 768) {
this.$el.find(this.hiddenOperationClass).addClass('vh');
}
}
});