Merge pull request #934 from XiaoMi/hotfix/theme

Hotfix/theme
XiaoMi · Feb 8, 2020 · 7674116 · 7674116
2 parents 0d4f9f2 + 5f6944f
commit 7674116
Show file tree

Hide file tree

Showing 8 changed files with 68 additions and 11 deletions.
diff --git a/components/menu/style/index.scss b/components/menu/style/index.scss
@@ -325,6 +325,8 @@
     &--mini {
       .hi-menu-item {
         &--active {
+          background-color: rgba($value, 0.1);
+
           &::after {
             background-color: $value;
           }
@@ -336,8 +338,8 @@
       box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
 
       .hi-menu-item {
-        &--active {
-          background-color: rgba($value, 0.15);
+        &--active:not(.hi-submenu) {
+          background-color: rgba($value, 0.1);
 
           &::after {
             background-color: $value;
@@ -347,7 +349,7 @@
 
       .hi-menu__title {
         &:hover {
-          background-color: rgba($value, 0.15);
+          background-color: rgba($value, 0.1);
         }
       }
     }

diff --git a/components/table/style/Table.scss b/components/table/style/Table.scss
@@ -42,7 +42,7 @@ $borderColor: #e6e7e8 !default;
     position: relative;
   }
 
-  .hi-icon {
+  .hi-icon.icon-menu {
     color: #4284f5;
   }
 
@@ -461,7 +461,7 @@ $borderColor: #e6e7e8 !default;
 @each $key, $value in $theme-colors {
   .theme__#{$key}.hi-table {
     .hi-table-container table th {
-      background-color: rgba($value, 0.3);
+      background-color: rgba($value, 0.1);
       color: #83868c;
     }
 
@@ -470,7 +470,11 @@ $borderColor: #e6e7e8 !default;
       color: #83868c;
     }
 
-    .hi-icon {
+    .hi-table-container table .hi-table-thead tr:hover {
+      background-color: #fff;
+    }
+
+    .hi-icon.icon-menu {
       color: $value;
     }
 
@@ -494,5 +498,21 @@ $borderColor: #e6e7e8 !default;
         }
       }
     }
+
+    .hi-pagination {
+      .hi-icon {
+        color: #666;
+      }
+
+      .hi-icon:hover {
+        color: $value;
+      }
+    }
+
+    .hi-pagination:hover > span {
+      .hi-icon {
+        color: $value;
+      }
+    }
   }
 }
diff --git a/components/tabs/ItemDropdown.js b/components/tabs/ItemDropdown.js
@@ -51,7 +51,8 @@ class ItemDropdown extends Component {
       items,
       onChoose,
       localeDatas,
-      activeId
+      activeId,
+      theme
     } = this.props
     const {
       visible
@@ -61,7 +62,7 @@ class ItemDropdown extends Component {
       if (item.tabId === activeId) activeIndex = index
     })
     return (
-      <div className={classNames('hi-tabs-dropdown', {'hi-tabs-dropdown--active': !!items[activeIndex]})}>
+      <div className={classNames('hi-tabs-dropdown', `theme__${theme}`, {'hi-tabs-dropdown--active': !!items[activeIndex]})}>
         <div className='hi-tabs-dropdown__toggle' ref={node => { this.toggleRef = node }} onClick={e => {
           e.stopPropagation()
           this.toggle()
@@ -80,7 +81,7 @@ class ItemDropdown extends Component {
           leftGap={-18}
           topGap={3}
         >
-          <div className={classNames('hi-tabs-dropdown__items')}>
+          <div className={classNames('hi-tabs-dropdown__items', `theme__${theme}`)}>
             {
               items.map((item, index) => {
                 return (

diff --git a/components/tabs/Tabs.js b/components/tabs/Tabs.js
@@ -213,6 +213,7 @@ class Tabs extends Component {
                 <ItemDropdown
                   active={activeTabInHiddenItems}
                   activeId={activeId}
+                  theme={theme}
                   defaultActiveId={defaultActiveId}
                   items={hiddenTabItems}
                   onChoose={(item, e) => {

diff --git a/components/tabs/style/index.scss b/components/tabs/style/index.scss
@@ -323,4 +323,14 @@ $prefix: 'hi-tabs' !default;
       }
     }
   }
+
+  .theme__#{$key}.hi-tabs-dropdown__items {
+    .hi-tabs-dropdown__item:hover {
+      background-color: rgba($value, 0.1);
+    }
+
+    .hi-tabs-dropdown__item.hi-tabs-dropdown__item--active {
+      background-color: rgba($value, 0.1);
+    }
+  }
 }
diff --git a/components/tree/TreeItem.js b/components/tree/TreeItem.js
@@ -57,6 +57,16 @@ class TreeItem extends Component {
       apperance,
       theme
     } = this.props
+
+    const themeColor = {
+      'orange': '#f63',
+      'cyan': '#46bc99',
+      'magenta': '#ff5975',
+      'lavender': '#b450de',
+      'blue': '#3da8f5',
+      'purple': '#8a8acb',
+      'hiui-blue': '#4284f5'
+    }
     const { nodePlaceholder, confirm, cancel } = localeDatas.tree
     const treeItem = (
       <li
@@ -131,7 +141,7 @@ class TreeItem extends Component {
                 }}
               />
               <span
-                style={(editingNodes.find(node => node.id === item.id) || {}).title === '' ? { marginRight: 12, color: '#999' } : { cursor: 'pointer', marginRight: 12, color: '#4284F5' }}
+                style={(editingNodes.find(node => node.id === item.id) || {}).title === '' ? { marginRight: 12, color: '#999', cursor: 'not-allowed' } : { cursor: 'pointer', marginRight: 12, color: themeColor[theme] }}
                 onClick={() => {
                   if ((editingNodes.find(node => node.id === item.id) || {}).title !== '') {
                     saveEditNode(item.id)

diff --git a/components/tree/TreeNode.js b/components/tree/TreeNode.js
@@ -104,6 +104,15 @@ class TreeNode extends Component {
 
   // 高亮检索值
   highlightData = (data, highlightValue) => {
+    const themeColor = {
+      'orange': '#f63',
+      'cyan': '#46bc99',
+      'magenta': '#ff5975',
+      'lavender': '#b450de',
+      'blue': '#3da8f5',
+      'purple': '#8a8acb',
+      'hiui-blue': '#4284f5'
+    }
     return data.map(item => {
       if (typeof item.title === 'string' && item.title.includes(highlightValue)) {
         const index = item.title.indexOf(highlightValue)
@@ -112,7 +121,7 @@ class TreeNode extends Component {
         item.title = (
           <span>
             {beforeStr}
-            <span style={{ color: '#4284f5' }}>{highlightValue}</span>
+            <span style={{ color: themeColor[this.props.theme] }}>{highlightValue}</span>
             {afterStr}
           </span>
         )

diff --git a/components/tree/style/index.scss b/components/tree/style/index.scss
@@ -537,6 +537,10 @@ $tree: 'hi-tree' !default;
       border: 1px solid $value;
     }
 
+    .hi-checkbox-legacy__label.highlight {
+      color: $value;
+    }
+
     .hi-checkbox-legacy--checked .hi-checkbox-legacy__input {
       border: 1px solid $value;
     }