From a0ff7afaf86e15343ff32598b1ffa8051c8c9cb4 Mon Sep 17 00:00:00 2001
From: llj <lingjun.li1@gmail.com>
Date: Wed, 30 Nov 2016 15:56:25 +0800
Subject: [PATCH] [mobile] redesigned 'libs list' UI for
 shared/org/groups/group

---
 seahub/templates/js/templates.html            | 79 +++++++++++++++++++
 static/scripts/app/router.js                  | 13 +++
 static/scripts/app/views/group-item.js        |  6 +-
 static/scripts/app/views/group-repo.js        |  4 +-
 static/scripts/app/views/group.js             |  4 +-
 static/scripts/app/views/myhome-repos.js      |  5 --
 .../scripts/app/views/myhome-shared-repos.js  |  4 +-
 static/scripts/app/views/organization-repo.js |  4 +-
 static/scripts/app/views/organization.js      |  4 +-
 static/scripts/app/views/shared-repo.js       |  4 +-
 10 files changed, 114 insertions(+), 13 deletions(-)

diff --git a/seahub/templates/js/templates.html b/seahub/templates/js/templates.html
index 6d7737a6e9..4fe24b7f02 100644
--- a/seahub/templates/js/templates.html
+++ b/seahub/templates/js/templates.html
@@ -130,6 +130,25 @@
     <td><span title="<%- owner %>"><%- owner_name %></span></td>
     <% } %>
 </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">
     <td>
         <img src="<%= icon_url %>" title="<%= icon_title %>" alt="<%= icon_title %>" width="24" />
@@ -144,6 +163,23 @@
     <td><%= mtime_relative %></td>
     <td><span title="<%- owner %>"><%- owner_nickname %></span></td>
 </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">
     <% if (user_perm == 'rw') { %>
     <div id="multi-dirents-op" class="hide">
@@ -679,6 +715,21 @@
     <td><%= mtime_relative %></td>
     <td><span title="<%- owner %>"><%- owner_nickname %></span></td>
 </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">
     <div class="side-nav-con">
@@ -982,6 +1033,17 @@
         <th width="16%">{% trans "Shared By" %}</th>
     </tr>
 </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%">
+            <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">
     <h3 class="hd" id="dialogTitle">{% trans "Select libraries to share" %}</h3>
     <span class="loading-icon loading-tip"></span>
@@ -1090,6 +1152,23 @@
     <p class="empty-tip alc">{% trans "No library is shared to this group" %}</p>
     <% } %>
 </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">
     <img src="<%= avatar_url %>" alt="" width="32" class="avatar-circle fleft" />
     <div class="txt">
diff --git a/static/scripts/app/router.js b/static/scripts/app/router.js
index cc67122e05..0517a650c7 100644
--- a/static/scripts/app/router.js
+++ b/static/scripts/app/router.js
@@ -86,6 +86,19 @@ 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;
+            });
+
             $('#info-bar .close').click(Common.closeTopNoticeBar);
             $('#top-browser-tip-close').click(function () {
                 $('#top-browser-tip').addClass('hide');
diff --git a/static/scripts/app/views/group-item.js b/static/scripts/app/views/group-item.js
index bd8103c5ca..337cb24f69 100644
--- a/static/scripts/app/views/group-item.js
+++ b/static/scripts/app/views/group-item.js
@@ -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);
             });
diff --git a/static/scripts/app/views/group-repo.js b/static/scripts/app/views/group-repo.js
index b42082d444..35ceb6a05b 100644
--- a/static/scripts/app/views/group-repo.js
+++ b/static/scripts/app/views/group-repo.js
@@ -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;
         },
 
diff --git a/static/scripts/app/views/group.js b/static/scripts/app/views/group.js
index f39fcc0df8..9c60b6f7f1 100644
--- a/static/scripts/app/views/group.js
+++ b/static/scripts/app/views/group.js
@@ -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() {
diff --git a/static/scripts/app/views/myhome-repos.js b/static/scripts/app/views/myhome-repos.js
index 2860b23ed4..b0d90091d1 100644
--- a/static/scripts/app/views/myhome-repos.js
+++ b/static/scripts/app/views/myhome-repos.js
@@ -28,11 +28,6 @@ define([
             this.listenTo(this.repos, 'reset', this.reset);
 
             this.render();
-
-            var _this = this;
-            $(window).resize(function() {
-                _this.reset();
-            });
         },
 
         addOne: function(repo, collection, options) {
diff --git a/static/scripts/app/views/myhome-shared-repos.js b/static/scripts/app/views/myhome-shared-repos.js
index c29117ab57..45ac0551b7 100644
--- a/static/scripts/app/views/myhome-shared-repos.js
+++ b/static/scripts/app/views/myhome-shared-repos.js
@@ -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() {
diff --git a/static/scripts/app/views/organization-repo.js b/static/scripts/app/views/organization-repo.js
index 7b3d1d3968..c7444bb303 100644
--- a/static/scripts/app/views/organization-repo.js
+++ b/static/scripts/app/views/organization-repo.js
@@ -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;
         },
 
diff --git a/static/scripts/app/views/organization.js b/static/scripts/app/views/organization.js
index 6883c27b45..2481360b25 100644
--- a/static/scripts/app/views/organization.js
+++ b/static/scripts/app/views/organization.js
@@ -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() {
diff --git a/static/scripts/app/views/shared-repo.js b/static/scripts/app/views/shared-repo.js
index 261f74530f..d859b7c5ef 100644
--- a/static/scripts/app/views/shared-repo.js
+++ b/static/scripts/app/views/shared-repo.js
@@ -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;
         }