Use treelist widget for folders list in Settings/Folders (#1489648)

5 files changed, 27 insertions, 47 deletions

diff --git a/skins/classic/common.css b/skins/classic/common.css
index d28f2871c..13f4e6483 100644
--- a/skins/classic/common.css
+++ b/skins/classic/common.css
@@ -723,6 +723,7 @@ ul.treelist li
   font-size: 11px;
   border-bottom: 1px solid #EBEBEB;
   white-space: nowrap;
+  overflow: hidden;
 }
 
 ul.treelist li a
diff --git a/skins/classic/functions.js b/skins/classic/functions.js
index 7f2b8b4fb..b521be3bb 100644
--- a/skins/classic/functions.js
+++ b/skins/classic/functions.js
@@ -751,6 +751,8 @@ function rcube_layer(id, attributes)
 
 /**
  * Scroller
+ *
+ * @deprecated Use treelist widget
  */
 function rcmail_scroller(list, top, bottom)
 {
@@ -1010,9 +1012,5 @@ function rcube_init_mail_ui()
       rcmail.addEventListener('afterupload-photo', function(){ rcmail_ui.show_popup('uploadform', false); })
         .gui_object('dragmenu', 'dragmenu');
     }
-    else if (rcmail.env.task == 'settings') {
-      if (rcmail.gui_objects.subscriptionlist)
-        new rcmail_scroller('#folderlist-content', '#folderlist-title', '#folderlist-footer');
-    }
   });
 }
diff --git a/skins/classic/mail.css b/skins/classic/mail.css
index f9e5e4b9c..58db795cb 100644
--- a/skins/classic/mail.css
+++ b/skins/classic/mail.css
@@ -409,14 +409,6 @@
   background-color: #FFF;
 }
 
-#mailboxlist li
-{
-  display: block;
-  position: relative;
-  font-size: 11px;
-  border-bottom: 1px solid #EBEBEB;
-}
-
 #mailboxlist li ul li:last-child
 {
   border-bottom: 0 none;
diff --git a/skins/classic/settings.css b/skins/classic/settings.css
index acd0b9fd0..3b084de87 100644
--- a/skins/classic/settings.css
+++ b/skins/classic/settings.css
@@ -12,64 +12,53 @@
 }
 
 #identities-table,
-#subscription-table,
 #sections-table
 {
   width: 100%;
   table-layout: fixed;
 }
 
-#subscription-table input
-{
-  font: inherit;
-}
-
-#subscription-table tbody td,
-#identities-table tbody td,
-#sections-table tbody td
-{
-  cursor: default;
-  text-overflow: ellipsis;
-  -o-text-overflow: ellipsis;
-  height: 18px;
-}
-
 #identities-table tbody tr.readonly td
 {
   font-style: italic;
 }
 
-#subscription-table tr.virtual td
+#subscription-table li.selected a
 {
-  color: #666;
+  color: #FFF;
+  background-color: #CC3333;
 }
 
-#subscription-table tr.root td
+#subscription-table li.root
 {
-  font-size: 10%;
+  font-size: 5%;
+  line-height: 5px;
   height: 5px;
+  padding: 2px;
 }
 
-#subscription-table tr.selected td
-{
-  color: #FFFFFF;
-  background-color: #CC3333;
-}
-
-#subscription-table tr.droptarget td
+#subscription-table li a.name
 {
-  background-color: #FFFFA6;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+  display: block;
+  float: left;
+  padding: 0 0 0 5px;
+  height: 24px;
+  line-height: 24px;
 }
 
-#subscription-table td.name
+#subscription-table li input
 {
-  width: auto;
+  position: absolute;
+  right: 0;
 }
 
-#subscription-table td.subscribed
+html.chrome #subscription-table li input,
+html.opera #subscription-table li input
 {
-  text-align: right;
-  padding-right: 12px;
+  margin-top: 6px;
 }
 
 #folder-box,
diff --git a/skins/classic/templates/folders.html b/skins/classic/templates/folders.html
index f00c23b22..66bec6243 100644
--- a/skins/classic/templates/folders.html
+++ b/skins/classic/templates/folders.html
@@ -21,8 +21,8 @@
 <div id="folder-manager">
 <div id="folderlist-title" class="boxtitle"><span class="rightalign"><roundcube:label name="subscribed" /></span><roundcube:label name="folders" /></div>
 <div id="folderlist-content" class="boxlistcontent">
-    <roundcube:object name="foldersubscription" form="subscriptionform" id="subscription-table" noheader="true"
-        cellpadding="1" cellspacing="0" summary="Folder subscription table" class="records-table" />
+    <roundcube:object name="foldersubscription" form="subscriptionform" id="subscription-table"
+        summary="Folder subscription table" class="treelist" />
 </div>
 <div id="folderlist-footer" class="boxfooter">
     <roundcube:button command="create-folder" type="link" title="createfolder" class="buttonPas addgroup" classAct="button addgroup" content=" " />