From ed032ef5b604ab5eea4a7ecaa8072f5bd3ad3d44 Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Thu, 9 Nov 2023 01:31:05 +0800
Subject: [PATCH] Fix the distance between the low-resolution lower panel and
 the exercise center and add a shortcut key to toggle the panel

---
 src/assets/css/style.scss            |  2 ++
 src/components/Practice/Practice.vue |  9 +++++++--
 src/locales/i18n.json                | 16 ++++++++++++++++
 src/types.ts                         |  4 +++-
 4 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/assets/css/style.scss b/src/assets/css/style.scss
index 7071af54..6ece42a9 100644
--- a/src/assets/css/style.scss
+++ b/src/assets/css/style.scss
@@ -70,6 +70,7 @@ html.dark {
     --toolbar-width: 40vw;
     --panel-width: 380rem;
     --toolbar-height: 48rem;
+    --panel-margin-left: calc(50% - var(--practice-wrapper-padding-right) / 2 + var(--toolbar-width) / 2 + 9vw);
   }
   .footer {
     .bottom {
@@ -93,6 +94,7 @@ html.dark {
     --panel-width: 30vw;
     --toolbar-width: 50vw;
     --toolbar-height: 40rem;
+    --panel-margin-left: calc(50% - var(--practice-wrapper-padding-right) / 2 + var(--toolbar-width) / 2 + 9vw);
   }
 
   .footer {
diff --git a/src/components/Practice/Practice.vue b/src/components/Practice/Practice.vue
index ad9395d4..ff1f741c 100644
--- a/src/components/Practice/Practice.vue
+++ b/src/components/Practice/Practice.vue
@@ -108,6 +108,10 @@ function toggleConciseMode() {
   settingStore.showPanel = !settingStore.showPanel
 }
 
+function togglePanel() {
+  settingStore.showPanel = !settingStore.showPanel
+}
+
 onMounted(() => {
   emitter.on(EventKey.next, next)
   emitter.on(EventKey.write, write)
@@ -123,6 +127,7 @@ onMounted(() => {
   emitter.on(ShortcutKey.OpenDictDetail, openDictDetail)
   emitter.on(ShortcutKey.ToggleTheme, toggleTheme)
   emitter.on(ShortcutKey.ToggleConciseMode, toggleConciseMode)
+  emitter.on(ShortcutKey.TogglePanel, togglePanel)
   practiceRef.getCurrentPractice()
 })
 
@@ -141,7 +146,7 @@ onUnmounted(() => {
   emitter.off(ShortcutKey.OpenDictDetail, openDictDetail)
   emitter.off(ShortcutKey.ToggleTheme, toggleTheme)
   emitter.off(ShortcutKey.ToggleConciseMode, toggleConciseMode)
-
+  emitter.off(ShortcutKey.TogglePanel, togglePanel)
 })
 
 </script>
@@ -153,7 +158,7 @@ onUnmounted(() => {
     <PracticeWord ref="practiceRef" v-else/>
     <Footer/>
   </div>
-<!--  <AddWordDialog></AddWordDialog>-->
+  <!--  <AddWordDialog></AddWordDialog>-->
   <DictModal :model-value="runtimeStore.showDictModal" @close="runtimeStore.showDictModal = false"/>
   <SettingModal v-if="runtimeStore.showSettingModal" @close="runtimeStore.showSettingModal = false"/>
   <Statistics/>
diff --git a/src/locales/i18n.json b/src/locales/i18n.json
index 7381712c..c2a33ed2 100644
--- a/src/locales/i18n.json
+++ b/src/locales/i18n.json
@@ -270,5 +270,21 @@
 		"ko": "",
 		"de": "",
 		"fr": ""
+	},
+	"TogglePanel": {
+		"en": "",
+		"zh": "显示/隐藏列表",
+		"id": "",
+		"tw": "",
+		"th": "",
+		"ru": "",
+		"vi": "",
+		"es": "",
+		"pt": "",
+		"ja": "",
+		"uk": "",
+		"ko": "",
+		"de": "",
+		"fr": ""
 	}
 }
\ No newline at end of file
diff --git a/src/types.ts b/src/types.ts
index a2cf57d0..9728b3fc 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -171,7 +171,7 @@ export const SaveDict = {
 }
 export const SaveConfig = {
   key: 'typing-word-config',
-  version: 7
+  version: 8
 }
 
 export enum ShortcutKey {
@@ -193,6 +193,7 @@ export enum ShortcutKey {
   OpenDictDetail = 'OpenDictDetail',
   ToggleTheme = 'ToggleTheme',
   ToggleConciseMode = 'ToggleConciseMode',
+  TogglePanel = 'TogglePanel'
 }
 
 export const DefaultShortcutKeyMap = {
@@ -214,6 +215,7 @@ export const DefaultShortcutKeyMap = {
   [ShortcutKey.ToggleTheme]: 'Ctrl+Q',
   [ShortcutKey.OpenDictDetail]: 'Ctrl+J',
   [ShortcutKey.ToggleConciseMode]: 'Ctrl+M',
+  [ShortcutKey.TogglePanel]: 'Ctrl+L',
 }