Compare commits

...

11 Commits

@ -1,6 +1,14 @@
Roundcube Webmail Swipe
=======================
Version 0.3 (2020-04-27, rc-1.4.4)
=================================================
* Update command enabling after (req RC cb8c078)
Version 0.2 (2020-01-03, rc-1.4.2)
=================================================
* Better use of colours from core
Version 0.1 (2019-10-27, rc-1.4)
=================================================
* Add swipe support on contacts list

@ -148,7 +148,7 @@ an action:
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
[rcplugrepo]: https://plugins.roundcube.net/#/packages/johndoh/swipe
[releases]: https://github.com/johndoh/roundcube-swipe/releases
[gpl]: https://www.gnu.org/licenses/gpl.html
[pointer]: https://caniuse.com/#feat=pointer

@ -5,7 +5,7 @@
"homepage": "https://github.com/johndoh/roundcube-swipe/",
"license": "GPL-3.0",
"type": "roundcube-plugin",
"version": "0.1-git",
"version": "0.3-git",
"authors": [
{
"name": "Philip Weir",
@ -13,19 +13,13 @@
"role": "Developer"
}
],
"repositories": [
{
"type": "composer",
"url": "https://plugins.roundcube.net"
}
],
"require": {
"php": ">=5.2.1",
"roundcube/plugin-installer": ">=0.1.2"
},
"extra": {
"roundcube": {
"min-version": "1.4-dev"
"min-version": "1.4-git"
}
}
}

@ -5,6 +5,10 @@
@import (reference) "../../../../skins/elastic/styles/variables";
@import (reference) "../../../../skins/elastic/styles/mixins";
// Calculate default colors from default list background color
@color-swipe-default-background: contrast(@color-layout-list-background, darken(@color-layout-list-background, 10%), lighten(@color-layout-list-background, 40%));
@color-swipe-default: contrast(@color-swipe-default-background, lighten(@color-swipe-default-background, 30%), darken(@color-swipe-default-background, 40%), 57%);
#swipe-action {
position: absolute;
display: flex;
@ -12,55 +16,38 @@
border-collapse: collapse;
&.horizontal {
background-color: lighten(@color-black, 85%);
color: lighten(@color-black, 50%);
&.swipe_active,
&.swipe_mark {
background-color: fadeout(@color-main, 85%);
color: @color-main;
}
&.swipe_danger {
background-color: @color-message-error-box-background;
color: @color-message-error;
}
&.swipe_move {
background-color: @color-message-warning-box-background;
color: @color-message-warning;
}
&.swipe_success,
&.swipe_compose {
background-color: @color-message-success-box-background;
color: @color-message-success;
}
background-color: @color-swipe-default-background;
color: @color-swipe-default;
}
&.vertical {
background-color: transparent;
color: lighten(@color-black, 70%);
top: 2em;
height: 1.5em;
z-index: 1000;
color: @color-swipe-default;
}
&.horizontal,
&.vertical > .swipe-container {
&.swipe_active,
&.swipe_mark {
color: @color-main;
background-color: @color-message-information;
color: @color-message-text;
}
&.swipe_move {
color: @color-message-warning;
&.swipe_danger {
background-color: @color-message-error;
color: @color-message-error-text;
}
&.swipe_danger {
color: @color-message-error;
&.swipe_move {
background-color: @color-message-warning;
color: @color-message-warning-text;
}
&.swipe_success,
&.swipe_compose {
color: @color-message-success;
background-color: @color-message-success;
color: @color-message-success-text;
}
}
@ -74,7 +61,7 @@
opacity: 1;
&::before {
margin: 0 .25em 0 .5em;
margin: 0 .5rem;
font-size: inherit
}
}
@ -85,21 +72,21 @@
.swipe-action::before {
float: right;
margin: 0 .5em 0 .25em;
}
}
&.down {
margin: 0 auto;
background-color: #fff;
padding: .01rem;
background-color: @color-layout-list-background;
border-radius: 50%;
box-shadow: 0 0 10px lighten(@color-black, 75%);
border: 1px solid @color-swipe-default-background;
.swipe-action {
&::before {
float: none;
padding: 0;
margin: .4em;
margin: .4rem;
padding: .25rem;
line-height: 1;
font-size: 1.2em;
width: auto;

@ -1 +1 @@
#swipe-action{position:absolute;display:flex;align-items:center;border-collapse:collapse}#swipe-action>.swipe-container.down .swipe-action>.swipe-label,.toolbar.menu a.button.swipe{display:none}#swipe-action.horizontal{background-color:#f1f3f4;color:#8b9fa7}#swipe-action.horizontal.swipe_active,#swipe-action.horizontal.swipe_mark{background-color:rgba(55,190,255,.15);color:#37beff}#swipe-action.horizontal.swipe_danger{background-color:rgba(255,85,82,.15);color:#ff5552}#swipe-action.horizontal.swipe_move{background-color:rgba(255,255,102,.25);color:#ffd452}#swipe-action.horizontal.swipe_compose,#swipe-action.horizontal.swipe_success{background-color:rgba(65,184,73,.15);color:#41b849}#swipe-action.vertical{background-color:transparent;color:#c5cfd3;top:2em;height:1.5em;z-index:1000}#swipe-action.vertical.swipe_active,#swipe-action.vertical.swipe_mark{color:#37beff}#swipe-action.vertical.swipe_move{color:#ffd452}#swipe-action.vertical.swipe_danger{color:#ff5552}#swipe-action.vertical.swipe_compose,#swipe-action.vertical.swipe_success{color:#41b849}#swipe-action>.swipe-container{margin:0;padding:0;list-style-type:none}#swipe-action>.swipe-container .swipe-action{font-size:1.2em;opacity:1}#swipe-action>.swipe-container .swipe-action::before{margin:0 .25em 0 .5em;font-size:inherit}#swipe-action>.swipe-container.left{position:absolute;right:0}#swipe-action>.swipe-container.left .swipe-action::before{float:right;margin:0 .5em 0 .25em}#swipe-action>.swipe-container.down{margin:0 auto;background-color:#fff;border-radius:50%;box-shadow:0 0 10px #d4dbde}#swipe-action>.swipe-container.down .swipe-action::before{float:none;padding:0;margin:.4em;line-height:1;font-size:1.2em;width:auto;height:auto}.swipe-active:not(#swipe-action),.swipe-active>td{background-color:#fff}html.layout-phone.touch:not(.ie) .toolbar.menu a.button.swipe,html.layout-small.touch:not(.ie) .toolbar.menu a.button.swipe{display:inline-block}html.layout-phone.touch:not(.ie) .toolbar.menu a.button.swipe:before,html.layout-small.touch:not(.ie) .toolbar.menu a.button.swipe:before{content:"\f25a"}html.edge #swipeoptionsmenu>.swipeoptions-down{display:none}
#swipe-action{position:absolute;display:flex;align-items:center;border-collapse:collapse}#swipe-action>.swipe-container.down .swipe-action>.swipe-label,.toolbar.menu a.button.swipe{display:none}#swipe-action.horizontal{background-color:#e6e6e6;color:grey}#swipe-action.vertical{top:2em;z-index:1000;color:grey}#swipe-action.horizontal.swipe_active,#swipe-action.horizontal.swipe_mark,#swipe-action.vertical>.swipe-container.swipe_active,#swipe-action.vertical>.swipe-container.swipe_mark{background-color:#37beff;color:#fff}#swipe-action.horizontal.swipe_danger,#swipe-action.vertical>.swipe-container.swipe_danger{background-color:#ff5552;color:#fff}#swipe-action.horizontal.swipe_move,#swipe-action.vertical>.swipe-container.swipe_move{background-color:#ffd452;color:#2c363a}#swipe-action.horizontal.swipe_compose,#swipe-action.horizontal.swipe_success,#swipe-action.vertical>.swipe-container.swipe_compose,#swipe-action.vertical>.swipe-container.swipe_success{background-color:#41b849;color:#fff}#swipe-action>.swipe-container{margin:0;padding:0;list-style-type:none}#swipe-action>.swipe-container .swipe-action{font-size:1.2em;opacity:1}#swipe-action>.swipe-container .swipe-action::before{margin:0 .5rem;font-size:inherit}#swipe-action>.swipe-container.left{position:absolute;right:0}#swipe-action>.swipe-container.left .swipe-action::before{float:right}#swipe-action>.swipe-container.down{margin:0 auto;padding:.01rem;background-color:#fff;border-radius:50%;border:1px solid #e6e6e6}#swipe-action>.swipe-container.down .swipe-action::before{float:none;margin:.4rem;padding:.25rem;line-height:1;font-size:1.2em;width:auto;height:auto}.swipe-active:not(#swipe-action),.swipe-active>td{background-color:#fff}html.layout-phone.touch:not(.ie) .toolbar.menu a.button.swipe,html.layout-small.touch:not(.ie) .toolbar.menu a.button.swipe{display:inline-block}html.layout-phone.touch:not(.ie) .toolbar.menu a.button.swipe:before,html.layout-small.touch:not(.ie) .toolbar.menu a.button.swipe:before{content:"\f25a"}html.edge #swipeoptionsmenu>.swipeoptions-down{display:none}

@ -34,7 +34,9 @@ rcube_webmail.prototype.swipe = {
}
}
if (bw.edge && $(obj).is('tr')) { // Edge does not support transform on <tr>s
// Edge (Trident) does not support transform on <tr>s
// Roundcube 1.4 detects Edge Trident version as 537.36 see #6952
if (bw.edge && (bw.vendver < 75 || bw.vendver > 537) && $(obj).is('tr')) {
$(obj).children('td').css('transform', translate);
}
else {
@ -59,8 +61,7 @@ rcube_webmail.prototype.swipe = {
rcmail.mark_message(command);
}
else if (type == 'compose') {
rcmail.enable_command(command, true);
rcmail.command(command, '', props.obj, props.originalEvent);
rcmail.command(command, '', props.obj, props.originalEvent, true);
}
else if (type == 'select') {
rcmail.env.swipe_list.highlight_row(props.uid, true);
@ -138,7 +139,7 @@ rcube_webmail.prototype.swipe = {
'command': obj && obj.hasClass('flagged') ? 'mark/unflagged' : 'mark/flagged'
},
'swipe-select': {
'class': (obj && obj.hasClass('selected') ? 'select invert' : 'select all') + ' swipe_active',
'class': (obj && obj.hasClass('selected') ? 'select invert' : 'selection') + ' swipe_active',
'text': obj && obj.hasClass('selected') ? 'swipe.deselect' : 'select',
'command': obj && obj.hasClass('selected') ? 'select/deselect' : 'select/select'
},
@ -313,11 +314,11 @@ rcube_webmail.prototype.swipe = {
// do not activate if there is no callback
if (((swipedata.axis == 'vertical' && changeY > opts[swipedata.axis].minmove) ||
(swipedata.axis == 'horizontal' && (changeX < (opts[swipedata.axis].minmove * -1) || changeX > opts[swipedata.axis].minmove))) && action.callback) {
$('#swipe-action').addClass(action.class);
$('#swipe-action.horizontal,#swipe-action.vertical > .swipe-container').addClass(action.class);
}
else {
// reset the swipe if the user takes the row back to the start
$('#swipe-action').removeClass(action.class);
$('#swipe-action.horizontal,#swipe-action.vertical > .swipe-container').removeClass(action.class);
$('#swipe-action').data('callback', null);
}
@ -341,8 +342,8 @@ rcube_webmail.prototype.swipe = {
},
set_scroll_css: function() {
// Edge does not support pan-down, only pan-y
if (bw.pointer && rcmail.swipe.parent.scrollTop() == 0 && !bw.edge) {
// Edge (Trident) does not support pan-down, only pan-y
if (bw.pointer && rcmail.swipe.parent.scrollTop() == 0 && !(bw.edge && bw.vendver < 75)) {
// allow vertical pointer events to fire (if one is configured)
var action = rcmail.swipe.select_action('down');
rcmail.swipe.parent.css('touch-action', action.callback ? 'pan-down' : 'pan-y');

Loading…
Cancel
Save