From 49a60eeaa10ff4246f67c995364fe0c477d35a93 Mon Sep 17 00:00:00 2001
From: undefined <i@undefined.moe>
Date: Tue, 22 Feb 2022 00:43:17 +0800
Subject: [PATCH] ui: enhance font selection

---
 packages/ui-default/locales/zh.yaml                | 1 +
 packages/ui-default/package.json                   | 2 +-
 packages/ui-default/pages/api.page.styl            | 2 +-
 packages/ui-default/pages/home_preference.page.jsx | 4 ++++
 4 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/ui-default/locales/zh.yaml b/packages/ui-default/locales/zh.yaml
index 48ede8d46..7e88c93d4 100644
--- a/packages/ui-default/locales/zh.yaml
+++ b/packages/ui-default/locales/zh.yaml
@@ -124,6 +124,7 @@ CLOSE: 关闭
 Code blocks: 代码区块
 Code language: 代码语言
 Code: 代码
+codeFontFamily: 代码字体
 collapse: 收缩
 Comment: 评论
 Comments: 评论
diff --git a/packages/ui-default/package.json b/packages/ui-default/package.json
index a9a8c9482..ce3aac223 100644
--- a/packages/ui-default/package.json
+++ b/packages/ui-default/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@hydrooj/ui-default",
-  "version": "4.32.0",
+  "version": "4.32.1",
   "author": "undefined <i@undefined.moe>",
   "license": "AGPL-3.0",
   "main": "hydro.js",
diff --git a/packages/ui-default/pages/api.page.styl b/packages/ui-default/pages/api.page.styl
index 7ec42c949..1fbc32fa2 100644
--- a/packages/ui-default/pages/api.page.styl
+++ b/packages/ui-default/pages/api.page.styl
@@ -3,7 +3,7 @@
   padding: 5px 40px 0px 0px !important
 
 .graphiql-container .docExplorerWrap
-  font-family: "Source Code Pro", "Consolas" !important
+  font-family: var(--code-font-family) !important
 
 .graphiql-container .doc-explorer-back
   overflow: hidden;
diff --git a/packages/ui-default/pages/home_preference.page.jsx b/packages/ui-default/pages/home_preference.page.jsx
index 81cfa1ac2..212f76d73 100644
--- a/packages/ui-default/pages/home_preference.page.jsx
+++ b/packages/ui-default/pages/home_preference.page.jsx
@@ -74,6 +74,10 @@ const page = new NamedPage('home_preference', () => {
     this.style.fontFamily = this.getAttribute('value');
     this.textContent = i18n(this.textContent.trim());
   });
+  function updateFont() {
+    this.style.fontFamily = $(this).val();
+  }
+  $('[name="fontFamily"], [name="codeFontFamily"]').on('change', updateFont).each(updateFont);
 });
 
 export default page;