diff --git a/src/components/mobile/ColorSelectionSheet.vue b/src/components/mobile/ColorSelectionSheet.vue index 047fe6d1..e21f00d6 100644 --- a/src/components/mobile/ColorSelectionSheet.vue +++ b/src/components/mobile/ColorSelectionSheet.vue @@ -8,7 +8,9 @@ - + - + @@ -67,8 +68,9 @@ export default { this.$emit('input', this.currentValue); this.$emit('update:show', false); }, - onSheetOpen() { + onSheetOpen(event) { this.currentValue = this.value; + this.scrollToSelectedItem(event.$el); }, onSheetClosed() { this.$emit('update:show', false); @@ -83,6 +85,27 @@ export default { return this.currentValue === item; } } + }, + scrollToSelectedItem(parent) { + if (!parent || !parent.length) { + return; + } + + const container = parent.find('.page-content'); + const selectedItem = parent.find('li.list-item-selected'); + + if (!container.length || !selectedItem.length) { + return; + } + + let targetPos = selectedItem.offset().top - container.offset().top - parseInt(container.css('padding-top'), 10) + - (container.outerHeight() - selectedItem.outerHeight()) / 2; + + if (targetPos <= 0) { + return; + } + + container.scrollTop(targetPos); } }, filters: { diff --git a/src/components/mobile/TreeViewSelectionSheet.vue b/src/components/mobile/TreeViewSelectionSheet.vue index 08979663..e470f485 100644 --- a/src/components/mobile/TreeViewSelectionSheet.vue +++ b/src/components/mobile/TreeViewSelectionSheet.vue @@ -84,8 +84,9 @@ export default { } }, methods: { - onSheetOpen() { + onSheetOpen(event) { this.currentValue = this.value; + this.scrollToSelectedItem(event.$el); }, onSheetClosed() { this.$emit('update:show', false); @@ -119,6 +120,27 @@ export default { } else { return this.currentValue === subItem; } + }, + scrollToSelectedItem(parent) { + if (!parent || !parent.length) { + return; + } + + const container = parent.find('.page-content'); + const selectedItem = parent.find('.treeview-item .treeview-item-selected'); + + if (!container.length || !selectedItem.length) { + return; + } + + let targetPos = selectedItem.offset().top - container.offset().top - parseInt(container.css('padding-top'), 10) + - (container.outerHeight() - selectedItem.outerHeight()) / 2; + + if (targetPos <= 0) { + return; + } + + container.scrollTop(targetPos); } } } diff --git a/src/components/mobile/TwoColumnListItemSelectionSheet.vue b/src/components/mobile/TwoColumnListItemSelectionSheet.vue index 6901bab9..4e2563af 100644 --- a/src/components/mobile/TwoColumnListItemSelectionSheet.vue +++ b/src/components/mobile/TwoColumnListItemSelectionSheet.vue @@ -14,6 +14,7 @@ @@ -790,6 +792,27 @@ export default { totalNonNegativeAmount: totalNonNegativeAmount, items: allDataItems } + }, + scrollPopoverToSelectedItem(event) { + if (!event || !event.$el || !event.$el.length) { + return; + } + + const container = event.$el.find('.popover-inner'); + const selectedItem = event.$el.find('li.list-item-selected'); + + if (!container.length || !selectedItem.length) { + return; + } + + let targetPos = selectedItem.offset().top - container.offset().top - parseInt(container.css('padding-top'), 10) + - (container.outerHeight() - selectedItem.outerHeight()) / 2; + + if (targetPos <= 0) { + return; + } + + container.scrollTop(targetPos); } }, filters: { diff --git a/src/views/mobile/transactions/List.vue b/src/views/mobile/transactions/List.vue index fbaa886f..a11cbb83 100644 --- a/src/views/mobile/transactions/List.vue +++ b/src/views/mobile/transactions/List.vue @@ -229,10 +229,12 @@ @@ -255,30 +257,32 @@ - + - + - + - + - + - + @@ -302,12 +306,13 @@ - + @@ -328,15 +333,17 @@