auto scroll to selected item

src/components/mobile/ColorSelectionSheet.vue

@@ -8,7 +8,9 @@
         </f7-toolbar>
         <f7-page-content>
             <f7-block class="margin-vertical">
-                <f7-row class="padding-vertical padding-horizontal-half" v-for="(row, idx) in allColorRows" :key="idx">
+                <f7-row class="padding-vertical padding-horizontal-half"
+                        :class="{ 'row-has-selected-item': hasSelectedIcon(row) }"
+                        v-for="(row, idx) in allColorRows" :key="idx">
                     <f7-col class="text-align-center" v-for="colorInfo in row" :key="colorInfo.color">
                         <f7-icon f7="app_fill"
                                  :style="colorInfo.color | iconStyle('default', 'var(--default-icon-color)')"
@@ -65,11 +67,46 @@ 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);
+        },
+        hasSelectedIcon(row) {
+            if (!this.currentValue || !row || !row.length) {
+                return false;
+            }
+
+            for (let i = 0; i < row.length; i++) {
+                if (row[i].id === this.currentValue) {
+                    return true;
+                }
+            }
+
+            return false;
+        },
+        scrollToSelectedItem(parent) {
+            if (!parent || !parent.length) {
+                return;
+            }
+
+            const container = parent.find('.page-content');
+            const selectedItem = parent.find('.row.row-has-selected-item');
+
+            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);
         }
     }
 }

src/components/mobile/IconSelectionSheet.vue

@@ -8,7 +8,9 @@
         </f7-toolbar>
         <f7-page-content>
             <f7-block class="margin-vertical">
-                <f7-row class="padding-vertical-half padding-horizontal-half" v-for="(row, idx) in allIconRows" :key="idx">
+                <f7-row class="padding-vertical-half padding-horizontal-half"
+                        :class="{ 'row-has-selected-item': hasSelectedIcon(row) }"
+                        v-for="(row, idx) in allIconRows" :key="idx">
                     <f7-col class="text-align-center" v-for="iconInfo in row" :key="iconInfo.id">
                         <f7-icon :icon="iconInfo.icon"
                                  :style="color | iconStyle('default', 'var(--default-icon-color)')"
@@ -79,11 +81,46 @@ 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);
+        },
+        hasSelectedIcon(row) {
+            if (!this.currentValue || !row || !row.length) {
+                return false;
+            }
+
+            for (let i = 0; i < row.length; i++) {
+                if (row[i].id === this.currentValue) {
+                    return true;
+                }
+            }
+
+            return false;
+        },
+        scrollToSelectedItem(parent) {
+            if (!parent || !parent.length) {
+                return;
+            }
+
+            const container = parent.find('.page-content');
+            const selectedItem = parent.find('.row.row-has-selected-item');
+
+            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);
         }
     }
 }

src/components/mobile/ListItemSelectionSheet.vue

@@ -11,6 +11,7 @@
                 <f7-list-item link="#" no-chevron
                               v-for="(item, index) in items"
                               :key="item | itemKeyValue(index, keyField, valueType)"
+                              :class="{ 'list-item-selected': isSelected(item, index) }"
                               :value="item | itemKeyValue(index, valueField, valueType)"
                               :title="item | itemFieldContent(titleField, item, titleI18n)"
                               @click="onItemClicked(item, index)">
@@ -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: {

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);
         }
     }
 }

src/components/mobile/TwoColumnListItemSelectionSheet.vue

@@ -14,6 +14,7 @@
                             <f7-list-item link="#" no-chevron
                                           v-for="item in items"
                                           :key="item | itemFieldContent(primaryKeyField, item, false)"
+                                          :class="{ 'primary-list-item-selected': item === selectedPrimaryItem }"
                                           :value="item | itemFieldContent(primaryValueField, item, false)"
                                           :title="item | itemFieldContent(primaryTitleField, null, primaryTitleI18n)"
                                           :header="item | itemFieldContent(primaryHeaderField, null, primaryHeaderI18n)"
@@ -34,6 +35,7 @@
                             <f7-list-item link="#" no-chevron
                                           v-for="subItem in selectedPrimaryItem[primarySubItemsField]"
                                           :key="subItem | itemFieldContent(secondaryKeyField, subItem, false)"
+                                          :class="{ 'secondary-list-item-selected': isSecondarySelected(subItem) }"
                                           :value="subItem | itemFieldContent(secondaryValueField, subItem, false)"
                                           :title="subItem | itemFieldContent(secondaryTitleField, null, secondaryTitleI18n)"
                                           :header="subItem | itemFieldContent(secondaryHeaderField, null, secondaryHeaderI18n)"
@@ -123,9 +125,11 @@ export default {
         }
     },
     methods: {
-        onSheetOpen() {
+        onSheetOpen(event) {
             this.currentPrimaryValue = this.getPrimaryValueBySecondaryValue(this.value);
             this.currentSecondaryValue = this.value;
+            this.scrollToSelectedItem(event.$el, '.primary-list-container', 'li.primary-list-item-selected');
+            this.scrollToSelectedItem(event.$el, '.secondary-list-container', 'li.secondary-list-item-selected');
         },
         onSheetClosed() {
             this.$emit('update:show', false);
@@ -201,6 +205,27 @@ export default {
             }
 
             return null;
+        },
+        scrollToSelectedItem(parent, containerSelector, selectedItemSelector) {
+            if (!parent || !parent.length) {
+                return;
+            }
+
+            const container = parent.find(containerSelector);
+            const selectedItem = parent.find(selectedItemSelector);
+
+            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);
         }
     }
 }

src/views/mobile/statistics/Transaction.vue

@@ -204,10 +204,12 @@
         </f7-toolbar>
 
         <f7-popover class="date-popover-menu" :opened="showDatePopover"
+                    @popover:open="scrollPopoverToSelectedItem"
                     @popover:opened="showDatePopover = true" @popover:closed="showDatePopover = false">
             <f7-list>
                 <f7-list-item v-for="dateRange in allDateRanges"
                               :key="dateRange.type"
+                              :class="{ 'list-item-selected': query.dateType === dateRange.type }"
                               :title="dateRange.name | localized"
                               @click="setDateFilter(dateRange.type)">
                     <f7-icon slot="after" class="list-item-checked-icon" f7="checkmark_alt" v-if="query.dateType === dateRange.type"></f7-icon>
@@ -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: {

src/views/mobile/transactions/List.vue

@@ -229,10 +229,12 @@
         </f7-block>
 
         <f7-popover class="date-popover-menu" :opened="showDatePopover"
+                    @popover:open="scrollPopoverToSelectedItem"
                     @popover:opened="showDatePopover = true" @popover:closed="showDatePopover = false">
             <f7-list>
                 <f7-list-item v-for="dateRange in allDateRanges"
                               :key="dateRange.type"
+                              :class="{ 'list-item-selected': query.dateType === dateRange.type }"
                               :title="dateRange.name | localized"
                               @click="changeDateFilter(dateRange.type)">
                     <f7-icon slot="after" class="list-item-checked-icon" f7="checkmark_alt" v-if="query.dateType === dateRange.type"></f7-icon>
@@ -255,30 +257,32 @@
         </date-range-selection-sheet>
 
         <f7-popover class="type-popover-menu" :opened="showTypePopover"
+                    @popover:open="scrollPopoverToSelectedItem"
                     @popover:opened="showTypePopover = true" @popover:closed="showTypePopover = false">
             <f7-list>
-                <f7-list-item :title="$t('All')" @click="changeTypeFilter(0)">
+                <f7-list-item :class="{ 'list-item-selected': query.type === 0 }" :title="$t('All')" @click="changeTypeFilter(0)">
                     <f7-icon slot="after" class="list-item-checked-icon" f7="checkmark_alt" v-if="query.type === 0"></f7-icon>
                 </f7-list-item>
-                <f7-list-item :title="$t('Modify Balance')" @click="changeTypeFilter(1)">
+                <f7-list-item :class="{ 'list-item-selected': query.type === 1 }" :title="$t('Modify Balance')" @click="changeTypeFilter(1)">
                     <f7-icon slot="after" class="list-item-checked-icon" f7="checkmark_alt" v-if="query.type === 1"></f7-icon>
                 </f7-list-item>
-                <f7-list-item :title="$t('Income')" @click="changeTypeFilter(2)">
+                <f7-list-item :class="{ 'list-item-selected': query.type === 2 }" :title="$t('Income')" @click="changeTypeFilter(2)">
                     <f7-icon slot="after" class="list-item-checked-icon" f7="checkmark_alt" v-if="query.type === 2"></f7-icon>
                 </f7-list-item>
-                <f7-list-item :title="$t('Expense')" @click="changeTypeFilter(3)">
+                <f7-list-item :class="{ 'list-item-selected': query.type === 3 }" :title="$t('Expense')" @click="changeTypeFilter(3)">
                     <f7-icon slot="after" class="list-item-checked-icon" f7="checkmark_alt" v-if="query.type === 3"></f7-icon>
                 </f7-list-item>
-                <f7-list-item :title="$t('Transfer')" @click="changeTypeFilter(4)">
+                <f7-list-item :class="{ 'list-item-selected': query.type === 4 }" :title="$t('Transfer')" @click="changeTypeFilter(4)">
                     <f7-icon slot="after" class="list-item-checked-icon" f7="checkmark_alt" v-if="query.type === 4"></f7-icon>
                 </f7-list-item>
             </f7-list>
         </f7-popover>
 
         <f7-popover class="category-popover-menu" :opened="showCategoryPopover"
+                    @popover:open="scrollPopoverToSelectedItem"
                     @popover:opened="showCategoryPopover = true" @popover:closed="showCategoryPopover = false">
             <f7-list accordion-list>
-                <f7-list-item :title="$t('All')" @click="changeCategoryFilter('0')">
+                <f7-list-item :class="{ 'list-item-selected': query.categoryId === '0' }" :title="$t('All')" @click="changeCategoryFilter('0')">
                     <f7-icon slot="media" f7="rectangle_badge_checkmark"></f7-icon>
                     <f7-icon slot="after" class="list-item-checked-icon" f7="checkmark_alt" v-if="query.categoryId === '0'"></f7-icon>
                 </f7-list-item>
@@ -302,12 +306,13 @@
                     </f7-icon>
                     <f7-accordion-content>
                         <f7-list class="padding-left">
-                            <f7-list-item :title="$t('All')" @click="changeCategoryFilter(category.id)">
+                            <f7-list-item :class="{ 'list-item-selected': query.categoryId === category.id }" :title="$t('All')" @click="changeCategoryFilter(category.id)">
                                 <f7-icon slot="media" f7="rectangle_badge_checkmark"></f7-icon>
                                 <f7-icon slot="after" class="list-item-checked-icon" f7="checkmark_alt" v-if="query.categoryId === category.id"></f7-icon>
                             </f7-list-item>
                             <f7-list-item v-for="subCategory in category.subCategories"
                                           :key="subCategory.id"
+                                          :class="{ 'list-item-selected': query.categoryId === subCategory.id }"
                                           :title="subCategory.name"
                                           @click="changeCategoryFilter(subCategory.id)"
                             >
@@ -328,15 +333,17 @@
         </f7-popover>
 
         <f7-popover class="account-popover-menu" :opened="showAccountPopover"
+                    @popover:open="scrollPopoverToSelectedItem"
                     @popover:opened="showAccountPopover = true" @popover:closed="showAccountPopover = false">
             <f7-list>
-                <f7-list-item :title="$t('All')" @click="changeAccountFilter('0')">
+                <f7-list-item :class="{ 'list-item-selected': query.accountId === '0' }" :title="$t('All')" @click="changeAccountFilter('0')">
                     <f7-icon slot="media" f7="rectangle_badge_checkmark"></f7-icon>
                     <f7-icon slot="after" class="list-item-checked-icon" f7="checkmark_alt" v-if="query.accountId === '0'"></f7-icon>
                 </f7-list-item>
                 <f7-list-item v-for="account in allAccounts"
                               v-show="!account.hidden"
                               :key="account.id"
+                              :class="{ 'list-item-selected': query.accountId === account.id }"
                               :title="account.name"
                               @click="changeAccountFilter(account.id)"
                 >
@@ -677,6 +684,27 @@ export default {
                     self.$toast(error.message || error);
                 }
             });
+        },
+        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: {