ui: allow font customization

3 years ago · 9b2c36efbf
parent cf1195a6ee
commit 9b2c36efbf
13 changed files with 93 additions and 31 deletions
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@ -34,7 +34,6 @@ jobs:
      run: |
        yarn build
        yarn build:ui:production
-        ./packages/geoip/download.sh
    - name: Lint
      run: yarn lint:ci
    - name: Publish
--- a/package.json
+++ b/package.json
@ -28,15 +28,15 @@
    "license": "AGPL-3.0-only",
    "devDependencies": {
        "@types/cross-spawn": "^6.0.2",
-        "@types/node": "^16.11.22",
+        "@types/node": "^16.11.25",
        "@types/semver": "^7.3.9",
-        "@typescript-eslint/eslint-plugin": "5.11.0",
-        "@typescript-eslint/parser": "5.11.0",
+        "@typescript-eslint/eslint-plugin": "5.12.0",
+        "@typescript-eslint/parser": "5.12.0",
        "cac": "^6.7.12",
        "cross-env": "^7.0.3",
        "cross-spawn": "^7.0.3",
        "esbuild": "0.14.3",
-        "eslint": "^8.8.0",
+        "eslint": "^8.9.0",
        "eslint-config-airbnb-typescript": "12.3.1",
        "eslint-import-resolver-typescript": "2.5.0",
        "eslint-plugin-import": "2.25.4",
--- a/packages/ui-default/common/variables.inc.styl
+++ b/packages/ui-default/common/variables.inc.styl
@ -2,9 +2,9 @@
 $grid-padding = 15px // half gutter

 // fonts
-$primary-font-family = "Open Sans", "Seravek", "Segoe UI", "Verdana", "PingFang SC", "Hiragino Sans GB", "Lantinghei SC", "Microsoft Yahei", "WenQuanYi Micro Hei", "sans"
-$header-font-family = "Open Sans", "Seravek", "Segoe UI", "Verdana", "PingFang SC", "Lantinghei SC", "Microsoft Yahei", "Hiragino Sans GB", "Microsoft Sans Serif", "WenQuanYi Micro Hei", "sans-serif"
-$code-font-family = "monaco", "Source Code Pro", "Consolas", "Lucida Console", "monospace"
+$primary-font-family = var(--font-family)
+$header-font-family = var(--font-family)
+$code-font-family = var(--code-font-family)

 // primary palette
 $default-color = #ddd
--- a/packages/ui-default/locales/zh.yaml
+++ b/packages/ui-default/locales/zh.yaml
@ -323,6 +323,7 @@ File: 文件
 Filename: 文件名
 Files: 文件
 Filter: 过滤
+fontFamily: 字体
 Footer: 页脚
 Footnote: 脚注
 Forgot Password and/or Username: 忘记密码和/或用户名
@ -458,6 +459,7 @@ Memory: 内存
 Message {0} not found.: 消息 {0} 不存在。
 Messages: 消息
 Method: 方法
+Microsoft Yahei: 微软雅黑
 Moderator: 管理员
 Month: 月
 Monthly Popular: 月度最受欢迎
@ -549,6 +551,7 @@ Permission: 权限
 Permissions: 权限
 Pick a problem randomly based on current filter: 根据当前过滤条件随机选择一道题
 Pin: 置顶
+PingFang SC: 苹方简体
 Plan: 计划
 Please attend contest to see the problems.: 请参加比赛来查看题目。
 Please claim the assignment to see the problems.: 认领作业后才可以查看作业内容。
@ -863,6 +866,7 @@ We will check code similarity after this contest.: 我们会在赛后检查代
 WeChat Visibility: 微信可见性
 WeChat: 微信
 Week: 周
+WenQuanYi Micro Hei: 文泉驿
 What is domain?: 什么是域?
 What is this?: 这是什么？
 What's domain?: 什么是域？
--- a/packages/ui-default/misc/Page.ts
+++ b/packages/ui-default/misc/Page.ts
@ -24,13 +24,13 @@ export class Page {
 }

 export class NamedPage extends Page {
-  constructor(name: string | string[], afterLoading = null, beforeLoading = null) {
+  constructor(name: string | string[], afterLoading: (pagename: string) => any = null, beforeLoading = null) {
    super(name, false, afterLoading, beforeLoading);
  }
 }

 export class AutoloadPage extends Page {
-  constructor(name: string | string[], afterLoading = null, beforeLoading = null) {
+  constructor(name: string | string[], afterLoading: (pagename: string) => any = null, beforeLoading = null) {
    super(name, true, afterLoading, beforeLoading);
  }
 }
--- a/packages/ui-default/misc/typography.styl
+++ b/packages/ui-default/misc/typography.styl
@ -472,8 +472,13 @@ h1, h2, h3, h4, h5, h6
    color: darken(black, 40%)

 textarea
-  font-family: "monaco", "Consolas", "Source Code Pro", "Lucida Console", "monospace" !important
+  font-family: $code-font-family !important

 :focus
  outline: 0px;
  outline-offset: 2px;
+
+@font-face
+  font-family: "XiaoLai SC";
+  font-display: swap;
+  src: url('https://raw.githubusercontent.com/lxgw/kose-font/master/TTF%20(Simplified%20Chinese)/XiaolaiSC-Regular.ttf') format('truetype');
--- a/packages/ui-default/package.json
+++ b/packages/ui-default/package.json
@ -1,6 +1,6 @@
 {
  "name": "@hydrooj/ui-default",
-  "version": "4.31.19",
+  "version": "4.32.0",
  "author": "undefined <i@undefined.moe>",
  "license": "AGPL-3.0",
  "main": "hydro.js",
@ -33,7 +33,7 @@
    "emojis-keywords": "2.0.0",
    "emojis-list": "2.1.0",
    "esbuild-loader": "^2.18.0",
-    "eslint": "^8.8.0",
+    "eslint": "^8.9.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-import-resolver-webpack": "^0.13.2",
    "eslint-plugin-import": "^2.25.4",
@ -42,7 +42,7 @@
    "fancy-log": "^1.3.3",
    "file-loader": "^6.2.0",
    "friendly-errors-webpack-plugin": "^1.7.0",
-    "graphiql": "^1.5.17",
+    "graphiql": "^1.5.19",
    "gulp": "^4.0.2",
    "gulp-cli": "^2.3.0",
    "gulp-iconfont": "^11.0.1",
@ -59,7 +59,7 @@
    "monaco-editor-nls": "^2.0.0",
    "monaco-editor-webpack-plugin": "^7.0.1",
    "monaco-themes": "^0.4.0",
-    "nanoid": "^3.2.0",
+    "nanoid": "^3.3.0",
    "normalize.css": "^8.0.1",
    "nprogress": "^0.2.0",
    "pickadate": "^3.6.4",
@ -117,8 +117,8 @@
    "markdown-it-table-of-contents": "^0.6.0",
    "mongodb": "^3.7.3",
    "nunjucks": "^3.2.3",
-    "react-query": "^3.34.14",
-    "streamsaver": "^2.0.5",
+    "react-query": "^3.34.15",
+    "streamsaver": "^2.0.6",
    "xss": "^1.0.10"
  }
 }
--- a/packages/ui-default/pages/home_preference.page.jsx
+++ b/packages/ui-default/pages/home_preference.page.jsx
@ -2,7 +2,7 @@ import { NamedPage } from 'vj/misc/Page';
 import i18n from 'vj/utils/i18n';
 import tpl from 'vj/utils/tpl';

-const page = new NamedPage('home_preference', () => {
+function initCodeLangHelper() {
  function setOptions($el, options) {
    $el.empty();
    $.each(options, (key, value) => {
@ -66,6 +66,14 @@ const page = new NamedPage('home_preference', () => {
  $('#codelang-sub-select').on('change', function () {
    $('[name="codeLang"]').val(this.value);
  });
+}
+
+const page = new NamedPage('home_preference', () => {
+  initCodeLangHelper();
+  $('[name="fontFamily"] option, [name="codeFontFamily"] option').each(function () {
+    this.style.fontFamily = this.getAttribute('value');
+    this.textContent = i18n(this.textContent.trim());
+  });
 });

 export default page;
--- a/packages/ui-default/pages/problem_detail.page.jsx
+++ b/packages/ui-default/pages/problem_detail.page.jsx
@ -231,8 +231,6 @@ const page = new NamedPage(['problem_detail', 'contest_detail_problem', 'homewor
            { value: UiContext.pdoc.stats.WA, name: 'WA' },
            { value: UiContext.pdoc.stats.RE, name: 'RE' },
            { value: UiContext.pdoc.stats.CE, name: 'CE' },
-            { value: UiContext.pdoc.stats.SE, name: 'SE' },
-            { value: UiContext.pdoc.stats.IGN, name: 'IGN' },
          ],
        },
      ],
--- a/packages/ui-default/pages/problem_main.page.js
+++ b/packages/ui-default/pages/problem_main.page.js
@ -205,7 +205,7 @@ async function handleOperation(operation) {
    await request.post('', { operation, pids, ...payload });
    Notification.success(i18n(`Selected problems have been ${operation === 'copy' ? 'copie' : operation}d.`));
    await delay(2000);
-    window.location.reload();
+    updateSelection(true);
  } catch (error) {
    Notification.error(error.message);
  }
--- a/packages/ui-default/setting.yaml
+++ b/packages/ui-default/setting.yaml
@ -1,3 +1,29 @@
+fontFamily:
+  type:
+    Open Sans: Open Sans
+    Seravek: Seravek
+    Segoe UI: Segoe UI
+    Verdana: Verdana
+    PingFang SC: PingFang SC
+    Hiragino Sans GB: Hiragino Sans GB
+    Microsoft Yahei: Microsoft Yahei
+    WenQuanYi Micro Hei: WenQuanYi Micro Hei
+    sans: sans
+    XiaoLai SC: 小赖 SC
+  family: setting_display
+  category: preference
+  value: Open Sans
+codeFontFamily:
+  type:
+    monaco: Monaco
+    Source Code Pro: Source Code Pro
+    Consolas: Consolas
+    Lucida Console: Lucida Console
+    monospace: monospace
+    Fira Code: Fira Code
+  family: setting_display
+  category: preference
+  value: Source Code Pro
 footer_extra_html:
  type: textarea
  name: footer_extra_html
--- a/packages/ui-default/templates/components/comments_discussion.html
+++ b/packages/ui-default/templates/components/comments_discussion.html
@ -89,7 +89,7 @@
    <div class="media__left top">
      <img src="{{ avatarUrl(udoc.avatar, 60) }}" width="60" height="60" class="medium user-profile-avatar">
    </div>
-    <div class="media__body top">
+    <div class="media__body top" id="comment-{{ doc.docId }}">
      <div class="clearfix">
        <div class="supplementary dczcomments__supplementary">
          {{ user.render_inline(udoc, avatar=false) }}
--- a/packages/ui-default/templates/layout/html5.html
+++ b/packages/ui-default/templates/layout/html5.html
@ -24,13 +24,23 @@
  <meta property="og:url" content="{{ model.system.get('server.url') }}{{ handler.ctx.request.path.slice(1) }}" />
  <meta property="og:image" content="{{ static_url('favicon-96x96.png') }}" />
  {% endblock %}
-  <link rel="stylesheet" media="all" href="{{ static_url((handler.user|default({})).theme|default('default') + '.theme.css') }}?version={{ global.Hydro.version['ui-default'] }}">
  <title>{{ handler.renderTitle(page_name) }}</title>
+  <style>
+    body {
+      --font-family: "{{ UserContext.fontFamily }}", "Open Sans", "Seravek", "Segoe UI", "Verdana", "PingFang SC", "Hiragino Sans GB", "Lantinghei SC", "Microsoft Yahei", "WenQuanYi Micro Hei", "sans";
+      --code-font-family: "{{ UserContext.codeFontFamily }}", "monaco", "Source Code Pro", "Consolas", "Lucida Console", "monospace";
+    }
+  </style>
+  {% if process.env.DEV %}
+    <link rel="stylesheet" media="all" href="/default.theme.css">
+  {% else %}
+    <link rel="stylesheet" media="all" href="{{ static_url((handler.user|default({})).theme|default('default') + '.theme-' + global.Hydro.version['ui-default'] +'.css') }}">
+  {% endif %}
  {% if not isIE(handler.request.headers['user-agent']) %}
-  <script>
-    var _htmlNode = document.documentElement;
-    _htmlNode.className = _htmlNode.className.replace(' nojs', ' hasjs');
-  </script>
+    <script>
+      var _htmlNode = document.documentElement;
+      _htmlNode.className = _htmlNode.className.replace(' nojs', ' hasjs');
+    </script>
  {% endif %}
 </head>
 <body>
@ -40,12 +50,24 @@
      var UiContext = '{{ UiContext|json|jsesc|safe }}';
      var UserContext = '{{ UserContext|json|jsesc|safe }}';
    </script>
-    <script src="{{ static_url((handler.user|default({})).theme|default('default') + '.theme.js') }}?version={{ global.Hydro.version['ui-default'] }}"></script>
    <script type="text/javascript" src="{{ static_url('l/'+_('__id')) }}"></script>
-    {% if process.env.DEV %}
-      <script type="text/javascript" src="{{ static_url('hydro.js') }}?version={{ global.Hydro.version['ui-default'] }}"></script>
+    {% if process.env.DEV and vite %}
+      <script type="module">
+        import RefreshRuntime from 'http://localhost:3000/@react-refresh'
+        RefreshRuntime.injectIntoGlobalHook(window)
+        window.$RefreshReg$ = () => {}
+        window.$RefreshSig$ = () => (type) => type
+        window.__vite_plugin_react_preamble_installed__ = true
+      </script>
+      <script type="module" src="http://localhost:3000/@vite/client"></script>
+      <script type="module" src="http://localhost:3000/entry.js"></script>
    {% else %}
-      <script type="text/javascript" src="{{ static_url('hydro-'+global.Hydro.version['ui-default']+'.js') }}"></script>
+      <script src="{{ static_url((handler.user|default({})).theme|default('default') + '.theme.js') }}?version={{ global.Hydro.version['ui-default'] }}"></script>
+      {% if process.env.DEV %}
+        <script type="text/javascript" src="/hydro.js"></script>
+      {% else %}
+        <script type="text/javascript" src="{{ static_url('hydro-'+global.Hydro.version['ui-default']+'.js') }}"></script>
+      {% endif %}
    {% endif %}
  {% endif %}
 </body>