- New Folder Manager UI

- Fix invalid Request when creating a folder (#1487443)
- Add folder size and quota indicator in folder manager (#1485780)
- Add possibility to move a subfolder into root folder (#1486791)

7 files changed, 135 insertions, 145 deletions

diff --git a/skins/default/common.css b/skins/default/common.css
index 938c68a5e..ae649ba5d 100644
--- a/skins/default/common.css
+++ b/skins/default/common.css
@@ -861,3 +861,17 @@ fieldset.tabbed
   padding-top: 12px;
 }
 
+.quota_text {
+  text-align: center;
+  font-size: 10px;
+  color: #666;
+  border: 1px solid #999;
+  cursor: default;
+}
+.quota_bg { background-color: white; }
+.quota_high { background-color: #F33131; }
+.quota_mid { background-color: #F5AD3C; }
+.quota_low { background-color: #91E164; }
+.quota_text_high { color: white; }
+.quota_text_mid { color: #666; }
+.quota_text_low { color: #666; }
diff --git a/skins/default/iehacks.css b/skins/default/iehacks.css
index 2b2180fb9..29ab8cb75 100644
--- a/skins/default/iehacks.css
+++ b/skins/default/iehacks.css
@@ -38,11 +38,6 @@ input, textarea
   height: expression((parseInt(document.documentElement.clientHeight)-105)+'px');
 }
 
-#folder-manager
-{
-  height: expression((parseInt(this.parentNode.offsetHeight)-105)+'px');
-}
-
 #messagetoolbar
 {
   width: expression((parseInt(document.documentElement.clientWidth)-215)+'px');
@@ -90,7 +85,8 @@ input, textarea
 #messageframe,
 #identity-details,
 #contacts-box,
-#prefs-box
+#prefs-box,
+#folder-box
 {
   height: expression(parseInt(this.parentNode.offsetHeight)+'px');
 }
diff --git a/skins/default/mail.css b/skins/default/mail.css
index ead0aa610..2cd51e542 100644
--- a/skins/default/mail.css
+++ b/skins/default/mail.css
@@ -1435,9 +1435,6 @@ input.from_address
   margin-top: 4px;
 }
 
-
-/** quota indicator */
-
 #quota
 {
   position: absolute;
@@ -1453,19 +1450,3 @@ input.from_address
   right: 6px;
   z-index: 101;
 }
-
-.quota_text {
-  text-align: center;
-  font-size: 10px;
-  color: #666;
-  border: 1px solid #999;
-  cursor: default;
-}
-.quota_bg { background-color: white; }
-.quota_high { background-color: #F33131; }
-.quota_mid { background-color: #F5AD3C; }
-.quota_low { background-color: #91E164; }
-.quota_text_high { color: white; }
-.quota_text_mid { color: #666; }
-.quota_text_low { color: #666; }
-
diff --git a/skins/default/settings.css b/skins/default/settings.css
index c902740a6..c8d7d3f13 100644
--- a/skins/default/settings.css
+++ b/skins/default/settings.css
@@ -5,41 +5,20 @@
   width: 300px;
 }
 
-#folder-manager
-{
-  position: absolute;
-  width: 600px;
-  top: 0;
-  left: 0;
-  bottom: 105px;
-  overflow: auto;
-  border: 1px solid #999999;
-}
-
 #folder-manager.droptarget
 {
   border: 1px solid #CC3333;
   background-color: #FFFFA6;
 }
 
-#listbuttons
-{
-  position: absolute;
-  left: 20px;
-  bottom: 18px;
-}
-
-#identities-table
+#identities-table,
+#subscription-table,
+#sections-table
 {
   width: 100%;
   table-layout: fixed;
 }
 
-#subscription-table
-{
-  width: 100%;
-}
-
 #subscription-table input
 {
   font: inherit;
@@ -50,14 +29,8 @@
 #sections-table tbody td
 {
   cursor: default;
-  overflow: hidden;
   text-overflow: ellipsis;
   -o-text-overflow: ellipsis;
-}
-
-#subscription-table tbody td
-{
-  height: 22px !important;
   height: 18px;
 }
 
@@ -66,49 +39,25 @@
   color: #666;
 }
 
-#subscription-table tr.selected td,
-#subscription-table tr.selected td a
+#subscription-table tr.selected td
 {
   color: #FFFFFF;
   background-color: #CC3333;
 }
 
-#subscription-table tr.droptarget td,
-#subscription-table tr.droptarget td a
+#subscription-table tr.droptarget td
 {
   background-color: #FFFFA6;
 }
 
-#subscription-table thead td.name
-{
-  width: 95%;
-}
-
-#subscription-table thead td.msgcount,
-#subscription-table thead td.subscribed,
-#subscription-table thead td.threaded
-{
-  white-space: nowrap;
-  min-width: 50px;
-}
-
-#subscription-table tbody td.subscribed,
-#subscription-table tbody td.rename,
-#subscription-table tbody td.delete
+#subscription-table td.name
 {
-  padding: 1px 4px;
+  width: 99%;
 }
 
-#subscription-table thead td.rename,
-#subscription-table thead td.delete
+#subscription-table td.subscribed
 {
-  width: 30px;
-}
-
-#subscription-table td.name input
-{
-  font: inherit;
-  width: 90%;
+  width: 18px;
 }
 
 #identity-frame
@@ -118,7 +67,9 @@
   border: 1px solid #999999;
 }
 
-#identity-details
+#identity-details,
+#folder-box,
+#prefs-box
 {
   position: absolute;
   top: 0;
@@ -129,7 +80,8 @@
   background-color: #F2F2F2;
 }
 
-#identity-details table td.title
+#identity-details table td.title,
+#folder-details table td.title
 {
   font-weight: bold;
   text-align: right;
@@ -150,6 +102,7 @@ input.disabled
 }
 
 #identities-list,
+#folder-manager,
 #sectionslist
 {
   position: absolute;
@@ -161,24 +114,9 @@ input.disabled
   overflow: hidden;
 }
 
-#sections-table
-{
-  width: 100%;
-  table-layout: fixed;
-}
-
-#prefs-box
-{
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  border: 1px solid #999999;
-  overflow: hidden;
-}
-
 body.iframe,
-#prefs-frame
+#prefs-frame,
+#folder-frame
 {
   background-color: #F2F2F2;
   border: none;
@@ -203,3 +141,19 @@ body.iframe,
   text-align: right;
   float: right;
 }
+
+#quota
+{
+  position: absolute;
+  top: 3px;
+  right: 8px;
+  width: 100px;
+}
+
+#quotaimg
+{
+  position: absolute;
+  top: 3px;
+  right: 6px;
+  z-index: 101;
+}
diff --git a/skins/default/templates/folderedit.html b/skins/default/templates/folderedit.html
new file mode 100644
index 000000000..78ddd335e
--- /dev/null
+++ b/skins/default/templates/folderedit.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title><roundcube:object name="pagetitle" /></title>
+<roundcube:include file="/includes/links.html" />
+<script type="text/javascript" src="/functions.js"></script>
+</head>
+<body class="iframe">
+
+<div id="folder-title" class="boxtitle"><roundcube:label name="folderproperties" /></div>
+
+<div id="folder-details" class="boxcontent">
+  <roundcube:object name="folderdetails" />
+  <p>
+    <roundcube:if condition="!strlen(request:_mbox)" />
+    <input type="button" value="<roundcube:label name="cancel" />" class="button" onclick="history.back()" />&nbsp;
+    <roundcube:endif />
+    <roundcube:button command="save" type="input" class="button mainaction" label="save" />
+  </p>
+</div>
+<script type="text/javascript">rcube_init_tabs('folder-details')</script>
+
+</body>
+</html>
diff --git a/skins/default/templates/folders.html b/skins/default/templates/folders.html
new file mode 100644
index 000000000..07ce1c0f0
--- /dev/null
+++ b/skins/default/templates/folders.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title><roundcube:object name="pagetitle" /></title>
+<roundcube:include file="/includes/links.html" />
+<script type="text/javascript" src="/functions.js"></script>
+<script type="text/javascript" src="/splitter.js"></script>
+<style type="text/css">
+#folder-manager { width: <roundcube:exp expression="!empty(cookie:folderviewsplitter) ? cookie:folderviewsplitter-5 : 295" />px; }
+#folder-box { left: <roundcube:exp expression="!empty(cookie:folderviewsplitter) ? cookie:folderviewsplitter+5 : 305" />px;
+    <roundcube:exp expression="browser:ie ? ('width:expression((parseInt(this.parentNode.offsetWidth)-'.(!empty(cookie:folderviewsplitter) ? cookie:folderviewsplitter+5 : 305).')+\\'px\\');') : ''" />
+}
+</style>
+</head>
+<body onload="rcube_init_mail_ui()">
+
+<roundcube:include file="/includes/taskbar.html" />
+<roundcube:include file="/includes/header.html" />
+<roundcube:include file="/includes/settingstabs.html" />
+
+<div id="mainscreen">
+
+<div id="folder-manager">
+<div id="folder-title" class="boxtitle"><roundcube:label name="folders" /></div>
+<div class="boxlistcontent">
+    <roundcube:object name="foldersubscription" form="subscriptionform" id="subscription-table" noheader="true"
+        cellpadding="1" cellspacing="0" summary="Folder subscription table" class="records-table" />
+</div>
+<div class="boxfooter">
+    <roundcube:button command="create-folder" type="link" title="createfolder" class="buttonPas addgroup" classAct="button addgroup" content=" " />
+    <roundcube:button name="mailboxmenulink" id="mailboxmenulink" type="link" title="folderactions" class="button groupactions" onclick="rcmail_ui.show_popup('mailboxmenu');return false" content=" " />
+
+    <roundcube:if condition="env:quota" />
+    <img id="quotaimg" src="/images/quota.gif" alt="" />
+    <div id="quota">
+        <roundcube:object name="quotaDisplay" display="image" width="100" height="14" id="quotadisplay" />
+    </div>
+    <roundcube:endif />
+</div>
+</div>
+
+<script type="text/javascript">
+    var folderviewsplit = new rcube_splitter({id:'folderviewsplitter', p1: 'folder-manager', p2: 'folder-box', orientation: 'v', relative: true, start: 300 });
+    rcmail.add_onload('folderviewsplit.init()');
+</script>
+
+<div id="folder-box">
+    <roundcube:object name="folderframe" id="folder-frame" width="100%" height="100%" frameborder="0" src="/watermark.html" />
+</div>
+
+</div>
+
+<div id="mailboxoptionsmenu" class="popupmenu">
+  <ul>
+    <li><roundcube:button command="delete-folder" label="delete" classAct="active" /></li>
+    <li><roundcube:button command="purge" type="link" label="empty" classAct="active" /></li>
+    <roundcube:container name="mailboxoptions" id="mailboxoptionsmenu" />
+  </ul>
+</div>
+
+</body>
+</html>
diff --git a/skins/default/templates/managefolders.html b/skins/default/templates/managefolders.html
deleted file mode 100644
index 164d56f54..000000000
--- a/skins/default/templates/managefolders.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
-<head>
-<title><roundcube:object name="pagetitle" /></title>
-<roundcube:include file="/includes/links.html" />
-<script type="text/javascript" src="/functions.js"></script>
-</head>
-<body>
-
-<roundcube:include file="/includes/taskbar.html" />
-<roundcube:include file="/includes/header.html" />
-<roundcube:include file="/includes/settingstabs.html" />
-
-<form name="subscriptionform" action="./" onsubmit="rcmail.command('create-folder');return false;">
-
-<div id="mainscreen">
-
-<div id="folder-manager">
-<roundcube:object name="foldersubscription" form="subscriptionform" id="subscription-table"
-  cellpadding="1" cellspacing="0" summary="Folder subscription table" class="records-table"
-  deleteIcon="/images/icons/delete.png"
-  renameIcon="/images/icons/rename.png" />
-</div>
-
-<div id="bottomboxes" class="box">
-<div class="boxtitle"><roundcube:label name="createfolder" /></div>
-
-<div class="boxcontent">
-<roundcube:label name="foldername" />:&nbsp;
-<roundcube:object name="createfolder" form="subscriptionform" hintbox="rcmailaddfolderhint" />
-<roundcube:button command="create-folder" type="input" class="button" label="create" />
-<div id="rcmailaddfolderhint" class="hint" style="margin-top:1em; height:16px"></div>
-</div>
-</div>
-
-</div>
-
-</form>
-
-</body>
-</html>