From 7f9ea15463a7d14b4316e4859e29d53bd727fb32 Mon Sep 17 00:00:00 2001
From: thomascube <thomas@roundcube.net>
Date: Mon, 11 Feb 2008 17:45:26 -0500
Subject: [PATCH] Add UI elements to mark the selected messages read/unread

---
 program/localization/de_DE/labels.inc         |    3 +
 CHANGELOG                                     |    4 +
 skins/default/templates/mail.html             |   97 ++++++++++++++++++++++++-------
 program/include/rcmail_template.inc           |    5 -
 skins/default/images/buttons/markread_act.png |    0 
 skins/default/mail.css                        |   47 +++++++++++++++
 program/localization/en_US/labels.inc         |    3 +
 program/localization/de_CH/labels.inc         |    3 +
 8 files changed, 136 insertions(+), 26 deletions(-)

diff --git a/CHANGELOG b/CHANGELOG
index 7f04880..def887d 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -1,6 +1,10 @@
 CHANGELOG RoundCube Webmail
 ---------------------------
 
+2008/02/11 (thomasb)
+----------
+- Add function to mark the selected messages as read/unread (#1457360)
+
 2008/02/07 (thomasb)
 ----------
 - Remember decision to display images for a certain message during session (#1484754)
diff --git a/program/include/rcmail_template.inc b/program/include/rcmail_template.inc
index d6eb35c..301b3f2 100644
--- a/program/include/rcmail_template.inc
+++ b/program/include/rcmail_template.inc
@@ -453,8 +453,7 @@
     {
       // return a button
       case 'button':
-        if ($attrib['command'])
-          return $this->button($attrib);
+        return $this->button($attrib);
         break;
 
       // show a label
@@ -582,7 +581,7 @@
 
     $skin_path = $this->config['skin_path'];
 
-    if (!($attrib['command'] || $attrib['name']))
+    if (!($attrib['command'] || $attrib['name'] || $attrib['onclick']))
       return '';
 
     // try to find out the button type
diff --git a/program/localization/de_CH/labels.inc b/program/localization/de_CH/labels.inc
index a626d32..3d2c815 100644
--- a/program/localization/de_CH/labels.inc
+++ b/program/localization/de_CH/labels.inc
@@ -110,6 +110,9 @@
 $labels['lastmessages']     = 'Die letzten Nachrichten anzeigen';
 $labels['backtolist']       = 'Zurück zur Liste';
 $labels['viewsource']       = 'Quelltext anzeigen';
+$labels['markmessages']     = 'Nachrichten markieren';
+$labels['markread']         = 'Als gelesen';
+$labels['markunread']       = 'Als ungelesen';
 
 $labels['select'] = 'Auswählen';
 $labels['all']    = 'Alle';
diff --git a/program/localization/de_DE/labels.inc b/program/localization/de_DE/labels.inc
index e2b1367..409c4af 100644
--- a/program/localization/de_DE/labels.inc
+++ b/program/localization/de_DE/labels.inc
@@ -87,6 +87,9 @@
 $labels['lastmessages'] = 'Die letzten Nachrichten anzeigen';
 $labels['backtolist'] = 'Zurück zur Liste';
 $labels['viewsource'] = 'Quelltext anzeigen';
+$labels['markmessages'] = 'Nachrichten markieren';
+$labels['markread'] = 'Als gelesen';
+$labels['markunread'] = 'Als ungelesen';
 $labels['select'] = 'Auswählen';
 $labels['all'] = 'Alle';
 $labels['none'] = 'Keine';
diff --git a/program/localization/en_US/labels.inc b/program/localization/en_US/labels.inc
index 769045f..533e40f 100644
--- a/program/localization/en_US/labels.inc
+++ b/program/localization/en_US/labels.inc
@@ -109,6 +109,9 @@
 $labels['lastmessages']     = 'Show last set of messages';
 $labels['backtolist']       = 'Back to message list';
 $labels['viewsource']       = 'Show source';
+$labels['markmessages']     = 'Mark messages';
+$labels['markread']         = 'As read';
+$labels['markunread']       = 'As unread';
 
 $labels['select'] = 'Select';
 $labels['all'] = 'All';
diff --git a/skins/default/images/buttons/markread_act.png b/skins/default/images/buttons/markread_act.png
new file mode 100644
index 0000000..32c0511
--- /dev/null
+++ b/skins/default/images/buttons/markread_act.png
Binary files differ
diff --git a/skins/default/mail.css b/skins/default/mail.css
index 9cb50f5..ac05f01 100644
--- a/skins/default/mail.css
+++ b/skins/default/mail.css
@@ -41,6 +41,49 @@
   padding-left: 2px;
 }
 
+#markmessagemenu
+{
+  position: absolute;
+  top: 32px;
+  left: 90px;
+  width: auto;
+  visibility: hidden;
+  background-color: #F9F9F9;
+  border: 1px solid #CCC;
+  padding: 1px;
+  opacity: 0.9;
+  z-index: 240;
+}
+
+ul.toolbarmenu
+{
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+ul.toolbarmenu li
+{
+  font-size: 11px;
+  white-space: nowrap;
+  min-width: 130px;
+  width: auto !important;
+  width: 130px;
+}
+
+ul.toolbarmenu li a
+{
+  display: block;
+  color: #a0a0a0;
+  padding: 2px 8px 3px 12px;
+  text-decoration: none;
+}
+
+ul.toolbarmenu li a.active:hover
+{
+  background-color: #ddd;
+}
+
 #listcontrols
 {
   position: absolute;
@@ -71,6 +114,9 @@
 #mailboxcontrols a.active,
 #mailboxcontrols a.active:active,
 #mailboxcontrols a.active:visited,
+ul.toolbarmenu li a.active,
+ul.toolbarmenu li a.active:active,
+ul.toolbarmenu li a.active:visited,
 td.formlinks a,
 td.formlinks a:visited
 {
@@ -190,6 +236,7 @@
 {
   display: block;
   height: 12px;
+  margin: 0;
   padding: 3px 10px 4px 10px;
   background-color: #EBEBEB;
   background-image: url(images/listheader_aqua.gif); 
diff --git a/skins/default/templates/mail.html b/skins/default/templates/mail.html
index a38c06a..2c3846b 100644
--- a/skins/default/templates/mail.html
+++ b/skins/default/templates/mail.html
@@ -5,36 +5,50 @@
 <roundcube:include file="/includes/links.html" />
 <link rel="stylesheet" type="text/css" href="/mail.css" />
 <script type="text/javascript" src="/splitter.js"></script>
+<script type="text/javascript">
+
+function rcube_mail_ui()
+{
+  this.markmenu = new rcube_layer('markmessagemenu');
+}
+
+rcube_mail_ui.prototype = {
+
+show_markmenu: function(show)
+{
+  if (typeof show == 'undefined')
+    show = this.markmenu.visible ? false : true;
+  
+  var ref = rcube_find_object('markreadbutton');
+  if (show && ref)
+    this.markmenu.move(ref.offsetLeft, ref.offsetTop + ref.offsetHeight);
+  
+  this.markmenu.show(show);
+},
+
+body_mouseup: function(evt, p)
+{
+  if (this.markmenu && this.markmenu.visible)
+    this.show_markmenu(false);
+},
+
+body_keypress: function(evt, p)
+{
+  if (rcube_event.get_keycode(evt) == 27 && this.markmenu && this.markmenu.visible)
+    this.show_markmenu(false);
+}
+
+};
+
+</script>
 </head>
 <body>
 
 <roundcube:include file="/includes/taskbar.html" />
 <roundcube:include file="/includes/header.html" />
 
-<div id="messagetoolbar">
-<roundcube:button command="checkmail" imageSel="/images/buttons/inbox_sel.png" imageAct="/images/buttons/inbox_act.png" imagePas="/images/buttons/inbox_pas.png" width="32" height="32" title="checkmail" />
-<roundcube:button command="compose" imageSel="/images/buttons/compose_sel.png" imageAct="/images/buttons/compose_act.png" imagePas="/images/buttons/compose_pas.png" width="32" height="32" title="writenewmessage" />
-<roundcube:button command="reply" imageSel="/images/buttons/reply_sel.png" imageAct="/images/buttons/reply_act.png" imagePas="/images/buttons/reply_pas.png" width="32" height="32" title="replytomessage" />
-<roundcube:button command="reply-all" imageSel="/images/buttons/replyall_sel.png" imageAct="/images/buttons/replyall_act.png" imagePas="/images/buttons/replyall_pas.png" width="32" height="32" title="replytoallmessage" />
-<roundcube:button command="forward" imageSel="/images/buttons/forward_sel.png" imageAct="/images/buttons/forward_act.png" imagePas="/images/buttons/forward_pas.png" width="32" height="32" title="forwardmessage" />
-<roundcube:button command="delete" imageSel="/images/buttons/delete_sel.png" imageAct="/images/buttons/delete_act.png" imagePas="/images/buttons/delete_pas.png" width="32" height="32" title="deletemessage" />
-<roundcube:button command="print" imageSel="/images/buttons/print_sel.png" imageAct="/images/buttons/print_act.png" imagePas="/images/buttons/print_pas.png" width="32" height="32" title="printmessage" />
-</div>
-
-<div id="quicksearchbar">
-<roundcube:object name="searchform" type="search" results="5" id="quicksearchbox" /><roundcube:button command="reset-search" id="searchreset" image="/images/icons/reset.gif" title="resetsearch" />
-</div>
-
-<div id="messagecountbar">
-<roundcube:button command="firstpage" imageSel="/images/buttons/first_sel.png" imageAct="/images/buttons/first_act.png" imagePas="/images/buttons/first_pas.png" width="11" height="11" title="firstmessages" />
-<roundcube:button command="previouspage" imageSel="/images/buttons/previous_sel.png" imageAct="/images/buttons/previous_act.png" imagePas="/images/buttons/previous_pas.png" width="11" height="11" title="previousmessages" />
-&nbsp;<roundcube:object name="messageCountDisplay" />&nbsp;
-<roundcube:button command="nextpage" imageSel="/images/buttons/next_sel.png" imageAct="/images/buttons/next_act.png" imagePas="/images/buttons/next_pas.png" width="11" height="11" title="nextmessages" />
-<roundcube:button command="lastpage" imageSel="/images/buttons/last_sel.png" imageAct="/images/buttons/last_act.png" imagePas="/images/buttons/last_pas.png" width="11" height="11" title="lastmessages" />
-</div>
-
 <div id="mailboxlist-container">
-<div id="mailboxlist-header"><roundcube:label name="mailboxlist" /></div>
+<h3 id="mailboxlist-header"><roundcube:label name="mailboxlist" /></h3>
 <roundcube:object name="mailboxlist" id="mailboxlist" maxlength="16" />
 </div>
 
@@ -84,5 +98,42 @@
 <roundcube:endif />
 </div>
 
+<div id="messagetoolbar">
+<roundcube:button command="checkmail" imageSel="/images/buttons/inbox_sel.png" imageAct="/images/buttons/inbox_act.png" imagePas="/images/buttons/inbox_pas.png" width="32" height="32" title="checkmail" />
+<roundcube:button command="compose" imageSel="/images/buttons/compose_sel.png" imageAct="/images/buttons/compose_act.png" imagePas="/images/buttons/compose_pas.png" width="32" height="32" title="writenewmessage" />
+<roundcube:button id="markreadbutton" image="/images/buttons/markread_act.png" width="32" height="32" title="markmessages" onclick="rcmailUI.show_markmenu();return false" />
+<roundcube:button command="reply" imageSel="/images/buttons/reply_sel.png" imageAct="/images/buttons/reply_act.png" imagePas="/images/buttons/reply_pas.png" width="32" height="32" title="replytomessage" />
+<roundcube:button command="reply-all" imageSel="/images/buttons/replyall_sel.png" imageAct="/images/buttons/replyall_act.png" imagePas="/images/buttons/replyall_pas.png" width="32" height="32" title="replytoallmessage" />
+<roundcube:button command="forward" imageSel="/images/buttons/forward_sel.png" imageAct="/images/buttons/forward_act.png" imagePas="/images/buttons/forward_pas.png" width="32" height="32" title="forwardmessage" />
+<roundcube:button command="delete" imageSel="/images/buttons/delete_sel.png" imageAct="/images/buttons/delete_act.png" imagePas="/images/buttons/delete_pas.png" width="32" height="32" title="deletemessage" />
+<roundcube:button command="print" imageSel="/images/buttons/print_sel.png" imageAct="/images/buttons/print_act.png" imagePas="/images/buttons/print_pas.png" width="32" height="32" title="printmessage" />
+
+<div id="markmessagemenu">
+  <ul class="toolbarmenu">
+    <li><roundcube:button command="mark" prop="read" label="markread" classAct="active" /></li>
+    <li><roundcube:button command="mark" prop="unread" label="markunread" classAct="active" /></li>
+  </ul>
+</div>
+</div>
+
+<div id="quicksearchbar">
+<roundcube:object name="searchform" type="search" results="5" id="quicksearchbox" /><roundcube:button command="reset-search" id="searchreset" image="/images/icons/reset.gif" title="resetsearch" />
+</div>
+
+<div id="messagecountbar">
+<roundcube:button command="firstpage" imageSel="/images/buttons/first_sel.png" imageAct="/images/buttons/first_act.png" imagePas="/images/buttons/first_pas.png" width="11" height="11" title="firstmessages" />
+<roundcube:button command="previouspage" imageSel="/images/buttons/previous_sel.png" imageAct="/images/buttons/previous_act.png" imagePas="/images/buttons/previous_pas.png" width="11" height="11" title="previousmessages" />
+&nbsp;<roundcube:object name="messageCountDisplay" />&nbsp;
+<roundcube:button command="nextpage" imageSel="/images/buttons/next_sel.png" imageAct="/images/buttons/next_act.png" imagePas="/images/buttons/next_pas.png" width="11" height="11" title="nextmessages" />
+<roundcube:button command="lastpage" imageSel="/images/buttons/last_sel.png" imageAct="/images/buttons/last_act.png" imagePas="/images/buttons/last_pas.png" width="11" height="11" title="lastmessages" />
+</div>
+
+<script type="text/javascript">
+
+var rcmailUI = new rcube_mail_ui();
+rcube_event.add_listener({ object:rcmailUI, method:'body_mouseup', event:'mouseup' });
+rcube_event.add_listener({ object:rcmailUI, method:'body_keypress', event:'keypress' });
+  
+</script>
 </body>
 </html>

--
Gitblit v1.9.1