optimize ui

src/Mobile.vue

@@ -18,19 +18,41 @@ export default {
                 theme: 'ios',
                 autoDarkTheme: self.$settings.isEnableAutoDarkMode(),
                 routes: routes,
-                touch: {
+                actions: {
-                    tapHold: true
+                    animate: self.$settings.isEnableAnimate(),
+                    backdrop: true,
+                    closeOnEscape: true
                 },
-                sheet: {
+                dialog: {
+                    animate: self.$settings.isEnableAnimate(),
+                    backdrop: true
+                },
+                popover: {
+                    animate: self.$settings.isEnableAnimate(),
                     backdrop: true,
                     closeOnEscape: true
                 },
                 popup: {
-                    swipeToClose: true,
+                    animate: self.$settings.isEnableAnimate(),
+                    backdrop: true,
+                    closeOnEscape: true,
+                    swipeToClose: true
+                },
+                sheet: {
+                    animate: self.$settings.isEnableAnimate(),
+                    backdrop: true,
                     closeOnEscape: true
                 },
+                smartSelect: {
+                    routableModals: false
+                },
+                touch: {
+                    tapHold: true,
+                    disableContextMenu: true
+                },
                 view: {
-                    animate : self.$settings.isEnableAnimate()
+                    animate: self.$settings.isEnableAnimate(),
+                    stackPages: true
                 }
             }
         }

src/mobile-main.js

@@ -126,6 +126,7 @@ Vue.prototype.$alert = function (message, confirmCallback) {
     this.$f7.dialog.create({
         title: i18n.t('global.app.title'),
         text: i18n.t(message, parameters),
+        animate: settings.isEnableAnimate(),
         buttons: [
             {
                 text: i18n.t('OK'),
@@ -138,6 +139,7 @@ Vue.prototype.$confirm = function (message, confirmCallback, cancelCallback) {
     this.$f7.dialog.create({
         title: i18n.t('global.app.title'),
         text: i18n.t(message),
+        animate: settings.isEnableAnimate(),
         buttons: [
             {
                 text: i18n.t('Cancel'),
@@ -210,24 +212,16 @@ new Vue({
     render: h => h(App),
     mounted: function () {
         const app = this.$f7;
+        const $$ = app.$;
 
-        window.addEventListener('popstate', () => {
+        app.on('pageBeforeOut',  () => {
-            if (document.querySelectorAll('.modal-in').length > 0) {
+            if ($$('.modal-in').length) {
-                app.dialog.close();
+                app.actions.close('.actions-modal.modal-in', false);
-                app.sheet.close();
+                app.dialog.close('.dialog.modal-in', false);
-                app.popup.close();
+                app.popover.close('.popover.modal-in', false);
-                app.actions.close();
+                app.popup.close('.popup.modal-in', false);
-                return false;
+                app.sheet.close('.sheet-modal.modal-in', false);
             }
-        }, false);
+        });
-
-        document.addEventListener('keydown', (event) => {
-            if (event.key === 'Escape' || event.key === 'Esc' || event.keyCode === 27 || event.which === 27) {
-                if (document.querySelectorAll('.modal-in').length > 0) {
-                    app.dialog.close();
-                    return false;
-                }
-            }
-        }, false);
     }
 });