From 2b3cc006bdc8f427236d9cc11dc1e13d04dde02b Mon Sep 17 00:00:00 2001 From: PhilW Date: Fri, 18 Jan 2019 18:09:27 +0000 Subject: [PATCH] improve visualization of vertical swipes (#1) --- README.md | 7 ++- skins/elastic/swipe.less | 92 +++++++++++++++++++++---------------- skins/elastic/swipe.min.css | 2 +- swipe.js | 55 ++++++++++------------ 4 files changed, 83 insertions(+), 73 deletions(-) diff --git a/README.md b/README.md index ef87439..54c34fe 100644 --- a/README.md +++ b/README.md @@ -24,7 +24,7 @@ folder for details on the skin license. Known issues ------------ * No support in IE -* Edge does not support `touch-action: pan-down;` CSS - [bug report](https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/10573036/) +* No vertical swipe in Edge, no support for `touch-action: pan-down;` CSS - [bug report](https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/10573036/) Install ------- @@ -95,9 +95,12 @@ an action: { 'class': '', 'text': '', - 'callback': function(p) { } + 'callback': function(p) { }, + 'command': '' }; ``` +Note: Only 1 of callback and command need to be supplied. If no callback is +defined then the command is passed to the standard Swipe callback function. [rcplugrepo]: https://plugins.roundcube.net/packages/johndoh/swipe [releases]: https://github.com/johndoh/roundcube-swipe/releases diff --git a/skins/elastic/swipe.less b/skins/elastic/swipe.less index d391b79..1e786e3 100644 --- a/skins/elastic/swipe.less +++ b/skins/elastic/swipe.less @@ -36,13 +36,26 @@ #swipe-action { position: absolute; - background-color: lighten(@color-black, 85%); - color: @color-black; display: flex; align-items: center; border-collapse: collapse; - &.checkmail, + &.horizontal { + background-color: lighten(@color-black, 85%); + color: @color-black; + } + + &.vertical { + background-color: transparent; + color: lighten(@color-black, 70%); + top: 2em; + height: 1.5em; + } + + &.checkmail { + color: @color-main; + } + &.select, &.deselect { background-color: lighten(@color-black, 50%); @@ -78,23 +91,6 @@ } > div { - &.left { - position: absolute; - right: 0.5em; - } - - &.down { - margin: 0 auto; - - > span::before { - width: auto; - float: none; - margin: 0; - margin-bottom: 0.2em; - padding: 0; - } - } - > span { line-height: 100%; font-size: 1.2em; @@ -104,6 +100,10 @@ padding: 0 1.25em 0 0.5em; } + &.archive::before { + content: @fa-var-archive; + } + &.checkmail::before { content: @fa-var-sync; } @@ -116,12 +116,20 @@ content: @fa-var-flag; } + &.unflagged::before { + .font-icon-regular(@fa-var-flag); + } + &.forward::before { content: @fa-var-share; } - &.unflagged::before { - .font-icon-regular(@fa-var-flag); + &.junk::before { + content: @fa-var-fire-alt; + } + + &.notjunk::before { + content: @fa-var-inbox; } &.move::before { @@ -151,17 +159,30 @@ &.deselect::before { .font-icon-regular(@fa-var-square); } + } - &.archive::before { - content: @fa-var-archive; - } - - &.junk::before { - content: @fa-var-fire-alt; - } + &.left { + position: absolute; + right: 0.5em; + } - &.notjunk::before { - content: @fa-var-inbox; + &.down { + margin: 0 auto; + background-color: #fff; + border-radius: 50%; + box-shadow: 0 0 10px lighten(@color-black, 75%); + + > span { + &::before { + float: none; + padding: 0; + margin: 10px; + line-height: 1em; + } + + > span { + display: none; + } } } } @@ -170,13 +191,4 @@ .swipe-active, .swipe-active > td { background-color: @color-layout-list-background; -} - -#messagelist-content { - overscroll-behavior: contain; -} - -#messagelist.swipe-active { - display: block; - height: 100%; } \ No newline at end of file diff --git a/skins/elastic/swipe.min.css b/skins/elastic/swipe.min.css index 8c8a1ad..26b12cb 100644 --- a/skins/elastic/swipe.min.css +++ b/skins/elastic/swipe.min.css @@ -1 +1 @@ -#listoptions-menu{overflow-y:auto;margin:-0.5em -1em;padding:.75em 1.25em}#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%} \ No newline at end of file +#listoptions-menu{overflow-y:auto;margin:-0.5em -1em;padding:.75em 1.25em}#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;display:flex;align-items:center;border-collapse:collapse}#swipe-action.horizontal{background-color:#f1f3f4;color:#161b1d}#swipe-action.vertical{background-color:transparent;color:#c5cfd3;top:2em;height:1.5em}#swipe-action.checkmail{color:#37beff}#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>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.archive::before{content:"\f187"}#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.unflagged::before{content:"\f024";font-weight:400}#swipe-action>div>span.forward::before{content:"\f064"}#swipe-action>div>span.junk::before{content:"\f7e4"}#swipe-action>div>span.notjunk::before{content:"\f01c"}#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.left{position:absolute;right:.5em}#swipe-action>div.down{margin:0 auto;background-color:#fff;border-radius:50%;box-shadow:0 0 10px #d4dbde}#swipe-action>div.down>span::before{float:none;padding:0;margin:10px;line-height:1em}#swipe-action>div.down>span>span{display:none}.swipe-active,.swipe-active>td{background-color:#fff} \ No newline at end of file diff --git a/swipe.js b/swipe.js index 1eee0ea..1858b90 100644 --- a/swipe.js +++ b/swipe.js @@ -4,7 +4,7 @@ * @licstart The following is the entire license notice for the * JavaScript code in this file. * - * Copyright (C) 2018 Philip Weir + * Copyright (C) 2018-2019 Philip Weir * * The JavaScript code in this page is free software: you can redistribute it * and/or modify it under the terms of the GNU General Public License @@ -16,16 +16,18 @@ */ rcube_webmail.prototype.swipe = { - position_target: function(obj, pos, vertical) { + position_target: function(obj, pos, vertical, max_move) { var translate = ''; if (pos) - translate = (vertical ? 'translatey' : 'translatex') + '(' + pos + 'px)'; + translate = (vertical ? 'scale(' + (pos > 0 ? pos : 0) / max_move + ')' : 'translatex(' + pos + 'px)'); - if (bw.edge && $(obj).is('tr')) // Edge does not support transform on s + if (bw.edge && $(obj).is('tr')) { // Edge does not support transform on s $(obj).children('td').css('transform', translate); - else + } + else { $(obj).css('transform', translate); + } }, action_callback: function(command, type, props) { @@ -246,7 +248,7 @@ rcube_webmail.prototype.swipe = { return; // do not interfere with normal message list scrolling - if (temp_axis == 'vertical' && (changeY < 0 || opts.vertical.target_obj.parent().scrollTop() != 0)) { + if (temp_axis == 'vertical' && rcmail.swipe.parent.scrollTop() != 0) { if (bw.pointer && swipedata.scrollable) rcmail.swipe.parent.css('touch-action', 'pan-y'); @@ -262,6 +264,7 @@ rcube_webmail.prototype.swipe = { var action = rcmail.swipe.select_action(direction, opts.source_obj); $('#swipe-action') + .addClass(temp_axis) .data('callback', action.callback) .children('div') .removeClass() @@ -269,7 +272,8 @@ rcube_webmail.prototype.swipe = { .children('span') .removeClass() .addClass(action.class) - .text(rcmail.gettext(action.text)); + .children('span') + .text(rcmail.gettext(action.text)); if (!opts[swipedata.axis].target_obj.hasClass('swipe-active')) { var action_style = opts[swipedata.axis].action_sytle(opts[swipedata.axis].target_obj); @@ -277,7 +281,8 @@ rcube_webmail.prototype.swipe = { 'top': action_style.top, 'left': action_style.left, 'width': action_style.width, - 'height': action_style.height + 'height': action_style.height, + 'transform': '' }).show(); opts[swipedata.axis].target_obj.addClass('swipe-active'); rcmail.swipe.active = swipedata.axis; // set the active swipe @@ -294,11 +299,12 @@ rcube_webmail.prototype.swipe = { } else { // reset the swipe if the user takes the row back to the start - $('#swipe-action').removeClass(); + $('#swipe-action').removeClass(action.class); $('#swipe-action').data('callback', null); } - rcmail.swipe.position_target(opts[swipedata.axis].target_obj, swipedata.axis == 'vertical' ? changeY : changeX, swipedata.axis == 'vertical'); + var vertical = swipedata.axis == 'vertical'; + rcmail.swipe.position_target(opts[swipedata.axis].target_obj, vertical ? changeY : changeX, vertical, opts[swipedata.axis].maxmove); }) .on(swipeevents.endevent, function(e) { if (swipeevents.type(e) == 'touch' && swipedata.id == swipeevents.id(e) && rcmail.swipe.active && @@ -325,24 +331,24 @@ $(document).ready(function() { return; rcmail.swipe.parent = messagelist_container; - rcmail.swipe.parent.prepend($('
').attr('id', 'swipe-action').html($('
').append($(''))).hide()); + rcmail.swipe.parent.prepend($('
').attr('id', 'swipe-action').html($('
').append($('').append($('')))).hide()); // down swipe on message list container var swipe_config = { 'source_obj': rcmail.swipe.parent, 'parent_obj': null, 'vertical': { - 'minmove': $(window).height() * 0.1, + 'minmove': $(window).height() * 0.19, 'maxmove': $(window).height() * 0.2, 'action_sytle': function(o) { return { - 'top': 0, + 'top': '', 'left': 0, 'width': rcmail.swipe.parent.width() + 'px', - 'height': $(window).height() * 0.2 + 'px' + 'height': '' }; }, - 'target_obj': $(rcmail.gui_objects.messagelist), + 'target_obj': $('#swipe-action'), 'uid': null } }; @@ -359,7 +365,7 @@ $(document).ready(function() { // allow vertical pointer events to fire (if one is configured) var action = rcmail.swipe.select_action('down'); // Edge does not support pan-down, only pan-y - rcmail.swipe.parent.css('touch-action', action.callback ? (bw.edge ? 'none' : 'pan-down') : 'pan-y'); + rcmail.swipe.parent.css('touch-action', action.callback && ! bw.edge ? 'pan-down' : 'pan-y'); } }).trigger('scroll'); }); @@ -389,20 +395,6 @@ $(document).ready(function() { }, 'target_obj': $('#' + props.row.id), 'uid': props.uid - }, - 'vertical': { - 'minmove': $(window).height() * 0.1, - 'maxmove': $(window).height() * 0.2, - 'action_sytle': function(o) { - return { - 'top': o.children('tbody').position().top, - 'left': o.children('tbody').position().left, - 'width': o.children('tbody').width() + 'px', - 'height': $(window).height() * 0.2 + 'px' - }; - }, - 'target_obj': $(rcmail.gui_objects.messagelist), - 'uid': null } }; @@ -442,6 +434,9 @@ $(document).ready(function() { if (name == rcmail.env.swipe_menuname) { var menu_obj = $('.swipe-menu'); if (!rcmail.message_list.draggable && menu_obj.find('select,input').length > 0) { + if (bw.edge) + menu_obj.find('.swipeoptions-down').hide(); + menu_obj.show(); } else {