From 5d81ce82c558411fcf5aef49af965d3aaab4cdbc Mon Sep 17 00:00:00 2001
From: pandadtdyy <panda_dtdyy@outlook.com>
Date: Wed, 9 Mar 2022 19:12:53 +0800
Subject: [PATCH] ui: add problem_edit tab active color (#314)

---
 packages/ui-default/pages/problem_edit.page.js   |  2 ++
 packages/ui-default/pages/problem_edit.page.styl | 13 +++++++++++++
 packages/ui-default/templates/problem_edit.html  |  2 +-
 3 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/packages/ui-default/pages/problem_edit.page.js b/packages/ui-default/pages/problem_edit.page.js
index 4bc8c79d..b60ca9cf 100644
--- a/packages/ui-default/pages/problem_edit.page.js
+++ b/packages/ui-default/pages/problem_edit.page.js
@@ -257,6 +257,8 @@ export default new NamedPage(['problem_create', 'problem_edit'], (pagename) => {
   }
   const editor = Editor.getOrConstruct($main, { upload, onChange });
   $('[data-lang]').on('click', (ev) => {
+    $('[data-lang]').removeClass('tab--active');
+    $(ev.currentTarget).addClass('tab--active');
     const lang = $(ev.currentTarget).attr('data-lang');
     activeTab = lang;
     const val = getContent(lang);
diff --git a/packages/ui-default/pages/problem_edit.page.styl b/packages/ui-default/pages/problem_edit.page.styl
index 990cdf31..ae4c29ef 100644
--- a/packages/ui-default/pages/problem_edit.page.styl
+++ b/packages/ui-default/pages/problem_edit.page.styl
@@ -71,3 +71,16 @@
       margin-left: 0
       margin-right: 0
       margin-top: rem(floor($menu-drop-triangle-size * -1.414))
+
+  .section__tab-header-item
+    border-top: 3px solid transparent;
+    transition: border-color 0.2s, background 0.2s, color 0.2s;
+    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    margin-right: 0
+
+    &:hover
+      border-color: #5f9fd6;
+      background: #f8f8f8;
+    
+    &.tab--active
+      border-color: #ed5f82;
\ No newline at end of file
diff --git a/packages/ui-default/templates/problem_edit.html b/packages/ui-default/templates/problem_edit.html
index 46b848c1..865e44da 100644
--- a/packages/ui-default/templates/problem_edit.html
+++ b/packages/ui-default/templates/problem_edit.html
@@ -59,7 +59,7 @@
           <div class="section__tab-container nojs--hide">
           <div class="section__tab-header-wrapper">
             <ul class="section__tab-header">
-              <li class="section__tab-header-item" data-lang="{{ _('__id') }}">{{ _('__langname') }}</li>
+              <li class="section__tab-header-item tab--active" data-lang="{{ _('__id') }}">{{ _('__langname') }}</li>
               {% for k, v in model.setting.SETTINGS_BY_KEY['viewLang'].range %}
                 {% if k != handler.user.viewLang %}
                   <li class="section__tab-header-item" data-lang="{{ k }}">{{ v }}</li>