Merge branch 'master' of https://github.com/ONLYOFFICE/CommunityServer-AspNetCore

web/ASC.Web.Components/example/stories/tree/tree-menu/base/index.stories.js

@@ -3,7 +3,6 @@ import { storiesOf } from '@storybook/react';
 import { withKnobs, boolean, text,select} from '@storybook/addon-knobs/react';
 import withReadme from 'storybook-readme/with-readme';
 import Readme from './README.md';
-import styled from '@emotion/styled';
 import { TreeMenu, TreeNode } from 'asc-web-components';
 import { Icons } from 'asc-web-components';
 import { action } from '@storybook/addon-actions';
@@ -34,7 +33,7 @@ const TreeMenuStory = props => {
 
   const onDragEnter = (info) => {
     setExpandedKeys(info.expandedKeys);
-  }
+  };
 
   const onDrop = (info) => {
       info.event.persist();
@@ -43,8 +42,8 @@ const TreeMenuStory = props => {
       const dropPos = info.node.props.pos.split('-');
       const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);
 
-      const loop = (data, key, callback) => {
+      const loop = (treeData, key, callback) => {
-          data.forEach((item, index, arr) => {
+        treeData.forEach((item, index, arr) => {
               if (item.key === key) {
                   callback(item, index, arr);
                   return;
@@ -54,16 +53,17 @@ const TreeMenuStory = props => {
               }
           });
       };
-      const data = [...gData];
+
+      const treeData = [...gData];
 
       let dragObj;
-      loop(data, dragKey, (item, index, arr) => {
+      loop(treeData, dragKey, (item, index, arr) => {
           arr.splice(index, 1);
           dragObj = item;
       });
 
       if (!info.dropToGap) {
-          loop(data, dropKey, (item) => {
+          loop(treeData, dropKey, (item) => {
               item.children = item.children || [];
               item.children.push(dragObj);
           });
@@ -72,14 +72,14 @@ const TreeMenuStory = props => {
           info.node.props.expanded &&                     
           dropPosition === 1                              
       ) {
-          loop(data, dropKey, (item) => {
+          loop(treeData, dropKey, (item) => {
               item.children = item.children || [];
               item.children.unshift(dragObj);
           });
       } else {
           let ar;
           let i;
-          loop(data, dropKey, (item, index, arr) => {
+          loop(treeData, dropKey, (item, index, arr) => {
               ar = arr;
               i = index;
           });
@@ -89,17 +89,17 @@ const TreeMenuStory = props => {
               ar.splice(i + 1, 0, dragObj);
           }
       }
-      setGData(data);
+      setGData(treeData);
   };
   const onExpand = (expandedKeys) => {
     setExpandedKeys(expandedKeys);
     setAutoExpandParent(false);
   }
 
-  const loop = data => {
+  const getTreeNodes = tree => {
-      return data.map((item) => {
+      return tree.map((item) => {
           if (item.children && item.children.length) {
-            return <TreeNode title={text('title', 'Title')} key={item.key} icon={React.createElement(Icons[select('icon', iconNames, 'CatalogFolderIcon')], {size: "scale", isfill:true, color: "dimgray"})} >{loop(item.children)}</TreeNode>;
+            return <TreeNode title={text('title', 'Title')} key={item.key} icon={React.createElement(Icons[select('icon', iconNames, 'CatalogFolderIcon')], {size: "scale", isfill:true, color: "dimgray"})} >{getTreeNodes(item.children)}</TreeNode>;
           }
           return <TreeNode key={item.key} title={text('title', 'Title')} icon={React.createElement(Icons[select('icon', iconNames, 'CatalogFolderIcon')], {size: "scale", isfill:true, color: "dimgray"})} ></TreeNode>;
       });
@@ -147,7 +147,7 @@ const TreeMenuStory = props => {
         
         onRightClick={action("rightClick")}
       >
-        {loop(gData)}
+        {getTreeNodes(gData)}
       </TreeMenu>
     </div>
   );

web/ASC.Web.Components/src/components/text-input/index.js

@@ -27,15 +27,21 @@ const StyledInput = styled(Input).attrs((props) => ({
     box-shadow: none;
     box-sizing: border-box;
     border: solid 1px;
-  border-color: ${props => (props.hasError && '#c30') || (props.hasWarning && '#f1ca92') || '#c7c7c7'};
+    border-color: ${props => (props.hasError && '#c30') || (props.hasWarning && '#f1ca92') || (props.isDisabled && '#ECEEF1')|| '#D0D5DA'};
     -moz-border-radius: 3px;
     -webkit-border-radius: 3px;
-  background-color: ${props => props.isDisabled ? '#efefef' : '#fff'};
+    background-color: ${props => props.isDisabled ? '#F8F9F9' : '#fff'};
-  color: ${props => props.isDisabled ? '#666562' : '#434341'};
+    color: ${props => props.isDisabled ? '#D0D5DA' : '#333333'};
     display: flex;
     font-family: 'Open Sans', sans-serif;
+    line-height: ${props =>
+        (props.size === 'base' && '20px') ||
+        (props.size === 'middle' && '20px') ||
+        (props.size === 'big' && '20px') ||
+        (props.size === 'huge' && '20px')
+    };
     font-size: ${props =>
-    (props.size === 'base' && '12px') ||
+        (props.size === 'base' && '13px') ||
         (props.size === 'middle' && '14px') ||
         (props.size === 'big' && '16px') ||
         (props.size === 'huge' && '18px')
@@ -44,7 +50,7 @@ const StyledInput = styled(Input).attrs((props) => ({
     outline: none;
     overflow: hidden;
     padding: ${props =>
-    (props.size === 'base' && '4px 8px') ||
+        (props.size === 'base' && '5px 7px') ||
         (props.size === 'middle' && '8px 12px') ||
         (props.size === 'big' && '8px 16px') ||
         (props.size === 'huge' && '8px 20px')
@@ -52,32 +58,39 @@ const StyledInput = styled(Input).attrs((props) => ({
     transition: all 0.2s ease 0s;
     width: ${props =>
             (props.scale && '100%') ||
-        (props.size === 'base' && '135px') ||
+            (props.size === 'base' && '173px') ||
             (props.size === 'middle' && '300px') ||
             (props.size === 'big' && '350px') ||
             (props.size === 'huge' && '500px')
         };
 
     ::-webkit-input-placeholder {
-        color: #b2b2b2;
+        color: ${props => props.isDisabled ? '#D0D5DA' : '#A3A9AE'};
         font-family: 'Open Sans',sans-serif
     }
 
     :-moz-placeholder {
-        color: #b2b2b2;
+        color: ${props => props.isDisabled ? '#D0D5DA' : '#A3A9AE'};
         font-family: 'Open Sans',sans-serif
     }
 
     ::-moz-placeholder {
-        color: #b2b2b2;
+        color: ${props => props.isDisabled ? '#D0D5DA' : '#A3A9AE'};
         font-family: 'Open Sans',sans-serif
     }
 
     :-ms-input-placeholder {
-        color: #b2b2b2;
+        color: ${props => props.isDisabled ? '#D0D5DA' : '#A3A9AE'};
         font-family: 'Open Sans',sans-serif
     }
 
+    :hover{
+        border-color: ${props => props.isDisabled ? '#ECEEF1' : '#A3A9AE'};
+    }
+    :focus{
+        border-color: #2DA7DB;
+    }
+
 `;
 
 const TextInput = props => <StyledInput {...props} />

web/ASC.Web.Components/src/components/tree-menu-node/index.js

@@ -195,6 +195,9 @@ const TreeNodeMenu = styled(TreeNode)`
         overflow: hidden;
         text-overflow: ellipsis;
     }
+    span.rc-tree-title:first-child{
+        max-width: 100%;
+    }
     .rc-tree-node-selected {
         background: #DFE2E3;
         mix-blend-mode: normal;