[mobile] my libs: redesigned it

media/css/seahub.css

@@ -230,10 +230,14 @@ a.table-sort-op {
     font-weight:normal;
     display:block;
 }
+a.mobile-table-sort-op {
+    display:inline-block;
+    margin-right:30px;
+}
 a.table-sort-op:hover,
 a.table-sort-op:focus {
     outline:none;
-    font-weight:bold;
+    /*font-weight:bold;*/
     text-decoration:none;
 }
 img { border:none; }
@@ -1962,6 +1966,12 @@ button.sf-dropdown-toggle:focus {
 #repo-create-form .checkbox-label { /* for "Encrypt" */
     margin:10px 0 0;
 }
+.repo-meta-info {
+    display:inline-block;
+    margin-right:8px;
+    color:#666;
+    font-size:12px;
+}
 .activity-group-hd {
     padding: 8px;
     color: #444;

seahub/templates/js/templates.html

@@ -74,6 +74,46 @@
     <td><%= size_formatted %></td>
     <td><%= mtime_relative %></td>
 </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>
+    <% } else { %>
+    <td>{% trans "Broken (please contact your administrator to fix this library)" %}</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>
+</script>
+
 <script type="text/template" id="group-repo-tmpl">
     <td>
         <img src="<%= icon_url %>" title="<%= icon_title %>" alt="<%= icon_title %>" width="24" />
@@ -923,6 +963,15 @@
        <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>
 </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%">
+            <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">
     <tr>
         <th width="4%"><span class="sr-only">{% trans "Library Type" %}</span><!--icon--></th>

static/scripts/app/views/myhome-repos.js

@@ -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',
@@ -27,6 +28,11 @@ define([
             this.listenTo(this.repos, 'reset', this.reset);
 
             this.render();
+
+            var _this = this;
+            $(window).resize(function() {
+                _this.reset();
+            });
         },
 
         addOne: function(repo, collection, options) {
@@ -39,7 +45,8 @@ define([
         },
 
         renderReposHd: function() {
-            this.$tableHead.html(this.reposHdTemplate());
+            var tmpl = $(window).width() >= 768 ? this.reposHdTemplate : this.mobileReposHdTemplate;
+            this.$tableHead.html(tmpl());
         },
 
         reset: function() {

static/scripts/app/views/repo.js

@@ -19,6 +19,7 @@ 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()),
 
@@ -43,16 +44,23 @@ 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;
         },
 

static/scripts/app/views/widgets/dropdown.js

@@ -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);

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

@@ -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');
+            }
         }
 
     });