12.0 change tree highlight style (#6241)

* change root basic style

* change tree style

frontend/src/components/tree-section/index.css

@@ -3,7 +3,7 @@
   flex-direction: column;
   width: 100%;
   height: auto;
-  padding: 0 8px;
+  padding: 0 16px;
   margin-top: 10px;
 }
 
@@ -91,6 +91,30 @@
 }
 
 .tree-section .tree-section-body .tree-view {
-  padding-top: 0;
+  margin-left: 0px;
-  padding-bottom: 0;
+  padding: 0px;
+}
+
+.tree-section .tree-section-body .right-icon {
+  width: 20px;
+  height: 20px;
+  top: 4px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.tree-section .tree-section-body .right-icon:hover {
+  background-color: #DBDBDB;
+  cursor: pointer;
+  border-radius: 3px;
+}
+
+.tree-section .tree-section-body  .right-icon i {
+  margin-left: 0;
+}
+
+.tree-section .tree-section-body .sf-dropdown-toggle:focus,
+.tree-section .tree-section-body .sf-dropdown-toggle:hover {
+  color: #999;
 }

frontend/src/components/tree-view/tree-node-view.js

@@ -5,11 +5,13 @@ import TextTranslation from '../../utils/text-translation';
 import ItemDropdownMenu from '../dropdown-menu/item-dropdown-menu';
 import { Utils } from '../../utils/utils';
 
+const LEFT_INDENT = 20;
+
 const propTypes = {
   userPerm: PropTypes.string,
   node: PropTypes.object.isRequired,
   currentPath: PropTypes.string.isRequired,
-  paddingLeft: PropTypes.number.isRequired,
+  leftIndent: PropTypes.number.isRequired,
   isNodeMenuShow: PropTypes.bool.isRequired,
   isItemFreezed: PropTypes.bool.isRequired,
   onNodeClick: PropTypes.func.isRequired,
@@ -234,18 +236,18 @@ class TreeNodeView extends React.Component {
   };
 
   renderChildren = () => {
-    let { node, paddingLeft } = this.props;
+    let { node } = this.props;
     if (!node.hasChildren()) {
       return '';
     }
     return (
-      <div className="children" style={{paddingLeft: paddingLeft}}>
+      <div className="children">
         {node.children.map(item => {
           return (
             <TreeNodeView
               key={item.path}
               node={item}
-              paddingLeft={paddingLeft}
+              leftIndent={this.props.leftIndent + LEFT_INDENT}
               userPerm={this.props.userPerm}
               currentPath={this.props.currentPath}
               isNodeMenuShow={this.props.isNodeMenuShow}
@@ -270,7 +272,7 @@ class TreeNodeView extends React.Component {
   };
 
   render() {
-    let { currentPath, node, isNodeMenuShow, userPerm } = this.props;
+    let { currentPath, node, isNodeMenuShow, userPerm, leftIndent } = this.props;
     let { type, icon } = this.getNodeTypeAndIcon();
     let hlClass = this.state.isHighlight ? 'tree-node-inner-hover ' : '';
     if (node.path === currentPath) {
@@ -291,8 +293,17 @@ class TreeNodeView extends React.Component {
           onContextMenu={this.onItemContextMenu}
           onClick={this.onNodeClick}
         >
-          <div className="tree-node-text" draggable={this.canDrag} onDragStart={this.onNodeDragStart} onDragEnter={this.onNodeDragEnter} onDragLeave={this.onNodeDragLeave} onDragOver={this.onNodeDragMove} onDrop={this.onNodeDrop}>{node.object.name}</div>
+          <div
-          <div className="left-icon">
+            className="tree-node-text"
+            draggable={this.canDrag}
+            onDragStart={this.onNodeDragStart}
+            onDragEnter={this.onNodeDragEnter}
+            onDragLeave={this.onNodeDragLeave}
+            onDragOver={this.onNodeDragMove}
+            onDrop={this.onNodeDrop}
+            style={{paddingLeft: leftIndent}}
+          >{node.object.name}</div>
+          <div className="left-icon" style={{left: leftIndent - 45}}>
             {type === 'dir' && (!node.isLoaded ||  (node.isLoaded && node.hasChildren())) && (
               <i
                 className={`folder-toggle-icon fa ${node.isExpanded ? 'fa-caret-down' : 'fa-caret-right'}`}

frontend/src/components/tree-view/tree-view.js

@@ -24,7 +24,7 @@ const propTypes = {
   posY: PropTypes.number,
 };
 
-const PADDING_LEFT = 20;
+const LEFT_INDENT = 20;
 
 class TreeView extends React.Component {
 
@@ -326,7 +326,7 @@ class TreeView extends React.Component {
           userPerm={this.props.userPerm}
           node={this.props.treeData.root}
           currentPath={this.props.currentPath}
-          paddingLeft={PADDING_LEFT}
+          leftIndent={LEFT_INDENT}
           isNodeMenuShow={this.props.isNodeMenuShow}
           isItemFreezed={this.state.isItemFreezed}
           onNodeClick={this.onNodeClick}

frontend/src/css/lib-content-view.css

@@ -78,7 +78,7 @@
 }
 
 .tree-node-inner-hover {
-  background-color: #f5f5f5;
+  background-color: #f0f0f0;
   border-radius: 0.25rem;
 }
 
@@ -144,13 +144,21 @@
 }
 
 .tree-node-hight-light {
-  color: #fff;
   border-radius: 4px;
-  background-color: #ff9800 !important;
+  background-color: #f5f5f5 !important;
 }
 
-.tree-node-hight-light i {
+.tree-node-hight-light::before {
-  color:#fff;
+  content: '';
+  position: absolute;
+  display: block;
+  width: 4px;
+  height: 24px;
+  left: -8px;
+  top: 2px;
+  background-color: #FF8000;
+  border-radius: 2px;
+  z-index: 0;
 }
 
 .parent-path {