make consistent options menu in mail and addressbook

localization/en_GB.inc

@@ -2,7 +2,7 @@
 /* Author: Philip Weir */
 
 $labels = array();
-$labels['swipeactions'] = 'Swipe actions';
+$labels['swipeoptions'] = 'Swipe options';
 $labels['swipeleft'] = 'Swipe left';
 $labels['swiperight'] = 'Swipe right';
 $labels['swipedown'] = 'Swipe down';

localization/en_US.inc

@@ -2,7 +2,7 @@
 /* Author: Philip Weir */
 
 $labels = array();
-$labels['swipeactions'] = 'Swipe actions';
+$labels['swipeoptions'] = 'Swipe options';
 $labels['swipeleft'] = 'Swipe left';
 $labels['swiperight'] = 'Swipe right';
 $labels['swipedown'] = 'Swipe down';

skins/elastic/includes/menu.html

@@ -1,5 +1,5 @@
-<fieldset class="swipe-menu">
+<div id="swipeoptionsmenu" class="popupmenu propform" role="dialog" aria-labelledby="aria-label-listoptions">
-    <legend><roundcube:label name="swipe.swipeactions" /></legend>
+    <h3 id="aria-label-listoptions" class="voice"><roundcube:label name="swipe.swipeoptions" /></h3>
     <div class="form-group row swipeoptions-left">
         <label for="swipeoptions-left" class="col-form-label col-sm-4"><roundcube:label name="swipe.swipeleft" /></label>
         <div class="col-sm-8">
@@ -18,4 +18,4 @@
             <roundcube:object name="swipeoptionslist" type="select" direction="down" />
         </div>
     </div>
-</fieldset>
+</div>

skins/elastic/swipe.less

@@ -5,35 +5,6 @@
 @import (reference) "../../../../skins/elastic/styles/variables";
 @import (reference) "../../../../skins/elastic/styles/mixins";
 
-#listoptions-menu {
-  overflow-y: auto;
-  margin: -0.5em -1em;
-  padding: .75em 1.25em;
-
-  &::-webkit-scrollbar {
-    -webkit-appearance: none;
-  }
-
-  &::-webkit-scrollbar:vertical {
-    width: .6rem;
-  }
-
-  &::-webkit-scrollbar:horizontal {
-    height: .6rem;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: rgba(0, 0, 0, .4);
-    border-radius: .3rem;
-    border: 2px solid #fff;
-  }
-
-  > fieldset.swipe-menu {
-    display: none;
-    margin-top: 1.5rem;
-  }
-}
-
 #swipe-action {
   position: absolute;
   display: flex;
@@ -212,25 +183,17 @@
   display: none;
 }
 
-html.layout-small,
+html.layout-small.touch,
-html.layout-phone {
+html.layout-phone.touch {
   .toolbar {
     a.button {
       &.swipe {
         display: inline-block;
 
         &:before {
-          content: @fa-var-hand-point-up;
+          content: @fa-var-hand-pointer;
         }
       }
     }
   }
 }
-
-fieldset.swipe-menu {
-  margin: .25em;
-
-  legend {
-    display: none;
-  }
-}

swipe.js

@@ -316,19 +316,26 @@ rcube_webmail.prototype.swipe = {
             });
     },
 
-    setup_options: function() {
+    save_options: function(dialog) {
-        $.each(rcmail.env.swipe_actions, function(direction, action) {
+        var post = {};
-            var option_input = $('.swipeoptions-' + direction).find('select,input');
+        $.each(['left', 'right', 'down'], function() {
-            if (option_input.is('input[type="radio"]')) {
+            var option_input = $('.swipeoptions-' + this, dialog).find('select,input').first();
-                option_input.filter('[value="' + action + '"]').prop('checked', true);
+
+            if ($(option_input).is('input[type="radio"]')) {
+                selector = 'input[name="swipe_' + this + '"]:checked';
             }
-            else if (option_input.is('select') && option_input.first().children('option').length > 0) {
+            else if ($(option_input).is('select')) {
-                option_input.val(action);
+                selector = 'select[name="swipe_' + this + '"]';
             }
-            else {
+
-                $('.swipeoptions-' + direction).hide();
+            if ($(selector, dialog).val() != rcmail.env.swipe_actions[this]) {
+                rcmail.env.swipe_actions[this] = $(selector, dialog).val();
+                post['swipe_' + this] = rcmail.env.swipe_actions[this];
             }
         });
+
+        if (!$.isEmptyObject(post))
+            rcmail.http_post('plugin.swipe.save_settings', post);
     }
 };
 
@@ -349,6 +356,27 @@ $(document).ready(function() {
             rcmail.swipe.parent = list_container;
             rcmail.swipe.parent.prepend(swipe_action.hide());
 
+            rcmail.register_command('plugin.swipe.options', function() {
+                var dialog = $('#swipeoptionsmenu').clone(true);
+                $.each(rcmail.env.swipe_actions, function(direction, action) {
+                    var option_input = $('.swipeoptions-' + direction, dialog).find('select,input');
+                    if (option_input.is('input[type="radio"]')) {
+                        option_input.filter('[value="' + action + '"]').prop('checked', true);
+                    }
+                    else if (option_input.is('select') && option_input.first().children('option').length > 0) {
+                        option_input.val(action);
+                    }
+                    else {
+                        $('.swipeoptions-' + direction, dialog).hide();
+                    }
+                });
+
+                rcmail.show_popup_dialog(dialog, rcmail.get_label('swipeoptions', 'swipe'), [
+                    { text: rcmail.get_label('save'), 'class': 'mainaction save', click: function(e, ui, dialog) { rcmail.swipe.save_options(this); (rcmail.is_framed() ? parent.$ : $)(dialog || this).dialog('close'); } },
+                    { text: rcmail.get_label('cancel'), 'class': 'cancel', click: function(e, ui, dialog) { (rcmail.is_framed() ? parent.$ : $)(dialog || this).dialog('close'); } }
+                ]);
+            }, !rcmail.env.swipe_list.draggable);
+
             // down swipe on list container
             var swipe_config = {
                 'source_obj': rcmail.swipe.parent,
@@ -393,14 +421,6 @@ $(document).ready(function() {
                         return false;
                     }
                 });
-
-                rcmail.register_command('plugin.swipe.options', function() {
-                    rcmail.show_popup_dialog($('#swipeoptions').clone(), rcmail.get_label('swipeactions', 'swipe'), [
-                        { text: rcmail.get_label('save'), 'class': 'mainaction save', click: function(e, ui, dialog) { rcmail.set_list_options(); (rcmail.is_framed() ? parent.$ : $)(dialog || this).dialog('close'); } },
-                        { text: rcmail.get_label('cancel'), 'class': 'cancel', click: function(e, ui, dialog) { (rcmail.is_framed() ? parent.$ : $)(dialog || this).dialog('close'); } }
-                    ]);
-                    rcmail.swipe.setup_options();
-                }, true);
             }
         });
 
@@ -435,56 +455,5 @@ $(document).ready(function() {
 
             rcmail.swipe.init(swipe_config);
         });
-
-        // save swipe options
-        rcmail.set_list_options_core = rcmail.set_list_options;
-        rcmail.set_list_options = function(cols, sort_col, sort_order, threads, layout) {
-            var post = {};
-            $.each(['left', 'right', 'down'], function() {
-                var option_input = $('.swipeoptions-' + this).find('select,input').first();
-
-                if ($(option_input).is('input[type="radio"]')) {
-                    selector = 'input[name="swipe_' + this + '"]:checked';
-                }
-                else if ($(option_input).is('select')) {
-                    selector = 'select[name="swipe_' + this + '"]';
-                    selector += $(selector).length > 1 ? ':visible' : '';
-                }
-
-                if ($(selector).val() != rcmail.env.swipe_actions[this]) {
-                    rcmail.env.swipe_actions[this] = $(selector).val();
-                    post['swipe_' + this] = rcmail.env.swipe_actions[this];
-                }
-            });
-
-            if (!$.isEmptyObject(post))
-                rcmail.http_post('plugin.swipe.save_settings', post);
-
-            rcmail.set_list_options_core(cols, sort_col, sort_order, threads, layout);
-        };
     }
-
-    // show swipe options in the list options menu
-    rcmail.addEventListener('beforemenu-open', function(name) {
-        if (name == rcmail.env.swipe_menuname) {
-            var menu_obj = $('.swipe-menu');
-            if (!rcmail.env.swipe_list.draggable && menu_obj.find('select > option,input').length > 0) {
-                if (bw.edge)
-                    menu_obj.find('.swipeoptions-down').hide();
-
-                menu_obj.show();
-            }
-            else {
-                menu_obj.hide();
-            }
-        }
-    });
-
-    // set the values swipe options menu
-    // done in menu-open not beforemenu-open because of Elastic's Bootstrap popovers
-    rcmail.addEventListener('menu-open', function(p) {
-        if (p.name == rcmail.env.swipe_menuname && $('.swipe-menu').is(':visible')) {
-            rcmail.swipe.setup_options();
-        }
-    });
 });

swipe.php

@@ -86,43 +86,32 @@ class swipe extends rcube_plugin
 
                 $this->include_stylesheet($this->local_skin_path() . '/swipe.css');
                 $this->include_script('swipe.js');
-                $this->rcube->output->add_label('swipe.swipeactions', 'swipe.markasflagged', 'swipe.markasunflagged', 'swipe.markasread',
+                $this->rcube->output->add_label('swipe.swipeoptions', 'swipe.markasflagged', 'swipe.markasunflagged', 'swipe.markasread',
                     'swipe.markasunread', 'refresh', 'moveto', 'reply', 'replyall', 'forward', 'select', 'swipe.deselect', 'compose');
                 $this->rcube->output->add_handler('swipeoptionslist', array($this, 'options_list'));
 
-                if ($this->rcube->task == 'mail') {
+                $this->options_menu();
-                    $this->add_hook('template_container', array($this, 'options_menu'));
-                }
-                elseif ($this->rcube->task == 'addressbook') {
-                    $this->add_button(array(
-                            'command' => 'plugin.swipe.options',
-                            'type' => 'link',
-                            'class' => 'button swipe',
-                            'title' => 'swipe.swipeactions',
-                            'innerclass' => 'inner',
-                            'label' => 'swipe.swipeactions'
-                        ), 'toolbar');
-                    $this->add_hook('render_page', array($this, 'options_menu'));
-                }
             }
         }
     }
 
-    public function options_menu($args)
+    public function options_menu()
     {
-        if ($args['name'] == 'listoptions' || ($this->rcube->task == 'addressbook' && $args['write'])) {
+        if ($this->_allowed_action('*')) {
-            // add additional menus from skins folder to list options menu
+            // add swipe actions link to the menu
+            $this->add_button(array(
+                    'command' => 'plugin.swipe.options',
+                    'type' => 'link',
+                    'class' => 'button swipe disabled',
+                    'classact' => 'button swipe',
+                    'title' => 'swipe.swipeoptions',
+                    'innerclass' => 'inner',
+                    'label' => 'swipe.swipeoptions'
+                ), 'toolbar'); // Using 'listcontrols' would be better but container does not exist in addressbook template
+
+            // add swipe actions popup menu
             $html = $this->rcube->output->just_parse("<roundcube:include file=\"$this->menu_file\" skinpath=\"plugins/swipe\" />");
-
+            $this->rcube->output->add_footer($html);
-            if ($this->rcube->task == 'addressbook') {
-                $html = html::div(array('id' => 'swipeoptions', 'class' => 'popupmenu'), $html);
-                $args['content'] = str_replace('</body>', $html . '</body>', $args['content']);
-            }
-            else {
-                $args['content'] .= $html;
-            }
-
-            return $args;
         }
     }