mirror of
https://github.com/the-djmaze/snappymail.git
synced 2026-07-13 03:27:39 +03:00
Bugfix: scrollTop/scrollLeft never worked because .b-content has overflow:auto not the sub-div .content
This commit is contained in:
parent
b3dd0c51b5
commit
e1b274fcb4
10 changed files with 28 additions and 32 deletions
|
|
@ -271,7 +271,7 @@ class Selector {
|
||||||
|
|
||||||
init(contentVisible, contentScrollable, keyScope = 'all') {
|
init(contentVisible, contentScrollable, keyScope = 'all') {
|
||||||
this.oContentVisible = contentVisible;
|
this.oContentVisible = contentVisible;
|
||||||
this.oContentScrollable = contentScrollable;
|
this.oContentScrollable = contentScrollable ? contentScrollable[0] : null;
|
||||||
|
|
||||||
if (this.oContentVisible && this.oContentScrollable) {
|
if (this.oContentVisible && this.oContentScrollable) {
|
||||||
$(this.oContentVisible)
|
$(this.oContentVisible)
|
||||||
|
|
@ -519,14 +519,15 @@ class Selector {
|
||||||
focusedHeight = $focused.outerHeight();
|
focusedHeight = $focused.outerHeight();
|
||||||
|
|
||||||
if (list && list[0] && list[0].focused()) {
|
if (list && list[0] && list[0].focused()) {
|
||||||
this.oContentScrollable.scrollTop(0);
|
this.oContentScrollable.scrollTop = 0;
|
||||||
return true;
|
return true;
|
||||||
} else if (pos && (0 > pos.top || pos.top + focusedHeight > visibleHeight)) {
|
} else if (pos && (0 > pos.top || pos.top + focusedHeight > visibleHeight)) {
|
||||||
this.oContentScrollable.scrollTop(
|
let top = this.oContentScrollable.scrollTop + pos.top;
|
||||||
|
this.oContentScrollable.scrollTop =
|
||||||
0 > pos.top
|
0 > pos.top
|
||||||
? this.oContentScrollable.scrollTop() + pos.top - offset
|
? top - offset
|
||||||
: this.oContentScrollable.scrollTop() + pos.top - visibleHeight + focusedHeight + offset
|
: top - visibleHeight + focusedHeight + offset
|
||||||
);
|
;
|
||||||
|
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|
@ -535,19 +536,14 @@ class Selector {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @param {boolean=} fast = false
|
|
||||||
* @returns {boolean}
|
* @returns {boolean}
|
||||||
*/
|
*/
|
||||||
scrollToTop(fast = false) {
|
scrollToTop() {
|
||||||
if (!this.oContentVisible || !this.oContentScrollable) {
|
if (!this.oContentVisible || !this.oContentScrollable) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (fast || 50 > this.oContentScrollable.scrollTop()) {
|
this.oContentScrollable.scrollTop = 0;
|
||||||
this.oContentScrollable.scrollTop(0);
|
|
||||||
} else {
|
|
||||||
this.oContentScrollable.stop().animate({ scrollTop: 0 }, 200);
|
|
||||||
}
|
|
||||||
|
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -128,7 +128,7 @@ class AbstractSettingsScreen extends AbstractScreen {
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
$('#rl-content .b-settings .b-content .content').scrollTop(0);
|
$('#rl-content .b-settings .b-content')[0].scrollTop = 0;
|
||||||
}
|
}
|
||||||
// --
|
// --
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -86,6 +86,7 @@
|
||||||
width: @contacts-popup-left-width;
|
width: @contacts-popup-left-width;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
-webkit-overflow-scrolling: touch;
|
-webkit-overflow-scrolling: touch;
|
||||||
|
|
|
||||||
|
|
@ -125,6 +125,7 @@ html.rl-no-preview-pane {
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
z-index: 101;
|
z-index: 101;
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -258,6 +258,7 @@ html.rl-no-preview-pane {
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
-webkit-overflow-scrolling: touch;
|
-webkit-overflow-scrolling: touch;
|
||||||
border-radius: @rlLowBorderRadius;
|
border-radius: @rlLowBorderRadius;
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
|
||||||
.buttonUp, .buttonUnFull, .buttonFull {
|
.buttonUp, .buttonUnFull, .buttonFull {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
|
||||||
|
|
@ -92,6 +92,7 @@
|
||||||
right: @rlLowMargin;
|
right: @rlLowMargin;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border: @rlMainBorderSize solid @rlMainDarkColor;
|
border: @rlMainBorderSize solid @rlMainDarkColor;
|
||||||
|
|
|
||||||
|
|
@ -619,9 +619,8 @@ class ContactsPopupView extends AbstractViewNext {
|
||||||
|
|
||||||
onBuild(dom) {
|
onBuild(dom) {
|
||||||
this.oContentVisible = $('.b-list-content', dom);
|
this.oContentVisible = $('.b-list-content', dom);
|
||||||
this.oContentScrollable = $('.content', this.oContentVisible);
|
|
||||||
|
|
||||||
this.selector.init(this.oContentVisible, this.oContentScrollable, KeyState.ContactList);
|
this.selector.init(this.oContentVisible, this.oContentVisible, KeyState.ContactList);
|
||||||
|
|
||||||
key('delete', KeyState.ContactList, () => {
|
key('delete', KeyState.ContactList, () => {
|
||||||
this.deleteCommand();
|
this.deleteCommand();
|
||||||
|
|
|
||||||
|
|
@ -64,7 +64,7 @@ class FolderListMailBoxUserView extends AbstractViewNext {
|
||||||
|
|
||||||
onBuild(dom) {
|
onBuild(dom) {
|
||||||
this.oContentVisible = $('.b-content', dom);
|
this.oContentVisible = $('.b-content', dom);
|
||||||
this.oContentScrollable = $('.content', this.oContentVisible);
|
this.oContentScrollable = this.oContentVisible ? this.oContentVisible[0] : null;
|
||||||
|
|
||||||
const self = this,
|
const self = this,
|
||||||
isMobile = Settings.appSettingsGet('mobile'),
|
isMobile = Settings.appSettingsGet('mobile'),
|
||||||
|
|
@ -220,12 +220,11 @@ class FolderListMailBoxUserView extends AbstractViewNext {
|
||||||
focusedHeight = focused.outerHeight();
|
focusedHeight = focused.outerHeight();
|
||||||
|
|
||||||
if (pos && (0 > pos.top || pos.top + focusedHeight > visibleHeight)) {
|
if (pos && (0 > pos.top || pos.top + focusedHeight > visibleHeight)) {
|
||||||
|
let top = this.oContentScrollable.scrollTop + pos.top;
|
||||||
if (0 > pos.top) {
|
if (0 > pos.top) {
|
||||||
this.oContentScrollable.scrollTop(this.oContentScrollable.scrollTop() + pos.top - offset);
|
this.oContentScrollable.scrollTop = top - offset;
|
||||||
} else {
|
} else {
|
||||||
this.oContentScrollable.scrollTop(
|
this.oContentScrollable.scrollTop = top - visibleHeight + focusedHeight + offset;
|
||||||
this.oContentScrollable.scrollTop() + pos.top - visibleHeight + focusedHeight + offset
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return true;
|
return true;
|
||||||
|
|
|
||||||
|
|
@ -739,9 +739,8 @@ class MessageListMailBoxUserView extends AbstractViewNext {
|
||||||
const self = this;
|
const self = this;
|
||||||
|
|
||||||
this.oContentVisible = $('.b-content', dom);
|
this.oContentVisible = $('.b-content', dom);
|
||||||
this.oContentScrollable = $('.content', this.oContentVisible);
|
|
||||||
|
|
||||||
this.selector.init(this.oContentVisible, this.oContentScrollable, KeyState.MessageList);
|
this.selector.init(this.oContentVisible, this.oContentVisible, KeyState.MessageList);
|
||||||
|
|
||||||
if (this.mobile) {
|
if (this.mobile) {
|
||||||
dom.on('click', () => {
|
dom.on('click', () => {
|
||||||
|
|
|
||||||
|
|
@ -656,9 +656,8 @@ class MessageViewMailBoxUserView extends AbstractViewNext {
|
||||||
this.messageDomFocused(KeyState.MessageView === value && !inFocus());
|
this.messageDomFocused(KeyState.MessageView === value && !inFocus());
|
||||||
});
|
});
|
||||||
|
|
||||||
this.oMessageScrollerDom = dom.find('.messageItem .content');
|
const node = dom.find('.messageItem');
|
||||||
this.oMessageScrollerDom =
|
this.oMessageScrollerDom = node && node[0] ? node[0] : null;
|
||||||
this.oMessageScrollerDom && this.oMessageScrollerDom[0] ? this.oMessageScrollerDom : null;
|
|
||||||
|
|
||||||
this.initShortcuts();
|
this.initShortcuts();
|
||||||
}
|
}
|
||||||
|
|
@ -784,7 +783,7 @@ class MessageViewMailBoxUserView extends AbstractViewNext {
|
||||||
key('tab, shift+tab, left', KeyState.MessageView, (event, handler) => {
|
key('tab, shift+tab, left', KeyState.MessageView, (event, handler) => {
|
||||||
if (!this.fullScreenMode() && this.message() && Layout.NoPreview !== this.layout()) {
|
if (!this.fullScreenMode() && this.message() && Layout.NoPreview !== this.layout()) {
|
||||||
if (event && handler && 'left' === handler.shortcut) {
|
if (event && handler && 'left' === handler.shortcut) {
|
||||||
if (this.oMessageScrollerDom && 0 < this.oMessageScrollerDom.scrollLeft()) {
|
if (this.oMessageScrollerDom && 0 < this.oMessageScrollerDom.scrollLeft) {
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -869,10 +868,10 @@ class MessageViewMailBoxUserView extends AbstractViewNext {
|
||||||
|
|
||||||
scrollMessageToTop() {
|
scrollMessageToTop() {
|
||||||
if (this.oMessageScrollerDom) {
|
if (this.oMessageScrollerDom) {
|
||||||
if (Magics.Size50px < this.oMessageScrollerDom.scrollTop()) {
|
if (Magics.Size50px < this.oMessageScrollerDom.scrollTop) {
|
||||||
this.oMessageScrollerDom.scrollTop(Magics.Size50px).animate({ 'scrollTop': 0 }, Magics.Time200ms);
|
this.oMessageScrollerDom.scrollTop = Magics.Size50px;
|
||||||
} else {
|
} else {
|
||||||
this.oMessageScrollerDom.scrollTop(0);
|
this.oMessageScrollerDom.scrollTop = 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
windowResize();
|
windowResize();
|
||||||
|
|
@ -881,7 +880,7 @@ class MessageViewMailBoxUserView extends AbstractViewNext {
|
||||||
|
|
||||||
scrollMessageToLeft() {
|
scrollMessageToLeft() {
|
||||||
if (this.oMessageScrollerDom) {
|
if (this.oMessageScrollerDom) {
|
||||||
this.oMessageScrollerDom.scrollLeft(0);
|
this.oMessageScrollerDom.scrollLeft = 0;
|
||||||
windowResize();
|
windowResize();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue