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

8 files changed, 42 insertions, 61 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=" " />
diff --git a/skins/larry/settings.css b/skins/larry/settings.css
index 518c02741..0493e3018 100644
--- a/skins/larry/settings.css
+++ b/skins/larry/settings.css
@@ -244,27 +244,28 @@
 	bottom: 0;
 }
 
-#subscription-table {
-	table-layout: fixed;
-}
-
-#subscription-table tr.root td {
+#subscription-table li.root {
 	font-size: 5%;
 	line-height: 5px;
 	height: 5px;
 	padding: 2px;
 }
 
-#subscription-table td.name {
-	width: 85%;
+#subscription-table li a.name {
 	overflow: hidden;
 	text-overflow: ellipsis;
+	width: 100%;
+	float: left;
+}
+
+#subscription-table li input {
+	position: absolute;
+	right: 0;
 }
 
-#subscription-table td.subscribed {
-	min-width: 30px;
-	padding: 0 14px 0 2px;
-	text-align: right;
+html.chrome #subscription-table li input,
+html.opera #subscription-table li input {
+	margin-top: 6px;
 }
 
 .skinselection {
diff --git a/skins/larry/templates/folders.html b/skins/larry/templates/folders.html
index eed563133..f36479259 100644
--- a/skins/larry/templates/folders.html
+++ b/skins/larry/templates/folders.html
@@ -19,7 +19,7 @@
 <div id="folderslist" class="uibox listbox">
 <h2 id="folderslist-header" class="boxtitle"><span style="float:right"><roundcube:label name="subscribed" /></span><roundcube:label name="folders" /></h2>
 <div id="folderslist-content" class="scroller withfooter">
-<roundcube:object name="foldersubscription" form="subscriptionform" id="subscription-table" class="listing" noheader="true" />
+	<roundcube:object name="foldersubscription" form="subscriptionform" id="subscription-table" class="listing" />
 </div>
 <div id="folderslist-footer" class="boxfooter">
 	<roundcube:button command="create-folder" type="link" title="createfolder" class="listbutton add disabled" classAct="listbutton add" innerClass="inner" label="createfolder" /><roundcube:button name="mailboxmenulink" id="mailboxmenulink" type="link" title="folderactions" class="listbutton groupactions" onclick="return UI.toggle_popup('mailboxmenu',event)" innerClass="inner" content="&#9881;" aria-haspopup="true" aria-expanded="false" aria-owns="mailboxoptionsmenu" />
diff --git a/skins/larry/ui.js b/skins/larry/ui.js
index f8c06f889..786e3546c 100644
--- a/skins/larry/ui.js
+++ b/skins/larry/ui.js
@@ -258,8 +258,6 @@ function rcube_mail_ui()
         new rcube_splitter({ id:'folderviewsplitter', p1:'#folderslist', p2:'#folder-details',
           orientation:'v', relative:true, start:266, min:180, size:12 }).init();
 
-        new rcube_scroller('#folderslist-content', '#folderslist-header', '#folderslist-footer');
-
         rcmail.addEventListener('setquota', update_quota);
       }
       else if (rcmail.env.action == 'identities') {
@@ -1136,6 +1134,8 @@ function rcube_mail_ui()
 
 /**
  * Roundcube Scroller class
+ *
+ * @deprecated Use treelist widget
  */
 function rcube_scroller(list, top, bottom)
 {