Make open-via-client in community edition and clean code for file/dir icons

seahub/templates/js/templates.html

@@ -210,22 +210,14 @@
         <% } %>
     </td>
     <td class="star"></td>
-    <% if (dirent.perm == 'r') { %>
-        <td class="dirent-icon"><img src="{{ MEDIA_URL }}img/folder-read-only-24.png" alt="{% trans "Directory icon" %}" /></td>
-    <% } else { %>
-        <td class="dirent-icon"><img src="{{ MEDIA_URL }}img/folder-24.png" alt="{% trans "Directory icon" %}" /></td>
-    <% } %>
+    <td class="dirent-icon"><img src="<%= icon_url %>" width="24" alt="{% trans "Directory icon" %}" /></td>
     <td>
-        <% if (category) { %>
-        <span class="dirent-name"><a href="#<%= category %>/lib/<%= repo_id %><%- encoded_path %>" class="dir-link normal"><%- dirent.obj_name %></a></span>
-        <% } else { %>
-        <span class="dirent-name"><a href="#lib/<%= repo_id %><%- encoded_path %>" class="dir-link normal"><%- dirent.obj_name %></a></span>
-        <% } %>
+        <span class="dirent-name"><a href="<%= url %>" class="dir-link normal"><%- dirent.obj_name %></a></span>
     </td>
     <td class="dirent-op">
         <div class="repo-file-op vh">
             <div class="displayed-op">
-                <a class="op-icon download sf2-icon-download sf2-x" href="{{ SITE_ROOT }}repo/download_dir/<%= repo_id %>/?p=<% print(encodeURIComponent(dirent_path)); %>" title="{% trans "Download" %}"></a>
+                <a class="op-icon download sf2-icon-download sf2-x" href="<%= download_url %>" title="{% trans "Download" %}"></a>
                 <% if (!repo_encrypted && can_generate_shared_link) { %>
                 <span class="op-icon share sf2-icon-share sf2-x" title="{% trans "Share" %}"></span>
                 <% } %>
@@ -242,9 +234,7 @@
                 <% if (app.pageOptions.folder_perm_enabled && is_repo_owner) { %>
                 <li><a class="op set-folder-permission" href="#">{% trans "Permission" %}</a></li>
                 <% } %>
-                <% if (is_pro) { %>
                 <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>
-                <% } %>
             </ul>
             <% } else if (dirent.perm == 'r' && !repo_encrypted) { %>
             <span class="more-op-icon sf2-icon-caret-down op-icon" title="{% trans "More operations" %}"></span>
@@ -283,10 +273,10 @@
             <% if (dirent.encoded_thumbnail_src) { %>
             <img class="thumbnail" src="{{ SITE_ROOT }}<%- dirent.encoded_thumbnail_src %>" alt="" />
             <% } else { %>
-            <img src="{{ MEDIA_URL }}img/file/<%= dirent.file_icon %>" alt="" />
+            <img src="<%= icon_url %>" width="24" alt="" />
             <% } %>
         <% } else { %>
-        <img src="{{ MEDIA_URL }}img/file/<%= dirent.file_icon %>" alt="" />
+        <img src="<%= icon_url %>" width="24" alt="" />
         <% } %>
 
         <% if (is_pro && dirent.is_locked) { %>
@@ -297,16 +287,16 @@
     <td>
         <span class="dirent-name">
             <% if (dirent.is_img) { %>
-            <a class="normal 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 %>"><%- dirent.obj_name %></a>
+            <a class="normal img-name-link" href="<%= url %>" target="_blank" data-mfp-src="{{ SITE_ROOT }}repo/<%= repo_id %>/raw<%- encoded_path %>"><%- dirent.obj_name %></a>
             <% } else { %>
-            <a class="normal" href="{{ SITE_ROOT }}lib/<%= repo_id %>/file<%- encoded_path %>" target="_blank"><%- dirent.obj_name %></a>
+            <a class="normal" href="<%= url %>" target="_blank"><%- dirent.obj_name %></a>
             <% } %>
         </span>
     </td>
     <td class="dirent-op">
         <div class="repo-file-op vh">
             <div class="displayed-op">
-                <a class="op-icon download sf2-icon-download sf2-x" href="{{ SITE_ROOT }}lib/<%= repo_id %>/file<%- encoded_path %>?dl=1" title="{% trans "Download" %}"></a>
+                <a class="op-icon download sf2-icon-download sf2-x" href="<%= download_url %>" title="{% trans "Download" %}"></a>
                 <% if (!repo_encrypted && can_generate_shared_link) { %>
                 <span class="op-icon share sf2-icon-share sf2-x" title="{% trans "Share" %}"></span>
                 <% } %>
@@ -333,8 +323,8 @@
                     <% } 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>
                 <% } %>
+                <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>
             </ul>
             <% } else if (dirent.perm == 'r' && !repo_encrypted) { %>
             <span class="more-op-icon sf2-icon-caret-down op-icon" title="{% trans "More operations" %}"></span>
@@ -357,7 +347,7 @@
 
 <script type="text/template" id="grid-view-file-item-tmpl">
     <a href="<%= url %>" class="img-link" target="_blank">
-        <img src="{{ MEDIA_URL }}img/file/txt-192.png" alt="" width="96" class="vam" />
+        <img src="<%= icon_url %>" alt="" width="96" class="vam" />
     </a>
 
     <a href="<%= url %>" class="ellipsis text-link normal" target="_blank">
@@ -371,11 +361,7 @@
 
 <script type="text/template" id="grid-view-dir-item-tmpl">
     <a href="<%= url %>" class="img-link">
-        <% if (dirent.perm == 'r') { %>
-        <img src="{{ MEDIA_URL }}img/folder-read-only-192.png" alt="" width="96" class="vam" />
-        <% } else { %>
-        <img src="{{ MEDIA_URL }}img/folder-beige-192.png" alt="" width="96" class="vam" />
-        <% } %>
+        <img src="<%= icon_url %>" alt="" width="96" class="vam" />
     </a>
 
     <a href="<%= url %>" class="ellipsis normal text-link">
@@ -399,12 +385,12 @@
                 <% 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>
                     <% } %>
+                <% } 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>
             <% } %>
+        <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>
         <% } %>
     </ul>
 </script>
@@ -420,9 +406,7 @@
         <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 (is_pro) { %>
         <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>
-            <% } %>
         <% } %>
     </ul>
 </script>

seahub/templates/libraries.html

@@ -238,7 +238,6 @@
 <script type="text/javascript">
 app["pageOptions"] = {
     site_root: "{{ SITE_ROOT }}",
-    base_url: "{{ SITE_ROOT }}" + "home/my/",
     csrfToken: "{{ csrf_token }}",
     reposUrl: "{% url 'api2-repos' %}",
     pubReposUrl: "{% url 'api2-pub-repos' %}",

static/scripts/app/models/dirent.js

@@ -13,6 +13,15 @@ define([
             return Common.pathJoin([this.collection.path, this.get('obj_name')]);
         },
 
+        getIconUrl: function(size) {
+            if (this.get('is_dir')) {
+                var is_readonly = this.get('perm') == 'r';
+                return Common.getDirIconUrl(is_readonly, size);
+            } else {
+                return Common.getFileIconUrl(this.get('obj_name'), size);
+            }
+        },
+
         // return the URL to visit the folder or file
         getWebUrl: function() {
             var dir = this.collection;

static/scripts/app/views/dirent-grid.js

@@ -50,6 +50,7 @@ define([
             this.$el.html(template({
                 dirent: this.model.attributes,
                 dirent_path: this.model.getPath(),
+                icon_url: this.model.getIconUrl(192),
                 url: this.model.getWebUrl(),
                 category: dir.category,
                 repo_id: dir.repo_id,
@@ -132,6 +133,7 @@ define([
             this.$el.on('click', '.mv', _.bind(this.mvcp, this));
             this.$el.on('click', '.cp', _.bind(this.mvcp, this));
             this.$el.on('click', '.rename', _.bind(this.rename, this));
+            this.$el.on('click', '.open-via-client', _.bind(this.open_via_client, this));
 
             return false;
         },
@@ -196,6 +198,11 @@ define([
             };
             new DirentRenameDialog(options);
             return false;
+        },
+
+        open_via_client: function() {
+            this._closeMenu();
+            return true;
         }
 
     });

static/scripts/app/views/dirent.js

@@ -38,6 +38,9 @@ define([
                 dirent: this.model.attributes,
                 dirent_path: dirent_path,
                 encoded_path: Common.encodePath(dirent_path),
+                icon_url: this.model.getIconUrl(48),
+                url: this.model.getWebUrl(),
+                download_url: this.model.getDownloadUrl(),
                 category: dir.category,
                 repo_id: dir.repo_id,
                 is_repo_owner: dir.is_repo_owner,
@@ -65,7 +68,14 @@ define([
             'click .cp': 'mvcp',
             'click .set-folder-permission': 'setFolderPerm',
             'click .lock-file': 'lockFile',
-            'click .unlock-file': 'unlockFile'
+            'click .unlock-file': 'unlockFile',
+            'click .open-via-client': 'open_via_client'
+        },
+
+        _hideMenu: function() {
+            //this.$('.hidden-op').addClass('hide');
+            this.$el.removeClass('hl').find('.repo-file-op').addClass('vh');
+            this.$('.hidden-op').addClass('hide');
         },
 
         highlight: function() {
@@ -498,7 +508,13 @@ define([
                 }
             });
             return false;
+        },
+
+        open_via_client: function() {
+            this._hideMenu();
+            return true;
         }
+
     });
 
     return DirentView;

static/scripts/app/views/fileupload.js

@@ -274,7 +274,7 @@ define([
             .bind('fileuploadprogressall', function (e, data) {
                 $total_progress.html(parseInt(data.loaded / data.total * 100, 10) + '% ' +
                     '<span style="font-size:14px;color:#555;">(' +
-                    $(this).data('blueimp-fileupload')._formatBitrate(data.bitrate) + 
+                    $(this).data('blueimp-fileupload')._formatBitrate(data.bitrate) +
                     ')</span>').removeClass('hide');
                 if (data.loaded > 0 && data.loaded == data.total) {
                     saving_tip.show();

static/scripts/common.js

@@ -148,6 +148,77 @@ define([
             }
         },
 
+        FILEEXT_ICON_MAP: {
+            // text file
+            'md': 'txt.png',
+            'txt': 'txt.png',
+
+            // pdf file
+            'pdf' : 'pdf.png',
+            // document file
+            'doc' : 'word.png',
+            'docx' : 'word.png',
+            'ppt' : 'ppt.png',
+            'pptx' : 'ppt.png',
+            'xls' : 'excel.png',
+            'xlsx' : 'excel.png',
+            'txt' : 'txt.png',
+            'odt' : 'word.png',
+            'fodt' : 'word.png',
+            'ods' : 'excel.png',
+            'fods' : 'excel.png',
+            'odp' : 'ppt.png',
+            'fodp' : 'ppt.png',
+            // music file
+            'mp3' : 'music.png',
+            'oga' : 'music.png',
+            'ogg' : 'music.png',
+            'flac' : 'music.png',
+            'aac' : 'music.png',
+            'ac3' : 'music.png',
+            'wma' : 'music.png',
+            // image file
+            'jpg' : 'pic.png',
+            'jpeg' : 'pic.png',
+            'png' : 'pic.png',
+            'svg' : 'pic.png',
+            'gif' : 'pic.png',
+            'bmp' : 'pic.png',
+            'ico' : 'pic.png',
+            // default
+            'default' : 'file.png'
+        },
+
+        getFileIconUrl: function(filename, size) {
+            if (size > 24) {
+                size = 192;
+            } else {
+                size = 24;
+            }
+
+            var file_ext;
+            if (filename.lastIndexOf('.') == -1) {
+                return app.config.mediaUrl + "img/file/" + size + "/"
+                    + this.FILEEXT_ICON_MAP['default'];
+            } else {
+                file_ext = filename.substr(filename.lastIndexOf('.') + 1).toLowerCase();
+            }
+
+            if (_.has(this.FILEEXT_ICON_MAP, file_ext)) {
+                return app.config.mediaUrl + "img/file/" + size + "/" + this.FILEEXT_ICON_MAP[file_ext];
+            } else {
+                return app.config.mediaUrl + "img/file/" + size + "/" + this.FILEEXT_ICON_MAP['default'];
+            }
+        },
+
+        getDirIconUrl: function(is_readonly, size) {
+            if (is_readonly) {
+                return app.config.mediaUrl + "img/folder-read-only-192.png";
+            } else {
+                return app.config.mediaUrl + "img/folder-beige-192.png";
+            }
+        },
+
         showConfirm: function(title, content, yesCallback) {
             var $popup = $("#confirm-popup");
             var $cont = $('#confirm-con');