- Filters - UI redesign: added possibility to move filter to any place using drag&drop

 (instead of up/down buttons), added filter sets list object, added more 'loading' messages
- Added option to hide some scripts (managesieve_filename_exceptions)


git-svn-id: https://svn.roundcube.net/trunk@5340 208e9e7b-5314-0410-a742-e7e81cd9613c

2 files changed, 126 insertions, 141 deletions

diff --git a/plugins/managesieve/skins/default/managesieve.css b/plugins/managesieve/skins/default/managesieve.css
index 6f4b5609c..cef26d4f3 100644
--- a/plugins/managesieve/skins/default/managesieve.css
+++ b/plugins/managesieve/skins/default/managesieve.css
@@ -1,159 +1,98 @@
-#filterslist
+#filtersetslistbox
 {
   position: absolute;
-  left: 20px;
-  top: 120px;
-  bottom: 20px;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 195px;
   border: 1px solid #999999;
-  overflow: auto;
+  background-color: #F9F9F9;
+  overflow: hidden;
   /* css hack for IE */
-  height: expression((parseInt(document.documentElement.clientHeight)-140)+'px');
+  height: expression(parseInt(this.parentNode.offsetHeight)+'px');
 }
 
-#filters-table
+#filtersscreen
 {
-  width: 100%;
-  table-layout: fixed;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 205px;
   /* css hack for IE */
-  width: expression(document.getElementById('filterslist').clientWidth);
+  height: expression(parseInt(this.parentNode.offsetHeight)+'px');
 }
 
-#filters-table tbody td
+#filterslistbox
 {
-  cursor: pointer;
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  border: 1px solid #999999;
+  overflow: auto;
+  /* css hack for IE */
+  height: expression(parseInt(this.parentNode.offsetHeight)+'px');
 }
 
-#filters-table tbody tr.disabled td
+#filterslist,
+#filtersetslist
 {
-  color: #999999;
+  width: 100%;
+  table-layout: fixed;
 }
 
-#filtersbuttons
+#filterslist tbody td,
+#filtersetslist tbody td
 {
-  position: absolute;
-  left: 20px;
-  top: 85px;
+  cursor: default;
+  text-overflow: ellipsis;
+  -o-text-overflow: ellipsis;
 }
 
-#filtersetsbuttons
+#filterslist tbody tr.disabled td,
+#filtersetslist tbody tr.disabled td
 {
-  position: absolute;
-  left: 230px;
-  top: 85px;
+  color: #999999;
 }
 
-#filtersbuttons a,
-#filtersetsbuttons a
+#filtersetslist tbody td
 {
-  display: block;
-  float: left;
+  font-weight: bold;
 }
-
-#filtersbuttons a.button,
-#filtersbuttons a.buttonPas,
-#filtersetsbuttons a.button,
-#filtersetsbuttons a.buttonPas
+/*
+#filtersetslist tr.selected
 {
-  display: block;
-  float: left;
-  width: 32px;
-  height: 32px;
-  padding: 0;
-  margin-right: 3px;
-  overflow: hidden;
-  background: url(images/toolbar.png) 0 0 no-repeat transparent;
-  opacity: 0.99; /* this is needed to make buttons appear correctly in Chrome */
+  background-color: #929292;
+  border-bottom: 1px solid #898989;
+  color: #FFF;
+  font-weight: bold;
 }
+*/
 
-#filtersbuttons a.buttonPas,
-#filtersetsbuttons a.buttonPas
+#filterslist tbody tr.filtermoveup td
 {
-  filter: alpha(opacity=35);
-  opacity: 0.35;
-}
-
-#filtersbuttons a.add {
-  background-position: 0px 0px;
-}
-
-#filtersbuttons a.addsel {
-  background-position: 0 -32px;
-}
-
-#filtersbuttons a.del {
-  background-position: -32px 0px;
-}
-
-#filtersbuttons a.delsel {
-  background-position: -32px -32px;
+  border-top: 2px dotted #555;
+  padding-top: 0px;
 }
 
-#filtersbuttons a.up {
-  background-position: -64px 0px;
-}
-
-#filtersbuttons a.upsel {
-  background-position: -64px -32px;
-}
-
-#filtersbuttons a.down {
-  background-position: -96px 0px;
-}
-
-#filtersbuttons a.downsel {
-  background-position: -96px -32px;
-}
-
-#filtersetsbuttons a.setadd {
-  background-position: -128px 0px;
-}
-
-#filtersetsbuttons a.setaddsel {
-  background-position: -128px -32px;
-}
-
-#filtersetsbuttons a.setdel {
-  background-position: -160px 0px;
-}
-
-#filtersetsbuttons a.setdelsel {
-  background-position: -160px -32px;
-}
-
-#filtersetsbuttons a.setset {
-  background-position: -192px 0px;
-}
-
-#filtersetsbuttons a.setsetsel {
-  background-position: -192px -32px;
-}
-
-#filtersetsbuttons a.setget {
-  background-position: -224px 0px;
-}
-
-#filtersetsbuttons a.setgetsel {
-  background-position: -224px -32px;
-}
-
-#filtersetselect
+#filterslist tbody tr.filtermovedown td
 {
-  position: absolute;
-  left: 375px;
-  top: 90px;
+  border-bottom: 2px dotted #555;
+  padding-bottom: 1px;
 }
 
 #filter-box
 {
   position: absolute;
-  top: 120px;
-  right: 20px;
-  bottom: 20px;
+  top: 0;
+  right: 0;
+  bottom: 0;
   border: 1px solid #999999;
   overflow: hidden;
   /* css hack for IE */
-  width: expression((parseInt(document.documentElement.clientWidth)-40-parseInt(document.getElementById('filterslist').offsetWidth))+'px');
-  height: expression((parseInt(document.documentElement.clientHeight)-140)+'px');
+  width: expression((parseInt(this.parentNode.offsetWidth)-20-parseInt(document.getElementById('filterslistbox').offsetWidth))+'px');
+  height: expression(parseInt(this.parentNode.offsetHeight)+'px');
 }
 
 #filter-frame
@@ -163,14 +102,14 @@
 
 body.iframe
 {
-  min-width: 740px;
-  width: expression(Math.max(740, document.documentElement.clientWidth)+'px');
+  min-width: 620px;
+  width: expression(Math.max(620, document.documentElement.clientWidth)+'px');
   background-color: #F2F2F2;
 }
 
 #filter-form
 {
-  min-width: 650px;
+  min-width: 550px;
   white-space: nowrap;
   padding: 20px 10px 10px 10px;
 }
@@ -207,6 +146,7 @@ div.rulerow table, div.actionrow table
 {
   padding: 0px;
   width: 100%;
+  min-width: 620px;
 }
 
 td.rowbuttons
@@ -226,7 +166,7 @@ td.rowtargets
 {
   white-space: nowrap;
   width: 98%;
-  padding-left: 10px;
+  padding-left: 3px;
 }
 
 input.disabled, input.disabled:hover
@@ -245,6 +185,11 @@ input.radio
   border: 0;
 }
 
+select.operator_selector
+{
+  width: 200px;
+}
+
 span.label
 {
   color: #666666;
@@ -317,6 +262,13 @@ a.button.disabled
   cursor: default;
 }
 
+#filter-form select,
+#filter-form input,
+#filter-form textarea
+{
+  font-size: 11px;
+}
+
 /* fixes for popup window */
 
 body.iframe.mail
diff --git a/plugins/managesieve/skins/default/templates/managesieve.html b/plugins/managesieve/skins/default/templates/managesieve.html
index 94cd1f1cc..71eebe105 100644
--- a/plugins/managesieve/skins/default/templates/managesieve.html
+++ b/plugins/managesieve/skins/default/templates/managesieve.html
@@ -8,46 +8,79 @@
 <script type="text/javascript" src="/splitter.js"></script>
 
 <style type="text/css">
-#filterslist { width: <roundcube:exp expression="!empty(cookie:sieveviewsplitter) ? cookie:sieveviewsplitter-5 : 210" />px; }
+#filterslistbox { width: <roundcube:exp expression="!empty(cookie:sieveviewsplitter) ? cookie:sieveviewsplitter-5 : 210" />px; }
 #filter-box { left: <roundcube:exp expression="!empty(cookie:sieveviewsplitter) ? cookie:sieveviewsplitter+5 : 220" />px;
 <roundcube:exp expression="browser:ie ? ('width:expression((parseInt(this.parentNode.offsetWidth)-'.(!empty(cookie:sieveviewsplitter) ? cookie:sieveviewsplitter+5 : 220).')+\\'px\\');') : ''" />
 }
+#filtersetslistbox { width: <roundcube:exp expression="!empty(cookie:sieveviewsplitter2) ? cookie:sieveviewsplitter2-5 : 175" />px; }
+#filtersscreen { left: <roundcube:exp expression="!empty(cookie:sieveviewsplitter2) ? cookie:sieveviewsplitter2+5 : 185" />px;
+<roundcube:exp expression="browser:ie ? ('width:expression((parseInt(this.parentNode.offsetWidth)-'.(!empty(cookie:sieveviewsplitter2) ? cookie:sieveviewsplitter2+5 : 185).')+\\'px\\');') : ''" />
+}
 </style>
 
 </head>
-<body>
+<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="filtersbuttons">
-<roundcube:button command="plugin.managesieve-add" type="link" class="buttonPas add" classSel="button addsel" classAct="button add" title="managesieve.filteradd" content=" " />
-<roundcube:button command="plugin.managesieve-del" type="link" class="buttonPas del" classSel="button delsel" classAct="button del" title="managesieve.filterdel" content=" " />
-<roundcube:button command="plugin.managesieve-up" type="link" class="buttonPas up" classSel="button upsel" classAct="button up" title="managesieve.moveup" content=" " />
-<roundcube:button command="plugin.managesieve-down" type="link" class="buttonPas down" classSel="button downsel" classAct="button down" title="managesieve.movedown" content=" " />
-</div>
+<div id="mainscreen">
 
-<div id="filtersetsbuttons">
-<roundcube:button command="plugin.managesieve-setadd" type="link" class="buttonPas setadd" classSel="button setaddsel" classAct="button setadd" title="managesieve.filtersetadd" content=" " />
-<roundcube:button command="plugin.managesieve-setdel" type="link" class="buttonPas setdel" classSel="button setdelsel" classAct="button setdel" title="managesieve.filtersetdel" content=" " />
-<roundcube:button command="plugin.managesieve-setact" type="link" class="buttonPas setset" classSel="button setsetsel" classAct="button setset" content=" " />
-<roundcube:button command="plugin.managesieve-setget" type="link" class="buttonPas setget" classSel="button setgetsel" classAct="button setget" title="managesieve.filtersetget" content=" " />
+<div id="filtersetslistbox">
+<div id="filtersetslist-title" class="boxtitle"><roundcube:label name="managesieve.filtersets" /></div>
+<div class="boxlistcontent">
+  <roundcube:object name="filtersetslist" id="filtersetslist" class="records-table" cellspacing="0" summary="Filters list" type="list" noheader="true" />
+</div>
+<div class="boxfooter">
+  <roundcube:button command="plugin.managesieve-setadd" type="link" title="managesieve.filtersetadd" class="buttonPas addfilterset" classAct="button addfilterset" content=" " />
+  <roundcube:button name="filtersetmenulink" id="filtersetmenulink" type="link" title="moreactions" class="button groupactions" onclick="rcmail_ui.show_popup('filtersetmenu', undefined, {above:1});return false" content=" " />
 </div>
-<div id="filtersetselect">
-<roundcube:label name="managesieve.filterset" />:
-<roundcube:object name="filtersetslist" id="filtersets-select" />
 </div>
 
-<div id="filterslist">
-<roundcube:object name="filterslist" id="filters-table" class="records-table" cellspacing="0" summary="Filters list" />
+<div id="filtersscreen">
+<div id="filterslistbox">
+<div class="boxtitle"><roundcube:label name="managesieve.filters" /></div>
+<div class="boxlistcontent">
+  <roundcube:object name="filterslist" id="filterslist" class="records-table" cellspacing="0" summary="Filters list" noheader="true" />
+</div>
+<div class="boxfooter">
+  <roundcube:button command="plugin.managesieve-add" type="link" title="managesieve.filteradd" class="buttonPas addfilter" classAct="button addfilter" content=" " />
+  <roundcube:button name="filtermenulink" id="filtermenulink" type="link" title="moreactions" class="button groupactions" onclick="rcmail_ui.show_popup('filtermenu', undefined, {above:1});return false" content=" " />
 </div>
+</div>
+
 <script type="text/javascript">
-  var sieveviewsplit = new rcube_splitter({id:'sieveviewsplitter', p1: 'filterslist', p2: 'filter-box', orientation: 'v', relative: true, start: 215});
+  var sieveviewsplit2 = new rcube_splitter({id:'sieveviewsplitter2', p1: 'filtersetslistbox', p2: 'filtersscreen', orientation: 'v', relative: true, start: 200});
+  rcmail.add_onload('sieveviewsplit2.init()');
+
+  var sieveviewsplit = new rcube_splitter({id:'sieveviewsplitter', p1: 'filterslistbox', p2: 'filter-box', orientation: 'v', relative: true, start: 215});
   rcmail.add_onload('sieveviewsplit.init()');
 </script>
+
 <div id="filter-box">
-<roundcube:object name="filterframe" id="filter-frame" width="100%" height="100%" frameborder="0" src="/watermark.html" />
+  <roundcube:object name="filterframe" id="filter-frame" width="100%" height="100%" frameborder="0" src="/watermark.html" />
+</div>
+
+</div>
+</div>
+</div>
+
+<div id="filtersetmenu" class="popupmenu">
+  <ul>
+    <li><roundcube:button command="plugin.managesieve-setact" label="managesieve.enable" classAct="active" /></li>
+    <li><roundcube:button command="plugin.managesieve-setdel" label="delete" classAct="active" /></li>
+    <li class="separator_above"><roundcube:button command="plugin.managesieve-setget" label="download" classAct="active" /></li>
+    <roundcube:container name="filtersetoptions" id="filtersetmenu" />
+  </ul>
+</div>
+
+<div id="filtermenu" class="popupmenu">
+  <ul>
+    <li><roundcube:button command="plugin.managesieve-act" label="managesieve.enable" classAct="active" /></li>
+    <li><roundcube:button command="plugin.managesieve-del" label="delete" classAct="active" /></li>
+    <roundcube:container name="filteroptions" id="filtermenu" />
+  </ul>
 </div>
 
 </body>