ui: hide categories by default

packages/ui-default/locales/zh.yaml

@@ -691,6 +691,7 @@ Share: 分享
 She: 她
 Show all tags: 显示所有标签
 Show MOD badge: 展示 MOD 徽章
+Show tags: 显示标签
 Show: 显示
 Sign In: 登录
 SIGN IN: 登录

packages/ui-default/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hydrooj/ui-default",
-  "version": "4.27.6",
+  "version": "4.27.7",
   "author": "undefined <i@undefined.moe>",
   "license": "AGPL-3.0",
   "main": "hydro.js",

packages/ui-default/pages/problem_main.page.js

@@ -16,6 +16,7 @@ import i18n from 'vj/utils/i18n';
 const categories = {};
 const dirtyCategories = [];
 const selections = [];
+const list = [];
 
 function setDomSelected($dom, selected) {
   if (selected) $dom.addClass('selected');
@@ -111,6 +112,8 @@ function buildCategoryFilter() {
       });
     }
   });
+  list.push(...Object.keys(categories));
+  list.push(..._.flatMap(Object.values(categories), (c) => Object.keys(c.children)));
   $(document).on('click', '.widget--category-filter__category-tag', (ev) => {
     if (ev.shiftKey || ev.metaKey || ev.ctrlKey) return;
     const category = $(ev.currentTarget).text();
@@ -208,6 +211,12 @@ async function handleOperation(operation) {
   }
 }
 
+function hideTags(target) {
+  $(target).find('.problem__tag').get()
+    .filter((i) => list.includes(i.children[0].innerHTML))
+    .forEach((i) => $(i).addClass('notag--hide'));
+}
+
 async function handleDownload(ev) {
   let name = 'Export';
   // eslint-disable-next-line no-alert
@@ -216,6 +225,11 @@ async function handleDownload(ev) {
   if (pids) await downloadProblemSet(pids, name);
 }
 
+function processElement(ele) {
+  hideTags(ele);
+  createHint('Hint::icon::difficulty', $(ele).find('th.col--difficulty'));
+}
+
 const page = new NamedPage(['problem_main', 'problem_category'], () => {
   const doc = document.body;
   doc.className += ' display-mode';
@@ -232,7 +246,10 @@ const page = new NamedPage(['problem_main', 'problem_category'], () => {
     $(`[name="${op}_selected_problems"]`).on('click', () => handleOperation(op));
   });
   $('[name="download_selected_problems"]').on('click', handleDownload);
-  $('#hideTags').on('click', () => $('.problem__tags').hide());
+
+  $(document).on('click', '.toggle-tag', () => {
+    $('.section__table-container').children(1).toggleClass('hide-problem-tag');
+  });
   $('#search').on('click', (ev) => {
     ev.preventDefault();
     updateSelection();
@@ -247,10 +264,8 @@ const page = new NamedPage(['problem_main', 'problem_category'], () => {
     ev.preventDefault();
     pjax.request(ev.currentTarget.getAttribute('href')).then(() => window.scrollTo(0, 0));
   });
-  $(document).on('vjContentNew', (e) => {
-    createHint('Hint::icon::difficulty', $(e.target).find('th.col--difficulty'));
-  });
-  createHint('Hint::icon::difficulty', $(document).find('th.col--difficulty'));
+  $(document).on('vjContentNew', (e) => processElement(e.target));
+  processElement(document);
 });
 
 export default page;

packages/ui-default/pages/problem_main.page.styl

@@ -104,11 +104,17 @@
     margin-top: rem(floor($menu-drop-triangle-size * -1.414))
 
 
-.display-mode .display-mode-hide
+.display-mode .display-mode-hide,
+.edit-mode .edit-mode-hide,
+.hide-problem-tag .notag--hide,
+.tag--hide
   display: none
 
-.edit-mode .edit-mode-hide
-  display: none
+.hide-problem-tag .tag--hide
+  display: block
+
+.toggle-tag
+  float: right
 
 .data-table > tbody > tr
   height: 40.15px

packages/ui-default/templates/partials/problem_list.html

@@ -7,7 +7,7 @@
   {{ nothing.render('Sorry, there is no problem in the problem set') }}
 {% else %}
   {{ paginator.render(page, ppcount, position='top') }}
-  <table class="data-table">
+  <table class="data-table hide-problem-tag">
     <colgroup>
       <col class="col--checkbox display-mode-hide">
       <col class="col--pid display-mode-hide">
@@ -30,7 +30,10 @@
         {% if handler.user.hasPriv(PRIV.PRIV_USER_PROFILE) %}
           <th class="col--status record-status--border edit-mode-hide">{{ _('Status') }}</th>
         {% endif %}
-        <th class="col--name">{{ _('Problem') }}<span style="float:right" id="hideTags">{{ _('Hide tags') }}</span></th>
+        <th class="col--name">{{ _('Problem') }}
+          <span class="nojs--hide toggle-tag tag--hide">{{ _('Show tags') }}</span>
+          <span class="nojs--hide toggle-tag notag--hide">{{ _('Hide tags') }}</span>
+        </th>
         <th class="col--tried">{{ _('Tried') }}</th>
         <th class="col--ac">{{ _('AC') }}</th>
         <th class="col--difficulty">{{ _('Difficulty') }}</th>