Merge pull request #172 from jason5ng32/dev

Improvements
jason5ng32 · Apr 12, 2024 · 7b2b67b · 7b2b67b
2 parents d248ed4 + 3dc6f96
commit 7b2b67b
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 3 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -409,6 +409,42 @@ export default {
           },
           description: this.$t('shortcutKeys.SpeedTestButton'),
         },
+        {
+          keys: "l",
+          action: () => {
+            this.scrollToElement("AdvancedTools", 80);
+            this.$refs.advancedToolsRef.navigateAndToggleOffcanvas('/pingtest');
+            this.$trackEvent('Nav', 'NavClick', 'PingTest');
+          },
+          description: this.$t('shortcutKeys.PingTest'),
+        },
+        {
+          keys: "t",
+          action: () => {
+            this.scrollToElement("AdvancedTools", 80);
+            this.$refs.advancedToolsRef.navigateAndToggleOffcanvas('/mtrtest');
+            this.$trackEvent('Nav', 'NavClick', 'MTRTest');
+          },
+          description: this.$t('shortcutKeys.MTRTest'),
+        },
+        {
+          keys: "r",
+          action: () => {
+            this.scrollToElement("AdvancedTools", 80);
+            this.$refs.advancedToolsRef.navigateAndToggleOffcanvas('/ruletest');
+            this.$trackEvent('Nav', 'NavClick', 'RuleTest');
+          },
+          description: this.$t('shortcutKeys.RuleTest'),
+        },
+        {
+          keys: "n",
+          action: () => {
+            this.scrollToElement("AdvancedTools", 80);
+            this.$refs.advancedToolsRef.navigateAndToggleOffcanvas('/dnsresolver');
+            this.$trackEvent('Nav', 'NavClick', 'DNSResolver');
+          },
+          description: this.$t('shortcutKeys.DNSResolver'),
+        },
         {
           keys: "m",
           action: () => {

diff --git a/src/components/advancedtools.vue b/src/components/advancedtools.vue
@@ -10,7 +10,7 @@
         </div>
         <div class="row">
             <div class="col-lg-3 col-md-6 col-12 mb-4" v-for="(card, index) in cards" :key="index">
-                <div class="jn-adv-card card jn-card" :class="{ 'dark-mode dark-mode-border': isDarkMode }" >
+                <div class="jn-adv-card card jn-card" :class="{ 'dark-mode dark-mode-border': isDarkMode }">
                     <div class="card-body" @click.prevent="navigateAndToggleOffcanvas(card.path)" role="button">
                         <h3 :class="{ 'mobile-h3': isMobile }">{{ card.icon }} {{ $t(card.titleKey) }}</h3>
                         <p class="opacity-75">{{ $t(card.noteKey) }}</p>
@@ -24,7 +24,19 @@
         <div :data-bs-theme="isDarkMode ? 'dark' : ''" class="offcanvas offcanvas-bottom" tabindex="-1"
             :class="[isMobile ? ' h-100' : 'jn-h-80']" id="offcanvasTools" aria-labelledby="offcanvasToolsLabel">
             <div class="offcanvas-header">
-                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+                <div class="input-group justify-content-end">
+                    <button type="button" :class="['btn', isDarkMode ? 'btn-dark dark-mode-refresh' : 'btn-light']"
+                        @click="fullScreen">
+                        <span v-if="!isFullScreen">
+                            <i class="bi bi-arrows-fullscreen"></i>
+                        </span>
+                        <span v-else>
+                            <i class="bi bi-fullscreen-exit"></i>
+                        </span>
+                    </button>
+                    <button type="button" :class="['btn', isDarkMode ? 'btn-dark dark-mode-refresh' : 'btn-light']"
+                        data-bs-dismiss="offcanvas" aria-label="Close"><i class="bi bi-x-lg"></i></button>
+                </div>
             </div>
             <div class="offcanvas-body mb-4" :class="[isMobile ? ' w-100' : 'jn-canvas-width']">
                 <router-view></router-view>
@@ -62,7 +74,8 @@ export default {
                 { path: '/mtrtest', icon: '📡', titleKey: 'mtrtest.Title', noteKey: 'advancedtools.MTRTestNote' },
                 { path: '/ruletest', icon: '🚏', titleKey: 'ruletest.Title', noteKey: 'advancedtools.RuleTestNote' },
                 { path: '/dnsresolver', icon: '🔦', titleKey: 'dnsresolver.Title', noteKey: 'advancedtools.DNSResolverNote' },
-            ]
+            ],
+            isFullScreen: false,
         }
     },
 
@@ -85,7 +98,25 @@ export default {
             }
             var offcanvas = new Offcanvas(document.getElementById('offcanvasTools'));
             offcanvas.show();
+        },
+
+        fullScreen() {
+            const offcanvas = document.getElementById('offcanvasTools');
+            if (offcanvas) {
+                offcanvas.style.transition = 'height 0.5s ease-in-out';
+                if (!this.isFullScreen) {
+                    offcanvas.style.height = '100%';
+                    this.isFullScreen = true;
+                } else {
+                    offcanvas.style.height = '80%';
+                    this.isFullScreen = false;
+                }
+                setTimeout(() => {
+                    offcanvas.style.transition = '';
+                }, 500);
+            }
         }
+
     },
 }
 </script>
@@ -99,6 +130,11 @@ export default {
     height: 80%;
 }
 
+.jn-h-100 {
+    height: 100%;
+    z-index: 10000;
+}
+
 .jn-canvas-width {
     width: fit-content;
     margin: auto;

diff --git a/src/locales/en.json b/src/locales/en.json
@@ -218,6 +218,10 @@
     "RefreshWebRTC": "Refresh WebRTC Test",
     "RefreshDNSLeakTest": "Refresh DNS Leak Test",
     "SpeedTestButton": "Start/Pause Speed Test",
+    "PingTest": "Open Global Latency Test panel",
+    "MTRTest": "Open MTR Test panel",
+    "RuleTest": "Open Rule Test panel",
+    "DNSResolver": "Open DNS Resolution panel",
     "ToggleMaps": "Toggle Maps",
     "IPCheck": "IP Check",
     "AddBingMapKey": "Add Bing Map API Key",

diff --git a/src/locales/fr.json b/src/locales/fr.json
@@ -218,6 +218,10 @@
         "RefreshWebRTC": "Actualiser le test WebRTC",
         "RefreshDNSLeakTest": "Actualiser le test de fuite DNS",
         "SpeedTestButton": "Démarrer/Pause le test de vitesse",
+        "PingTest": "Ouvrir le Test de latence mondial",
+        "MTRTest": "Ouvrir le Test MTR",
+        "RuleTest": "Ouvrir le Test de régles",
+        "DNSResolver": "Ouvrir le Résolution DNS",
         "ToggleMaps": "Activer/désactiver les cartes",
         "IPCheck": "Vérification IP",
         "AddBingMapKey": "Ajouter une clé API Bing Map",

diff --git a/src/locales/zh.json b/src/locales/zh.json
@@ -218,6 +218,10 @@
     "RefreshWebRTC": "刷新 WebRTC 测试",
     "RefreshDNSLeakTest": "刷新 DNS 泄漏测试",
     "SpeedTestButton": "开始/暂停网速测试",
+    "PingTest": "打开全球延迟测试面板",
+    "MTRTest": "打开全球路由测试面板",
+    "RuleTest": "打开规则测试面板",
+    "DNSResolver": "打开 DNS 解析器面板",
     "ToggleMaps": "切换地图显示",
     "IPCheck": "IP 查询",
     "AddBingMapKey": "添加 Bing Map API Key",