complete

Author: Administrator

package.json

@@ -64,6 +64,7 @@
     "less-loader": "^11.1.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-icons": "^4.6.0",
     "rollup": "^2.56.3",
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-less": "^1.1.3",

rollup.build.css

@@ -1,19 +1,62 @@
-:root {
-  --background: #fff;
-  --font-color: #494949;
+.tree-menu {
+  --font-family: "Avenir Next", Helvetica, Arial, sans-serif;
+}
+@media (prefers-color-scheme: light) {
+  .tree-menu {
+    --tree-background: #ffffff;
+    --item-title: rgba(31, 31, 31, 0.787);
+    --item-info: #79aaff;
+    --item-group-icon: red;
+    --item-selected-background: rgba(129, 129, 129, 0.364);
+    --item-selected-color: #202020;
+    --item-hover-background: rgba(0, 0, 0, 0.063);
+    --item-hover-color: #000000;
+    --item-disabled-color: rgba(129, 129, 129, 0.533);
+  }
 }
 @media (prefers-color-scheme: dark) {
-  :root {
-    --background: #3c3c3c;
-    --font-color: #fafafa;
+  .tree-menu {
+    --tree-background: #242539;
+    --item-title: rgba(225, 225, 225, 0.787);
+    --item-info: #c8a636;
+    --item-group-icon: red;
+    --item-selected-background: rgba(148, 185, 247, 0.364);
+    --item-selected-color: #ffffff;
+    --item-hover-background: rgba(89, 100, 102, 0.692);
+    --item-hover-color: #04c5ff;
+    --item-disabled-color: rgba(129, 129, 129, 0.533);
   }
 }
+.dark .tree-menu {
+  --tree-background: #242539;
+  --item-title: rgba(225, 225, 225, 0.787);
+  --item-info: #c8a636;
+  --item-group-icon: red;
+  --item-selected-background: rgba(148, 185, 247, 0.364);
+  --item-selected-color: #ffffff;
+  --item-hover-background: rgba(89, 100, 102, 0.692);
+  --item-hover-color: #04c5ff;
+  --item-disabled-color: rgba(129, 129, 129, 0.533);
+}
+.light .tree-menu {
+  --tree-background: #ffffff;
+  --item-title: rgba(31, 31, 31, 0.787);
+  --item-info: #79aaff;
+  --item-group-icon: red;
+  --item-selected-background: rgba(129, 129, 129, 0.364);
+  --item-selected-color: #202020;
+  --item-hover-background: rgba(0, 0, 0, 0.063);
+  --item-hover-color: #000000;
+  --item-disabled-color: rgba(129, 129, 129, 0.533);
+}
 .heading {
   font-family: "Avenir Next", Helvetica, Arial, sans-serif;
   font-size: 40px;
   font-weight: bold;
 }
 .tree-menu {
+  background-color: var(--tree-background);
+  font-family: var(--font-family);
   -webkit-touch-callout: none;
   /* iOS Safari */
   -webkit-user-select: none;
@@ -37,14 +80,15 @@
 .tree-menu .item {
   cursor: pointer;
   transition: all 0.3s ease-in;
+  color: var(--item-title);
 }
 .tree-menu .item.disabled {
   pointer-events: none;
-  color: #6e6e6e;
+  color: var(--item-disabled-color);
 }
 .tree-menu .item:hover {
-  color: #3eaee6;
-  background-color: #3c3f4c;
+  color: var(--item-hover-color);
+  background-color: var(--item-hover-background);
   transition: all 0.3s ease-in;
   opacity: 1;
 }
@@ -57,7 +101,7 @@
 }
 .tree-menu .item ~ .group.disabled {
   pointer-events: none;
-  color: #6e6e6e;
+  color: var(--item-disabled-color);
 }
 .tree-menu .item.collapsed ~ .group {
   max-height: 0px;
@@ -72,6 +116,9 @@
   flex-direction: row;
   align-items: center;
 }
+.tree-menu .item > .content:hover {
+  color: var(--item-hover-color);
+}
 .tree-menu .item > .content > .icon {
   display: flex;
   padding-right: 5px;
@@ -83,11 +130,9 @@
 }
 .tree-menu .item > .content > .title > .info {
   font-size: 0.7em;
-  color: orange;
+  color: var(--item-info);
 }
 .tree-menu .selected {
-  background-color: #363b50;
-}
-.test.tree-menu {
-  background-color: black;
+  background-color: var(--item-selected-background);
+  color: var(--item-selected-color) !important;
 }

src/TreeMenu/TreeMenu.less

@@ -2,10 +2,11 @@
 @import "../variables.less";
 @import "../typography.less";
 
+
 .tree-menu {
-  
+
   background-color: var(--tree-background);
-  
+
   font-family: var(--font-family);
 
   -webkit-touch-callout: none; /* iOS Safari */
@@ -24,21 +25,20 @@
       margin-right: 5px;
   }
 
+  /*
   .wrapper {
-      // margin-top: 2px;
-      // margin-bottom: 2px;
   }
+  */
 
   .item {
-      // background-color: rgb(45, 56, 56);
       cursor: pointer;
       transition: all .3s ease-in;
 
       color:var(--item-title);
 
       &.disabled {
           pointer-events: none;
-          color: var(--item-disabled-color); //rgb(110, 110, 110);
+          color: var(--item-disabled-color);
       }
 
       &:hover {
@@ -52,6 +52,10 @@
           font-weight: 800;
 
           .folder {
+            display: flex;
+            margin-left: 5px;
+            justify-content: center;
+            align-items: center;
           }
 
       }
@@ -75,11 +79,14 @@
       }
 
       &.expanded {
+
+          /*
           ~ .group {
 
           }
+          */
 
-          .folder {
+          .folder.enable-rotate {
               transform: rotate(90deg);
           }
 
@@ -95,20 +102,18 @@
             color:var(--item-hover-color);
           }
 
+          /*
           > .folder {
 
           }
+          */
 
           > .icon {
               display: flex;
               padding-right: 5px;                
-              // border:1px solid white;
           }
           > .title {
 
-              // &:not(:hover) and :not(.disabled) {
-               // color: var(--item-title);
-              // }
               display: flex;
               flex-grow: 1;
               flex-direction: column;
@@ -117,12 +122,11 @@
                   color: var(--item-info);
               }
           }
-
-      
-          
+          /*
           > .marker {
 
           }
+          */
       }
   }
 
@@ -133,11 +137,12 @@
 
 }
 
+/*
 .test {
   &.tree-menu {
-    // background-color: black;
     .item:hover {
-     // background-color: red;
+      background-color: red;
     }
   }
 }
+*/