ui: add problem_edit tab active color (#314)

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);

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;

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>