haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-25 23:02:26 +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

204
media/css/seahub.css
View File

@@ -230,10 +230,13 @@ a.table-sort-op {
font-weight:normal; font-weight:normal;
display:block; display:block;
} }
a.mobile-table-sort-op {
display:inline-block;
margin: 0 7px 0 10px;
}
a.table-sort-op:hover, a.table-sort-op:hover,
a.table-sort-op:focus { a.table-sort-op:focus {
outline:none; outline:none;
font-weight:bold;
text-decoration:none; text-decoration:none;
} }
img { border:none; } img { border:none; }
@@ -465,6 +468,13 @@ table img { vertical-align:middle; }
margin-bottom:5px; margin-bottom:5px;
} }
.textarea { height:70px; } .textarea { height:70px; }
.repo-meta-info,
.dirent-meta-info {
display:inline-block;
margin-right:8px;
color:#666;
font-size:12px;
}
/* loading implemented with css */ /* loading implemented with css */
@-moz-keyframes loading { @-moz-keyframes loading {
0% { 0% {
@@ -558,6 +568,12 @@ a.op-icon:focus {
margin-top:4px; margin-top:4px;
font-size:12px; font-size:12px;
} }
@media (max-width:767px) {
.more-op-icon {
padding:6px;
margin:0;
}
}
.big-more-btn { .big-more-btn {
padding:.5em 0; padding:.5em 0;
color:#777; color:#777;
@@ -758,38 +774,70 @@ textarea:-moz-placeholder {/* for FF */
.ui-tabs .ui-tabs-hide { display:none; } .ui-tabs .ui-tabs-hide { display:none; }
/**** left-right-tabs ****/ /**** left-right-tabs ****/
.left-right-tabs { .nav-con-tabs {
padding:0; padding:0;
overflow:hidden;
} }
.left-right-tabs-nav { @media (max-width:767px) {
margin-right:15px; .nav-con-tabs-nav {
background:#f2f2f2;
padding:2px;
margin-bottom:10px;
}
.nav-con-tabs-nav .tab {
display:inline-block;
margin:3px 5px;
}
.nav-con-tabs-nav a {
display:inline-block;
padding:3px 3px;
color:#747476;
font-size:14px;
outline:none; /* to overwrite webkit ':focus' style */
text-decoration:none;
border-bottom:3px solid transparent;
}
.nav-con-tabs-nav a:hover,
.nav-con-tabs-nav .ui-state-active a,
.nav-con-tabs-nav .ui-state-active a:hover {
color:#eb8205;
border-color:#eb8205;
text-decoration:none;
}
} }
.left-right-tabs-nav a { @media (min-width:768px) {
display:block; .nav-con-tabs-nav {
padding:5px 4px; float:left;
border-radius:3px; margin-right:15px;
color:#747476; }
font-size:14px; .nav-con-tabs-content {
outline:none; /* to overwrite webkit ':focus' style */ float:right;
text-decoration:none; width:550px;
padding:0 1.4em 1em;
min-height:150px;
max-height:250px;
overflow:auto;
}
.nav-con-tabs-nav a {
display:block;
padding:5px 4px;
border-radius:3px;
color:#747476;
font-size:14px;
outline:none; /* to overwrite webkit ':focus' style */
text-decoration:none;
}
.nav-con-tabs-nav a:hover {
text-decoration:none;
background:#feefb8;
}
.nav-con-tabs-nav .ui-state-active a,
.nav-con-tabs-nav .ui-state-active a:hover {
background:#feac74;
color:#fff;
}
} }
.left-right-tabs-nav a:hover { .nav-con-tabs .tabs-panel {
text-decoration:none;
background:#feefb8;
}
.left-right-tabs-nav .ui-state-active a,
.left-right-tabs-nav .ui-state-active a:hover {
background:#feac74;
color:#fff;
}
.left-right-tabs-content {
width:550px;
padding:0 1.4em 1em;
min-height:150px;
max-height:250px;
overflow:auto;
}
.left-right-tabs .tabs-panel {
padding:0; padding:0;
} }
/**** side-tabnav ****/ /**** side-tabnav ****/
@@ -996,6 +1044,11 @@ textarea:-moz-placeholder {/* for FF */
-moz-transition: all 0.3s ease; -moz-transition: all 0.3s ease;
transition: all 0.3s ease; transition: all 0.3s ease;
} }
@media (max-width:400px) {
.right-side-panel {
width:100%;
}
}
.right-side-panel-hd { .right-side-panel-hd {
background:#f8f8f8; background:#f8f8f8;
padding:10px; padding:10px;
@@ -1011,6 +1064,7 @@ textarea:-moz-placeholder {/* for FF */
.right-side-panel-footer { .right-side-panel-footer {
position:absolute; position:absolute;
bottom:0; bottom:0;
width:100%;
} }
/**** messages ****/ /**** messages ****/
.messages { .messages {
@@ -1525,7 +1579,7 @@ button.sf-dropdown-toggle:focus {
border-top: 1px solid #c9c9c9; border-top: 1px solid #c9c9c9;
} }
.msg-input { .msg-input {
width:336px; width:100%;
padding:3px 5px; padding:3px 5px;
height:60px; height:60px;
} }
@@ -1953,7 +2007,7 @@ button.sf-dropdown-toggle:focus {
font-weight: normal; font-weight: normal;
} }
#repo-create-form { #repo-create-form {
padding:0 20px; padding:0 5px;
} }
#repo-create-form .select { #repo-create-form .select {
width:268px; width:268px;
@@ -2126,11 +2180,13 @@ button.sf-dropdown-toggle:focus {
.repo-file-list { .repo-file-list {
margin:0; margin:0;
} }
.repo-file-list .select { @media (min-width:768px) { /* for mv by 'drag & drop' in 'dir view' page */
padding-left:10px; .repo-file-list .select {
} padding-left:10px;
.repo-file-list .hl .select { }
background: transparent url('../img/grippy_large.png') scroll no-repeat 1px 50%; .repo-file-list .hl .select {
background: transparent url('../img/grippy_large.png') scroll no-repeat 1px 50%;
}
} }
.repo-file-list .icon-star-empty { color:#d0d0d0; } .repo-file-list .icon-star-empty { color:#d0d0d0; }
.repo-file-list .icon-star { color:#505050; } .repo-file-list .icon-star { color:#505050; }
@@ -2148,6 +2204,12 @@ button.sf-dropdown-toggle:focus {
.repo-file-list .dirent-name { .repo-file-list .dirent-name {
display:inline-block; display:inline-block;
} }
@media (max-width:767px) {
.repo-file-list .dirent-name,
.repo-file-list .img-name-link {
display:block;
}
}
.repo-file-list .file-locked-icon { .repo-file-list .file-locked-icon {
position:absolute; position:absolute;
right:0; right:0;
@@ -2195,6 +2257,12 @@ button.sf-dropdown-toggle:focus {
width:500px; width:500px;
padding:10px 20px; padding:10px 20px;
} }
@media (max-width:579px) {
.file-choose-form {
padding:0;
width:280px;
}
}
.file-tree-cont, .dir-tree-cont { .file-tree-cont, .dir-tree-cont {
padding:5px; padding:5px;
height:280px; height:280px;
@@ -2209,6 +2277,19 @@ button.sf-dropdown-toggle:focus {
.inline-rename-form .input { .inline-rename-form .input {
font-size:14px; font-size:14px;
} }
@media (max-width:321px) {
.inline-rename-form .input {
width:225px;
}
#dir-view .inline-rename-form .input {
width:200px;
}
}
@media (min-width:375px) and (max-width:400px) {
.inline-rename-form {
width:270px;
}
}
.web-setting-form .cancel, .web-setting-form .cancel,
.inline-rename-form .cancel { .inline-rename-form .cancel {
color:#666; color:#666;
@@ -2433,10 +2514,6 @@ button.sf-dropdown-toggle:focus {
padding:2px; padding:2px;
} }
/* file/dir share popup */ /* file/dir share popup */
#file-share .tip,
#share-popup .tip {
max-width:400px;
}
.ellipsis-op-target { .ellipsis-op-target {
display:inline-block; display:inline-block;
vertical-align:bottom; vertical-align:bottom;
@@ -2444,9 +2521,19 @@ button.sf-dropdown-toggle:focus {
#share-popup .op-target { #share-popup .op-target {
max-width:400px; max-width:400px;
} }
@media (max-width:767px) {
#share-popup .op-target {
max-width:240px;
}
}
#mv-form .op-target { #mv-form .op-target {
max-width:410px; max-width:410px;
} }
@media (max-width:579px) {
#mv-form .op-target {
max-width:280px;
}
}
#folder-perm-popup .op-target { #folder-perm-popup .op-target {
max-width:540px; max-width:540px;
} }
@@ -3170,7 +3257,7 @@ button.sf-dropdown-toggle:focus {
/* multi repo operation */ /* multi repo operation */
.repo-op .op-link { .repo-op .op-link {
display:inline-block; display:inline-block;
height:30px; height:29px;
margin-right:15px; margin-right:15px;
color:#8a8a8a; color:#8a8a8a;
font-size:22px; font-size:22px;
@@ -3180,9 +3267,6 @@ button.sf-dropdown-toggle:focus {
text-decoration:none; text-decoration:none;
} }
/* multi dirents operation */ /* multi dirents operation */
#multi-dirents-op {
margin-left:5px;
}
#multi-dirents-op .op-btn { #multi-dirents-op .op-btn {
margin:0; margin:0;
} }
@@ -3214,7 +3298,7 @@ button.sf-dropdown-toggle:focus {
} }
/* user & group folder perm */ /* user & group folder perm */
#repo-folder-perm .left-right-tabs-content {/* for the case that the scrollbar appears */ #repo-folder-perm .nav-con-tabs-content {/* for the case that the scrollbar appears */
width:630px; width:630px;
padding-right:0; padding-right:0;
} }
@@ -3503,11 +3587,37 @@ img.thumbnail {
font-size:12px; font-size:12px;
color:#888; color:#888;
} }
/****** grid view *****/
/* view mode */ /* view mode */
@media (max-width:499px) {
.repo-op-misc {
display:block;
margin:5px 0 0 0;
}
.switch-mode {
vertical-align:middle;
}
.trash-history {
display:inline-block;
margin-left:30px;
vertical-align:middle;
}
}
@media (min-width:500px) {
.repo-op-misc {
display:inline-block;
margin-left:12px;
overflow:hidden;
vertical-align:middle;
}
.trash-history {
float:right;
}
}
.trash-history {
height:29px;
}
.switch-mode { .switch-mode {
display:inline-block; display:inline-block;
margin-left:12px;
} }
.grid-view-icon-btn, .grid-view-icon-btn,
.list-view-icon-btn { .list-view-icon-btn {

2
seahub/templates/base.html
View File

@@ -8,7 +8,7 @@
<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="{% trans "File Collaboration Team Organization" %}" /> <meta name="keywords" content="{% trans "File Collaboration Team Organization" %}" />
{% block viewport %} {% block viewport %}
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
{% endblock %} {% endblock %}
<link rel="icon" type="image/x-icon" href="{{ MEDIA_URL }}img/favicon.png?t=1398068110" /> <link rel="icon" type="image/x-icon" href="{{ MEDIA_URL }}img/favicon.png?t=1398068110" />
<!--[if IE]> <!--[if IE]>

2
seahub/templates/base_for_backbone.html
View File

@@ -7,7 +7,7 @@
<title>{{ site_title }}</title> <title>{{ site_title }}</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="{% trans "File Collaboration Team Organization" %}" /> <meta name="keywords" content="{% trans "File Collaboration Team Organization" %}" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta http-equiv="x-ua-compatible" content="ie=edge"> <meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="icon" type="image/x-icon" href="{{ MEDIA_URL }}img/favicon.png?t=1398068110" /> <link rel="icon" type="image/x-icon" href="{{ MEDIA_URL }}img/favicon.png?t=1398068110" />
<!--[if IE]> <!--[if IE]>

6
seahub/templates/js/sysadmin-templates.html
View File

@@ -617,13 +617,13 @@
<script type="text/template" id="share-popup-tmpl"> <script type="text/template" id="share-popup-tmpl">
<h3 class="hd" id="dialogTitle"><%= title %></h3> <h3 class="hd" id="dialogTitle"><%= title %></h3>
<div id="share-tabs" class="left-right-tabs ovhd"> <div id="share-tabs" class="nav-con-tabs">
<ul class="left-right-tabs-nav fleft"> <ul class="nav-con-tabs-nav">
<li class="tab"><a href="#dir-user-share" class="a">{% trans "Share to user" %}</a></li> <li class="tab"><a href="#dir-user-share" class="a">{% trans "Share to user" %}</a></li>
<li class="tab"><a href="#dir-group-share" class="a">{% trans "Share to group" %}</a></li> <li class="tab"><a href="#dir-group-share" class="a">{% trans "Share to group" %}</a></li>
</ul> </ul>
<div class="left-right-tabs-content fright"> <div class="nav-con-tabs-content">
<span class="loading-icon loading-tip"></span> <span class="loading-icon loading-tip"></span>
<div id="dir-user-share" class="tabs-panel"> <div id="dir-user-share" class="tabs-panel">
<table> <table>

358
seahub/templates/js/templates.html
View File

@@ -74,6 +74,47 @@
<td><%= size_formatted %></td> <td><%= size_formatted %></td>
<td><%= mtime_relative %></td> <td><%= mtime_relative %></td>
</script> </script>
<script type="text/template" id="repo-mobile-tmpl">
<td>
<img src="<%= icon_url %>" title="<%= icon_title %>" alt="<%= icon_title %>" width="24" />
</td>
<% if (name) { %>
<td>
<span class="repo-name-span">
<a href="#my-libs/lib/<%= id %>"><%- name %></a><br />
<span class="repo-meta-info"><%= size_formatted %></span>
<span class="repo-meta-info"><%= mtime_relative %></span>
</span>
</td>
<td class="repo-op-td">
<div class="op-container">
<div class="sf-dropdown sf-dropdown-inline">
<a href="#" class="sf2-icon-caret-down more-op-icon op-icon sf-dropdown-toggle" title="{% trans "More operations" %}" aria-label="{% trans "More operations" %}"></a>
<ul class="hidden-op repo-hidden-op hide sf-dropdown-menu">
<li><a href="#" class="repo-share-btn op">{% trans "Share" %}</a></li>
<li><a href="#" class="repo-delete-btn op">{% trans "Delete" %}</a></li>
<li><a class="op js-repo-rename" href="#">{% trans "Rename" %}</a></li>
<li><a class="op js-repo-transfer" href="#">{% trans "Transfer" %}</a></li>
<li><a class="op js-popup-history-setting" href="#">{% trans "History Setting" %}</a></li>
<% if (encrypted && enc_version == 2) { %>
<li><a class="op js-repo-change-password" href="#">{% trans "Change Password" %}</a></li>
<% } %>
<% if (!encrypted && (can_generate_share_link || can_generate_upload_link)) { %>
<li><a class="op js-popup-share-link-admin" href="#">{% trans "Share Links" %}</a></li>
<% } %>
<% if (app.pageOptions.folder_perm_enabled) { %>
<li><a class="op js-popup-folder-perm-admin" href="#">{% trans "Folder Permission" %}</a></li>
<% } %>
</ul>
</div>
</div>
</td>
<% } else { %>
<td>{% trans "Broken (please contact your administrator to fix this library)" %}</td>
<td></td>
<% } %>
</script>
<script type="text/template" id="group-repo-tmpl"> <script type="text/template" id="group-repo-tmpl">
<td> <td>
<img src="<%= icon_url %>" title="<%= icon_title %>" alt="<%= icon_title %>" width="24" /> <img src="<%= icon_url %>" title="<%= icon_title %>" alt="<%= icon_title %>" width="24" />
@@ -90,6 +131,25 @@
<td><span title="<%- owner %>"><%- owner_name %></span></td> <td><span title="<%- owner %>"><%- owner_name %></span></td>
<% } %> <% } %>
</script> </script>
<script type="text/template" id="group-repo-mobile-tmpl">
<td>
<img src="<%= icon_url %>" title="<%= icon_title %>" alt="<%= icon_title %>" width="24" />
</td>
<td>
<a href="#group/<%= group_id %>/lib/<%= id %>"><%- name %></a><br />
<% if (show_shared_by) { %>
<span class="repo-meta-info" title="<%- owner %>"><%- owner_name %></span>
<% } %>
<span class="repo-meta-info"><%= size_formatted %></span>
<span class="repo-meta-info"><%= mtime_relative %></span>
</td>
<td class="alc">
<% if (is_staff || share_from_me) { %>
<a href="#" class="sf2-icon-delete sf2-x cancel-share op-icon" title="{% trans "Unshare" %}" aria-label="{% trans "Unshare" %}"></a>
<% } %>
</td>
</script>
<script type="text/template" id="organization-repo-tmpl"> <script type="text/template" id="organization-repo-tmpl">
<td> <td>
<img src="<%= icon_url %>" title="<%= icon_title %>" alt="<%= icon_title %>" width="24" /> <img src="<%= icon_url %>" title="<%= icon_title %>" alt="<%= icon_title %>" width="24" />
@@ -104,6 +164,23 @@
<td><%= mtime_relative %></td> <td><%= mtime_relative %></td>
<td><span title="<%- owner %>"><%- owner_nickname %></span></td> <td><span title="<%- owner %>"><%- owner_nickname %></span></td>
</script> </script>
<script type="text/template" id="organization-repo-mobile-tmpl">
<td>
<img src="<%= icon_url %>" title="<%= icon_title %>" alt="<%= icon_title %>" width="24" />
</td>
<td>
<a href="#org/lib/<%= id %>"><%- name %></a><br />
<span class="repo-meta-info"><%- size_formatted %></span>
<span class="repo-meta-info"><%= mtime_relative %></span>
<span class="repo-meta-info" title="<%- owner %>"><%- owner_nickname %></span>
</td>
<td class="alc">
<% if (app.pageOptions.is_staff || owner == app.pageOptions.username) { %>
<a href="#" class="sf2-icon-delete sf2-x cancel-share op-icon" title="{% trans "Unshare" %}"></a>
<% } %>
</td>
</script>
<script type="text/template" id="dir-op-bar-tmpl"> <script type="text/template" id="dir-op-bar-tmpl">
<% if (user_perm == 'rw') { %> <% if (user_perm == 'rw') { %>
<div id="multi-dirents-op" class="hide"> <div id="multi-dirents-op" class="hide">
@@ -167,22 +244,24 @@
<% } %> <% } %>
</div><!-- div#cur-dir-ops ends here --> </div><!-- div#cur-dir-ops ends here -->
<div class="switch-mode vam"> <div class="repo-op-misc">
<button class="list-view-icon-btn sf2-icon-list-view <% if (mode == 'list') { %>active<% } %>" title="{% trans "List" %}" id="js-switch-list-view" aria-label="{% trans "list view" %}"></button><button class="grid-view-icon-btn sf2-icon-grid-view <% if (mode == 'grid') { %>active<% } %>" title="{% trans "Grid" %}" id="js-switch-grid-view" aria-label="{% trans "grid view" %}"></button> <div class="switch-mode">
</div> <button class="list-view-icon-btn sf2-icon-list-view <% if (mode == 'list') { %>active<% } %>" title="{% trans "List" %}" id="js-switch-list-view" aria-label="{% trans "list view" %}"></button><button class="grid-view-icon-btn sf2-icon-grid-view <% if (mode == 'grid') { %>active<% } %>" title="{% trans "Grid" %}" id="js-switch-grid-view" aria-label="{% trans "grid view" %}"></button>
</div>
<% if (path == '/') { %> <div class="trash-history">
<div class="fright"> <% if (path == '/') { %>
<% if (user_perm == 'rw') { %> <% if (user_perm == 'rw') { %>
<a class="op-link sf2-icon-trash" href="<%= site_root %>repo/recycle/<%- repo_id %>/?referer=<% print(encodeURIComponent(location.href)); %>" title="{% trans 'Trash' %}" aria-label="{% trans "Trash" %}"></a> <a class="op-link sf2-icon-trash" href="<%= site_root %>repo/recycle/<%- repo_id %>/?referer=<% print(encodeURIComponent(location.href)); %>" title="{% trans 'Trash' %}" aria-label="{% trans "Trash" %}"></a>
<% } %> <% } %>
<a class="op-link sf2-icon-history" href="<%= site_root %>repo/history/<%- repo_id %>/?referer=<% print(encodeURIComponent(location.href)); %>" title="{% trans 'History' %}" aria-label="{% trans "History" %}"></a> <a class="op-link sf2-icon-history" href="<%= site_root %>repo/history/<%- repo_id %>/?referer=<% print(encodeURIComponent(location.href)); %>" title="{% trans 'History' %}" aria-label="{% trans "History" %}"></a>
</div> <% } else { %>
<% } else { %> <% if (user_perm == 'rw') { %>
<% if (user_perm == 'rw') { %> <a class="op-link sf2-icon-trash" href="<%= site_root %>dir/recycle/<%- repo_id %>/?dir_path=<% print(encodeURIComponent(path)); %>&referer=<% print(encodeURIComponent(location.href)); %>" title="{% trans 'Trash' %}"></a>
<a class="op-link sf2-icon-trash fright" href="<%= site_root %>dir/recycle/<%- repo_id %>/?dir_path=<% print(encodeURIComponent(path)); %>&referer=<% print(encodeURIComponent(location.href)); %>" title="{% trans 'Trash' %}"></a> <% } %>
<% } %> <% } %>
<% } %> </div>
</div>
</script> </script>
<script type="text/template" id="dir-path-bar-tmpl"> <script type="text/template" id="dir-path-bar-tmpl">
<% if (context == 'group') { %> <% if (context == 'group') { %>
@@ -222,6 +301,22 @@
<th width="13%" class="dirent-update"><a class="table-sort-op by-time" href="#">{% trans "Last Update" %} <span class="sort-icon icon-caret-down hide" aria-hidden="true"></span></a></th> <th width="13%" class="dirent-update"><a class="table-sort-op by-time" href="#">{% trans "Last Update" %} <span class="sort-icon icon-caret-down hide" aria-hidden="true"></span></a></th>
</tr> </tr>
</script> </script>
<script type="text/template" id="dirents-hd-mobile-tmpl">
<tr>
<th width="4%" class="select">
<input type="checkbox" class="vam" />
</th>
<th width="6%" class="star"></th>
<th width="8%" class="dirent-icon"></th>
<th width="74%">
{% trans "Sort:"%}
<a class="table-sort-op mobile-table-sort-op by-name" href="#"><span class="dirent-name">{% trans "name"%} <span class="sort-icon icon-caret-up"></span></span></a>
<a class="table-sort-op mobile-table-sort-op by-time" href="#">{% trans "last update" %} <span class="sort-icon icon-caret-down hide" aria-hidden="true"></span></a>
</th>
<th width="8%" class="dirent-op"><span class="sr-only">{% trans "Actions" %}</span></th>
</tr>
</script>
<script type="text/template" id="dirent-dir-tmpl"> <script type="text/template" id="dirent-dir-tmpl">
<td class="select"> <td class="select">
@@ -279,6 +374,51 @@
<% } %> <% } %>
</td> </td>
</script> </script>
<script type="text/template" id="dirent-dir-mobile-tmpl">
<td class="select">
<% if (dirent.selected) { %>
<input type="checkbox" class="vam" checked="checked" />
<% } else { %>
<input type="checkbox" class="vam" />
<% } %>
</td>
<td class="star"></td>
<td class="dirent-icon"><img src="<%= icon_url %>" width="24" alt="" /></td>
<td>
<span class="dirent-name">
<a href="<%= url %>" class="dir-link normal"><%- dirent.obj_name %></a>
<br />
<% if (dirent.last_modified) { %>
<span class="dirent-meta-info"><%= dirent.last_update %></span>
<% } %>
</span>
</td>
<td class="dirent-op">
<div class="op-container">
<div class="sf-dropdown sf-dropdown-inline">
<a href="#" class="more-op-icon sf2-icon-caret-down op-icon sf-dropdown-toggle" title="{% trans "More operations" %}" aria-label="{% trans "More Operations" %}"></a>
<ul class="hidden-op dirent-hidden-op hide sf-dropdown-menu">
<li><a class="op download download-dir" href="#">{% trans "Download" %}</a></li>
<% if (!repo_encrypted && (can_generate_share_link || can_generate_upload_link || is_repo_owner)) { %>
<li><a href="#" class="op share">{% trans "Share" %}</a></li>
<% } %>
<% if (dirent.perm == 'rw') { %>
<li><a href="#" class="op delete">{% trans "Delete" %}</a></li>
<li><a class="op rename" href="#">{% trans "Rename" %}</a></li>
<li><a class="op mv" href="#">{% trans "Move" %}</a></li>
<li><a class="op cp" href="#">{% trans "Copy" %}</a></li>
<% if (app.pageOptions.folder_perm_enabled && is_repo_owner && !is_virtual && has_been_shared_out) { %>
<li><a class="op set-folder-permission" href="#">{% trans "Permission" %}</a></li>
<% } %>
<li><a class="op open-via-client" href="seafile://openfile?repo_id=<%- repo_id %>&path=<% print(encodeURIComponent(dirent_path + '/')); %>">{% trans "Open via Client" %}</a></li>
<% } else if (dirent.perm == 'r' && !repo_encrypted) { %>
<li><a class="op cp" href="#">{% trans "Copy" %}</a></li>
<% } %>
</ul>
</div>
</div>
</td>
</script>
<script type="text/template" id="dirent-file-tmpl"> <script type="text/template" id="dirent-file-tmpl">
<td class="select"> <td class="select">
@@ -375,6 +515,94 @@
</td> </td>
</script> </script>
<script type="text/template" id="dirent-file-mobile-tmpl">
<td class="select">
<% if (dirent.selected) { %>
<input type="checkbox" class="vam" checked="checked" />
<% } else { %>
<input type="checkbox" class="vam" />
<% } %>
</td>
<td class="star alc">
<% if (dirent.starred) { %>
<a href="#" title="{% trans "starred" %}" class="icon-star file-star" aria-label="{% trans "starred" %}"></a>
<% } else { %>
<a href="#" title="{% trans "unstarred" %}" class="icon-star-empty file-star" aria-label="{% trans "unstarred" %}"></a>
<% } %>
</td>
<td class="dirent-icon">
<div class="pos-rel">
<% if (dirent.is_img) { %>
<% if (dirent.encoded_thumbnail_src) { %>
<img class="thumbnail" src="{{ SITE_ROOT }}<%- dirent.encoded_thumbnail_src %>" alt="" />
<% } else { %>
<img src="<%= icon_url %>" width="24" alt="" />
<% } %>
<% } else { %>
<img src="<%= icon_url %>" width="24" alt="" />
<% } %>
<% if (is_pro && dirent.is_locked) { %>
<img class="file-locked-icon" width="16" src="{{ MEDIA_URL }}img/file-locked-32.png" alt="{% trans "locked" %}" />
<% } %>
</div>
</td>
<td>
<span class="dirent-name">
<% if (dirent.is_img) { %>
<a class="normal img-name-link" href="<%= url %>" target="_blank"><%- dirent.obj_name %></a>
<% } else { %>
<a class="normal" href="<%= url %>" target="_blank"><%- dirent.obj_name %></a>
<br />
<% } %>
<span class="dirent-meta-info"><%= dirent.file_size %></span>
<span class="dirent-meta-info">
<% if (dirent.last_modified) { %>
<%= dirent.last_update %>
<% } else { %>
<% print("{% trans "Fetch failed" %}"); %>
<% } %>
</span>
</span>
</td>
<td class="dirent-op">
<div class="op-container">
<div class="sf-dropdown sf-dropdown-inline">
<a href="#" class="more-op-icon sf2-icon-caret-down op-icon sf-dropdown-toggle" title="{% trans "More Operations"%}" aria-label="{% trans "More Operations" %}"></a>
<ul class="hidden-op dirent-hidden-op hide sf-dropdown-menu">
<li><a class="op download" href="<%= download_url %>">{% trans "Download" %}</a></li>
<% if (!repo_encrypted && can_generate_share_link) { %>
<li><a class="op share" href="#">{% trans "Share" %}</a></li>
<% } %>
<% if (dirent.perm == 'rw') { %>
<li><a href="#" class="op delete">{% trans "Delete" %}</a></li>
<li><a class="op rename" href="#">{% trans "Rename" %}</a></li>
<li><a class="op mv" href="#">{% trans "Move" %}</a></li>
<li><a class="op cp" href="#">{% trans "Copy" %}</a></li>
<li><a class="op file-history" href="{{ SITE_ROOT }}repo/file_revisions/<%= repo_id %>/?p=<% print(encodeURIComponent(dirent_path)); %>">{% trans "History" %}</a></li>
<% if (is_pro) { %>
<% if (file_audit_enabled) { %>
<li><a class="op" href="{{ SITE_ROOT }}repo/file-access/<%= repo_id %>/?p=<% print(encodeURIComponent(dirent_path)); %>" target="_blank">{% trans "Access Log" %}</a></li>
<% } %>
<% if (dirent.is_locked) { %>
<% if (dirent.locked_by_me) { %>
<li><a class="op unlock-file" href="#">{% trans "Unlock" %}</a></li>
<% } %>
<% } else { %>
<li><a class="op lock-file" href="#">{% trans "Lock" %}</a></li>
<% } %>
<% } %>
<li><a class="op open-via-client" href="seafile://openfile?repo_id=<%- repo_id %>&path=<% print(encodeURIComponent(dirent_path)); %>">{% trans "Open via Client" %}</a></li>
<% } else if (dirent.perm == 'r' && !repo_encrypted) { %>
<li><a class="op cp" href="#">{% trans "Copy" %}</a></li>
<% } %>
</ul>
</div>
</div>
</td>
</script>
<script type="text/template" id="grid-view-file-item-tmpl"> <script type="text/template" id="grid-view-file-item-tmpl">
<a href="<%= url %>" class="img-link" target="_blank"> <a href="<%= url %>" class="img-link" target="_blank">
<% if (dirent.is_img && dirent.encoded_thumbnail_src) { %> <% if (dirent.is_img && dirent.encoded_thumbnail_src) { %>
@@ -450,8 +678,8 @@
<script type="text/template" id="share-popup-tmpl"> <script type="text/template" id="share-popup-tmpl">
<h3 class="hd" id="dialogTitle"><%= title %></h3> <h3 class="hd" id="dialogTitle"><%= title %></h3>
<div id="share-tabs" class="left-right-tabs ovhd"> <div id="share-tabs" class="nav-con-tabs">
<ul class="left-right-tabs-nav fleft"> <ul class="nav-con-tabs-nav">
<% if (!repo_encrypted && can_generate_share_link) { %> <% if (!repo_encrypted && can_generate_share_link) { %>
<li class="tab"><a href="#download-link-share" class="a">{% trans "Download Link" %}</a></li> <li class="tab"><a href="#download-link-share" class="a">{% trans "Download Link" %}</a></li>
<% } %> <% } %>
@@ -466,7 +694,7 @@
<% } %> <% } %>
</ul> </ul>
<div class="left-right-tabs-content fright"> <div class="nav-con-tabs-content">
<span class="loading-icon loading-tip"></span> <span class="loading-icon loading-tip"></span>
<% if (!repo_encrypted && can_generate_share_link) { %> <% if (!repo_encrypted && can_generate_share_link) { %>
<div id="download-link-share" class="tabs-panel"> <div id="download-link-share" class="tabs-panel">
@@ -639,6 +867,21 @@
<td><%= mtime_relative %></td> <td><%= mtime_relative %></td>
<td><span title="<%- owner %>"><%- owner_nickname %></span></td> <td><span title="<%- owner %>"><%- owner_nickname %></span></td>
</script> </script>
<script type="text/template" id="shared-repo-mobile-tmpl">
<td>
<img src="<%= icon_url %>" title="<%= icon_title %>" alt="<%= icon_title %>" width="24" />
</td>
<td>
<a href="#shared-libs/lib/<%= id %>"><%- name %></a><br />
<span class="repo-meta-info" title="<%- owner %>"><%- owner_nickname %></span>
<span class="repo-meta-info"><%= size_formatted %></span>
<span class="repo-meta-info"><%= mtime_relative %></span>
</td>
<td class="alc">
<a href="#" class="sf2-icon-delete sf2-x unshare-btn op-icon" title="{% trans "Leave Share" %}"></a>
</td>
</script>
<script type="text/template" id="side-nav-tmpl"> <script type="text/template" id="side-nav-tmpl">
<div class="side-nav-con"> <div class="side-nav-con">
@@ -837,12 +1080,12 @@
</script> </script>
<script type="text/template" id="folder-perm-popup-tmpl"> <script type="text/template" id="folder-perm-popup-tmpl">
<h3 class="hd" id="dialogTitle"><%= title %></h3> <h3 class="hd" id="dialogTitle"><%= title %></h3>
<div id="folder-perm-tabs" class="left-right-tabs ovhd"> <div id="folder-perm-tabs" class="nav-con-tabs">
<ul class="left-right-tabs-nav fleft"> <ul class="nav-con-tabs-nav">
<li class="tab"><a href="#user-folder-perm" class="a">{% trans "User Permission" %}</a></li> <li class="tab"><a href="#user-folder-perm" class="a">{% trans "User Permission" %}</a></li>
<li class="tab"><a href="#group-folder-perm" class="a">{% trans "Group Permission" %}</a></li> <li class="tab"><a href="#group-folder-perm" class="a">{% trans "Group Permission" %}</a></li>
</ul> </ul>
<div class="left-right-tabs-content fright"> <div class="nav-con-tabs-content">
<div id="user-folder-perm" class="tabs-panel"> <div id="user-folder-perm" class="tabs-panel">
<table> <table>
<thead> <thead>
@@ -898,6 +1141,21 @@
</div> </div>
</div> </div>
</script> </script>
<script type="text/template" id="starred-file-thead-tmpl">
<tr>
<% if ($(window).width() >= 768) { %>
<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>
<% } else { %>
<th width="5%"></th>
<th width="90%">{% trans "File Name" %}</th>
<th width="5%"></th>
<% } %>
</tr>
</script>
<script type="text/template" id="starred-file-item-tmpl"> <script type="text/template" id="starred-file-item-tmpl">
<td class="alc"><img src="{{ MEDIA_URL }}img/file/<%= icon_path %>" alt="{% trans "icon" %}" /></td> <td class="alc"><img src="{{ MEDIA_URL }}img/file/<%= icon_path %>" alt="{% trans "icon" %}" /></td>
<td> <td>
@@ -913,6 +1171,23 @@
<a href="#" class="sf2-icon-delete unstar op-icon vh" title="{% trans "Unstar" %}" aria-label="{% trans "Unstar" %}"></a> <a href="#" class="sf2-icon-delete unstar op-icon vh" title="{% trans "Unstar" %}" aria-label="{% trans "Unstar" %}"></a>
</td> </td>
</script> </script>
<script type="text/template" id="starred-file-item-mobile-tmpl">
<td class="alc"><img src="{{ MEDIA_URL }}img/file/<%= icon_path %>" alt="{% trans "icon" %}" /></td>
<td>
<% if (is_img) { %>
<a class="img-name-link" href="{{ SITE_ROOT }}lib/<%= repo_id %>/file<%- encoded_path %>" target="_blank" data-mfp-src="{{ SITE_ROOT }}repo/<%= repo_id %>/raw<%- encoded_path %>"><%- file_name %></a>
<% } else { %>
<a href="{{ SITE_ROOT }}lib/<%= repo_id %>/file<%- encoded_path %>" target="_blank"><%- file_name %></a>
<% } %>
<br />
<span class="dirent-meta-info"><%- repo_name %></span>
<span class="dirent-meta-info"><%= mtime_relative %></span>
</td>
<td>
<a href="#" class="sf2-icon-delete unstar op-icon" title="{% trans "Unstar" %}" aria-label="{% trans "Unstar" %}"></a>
</td>
</script>
<script type="text/template" id="my-repos-hd-tmpl"> <script type="text/template" id="my-repos-hd-tmpl">
<tr> <tr>
@@ -923,6 +1198,16 @@
<th width="20%"><a class="table-sort-op by-time" href="#">{% trans "Last Update" %} <span class="sort-icon icon-caret-up"></span></a></th> <th width="20%"><a class="table-sort-op by-time" href="#">{% trans "Last Update" %} <span class="sort-icon icon-caret-up"></span></a></th>
</tr> </tr>
</script> </script>
<script type="text/template" id="my-repos-hd-mobile-tmpl">
<tr>
<th width="4%"><span class="sr-only">{% trans "Library Type" %}</span><!--icon--></th>
<th width="92%">
{% trans "Sort:" %}
<a class="table-sort-op mobile-table-sort-op by-name" href="#">{% trans "name" %} <span class="sort-icon icon-caret-down hide"></a>
<a class="table-sort-op mobile-table-sort-op by-time" href="#">{% trans "last update" %} <span class="sort-icon icon-caret-up"></span></a>
<th width="4%"><span class="sr-only">{% trans "Actions" %}</span></th>
</tr>
</script>
<script type="text/template" id="shared-repos-hd-tmpl"> <script type="text/template" id="shared-repos-hd-tmpl">
<tr> <tr>
<th width="4%"><span class="sr-only">{% trans "Library Type" %}</span><!--icon--></th> <th width="4%"><span class="sr-only">{% trans "Library Type" %}</span><!--icon--></th>
@@ -933,6 +1218,18 @@
<th width="16%">{% trans "Shared By" %}</th> <th width="16%">{% trans "Shared By" %}</th>
</tr> </tr>
</script> </script>
<script type="text/template" id="shared-repos-hd-mobile-tmpl">
<tr>
<th width="4%"><span class="sr-only">{% trans "Library Type" %}</span><!--icon--></th>
<th width="92%">
{% trans "Sort:" %}
<a class="table-sort-op mobile-table-sort-op by-name" href="#">{% trans "name" %} <span class="sort-icon icon-caret-down hide"></span></a>
<a class="table-sort-op mobile-table-sort-op by-time" href="#">{% trans "last update" %} <span class="sort-icon icon-caret-up"></span></a>
</th>
<th width="4%"><span class="sr-only">{% trans "Actions" %}</span><!--op--></th>
</tr>
</script>
<script type="text/template" id="add-pubrepo-popup-tmpl"> <script type="text/template" id="add-pubrepo-popup-tmpl">
<h3 class="hd" id="dialogTitle">{% trans "Select libraries to share" %}</h3> <h3 class="hd" id="dialogTitle">{% trans "Select libraries to share" %}</h3>
<span class="loading-icon loading-tip"></span> <span class="loading-icon loading-tip"></span>
@@ -1041,6 +1338,23 @@
<p class="empty-tip alc">{% trans "No library is shared to this group" %}</p> <p class="empty-tip alc">{% trans "No library is shared to this group" %}</p>
<% } %> <% } %>
</script> </script>
<script type="text/template" id="group-item-mobile-tmpl">
<h4 class="group-name ellipsis"><a href="#group/<%= id %>/" title="<%- name %>" class="a normal"><%- name %></a></h4>
<% if (repos.length) { %>
<table>
<thead class="vh"><!--use .vh for <td> width-->
<tr>
<th width="4%"><!--icon--></th>
<th width="92%">{% trans "Name" %}</th>
<th width="4%"><!--op--></th>
</tr>
</thead>
<tbody></tbody>
</table>
<% } else { %>
<p class="empty-tip alc">{% trans "No library is shared to this group" %}</p>
<% } %>
</script>
<script type="text/template" id="group-member-tmpl"> <script type="text/template" id="group-member-tmpl">
<img src="<%= avatar_url %>" alt="" width="32" class="avatar-circle fleft" /> <img src="<%= avatar_url %>" alt="" width="32" class="avatar-circle fleft" />
<div class="txt"> <div class="txt">
@@ -1253,8 +1567,8 @@
<script type="text/template" id="repo-shared-links-admin-dialog-tmpl"> <script type="text/template" id="repo-shared-links-admin-dialog-tmpl">
<h3 id="dialogTitle"><%= title %></h3> <h3 id="dialogTitle"><%= title %></h3>
<div id="repo-shared-links" class="left-right-tabs js-tabs ovhd"> <div id="repo-shared-links" class="nav-con-tabs js-tabs">
<ul class="left-right-tabs-nav fleft"> <ul class="nav-con-tabs-nav">
<% if (can_generate_share_link) { %> <% if (can_generate_share_link) { %>
<li class="tab"><a href="#js-download-links" class="a">{% trans "Download Links" %}</a></li> <li class="tab"><a href="#js-download-links" class="a">{% trans "Download Links" %}</a></li>
<% } %> <% } %>
@@ -1263,7 +1577,7 @@
<% } %> <% } %>
</ul> </ul>
<div class="left-right-tabs-content fright"> <div class="nav-con-tabs-content">
<% if (can_generate_share_link) { %> <% if (can_generate_share_link) { %>
<div id="js-download-links" class="tabs-panel"> <div id="js-download-links" class="tabs-panel">
<table> <table>
@@ -1332,13 +1646,13 @@
<script type="text/template" id="repo-folder-perm-admin-dialog-tmpl"> <script type="text/template" id="repo-folder-perm-admin-dialog-tmpl">
<h3 id="dialogTitle"><%= title %></h3> <h3 id="dialogTitle"><%= title %></h3>
<div id="repo-folder-perm" class="left-right-tabs js-tabs ovhd"> <div id="repo-folder-perm" class="nav-con-tabs js-tabs">
<ul class="left-right-tabs-nav fleft"> <ul class="nav-con-tabs-nav">
<li class="tab"><a href="#js-repo-user-folder-perm" class="a">{% trans "User Permission" %}</a></li> <li class="tab"><a href="#js-repo-user-folder-perm" class="a">{% trans "User Permission" %}</a></li>
<li class="tab"><a href="#js-repo-group-folder-perm" class="a">{% trans "Group Permission" %}</a></li> <li class="tab"><a href="#js-repo-group-folder-perm" class="a">{% trans "Group Permission" %}</a></li>
</ul> </ul>
<div class="left-right-tabs-content fright"> <div class="nav-con-tabs-content">
<div id="js-repo-user-folder-perm" class="tabs-panel"> <div id="js-repo-user-folder-perm" class="tabs-panel">
<div class="js-folder-perm-content repo-folder-perm-content"> <div class="js-folder-perm-content repo-folder-perm-content">
<table> <table>

10
seahub/templates/libraries.html
View File

@@ -163,15 +163,7 @@
<script type="text/template" id="starred-file-tmpl"> <script type="text/template" id="starred-file-tmpl">
<h3 class="hd">{% trans "Favorites" %}</h3> <h3 class="hd">{% trans "Favorites" %}</h3>
<table class="hide"> <table class="hide">
<thead> <thead></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> <tbody></tbody>
</table> </table>
<span class="loading-icon loading-tip"></span> <span class="loading-icon loading-tip"></span>

6
seahub/templates/snippets/file_share_popup.html
View File

@@ -1,12 +1,12 @@
{% load i18n %} {% load i18n %}
<div id="file-share" class="hide"> <div id="file-share" class="hide">
<h3 class="hd" id="dialogTitle">{% trans 'Share %(name)s' %}</h3> <h3 class="hd" id="dialogTitle">{% trans 'Share %(name)s' %}</h3>
<div id="file-share-tabs" class="left-right-tabs ovhd"> <div id="file-share-tabs" class="nav-con-tabs">
<ul class="left-right-tabs-nav fleft"> <ul class="nav-con-tabs-nav">
<li class="tab"><a href="#link-share" class="a">{% trans "Download Link" %}</a></li> <li class="tab"><a href="#link-share" class="a">{% trans "Download Link" %}</a></li>
</ul> </ul>
<div class="left-right-tabs-content fright"> <div class="nav-con-tabs-content">
<div id="link-share" class="tabs-panel"> <div id="link-share" class="tabs-panel">
<div id="link-options"> <div id="link-options">

2
seahub/templates/sysadmin/sysadmin_backbone.html
View File

@@ -7,7 +7,7 @@
<title>{{ site_title }}</title> <title>{{ site_title }}</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="{% trans "File Collaboration Team Organization" %}" /> <meta name="keywords" content="{% trans "File Collaboration Team Organization" %}" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="icon" type="image/x-icon" href="{{ MEDIA_URL }}img/favicon.png?t=1398068110" /> <link rel="icon" type="image/x-icon" href="{{ MEDIA_URL }}img/favicon.png?t=1398068110" />
<!--[if IE]> <!--[if IE]>
<link rel="shortcut icon" href="{{ MEDIA_URL }}img/favicon.png?t=1398068110"/> <link rel="shortcut icon" href="{{ MEDIA_URL }}img/favicon.png?t=1398068110"/>

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

@@ -86,6 +86,38 @@ define([
this.currentView = this.myReposView; 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); $('#info-bar .close').click(Common.closeTopNoticeBar);
$('#top-browser-tip-close').click(function () { $('#top-browser-tip-close').click(function () {
$('#top-browser-tip').addClass('hide'); $('#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.render();
this.$('.op-target').css({'max-width':280}); // for long repo name 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({ this.$el.modal({
focus: false, focus: false,
onClose: function() { onClose: function() {
@@ -28,10 +35,12 @@ define([
$.modal.close(); $.modal.close();
} }
}); });
$("#simplemodal-container").css({ if ($(window).width() >= 768) {
'width':'auto', $("#simplemodal-container").css({
'height':'auto' 'width':'auto',
}); 'height':'auto'
});
}
this.$('.js-tabs').tabs(); this.$('.js-tabs').tabs();
this.userPerm = new UserFolderPerm({repo_id: this.repo_id}); 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.render();
this.$('.op-target').css({'max-width':280}); // for long repo name this.$('.op-target').css({'max-width':280}); // for long repo name
this.$el.modal();
$("#simplemodal-container").css({ if ($(window).width() >= 768) {
'width':'auto', this.$el.modal({focus: false});
'height':'auto' $('#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(); this.$('.js-tabs').tabs();
var downloadLinks = new DownloadLinks({repo_id: this.repo_id}); 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()), path_bar_template: _.template($('#dir-path-bar-tmpl').html()),
dir_op_bar_template: _.template($('#dir-op-bar-tmpl').html()), dir_op_bar_template: _.template($('#dir-op-bar-tmpl').html()),
dirents_hd_template: _.template($('#dirents-hd-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()), top_search_form_template: _.template($('#top-search-form-tmpl').html()),
newDirTemplate: _.template($("#add-new-dir-form-template").html()), newDirTemplate: _.template($("#add-new-dir-form-template").html()),
@@ -75,13 +76,16 @@ define([
this.render(); this.render();
// scroll window: get 'more', fix 'op bar'
var _this = this; var _this = this;
// scroll window: get 'more', fix 'op bar'
$(window).scroll(function() { $(window).scroll(function() {
if ($(_this.el).is(':visible')) { if ($(_this.el).is(':visible')) {
_this.onWindowScroll(); _this.onWindowScroll();
} }
}); });
$(window).resize(function() {
_this.updateDirOpBarUI();
});
// hide 'rename form' // hide 'rename form'
$(document).click(function(e) { $(document).click(function(e) {
@@ -168,10 +172,30 @@ define([
reset: function() { reset: function() {
this.renderPath(); this.renderPath();
this.renderDirOpBar(); 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') { if (this.view_mode == 'list') {
this.renderDirentsHd(); 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 // sort
Common.updateSortIconByMode({'context': this.$el}); Common.updateSortIconByMode({'context': this.$el});
this.sortDirents(); this.sortDirents();
@@ -182,11 +206,20 @@ define([
this.dir.limit = 100; this.dir.limit = 100;
this.render_dirents_slice(this.dir.last_start, this.dir.limit); this.render_dirents_slice(this.dir.last_start, this.dir.limit);
this.setFileInput();
this.getImageThumbnail(); 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() { updateMagnificPopupOptions: function() {
var imgs = this.dir.where({is_img: true}); var imgs = this.dir.where({is_img: true});
var items = []; var items = [];
@@ -342,18 +375,8 @@ define([
renderDir: function() { renderDir: function() {
this.$loading_tip.show(); this.$loading_tip.show();
this.$error.hide(); 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 _this = this;
var thumbnail_size = app.pageOptions.thumbnail_default_size; 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_share_link: app.pageOptions.can_generate_share_link,
can_generate_upload_link: app.pageOptions.can_generate_upload_link, can_generate_upload_link: app.pageOptions.can_generate_upload_link,
enable_upload_folder: app.pageOptions.enable_upload_folder 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') { if (dir.user_perm == 'rw') {
// add new folder/file // add new folder/file
@@ -451,7 +476,8 @@ define([
}, },
renderDirentsHd: function() { 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) { render_dirents_slice: function(start, limit) {
@@ -838,6 +864,8 @@ define([
$dirents_op.hide(); $dirents_op.hide();
$curDirOps.show(); $curDirOps.show();
} }
this.updateDirOpBarUI();
}, },
download: function () { download: function () {
@@ -1279,7 +1307,7 @@ define([
// fixed 'dir-op-bar' // fixed 'dir-op-bar'
var op_bar = this.$dir_op_bar, var op_bar = this.$dir_op_bar,
path_bar = this.$path_bar, // the element before 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 op_bar_top = path_bar.offset().top + path_bar.outerHeight(true);
var fixed_styles = { var fixed_styles = {
'position': 'fixed', 'position': 'fixed',
@@ -1288,6 +1316,9 @@ define([
'background-color': $('#header').css('background-color'), 'background-color': $('#header').css('background-color'),
'z-index': 12 // make 'op_bar' shown on top of the checkboxes 'z-index': 12 // make 'op_bar' shown on top of the checkboxes
}; };
if (!op_bar_top) {
return;
}
if ($(window).scrollTop() >= op_bar_top) { if ($(window).scrollTop() >= op_bar_top) {
repo_file_list.css({'margin-top':op_bar.outerHeight(true)}); repo_file_list.css({'margin-top':op_bar.outerHeight(true)});
op_bar.outerWidth(this.$el.width()).css(fixed_styles); 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()), fileTemplate: _.template($('#dirent-file-tmpl').html()),
fileMobileTemplate: _.template($('#dirent-file-mobile-tmpl').html()),
dirTemplate: _.template($('#dirent-dir-tmpl').html()), dirTemplate: _.template($('#dirent-dir-tmpl').html()),
dirMobileTemplate: _.template($('#dirent-dir-mobile-tmpl').html()),
renameTemplate: _.template($("#rename-form-template").html()), renameTemplate: _.template($("#rename-form-template").html()),
initialize: function(options) { initialize: function(options) {
@@ -41,9 +43,9 @@ define([
var file_icon_size = Common.isHiDPI() ? 48 : 24; var file_icon_size = Common.isHiDPI() ? 48 : 24;
var template; var template;
if (this.model.get('is_dir')) { if (this.model.get('is_dir')) {
template = this.dirTemplate; template = $(window).width() < 768 ? this.dirMobileTemplate : this.dirTemplate;
} else { } else {
template = this.fileTemplate; template = $(window).width() < 768 ? this.fileMobileTemplate : this.fileTemplate;
} }
this.$el.html(template({ 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.$('.file-locked-icon').attr('title', gettext("locked by {placeholder}").replace('{placeholder}', this.model.get('lock_owner_name')));
this.dropdown = new DropdownView({ this.dropdown = new DropdownView({
el: this.$('.sf-dropdown') el: this.$('.sf-dropdown'),
right: '0'
}); });
// for image files // for image files
@@ -78,6 +81,7 @@ define([
events: { events: {
'click .select': 'select', 'click .select': 'select',
'click .file-star': 'starFile', 'click .file-star': 'starFile',
'click .dirent-name': 'visitDirent',
'click .img-name-link': 'viewImageWithPopup', 'click .img-name-link': 'viewImageWithPopup',
// mv by 'drag & drop' // mv by 'drag & drop'
@@ -130,6 +134,7 @@ define([
$dirents_op.hide(); $dirents_op.hide();
$curDirOps.show(); $curDirOps.show();
} }
dirView.updateDirOpBarUI();
if (checked_num == dirView.$('tr:gt(0)').length) { if (checked_num == dirView.$('tr:gt(0)').length) {
$toggle_all_checkbox.prop('checked', true); $toggle_all_checkbox.prop('checked', true);
} else { } else {
@@ -334,6 +339,13 @@ define([
return false; 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() { viewImageWithPopup: function() {
var index = $('.img-name-link', this.dirView.$dirent_list).index(this.$('.img-name-link')); var index = $('.img-name-link', this.dirView.$dirent_list).index(this.$('.img-name-link'));
$.magnificPopup.open(this.dirView.magnificPopupOptions, index); $.magnificPopup.open(this.dirView.magnificPopupOptions, index);

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

@@ -23,11 +23,20 @@ define([
this.render(); this.render();
if ($(window).width() < 768) {
this.$el.css({
'width': $(window).width() - 50,
'height': $(window).height() - 50,
'overflow': 'auto'
});
}
this.$el.modal({ this.$el.modal({
appendTo: "#main", appendTo: "#main",
focus: false 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(); 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({ var GroupItemView = Backbone.View.extend({
template: _.template($('#group-item-tmpl').html()), template: _.template($('#group-item-tmpl').html()),
mobileTemplate: _.template($('#group-item-mobile-tmpl').html()),
events: { events: {
}, },
@@ -19,7 +20,8 @@ define([
}, },
render: function() { 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'); var repos = this.model.get('repos');
if (repos.length) { if (repos.length) {
this.renderRepoList(repos); this.renderRepoList(repos);
@@ -27,7 +29,7 @@ define([
return this; return this;
}, },
renderRepoList: function (repos) { renderRepoList: function(repos) {
repos.sort(function(a, b) { repos.sort(function(a, b) {
return Common.compareTwoWord(a.name, b.name); return Common.compareTwoWord(a.name, b.name);
}); });

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

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

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

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

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

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

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

@@ -14,6 +14,7 @@ define([
template: _.template($('#my-own-repos-tmpl').html()), template: _.template($('#my-own-repos-tmpl').html()),
reposHdTemplate: _.template($('#my-repos-hd-tmpl').html()), reposHdTemplate: _.template($('#my-repos-hd-tmpl').html()),
mobileReposHdTemplate: _.template($('#my-repos-hd-mobile-tmpl').html()),
events: { events: {
'click .repo-create': 'createRepo', 'click .repo-create': 'createRepo',
@@ -39,7 +40,8 @@ define([
}, },
renderReposHd: function() { renderReposHd: function() {
this.$tableHead.html(this.reposHdTemplate()); var tmpl = $(window).width() >= 768 ? this.reposHdTemplate : this.mobileReposHdTemplate;
this.$tableHead.html(tmpl());
}, },
reset: function() { 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()), template: _.template($('#repos-shared-to-me-tmpl').html()),
reposHdTemplate: _.template($('#shared-repos-hd-tmpl').html()), reposHdTemplate: _.template($('#shared-repos-hd-tmpl').html()),
mobileReposHdTemplate: _.template($('#shared-repos-hd-mobile-tmpl').html()),
initialize: function(options) { initialize: function(options) {
this.repos = new RepoCollection({type: 'shared'}); this.repos = new RepoCollection({type: 'shared'});
@@ -31,7 +32,8 @@ define([
}, },
renderReposHd: function() { renderReposHd: function() {
this.$tableHead.html(this.reposHdTemplate()); var tmpl = $(window).width() >= 768 ? this.reposHdTemplate : this.mobileReposHdTemplate;
this.$tableHead.html(tmpl());
}, },
reset: function() { reset: function() {

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

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

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

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

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

@@ -19,10 +19,12 @@ define([
tagName: 'tr', tagName: 'tr',
template: _.template($('#repo-tmpl').html()), 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()), renameTemplate: _.template($("#repo-rename-form-template").html()),
transferTemplate: _.template($('#repo-transfer-form-tmpl').html()), transferTemplate: _.template($('#repo-transfer-form-tmpl').html()),
events: { events: {
'click td:lt(2)': 'visitRepo',
'click .repo-delete-btn': 'del', 'click .repo-delete-btn': 'del',
'click .repo-share-btn': 'share', 'click .repo-share-btn': 'share',
'click .js-repo-rename': 'rename', 'click .js-repo-rename': 'rename',
@@ -43,19 +45,32 @@ define([
var obj = this.model.toJSON(); var obj = this.model.toJSON();
var icon_size = Common.isHiDPI() ? 96 : 24; var icon_size = Common.isHiDPI() ? 96 : 24;
var icon_url = this.model.getIconUrl(icon_size); 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, { _.extend(obj, {
'icon_url': icon_url, 'icon_url': icon_url,
'icon_title': this.model.getIconTitle(), 'icon_title': this.model.getIconTitle(),
'can_generate_share_link': app.pageOptions.can_generate_share_link, 'can_generate_share_link': app.pageOptions.can_generate_share_link,
'can_generate_upload_link': app.pageOptions.can_generate_upload_link 'can_generate_upload_link': app.pageOptions.can_generate_upload_link
}); });
this.$el.html(this.template(obj)); this.$el.html(tmpl(obj));
this.dropdown = new DropdownView({ this.dropdown = new DropdownView($.extend({
el: this.$('.sf-dropdown') el: this.$('.sf-dropdown')
}); }, dropdownOptions));
return this; return this;
}, },
visitRepo: function() {
if ($(window).width() < 768) {
location.href = this.$('.repo-name-span a').attr('href');
}
},
del: function() { del: function() {
var _this = this; var _this = this;
var repo_name = this.model.get('name'); var repo_name = this.model.get('name');
@@ -201,7 +216,7 @@ define([
$('[name="email"]', $form).select2($.extend( $('[name="email"]', $form).select2($.extend(
Common.contactInputOptionsForSelect2(), { Common.contactInputOptionsForSelect2(), {
width: '300px', width: '280px',
maximumSelectionSize: 1, maximumSelectionSize: 1,
placeholder: gettext("Search user or enter email and press Enter"), // to override 'placeholder' returned by `Common.conta...` 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") 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.render();
this.$el.modal({focus: false}); if ($(window).width() >= 768) {
$('#simplemodal-container').css({'width':'auto', 'height':'auto'}); 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(); this.$("#share-tabs").tabs();

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

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

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

@@ -51,7 +51,14 @@ define([
'click #enable-mods': 'enableMods', 'click #enable-mods': 'enableMods',
'click .js-close-side-nav': 'closeNav', 'click .js-close-side-nav': 'closeNav',
'click li > a': 'visitLink', '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() { toggleGroupList: function() {

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

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

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

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

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

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

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

@@ -51,7 +51,10 @@ define([
return; return;
} }
app.ui.currentHighlightedItem = null; 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');
}
} }
}); });