some more code cleanup

dev_contacts
PhilW 6 years ago
parent dd6c474836
commit 135b19939b

@ -90,8 +90,8 @@
color: #fff;
}
> div {
> span {
> .swipe-container {
> .swipe-action {
line-height: 100%;
font-size: 1.2em;
@ -165,7 +165,7 @@
position: absolute;
right: 0;
> span::before {
> .swipe-action::before {
float: right;
margin: 0 .5em 0 .25em;
}
@ -177,7 +177,7 @@
border-radius: 50%;
box-shadow: 0 0 10px lighten(@color-black, 75%);
> span {
> .swipe-action {
&::before {
float: none;
padding: 0;
@ -185,7 +185,7 @@
line-height: 1em;
}
> span {
> .swipe-label {
display: none;
}
}
@ -193,7 +193,7 @@
}
}
.swipe-active,
.swipe-active:not(#swipe-action),
.swipe-active > td {
background-color: @color-layout-list-background;
}

@ -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;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;margin:0 .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:0}#swipe-action>div.left>span::before{float:right;margin:0 .5em 0 .25em}#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}
#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>.swipe-container>.swipe-action{line-height:100%;font-size:1.2em}#swipe-action>.swipe-container>.swipe-action::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;margin:0 .25em 0 .5em}#swipe-action>.swipe-container>.swipe-action.archive::before{content:"\f187"}#swipe-action>.swipe-container>.swipe-action.checkmail::before{content:"\f021"}#swipe-action>.swipe-container>.swipe-action.delete::before{content:"\f2ed"}#swipe-action>.swipe-container>.swipe-action.flagged::before{content:"\f024"}#swipe-action>.swipe-container>.swipe-action.unflagged::before{content:"\f024";font-weight:400}#swipe-action>.swipe-container>.swipe-action.forward::before{content:"\f064"}#swipe-action>.swipe-container>.swipe-action.junk::before{content:"\f7e4"}#swipe-action>.swipe-container>.swipe-action.notjunk::before{content:"\f01c"}#swipe-action>.swipe-container>.swipe-action.move::before{content:"\f0b2"}#swipe-action>.swipe-container>.swipe-action.read::before{content:"\f111";font-weight:400}#swipe-action>.swipe-container>.swipe-action.unread::before{content:"\f111"}#swipe-action>.swipe-container>.swipe-action.reply::before{content:"\f3e5"}#swipe-action>.swipe-container>.swipe-action.replyall::before{content:"\f122"}#swipe-action>.swipe-container>.swipe-action.select::before{content:"\f14a";font-weight:400}#swipe-action>.swipe-container>.swipe-action.deselect::before{content:"\f0c8";font-weight:400}#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:10px;line-height:1em}#swipe-action>.swipe-container.down>.swipe-action>.swipe-label{display:none}.swipe-active:not(#swipe-action),.swipe-active>td{background-color:#fff}

@ -16,11 +16,18 @@
*/
rcube_webmail.prototype.swipe = {
position_target: function(obj, pos, vertical, max_move) {
position_target: function(obj, pos, transition, max_move) {
var translate = '';
if (pos)
translate = (vertical ? 'scale(' + (pos > 0 ? pos : 0) / max_move + ')' : 'translatex(' + pos + 'px)');
if (pos && transition) {
if (transition == 'scale') {
pos = pos > 0 ? pos : 0;
translate = 'scale(' + pos / max_move + ')';
}
else {
translate = transition + '(' + pos + 'px)';
}
}
if (bw.edge && $(obj).is('tr')) { // Edge does not support transform on <tr>s
$(obj).children('td').css('transform', translate);
@ -147,12 +154,7 @@ rcube_webmail.prototype.swipe = {
ret = rcmail.triggerEvent('swipe-action', {'direction': direction, 'obj': obj});
if (ret !== undefined) {
// abort if one of the handlers returned false
if (ret === false) {
return action;
}
else {
return ret;
}
return ret === false ? null : ret;
}
else if (action = actions[rcmail.env.swipe_actions[direction]]) {
if (!action.callback && action.command) {
@ -173,12 +175,16 @@ rcube_webmail.prototype.swipe = {
'type': function(e) { return e.pointerType; },
'pos': function(e, x) { return e.originalEvent[ x ? 'pageX' : 'pageY']; },
'clearswipe': function(e) {
rcmail.swipe.position_target(opts[swipedata.axis].target_obj, 0, swipedata.axis == 'vertical');
$('#swipe-action').removeClass().hide();
rcmail.swipe.position_target(opts[swipedata.axis].target_obj, 0);
opts[swipedata.axis].target_obj.removeClass('swipe-active');
swipedata = {};
rcmail.swipe.active = null;
// reset #swipe-action
$('#swipe-action').removeClass().hide();
$('.swipe-container').attr('class', 'swipe-container');
$('.swipe-action').attr('class', 'swipe-action');
if (opts.parent_obj)
opts.parent_obj.off(swipeevents.moveevent, rcube_event.cancel);
}
@ -252,17 +258,10 @@ rcube_webmail.prototype.swipe = {
var direction = (swipedata.axis == 'vertical' ? 'down' : (changeX < 0 ? 'left' : 'right'));
var action = rcmail.swipe.select_action(direction, opts.source_obj);
$('#swipe-action')
.addClass(temp_axis)
.data('callback', action.callback)
.children('div')
.removeClass()
.addClass(direction)
.children('span')
.removeClass()
.addClass(action.class)
.children('span')
.text(rcmail.gettext(action.text));
$('#swipe-action').attr('class', temp_axis).data('callback', action.callback);
$('.swipe-container').attr('class', 'swipe-container ' + direction);
$('.swipe-action').attr('class', 'swipe-action ' + action.class);
$('.swipe-label').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);
@ -270,8 +269,7 @@ rcube_webmail.prototype.swipe = {
'top': action_style.top,
'left': action_style.left,
'width': action_style.width,
'height': action_style.height,
'transform': ''
'height': action_style.height
}).show();
opts[swipedata.axis].target_obj.addClass('swipe-active');
rcmail.swipe.active = swipedata.axis; // set the active swipe
@ -292,8 +290,8 @@ rcube_webmail.prototype.swipe = {
$('#swipe-action').data('callback', null);
}
var vertical = swipedata.axis == 'vertical';
rcmail.swipe.position_target(opts[swipedata.axis].target_obj, vertical ? changeY : changeX, vertical, opts[swipedata.axis].maxmove);
var pos = swipedata.axis == 'vertical' ? changeY : changeX;
rcmail.swipe.position_target(opts[swipedata.axis].target_obj, pos, opts[swipedata.axis].transition, opts[swipedata.axis].maxmove);
})
.on(swipeevents.endevent, function(e) {
if (swipeevents.type(e) == 'touch' && swipedata.id == swipeevents.id(e) && rcmail.swipe.active &&
@ -319,8 +317,12 @@ $(document).ready(function() {
if (rcmail.message_list.draggable || !messagelist_container[0].addEventListener)
return;
var swipe_action = $('<div>').attr('id', 'swipe-action').append(
$('<div>').addClass('swipe-container').append($('<div>').addClass('swipe-action').append($('<span>').addClass('swipe-label')))
);
rcmail.swipe.parent = messagelist_container;
rcmail.swipe.parent.prepend($('<div>').attr('id', 'swipe-action').html($('<div>').append($('<span>').append($('<span>')))).hide());
rcmail.swipe.parent.prepend(swipe_action.hide());
// down swipe on message list container
var swipe_config = {
@ -329,6 +331,7 @@ $(document).ready(function() {
'vertical': {
'minmove': $(window).height() * 0.19,
'maxmove': $(window).height() * 0.2,
'transition': 'scale',
'action_sytle': function(o) {
return {
'top': '',
@ -374,6 +377,7 @@ $(document).ready(function() {
'horizontal': {
'minmove': row_width * 0.25,
'maxmove': row_width * 0.6,
'transition': 'translatex',
'action_sytle': function(o) {
return {
'top': o.position().top,

Loading…
Cancel
Save