Merge pull request #1059 from haiwen/lib-icon

Improve library icon

seahub/templates/js/templates.html

@@ -30,11 +30,7 @@
 </script>
 <script type="text/template" id="repo-tmpl">
     <td>
-        <% if (encrypted) { %>
-        <img src="{{ MEDIA_URL }}img/sync-folder-encrypt-20.png" title="{% trans "Encrypted" %}" alt="" />
-        <% } else { %>
-        <img src="{{ MEDIA_URL }}img/sync-folder-20.png" title="{% trans "Read-Write" %}" alt="" />
-        <% } %>
+        <img src="<%= icon_url %>" title="<%= icon_title %>" alt="" width="24" />
     </td>
     <% if (name) { %>
     <td><span class="repo-name-span"><a href="#my-libs/lib/<%= id %>"><%- name %></a></span></td>
@@ -67,15 +63,7 @@
 </script>
 <script type="text/template" id="group-repo-tmpl">
     <td>
-        <% if (encrypted) { %>
-        <img src="{{ MEDIA_URL }}img/sync-folder-encrypt-20.png" title="{% trans "Encrypted" %}" alt="" />
-        <% } else { %>
-            <% if (permission == 'rw') { %>
-        <img src="{{ MEDIA_URL }}img/sync-folder-20.png?t=1387267140" title="{% trans "Read-Write" %}" alt="" />
-            <% } else { %>
-        <img src="{{ MEDIA_URL }}img/folder-no-write-20.png?t=1387267140" title="{% trans "Read-Only" %}" alt="" />
-            <% } %>
-        <% } %>
+        <img src="<%= icon_url %>" title="<%= icon_title %>" alt="" width="24" />
     </td>
     <td><a href="#group/<%= group_id %>/lib/<%= id %>"><%- name %></a></td>
     <td class="alc">
@@ -91,15 +79,7 @@
 </script>
 <script type="text/template" id="organization-repo-tmpl">
     <td>
-        <% if (encrypted) { %>
-        <img src="{{ MEDIA_URL }}img/sync-folder-encrypt-20.png" title="{% trans "Encrypted" %}" alt="" />
-        <% } else { %>
-            <% if (permission == 'rw') { %>
-        <img src="{{ MEDIA_URL }}img/sync-folder-20.png?t=1387267140" title="{% trans "Read-Write" %}" alt="" />
-            <% } else { %>
-        <img src="{{ MEDIA_URL }}img/folder-no-write-20.png?t=1387267140" title="{% trans "Read-Only" %}" alt="" />
-            <% } %>
-        <% } %>
+        <img src="<%= icon_url %>" title="<%= icon_title %>" alt="" width="24" />
     </td>
     <td><a href="#org/lib/<%= id %>"><%- name %></a></td>
     <td class="alc">
@@ -603,15 +583,7 @@
 </script>
 <script type="text/template" id="shared-repo-tmpl">
     <td>
-        <% if (encrypted) { %>
-            <img src="{{MEDIA_URL}}img/sync-folder-encrypt-20.png" title="{% trans "Read-Write" %}" alt="{% trans "directory icon" %}" />
-        <% } else { %>
-            <% if (permission == 'rw') { %>
-            <img src="{{MEDIA_URL}}img/sync-folder-20.png?t=1387267140" title="{% trans "Read-Write" %}" alt="{% trans "directory icon" %}" />
-            <% } else { %>
-            <img src="{{MEDIA_URL}}img/folder-no-write-20.png?t=1387267140" title="{% trans "Read-Only" %}" alt="{% trans "directory icon" %}" />
-            <% } %>
-        <% } %>
+        <img src="<%= icon_url %>" title="<%= icon_title %>" alt="" width="24" />
     </td>
     <td><a href="#shared-libs/lib/<%= id %>"><%- name %></a></td>
     <td class="alc">

static/scripts/app/models/repo.js

@@ -1,7 +1,8 @@
 define([
     'underscore',
-    'backbone'
-], function(_, Backbone) {
+    'backbone',
+    'common'
+], function(_, Backbone, Common) {
     'use strict';
 
     var Repo = Backbone.Model.extend({
@@ -14,7 +15,8 @@ define([
             mtime_relative: "",
             encrypted: false,
             owner: "-",
-            owner_nickname: "-"
+            owner_nickname: "-",
+            permission: "rw"
         },
 
         parse: function(response) {
@@ -37,6 +39,25 @@ define([
                 }
                 if (attrs.passwd1 != attrs.passwd2) return gettext("Passwords don't match");
             }
+        },
+
+        getIconUrl: function(size) {
+            var is_encrypted = this.get('encrypted');
+            var is_readonly = this.get('permission') == "r" ? true : false;
+            return Common.getLibIconUrl(is_encrypted, is_readonly, size);
+        },
+
+        getIconTitle: function() {
+            var icon_title = '';
+            if (this.get('encrypted')) {
+                icon_title = gettext("Encrypted");
+            } else if (this.get('permission') == "rw") {
+                icon_title = gettext("Read-Write");
+            } else {
+                icon_title = gettext("Read-Only");
+            }
+
+            return icon_title;
         }
 
     });

static/scripts/app/views/group-item.js

@@ -4,8 +4,9 @@ define([
     'backbone',
     'common',
     'app/collections/group-repos',
-    'app/views/group-repo'
-], function($, _, Backbone, Common, GroupRepos, GroupRepoView) {
+    'app/views/group-repo',
+    'app/models/group-repo'
+], function($, _, Backbone, Common, GroupRepos, GroupRepoView, GroupRepo) {
     'use strict';
 
     var GroupItemView = Backbone.View.extend({
@@ -37,7 +38,7 @@ define([
             groupRepos.setGroupID(group_id);
             $(repos).each(function(index, item) {
                 var view = new GroupRepoView({
-                    model: new Backbone.Model(item, {collection: groupRepos}), 
+                    model: new GroupRepo(item, {collection: groupRepos}),
                     group_id: group_id,
                     is_staff: is_staff,
                     show_shared_by: false // don't show 'Shared By'

static/scripts/app/views/group-repo.js

@@ -31,6 +31,8 @@ define([
 
         render: function() {
             var obj = this.model.toJSON();
+            var icon_size = Common.isHiDPI() ? 96 : 24;
+            var icon_url = this.model.getIconUrl(icon_size);
             $.extend(obj, {
                 group_id: this.group_id,
                 is_staff: this.is_staff,
@@ -38,7 +40,9 @@ define([
                 share_from_me: app.pageOptions.username == this.model.get('owner') ? true : false,
                 // 'owner_name' for '#groups', 'owner_nickname' for '#group/id/'
                 owner_name: this.model.get('owner_nickname') || this.model.get('owner_name'),
-                show_shared_by: this.show_shared_by
+                show_shared_by: this.show_shared_by,
+                icon_url: icon_url,
+                icon_title: this.model.getIconTitle()
             });
             this.$el.html(this.template(obj));
             return this;

static/scripts/app/views/organization-repo.js

@@ -15,7 +15,14 @@ define([
         },
 
         render: function() {
-            this.$el.html(this.template(this.model.toJSON()));
+            var obj = this.model.toJSON();
+            var icon_size = Common.isHiDPI() ? 96 : 24;
+            var icon_url = this.model.getIconUrl(icon_size);
+            _.extend(obj, {
+                'icon_url': icon_url,
+                'icon_title': this.model.getIconTitle()
+            });
+            this.$el.html(this.template(obj));
             return this;
         },
 

static/scripts/app/views/repo.js

@@ -39,7 +39,14 @@ define([
         },
 
         render: function() {
-            this.$el.html(this.template(this.model.toJSON()));
+            var obj = this.model.toJSON();
+            var icon_size = Common.isHiDPI() ? 96 : 24;
+            var icon_url = this.model.getIconUrl(icon_size);
+            _.extend(obj, {
+                'icon_url': icon_url,
+                'icon_title': this.model.getIconTitle()
+            });
+            this.$el.html(this.template(obj));
             return this;
         },
 

static/scripts/app/views/shared-repo.js

@@ -47,7 +47,14 @@ define([
         },
 
         render: function() {
-            this.$el.html(this.template(this.model.toJSON()));
+            var obj = this.model.toJSON();
+            var icon_size = Common.isHiDPI() ? 96 : 24;
+            var icon_url = this.model.getIconUrl(icon_size);
+            _.extend(obj, {
+                'icon_url': icon_url,
+                'icon_title': this.model.getIconTitle()
+            });
+            this.$el.html(this.template(obj));
             return this;
         },
 

static/scripts/common.js

@@ -227,6 +227,26 @@ define([
             }
         },
 
+        getLibIconUrl: function(is_encrypted, is_readonly, size) {
+            if (size > 24) {
+                if (is_encrypted) {
+                    return app.config.mediaUrl + "img/lib/96/lib-encrypted.png";
+                } else if (is_readonly) {
+                    return app.config.mediaUrl + "img/lib/96/lib-readonly.png";
+                } else {
+                    return app.config.mediaUrl + "img/lib/96/lib.png";
+                }
+            } else {
+                if (is_encrypted) {
+                    return app.config.mediaUrl + "img/lib/24/lib-encrypted.png";
+                } else if (is_readonly) {
+                    return app.config.mediaUrl + "img/lib/24/lib-readonly.png";
+                } else {
+                    return app.config.mediaUrl + "img/lib/24/lib.png";
+                }
+            }
+        },
+
         isHiDPI: function() {
             var pixelRatio = window.devicePixelRatio ? window.devicePixelRatio : 1;
             if (pixelRatio > 1) {