File- and folder-lists improvements

plugins/kolab_files/kolab_files.js

@@ -446,19 +446,17 @@ function kolab_files_ui()
     this.env.folders = this.folder_list_parse(response.result);
 
     $.each(this.env.folders, function(i, f) {
-      var row = $('<li class="mailbox"><span class="branch"></span><a></a></li>'),
-        link = $('a', row);
+      var row = $('<li class="mailbox"><span class="branch"></span></li>');
 
-      link.text(f.name);
-      row.attr('id', f.id);
+      row.attr('id', f.id)
+        .append($('<span class="name">').text(f.name))
+        .click(function() { file_api.folder_select(i); });
 
       if (f.depth)
         $('span.branch', row).width(15 * f.depth);
 
       if (f.virtual)
         row.addClass('virtual');
-      else
-        link.click(function() { file_api.folder_select(i); });
 
       list.append(row);
 
@@ -533,20 +531,15 @@ function kolab_files_ui()
 
       for (c in rcmail.env.coltypes) {
         c = rcmail.env.coltypes[c];
-        if (c == 'name') {
-          if (rcmail.env.task == 'files')
-            col = '<td class="name">' + key + '</td>';
-          else
+        if (c == 'name')
             col = '<td class="name filename ' + file_api.file_type_class(data.type) + '">'
               + '<span>' + key + '</span></td>';
-        }
         else if (c == 'mtime')
           col = '<td class="mtime">' + data.mtime + '</td>';
         else if (c == 'size')
           col = '<td class="size">' + file_api.file_size(data.size) + '</td>';
         else if (c == 'options')
-          col = '<td class="filename ' + file_api.file_type_class(data.type) + '">'
-            + '<span class="drop"><a href="#" onclick="kolab_files_file_menu(' + i + ')"></a></span></td>';
+          col = '<td class="options"></td>'; // @TODO
         else
           col = '<td class="' + c + '"></td>';
 

plugins/kolab_files/skins/larry/style.css

@@ -63,14 +63,15 @@
   overflow: auto;
 }
 
-#files-folder-list ul li a {
+#files-folder-list ul li span.name {
   background: url(../../../../skins/larry/images/listicons.png) 6px 3px no-repeat;
-  padding-left: 32px;
+  padding: 6px 8px 2px 32px;
   text-overflow: ellipsis;
   white-space: nowrap;
   display: inline-block;
   width: auto;
   overflow: hidden;
+  color: #376572;
 }
 
 #files-folder-list ul li span.branch {
@@ -82,6 +83,11 @@
   border-top: 0;
 }
 
+#files-folder-list ul li.virtual {
+  color: #aaa;
+  cursor: default;
+}
+
 #filelist thead tr td {
   padding: 0;
 }
@@ -108,8 +114,8 @@
   width: 26px;
 }
 
-#filelist thead tr td.subject,
-#filelist tbody tr td.subject {
+#filelist thead tr td.filename,
+#filelist tbody tr td.filename {
   width: 99%;
   white-space: nowrap;
 }
@@ -158,17 +164,10 @@
 
 #filelist tbody td.filename span {
   background: url(images/unknown.png) 0 0 no-repeat;
-  padding: 0 0 0 16px;
+  padding: 0 0 0 20px;
   height: 16px;
 }
 
-#filelist tbody td.filename span.drop a {
-  display: inline-block;
-  width: 12px;
-  height: 12px;
-  background: url(../../../../skins/larry/images/buttons.png) -20px -1575px no-repeat;
-}
-
 /*
 #filelist tbody td.filename span input {
   padding: 0 2px;
@@ -223,29 +222,6 @@
   margin-bottom: 10px;
 }
 
-/*
-#files-folder-list table {
-  width: 100%;
-  border-spacing: 0;
-}
-
-#files-folder-list table td span.name {
-  background: url(images/folder.png) 0 0 no-repeat;
-  height: 18px;
-  padding-left: 20px;
-  margin-left: 3px;
-  cursor: pointer;
-}
-
-#files-folder-list table tr.selected td span.name {
-  font-weight: bold;
-}
-
-#files-folder-list table tr.virtual td span.name {
-  color: #bbb;
-  cursor: default;
-}
-*/
 #files-compose-dialog #searchmenulink {
   width: 15px;
 }