Request #9432: Better context menu UI for setting/removing flags

diff --git a/horde/themes/default/screen.css b/horde/themes/default/screen.css
index 55d0872..0a349c9 100644 (file)
--- a/horde/themes/default/screen.css
+++ b/horde/themes/default/screen.css
@@ -1330,7 +1330,7 @@ div.GrowlerNoticeExit:hover {
 .context a, .context a:visited {
     white-space: nowrap;
     display: block;
-    padding: 3px;
+    padding: 3px 2px;
     text-decoration: none;
     color: #000;
 }

diff --git a/imp/js/dimpbase.js b/imp/js/dimpbase.js
index f2b5a81..770ed4d 100644 (file)
--- a/imp/js/dimpbase.js
+++ b/imp/js/dimpbase.js
@@ -753,7 +753,7 @@ var DimpBase = {
 
     contextOnClick: function(parentfunc, e)
     {
-        var flag, tmp,
+        var tmp,
             elt = e.memo.elt,
             id = elt.readAttribute('id'),
             menu = e.memo.trigger;
@@ -951,9 +951,11 @@ var DimpBase = {
                     mbox: this.folder
                 }
                 this.go('folder:' + DIMP.conf.fsearchid);
-            } else if (menu.endsWith('_setflag') || menu.endsWith('_unsetflag')) {
-                flag = elt.retrieve('flag');
-                this.flag(flag, menu.endsWith('_setflag'));
+            } else if (menu.endsWith('_setflag')) {
+                tmp = elt.down('DIV');
+                this.flag(elt.retrieve('flag'), !tmp.visible() || tmp.hasClassName('msCheck'));
+            } else if (menu.endsWith('_unsetflag')) {
+                this.flag(elt.retrieve('flag'), false);
             } else if (menu.endsWith('_flag') || menu.endsWith('_flagnot')) {
                 this.search = {
                     flag: elt.retrieve('flag'),
@@ -971,7 +973,7 @@ var DimpBase = {
 
     contextOnShow: function(parentfunc, e)
     {
-        var baseelt, elts, ob, sel, tmp,
+        var baseelt, elts, flags, ob, sel, tmp,
             ctx_id = e.memo;
 
         switch (ctx_id) {
@@ -1047,14 +1049,19 @@ var DimpBase = {
                     tmp.push(o.up());
                 }
             });
+
+            sel = this.viewport.getSelected();
+
             if ($('oa_setflag')) {
                 if (this.viewport.getMetaData('readonly')) {
                     $('oa_setflag').up().hide();
                 } else {
                     tmp.push($('oa_setflag').up());
+                    [ $('oa_unsetflag') ].invoke((sel.size() > 1) ? 'show' : 'hide');
                 }
             }
-            tmp.compact().invoke(this.viewport.getSelected().size() ? 'show' : 'hide');
+
+            tmp.compact().invoke(sel.size() ? 'show' : 'hide');
             break;
 
         case 'ctx_qsearchby':
@@ -1065,7 +1072,36 @@ var DimpBase = {
         case 'ctx_message':
             [ $('ctx_message_source').up() ].invoke(DIMP.conf.preview_pref ? 'hide' : 'show');
             sel = this.viewport.getSelected();
-            [ $('ctx_message_resume') ].invoke(sel.size() == 1 && sel.get('dataob').first().draft ? 'show' : 'hide');
+            if (sel.size() == 1) {
+                [ $('ctx_message_resume') ].invoke(sel.get('dataob').first().draft ? 'show' : 'hide');
+                [ $('ctx_message_unsetflag') ].compact().invoke('hide');
+            } else {
+                $('ctx_message_resume').hide();
+                [ $('ctx_message_unsetflag') ].compact().invoke('show');
+            }
+            break;
+
+        case 'ctx_flag':
+            sel = this.viewport.getSelected();
+            flags = (sel.size() == 1)
+                ? sel.get('dataob').first().flag
+                : null;
+
+            $(ctx_id).childElements().each(function(elt) {
+                var a, r;
+                if (flags === null) {
+                    elt.down('DIV').hide();
+                } else {
+                    if (flags.include(elt.retrieve('flag'))) {
+                        a = 'msCheckOn';
+                        r = 'msCheck';
+                    } else {
+                        a = 'msCheck';
+                        r = 'msCheckOn';
+                    }
+                    elt.down('DIV').removeClassName(r).addClassName(a).show();
+                }
+            });
             break;
 
         default:
@@ -1086,6 +1122,10 @@ var DimpBase = {
         var a = new Element('A'),
             style = {};
 
+        if (id == 'ctx_flag') {
+            a.insert(new Element('DIV', { className: 'iconImg' }));
+        }
+
         if (f.u) {
             style.backgroundColor = f.b.escapeHTML();
         }

diff --git a/imp/templates/dimp/index.inc b/imp/templates/dimp/index.inc
index 4da7cf6..575d1ad 100644 (file)
--- a/imp/templates/dimp/index.inc
+++ b/imp/templates/dimp/index.inc
@@ -355,7 +355,7 @@ function _simpleButton($id, $text, $image, $nodisplay = false)
  <a id="ctx_message_resume" style="display:none"><span class="iconImg"></span><?php echo _("Resume Draft") ?></a>
  <a id="ctx_message_reply"><span class="iconImg"></span><?php echo _("Reply") ?></a>
  <a id="ctx_message_forward"><span class="iconImg"></span><?php echo _("Forward") ?></a>
- <div id="ctx_message_flagopts" style="display:none">
+ <div style="display:none">
   <div class="sep"></div>
   <a id="ctx_message_setflag"><span class="iconImg"></span><?php echo _("Mark as") ?>...</a>
   <a id="ctx_message_unsetflag"><span class="iconImg"></span><?php echo _("Unmark as") ?>...</a>
@@ -404,7 +404,7 @@ function _simpleButton($id, $text, $image, $nodisplay = false)
  <a id="oa_preview_show"><span class="iconImg"></span><?php echo _("Show Preview") ?></a>
  <a id="oa_layout_horiz"><span class="iconImg"></span><?php echo _("Horizontal Layout") ?></a>
  <a id="oa_layout_vert"><span class="iconImg"></span><?php echo _("Vertical Layout") ?></a>
- <div id="oa_flagopts" style="display:none">
+ <div style="display:none">
   <div class="sep"></div>
   <a id="oa_setflag"><span class="iconImg"></span><?php echo _("Mark as") ?>...</a>
   <a id="oa_unsetflag"><span class="iconImg"></span><?php echo _("Unmark as") ?>...</a>

diff --git a/imp/themes/default/dimp/screen.css b/imp/themes/default/dimp/screen.css
index 2dc8a1c..3d67c14 100644 (file)
--- a/imp/themes/default/dimp/screen.css
+++ b/imp/themes/default/dimp/screen.css
@@ -229,9 +229,12 @@ div.msCheck {
 div.msCheck:hover {
     background-image: url("../graphics/checkbox_over.png") !important;
 }
-div.vpRowSelected div.msCheck {
+div.msCheckOn, div.vpRowSelected div.msCheck {
     background-image: url("../graphics/checkbox_on.png");
 }
+div.contextMenu div.msCheck, div.contextMenu div.msCheckOn {
+    margin-right: 2px;
+}
 
 /* Rows (vertical mode) */
 div.vpRowVert {