banananetwork
/
roundcubemail-swipe
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

improve visualization of vertical swipes (#1)

Browse Source
dev_contacts
PhilW 6 years ago
parent 66f04815e6
commit 2b3cc006bd
4 changed files with 83 additions and 73 deletions
Show Stats Download Patch File Download Diff File

7
README.md
Unescape Escape View File

@ -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': '<class name for the action box>',
'text': '<text displayed in the action box>',
'callback': function(p) { <your action here> }
'callback': function(p) { <your action here> },
'command': '<roundcube 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

92
skins/elastic/swipe.less
Unescape Escape View File

@ -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%;
}

2
skins/elastic/swipe.min.css vendored
Unescape Escape View File

@ -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%}
#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}

55
swipe.js
Unescape Escape View File

@ -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 <tr>s
if (bw.edge && $(obj).is('tr')) { // Edge does not support transform on <tr>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($('<div>').attr('id', 'swipe-action').html($('<div>').append($('<span>'))).hide());
rcmail.swipe.parent.prepend($('<div>').attr('id', 'swipe-action').html($('<div>').append($('<span>').append($('<span>')))).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 {

Write Preview
Loading…
Cancel
Save