Elastic: menu scrolling improvements

skins/elastic/swipe.less

@@ -7,6 +7,9 @@
 
 #listoptions-menu {
   overflow-y: auto;
+  margin: -0.5em -1em;
+  padding: .8em 1em;
+
   &::-webkit-scrollbar {
     -webkit-appearance: none;
   }
@@ -26,6 +29,7 @@
   }
 
   > fieldset.swipe-menu {
+    display: none;
     margin-top: 1.5rem;
   }
 }

skins/elastic/swipe.min.css

@@ -1 +1 @@
-#listoptions-menu{overflow-y:auto}#listoptions-menu::-webkit-scrollbar{-webkit-appearance:none}#listoptions-menu::-webkit-scrollbar:vertical{width:.6rem}#listoptions-menu::-webkit-scrollbar:horizontal{height:.6rem}#listoptions-menu::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,0.4);border-radius:.3rem;border:2px solid #fff}#listoptions-menu>fieldset.swipe-menu{margin-top:1.5rem}#swipe-action{position:absolute;background-color:#f1f3f4;color:#161b1d;display:flex;align-items:center;border-collapse:collapse}#swipe-action.checkmail,#swipe-action.select,#swipe-action.deselect{background-color:#8b9fa7;color:#fff}#swipe-action.delete,#swipe-action.junk{background-color:#ff5552;color:#fff}#swipe-action.flagged,#swipe-action.unflagged,#swipe-action.read,#swipe-action.unread{background-color:#37beff;color:#fff}#swipe-action.forward,#swipe-action.reply,#swipe-action.replyall,#swipe-action.notjunk{background-color:#41b849;color:#fff}#swipe-action.move,#swipe-action.archive{background-color:#ffd452;color:#fff}#swipe-action>div.left{position:absolute;right:.5em}#swipe-action>div.down{margin:0 auto}#swipe-action>div.down>span::before{width:auto;float:none;margin:0;margin-bottom:.2em;padding:0}#swipe-action>div>span{line-height:100%;font-size:1.2em}#swipe-action>div>span::before{font-size:1.25em;display:block;float:left;margin:0 .25rem 0 0;width:1.18em;height:1em;font-family:'Icons';font-style:normal;font-weight:900;text-decoration:inherit;text-align:center;speak:none;font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;padding:0 1.25em 0 .5em}#swipe-action>div>span.checkmail::before{content:"\f021"}#swipe-action>div>span.delete::before{content:"\f2ed"}#swipe-action>div>span.flagged::before{content:"\f024"}#swipe-action>div>span.forward::before{content:"\f064"}#swipe-action>div>span.unflagged::before{content:"\f024";font-weight:400}#swipe-action>div>span.move::before{content:"\f0b2"}#swipe-action>div>span.read::before{content:"\f111";font-weight:400}#swipe-action>div>span.unread::before{content:"\f111"}#swipe-action>div>span.reply::before{content:"\f3e5"}#swipe-action>div>span.replyall::before{content:"\f122"}#swipe-action>div>span.select::before{content:"\f14a";font-weight:400}#swipe-action>div>span.deselect::before{content:"\f0c8";font-weight:400}#swipe-action>div>span.archive::before{content:"\f187"}#swipe-action>div>span.junk::before{content:"\f7e4"}#swipe-action>div>span.notjunk::before{content:"\f01c"}.swipe-active,.swipe-active>td{background-color:#fff}#messagelist-content{overscroll-behavior:contain}#messagelist.swipe-active{display:block;height:100%}
+#listoptions-menu{overflow-y:auto;margin:-0.5em -1em;padding:.8em 1em}#listoptions-menu::-webkit-scrollbar{-webkit-appearance:none}#listoptions-menu::-webkit-scrollbar:vertical{width:.6rem}#listoptions-menu::-webkit-scrollbar:horizontal{height:.6rem}#listoptions-menu::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,0.4);border-radius:.3rem;border:2px solid #fff}#listoptions-menu>fieldset.swipe-menu{display:none;margin-top:1.5rem}#swipe-action{position:absolute;background-color:#f1f3f4;color:#161b1d;display:flex;align-items:center;border-collapse:collapse}#swipe-action.checkmail,#swipe-action.select,#swipe-action.deselect{background-color:#8b9fa7;color:#fff}#swipe-action.delete,#swipe-action.junk{background-color:#ff5552;color:#fff}#swipe-action.flagged,#swipe-action.unflagged,#swipe-action.read,#swipe-action.unread{background-color:#37beff;color:#fff}#swipe-action.forward,#swipe-action.reply,#swipe-action.replyall,#swipe-action.notjunk{background-color:#41b849;color:#fff}#swipe-action.move,#swipe-action.archive{background-color:#ffd452;color:#fff}#swipe-action>div.left{position:absolute;right:.5em}#swipe-action>div.down{margin:0 auto}#swipe-action>div.down>span::before{width:auto;float:none;margin:0;margin-bottom:.2em;padding:0}#swipe-action>div>span{line-height:100%;font-size:1.2em}#swipe-action>div>span::before{font-size:1.25em;display:block;float:left;margin:0 .25rem 0 0;width:1.18em;height:1em;font-family:'Icons';font-style:normal;font-weight:900;text-decoration:inherit;text-align:center;speak:none;font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;padding:0 1.25em 0 .5em}#swipe-action>div>span.checkmail::before{content:"\f021"}#swipe-action>div>span.delete::before{content:"\f2ed"}#swipe-action>div>span.flagged::before{content:"\f024"}#swipe-action>div>span.forward::before{content:"\f064"}#swipe-action>div>span.unflagged::before{content:"\f024";font-weight:400}#swipe-action>div>span.move::before{content:"\f0b2"}#swipe-action>div>span.read::before{content:"\f111";font-weight:400}#swipe-action>div>span.unread::before{content:"\f111"}#swipe-action>div>span.reply::before{content:"\f3e5"}#swipe-action>div>span.replyall::before{content:"\f122"}#swipe-action>div>span.select::before{content:"\f14a";font-weight:400}#swipe-action>div>span.deselect::before{content:"\f0c8";font-weight:400}#swipe-action>div>span.archive::before{content:"\f187"}#swipe-action>div>span.junk::before{content:"\f7e4"}#swipe-action>div>span.notjunk::before{content:"\f01c"}.swipe-active,.swipe-active>td{background-color:#fff}#messagelist-content{overscroll-behavior:contain}#messagelist.swipe-active{display:block;height:100%}

swipe.js

@@ -438,9 +438,10 @@ $(document).ready(function() {
     }
 
     // add swipe options to list options menu
-    rcmail.addEventListener('menu-open', function(p) {
-        if (p.name == rcmail.env.swipe_menuname) {
-            if (!rcmail.message_list.draggable && $('.swipe-menu').find('select,input').length > 0) {
+    rcmail.addEventListener('beforemenu-open', function(name) {
+        if (name == rcmail.env.swipe_menuname) {
+            var menu_obj = $('.swipe-menu');
+            if (!rcmail.message_list.draggable && menu_obj.find('select,input').length > 0) {
                 // set form values
                 $.each(['left', 'right', 'down'], function() {
                     var option_input = $('.swipeoptions-' + this).find('select,input').first();
@@ -457,10 +458,10 @@ $(document).ready(function() {
                     }
                 });
 
-                $('.swipe-menu').show();
+                menu_obj.show();
             }
             else {
-                $('.swipe-menu').hide();
+                menu_obj.hide();
             }
         }
     });