Merge branch 'feature/redesign' of https://github.com/ONLYOFFICE/CommunityServer-AspNetCore into feature/redesign

products/ASC.People/Client/public/images/icon.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.74 7.56916C15.74 9.82801 14.1037 12.0101 12 12.0101C9.89609 12.0101 8.25985 9.82801 8.25985 7.56916V6.86149C8.25985 4.60264 9.89609 3 12 3C14.1037 3 15.74 4.60273 15.74 6.86149V7.56916ZM6.75451 10.3407C6.75451 11.9601 5.10837 12.7406 4.50684 12.7406C3.93731 12.7406 2.25925 11.9601 2.25925 10.3407V9.14063C2.25925 7.52106 3.48185 6.74056 4.50684 6.74056C5.56702 6.74056 6.75451 7.52106 6.75451 9.14063V10.3407ZM17.9739 15.7413C17.9733 15.7354 17.9721 15.7296 17.971 15.7239C17.9698 15.7182 17.9686 15.7125 17.968 15.7067C17.9504 15.5654 17.9235 15.4272 17.886 15.2919C17.886 15.2906 17.886 15.2896 17.8848 15.2884C17.8063 15.0007 17.6738 14.7235 17.4759 14.4505V14.4493C17.1512 13.9999 16.6615 13.5416 15.8658 13.0946L15.8309 13.0751C15.4346 12.8524 15.2526 12.7501 14.9998 12.7501C14.5862 12.7501 14.2253 13.0718 13.6172 13.6302H13.6159L13.0628 14.1387C13.0608 14.1406 13.0531 14.1507 13.0404 14.1673L13.0403 14.1673C12.9253 14.3174 12.402 15.0001 12 15.0001C11.5983 15.0001 11.0753 14.318 10.9598 14.1675L10.9598 14.1675L10.9598 14.1675L10.9597 14.1674C10.9469 14.1507 10.9392 14.1406 10.9372 14.1387L10.3841 13.6302H10.3829C9.77483 13.0718 9.4139 12.7501 9.00025 12.7501C8.74012 12.7501 8.50799 12.8584 8.13431 13.0946C7.36283 13.5816 6.8487 13.9993 6.52539 14.448L6.52413 14.4486C6.52354 14.4492 6.52325 14.45 6.52296 14.4507C6.52268 14.4515 6.52241 14.4522 6.52187 14.4527C6.32611 14.7234 6.19487 14.9988 6.11643 15.2848C6.11534 15.2871 6.114 15.2901 6.11308 15.2929C6.07663 15.4272 6.04964 15.5636 6.03213 15.7036C6.03153 15.7103 6.03032 15.7167 6.02911 15.7231C6.02795 15.7293 6.02679 15.7355 6.02618 15.7418C6.00975 15.8906 6.00045 16.0424 6.00045 16.2L6.00045 16.2438C6.00041 16.6333 6.00014 19.4858 6.00045 19.5C6.00045 20.5664 6.40237 21 7.50035 21H16.4999C17.6074 21 17.9998 20.5898 17.9998 19.5C18.0001 19.4859 17.9998 16.6785 17.9997 16.2535L17.9997 16.2C17.9996 16.0425 17.9902 15.8907 17.9739 15.7413ZM21.754 10.3407C21.754 11.9601 20.1077 12.7406 19.5062 12.7406C18.9366 12.7406 17.2586 11.9601 17.2586 10.3407V9.14063C17.2586 7.52106 18.4812 6.74056 19.5062 6.74056C20.5665 6.74056 21.754 7.52106 21.754 9.14063V10.3407ZM1.70674 14.3649C0.31101 15.1595 0.000521438 16.4263 0.000521438 17.2501L0.000500001 17.2808C0.000345928 17.4935 -0.000556263 18.7394 0.000521438 18.7501C0.000521438 19.8388 0.366152 20.2502 1.50042 20.2502H4.5003V15.7501L3.75035 15.0001C2.95691 14.3005 2.288 14.0345 1.70674 14.3649ZM22.2933 14.3649C23.6889 15.1594 23.9995 16.4262 23.9995 17.2501L23.9995 17.281C23.9997 17.4942 24.0006 18.7394 23.9995 18.7502C23.9995 19.8389 23.6338 20.2503 22.4996 20.2503H19.4997V15.7502L20.2496 15.0002C21.0431 14.3005 21.712 14.0345 22.2933 14.3649Z" fill="#7A95B0"/>
+</svg>

products/ASC.People/Client/src/components/pages/Home/Section/Header/index.js

@@ -39,12 +39,14 @@ const StyledContainer = styled.div`
   .group-button-menu-container {
     margin: 0 -16px;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    padding-bottom: 56px;
     
     @media (max-width: 1024px) {
       & > div:first-child {
-      position: absolute;
+        ${props => props.isArticlePinned && css`width: calc(100% - 240px);`}
-      top: 56px;
+        position: absolute;
-      z-index: 180;
+        top: 56px;
+        z-index: 180;
       }
     }
 
@@ -270,8 +272,10 @@ const SectionHeaderContent = props => {
     ];
   }, [settings, t, goToEmployeeCreate, goToGuestCreate, goToGroupCreate, onInvitationDialogClick/* , onSentInviteAgain */]);
 
+  const isArticlePinned = window.localStorage.getItem('asc_article_pinned_key');
+
   return (
-    <StyledContainer isHeaderVisible={isHeaderVisible}>
+    <StyledContainer isHeaderVisible={isHeaderVisible} isArticlePinned={isArticlePinned}>
       {isHeaderVisible ? (
         <div className="group-button-menu-container">
           <GroupButtonsMenu

web/ASC.Web.Client/public/images/documentsIcon.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 2.5C3 1.67157 3.67157 1 4.5 1H16L21 6.00587V22.5C21 23.3284 20.3284 24 19.5 24H4.5C3.67157 24 3 23.3284 3 22.5V2.5ZM6 4H14V6H6V4ZM18 9H6V11H18V9ZM6 14H18V16H6V14ZM18 19H6V21H18V19Z" fill="#7A95B0"/>
+</svg>

web/ASC.Web.Common/src/api/modules/index.js

@@ -16,19 +16,28 @@ export function getModulesList() {
           })
         )
       )
-      .then((modules) => {
+        .then((modules) => {
-        const newModules = modules.map(m => { return { ...m, isPrimary: true }; }).concat({
+          const newModules = modules.map(m => {
-          id: "77777777-7777-7777-7777-777777777777",
+            return {
-          title: "Documents",
+              ...m,
-          link: "/coming-soon",
+              isPrimary: true,
-          imageUrl: "images/documents.svg",
+              iconUrl: m.link + "images/icon.svg",
-          description: "Create, edit and share documents. Collaborate on them in real-time. 100% compatibility with MS Office formats guaranteed.",
+              imageUrl: m.link + m.imageUrl,
-          isPrimary: true,
+            };
-          iconName: "DocumentsIcon"
+          })
-        });
+            .concat({
-    
+              id: "77777777-7777-7777-7777-777777777777",
-        return newModules;
+              title: "Documents",
-      })
+              link: "/coming-soon/",
+              imageUrl: "/images/documents.svg",
+              iconUrl: "/images/documentsIcon.svg",
+              description: "Create, edit and share documents. Collaborate on them in real-time. 100% compatibility with MS Office formats guaranteed.",
+              isPrimary: true,
+              iconName: "DocumentsIcon"
+            });
+
+          return newModules;
+        })
     );
   });
 }

web/ASC.Web.Common/src/components/Layout/index.js

@@ -199,6 +199,7 @@ class Layout extends React.Component {
                 opened={this.state.isNavOpened}
                 active={item.id == this.state.currentModuleId}
                 iconName={item.iconName}
+                iconUrl={item.iconUrl}
                 badgeNumber={item.notifications}
                 onClick={item.onClick}
                 onBadgeClick={e => {

web/ASC.Web.Common/src/components/Layout/sub-components/header-nav.js

@@ -34,7 +34,6 @@ const StyledNav = styled.nav`
     padding: 0 16px;
   }
 `;
-
 const HeaderNav = React.memo(props => {
   //console.log("HeaderNav render");
   return (
@@ -43,6 +42,7 @@ const HeaderNav = React.memo(props => {
         <NavItem
           key={module.id}
           iconName={module.iconName}
+          iconUrl={module.iconUrl}
           badgeNumber={module.notifications}
           onClick={module.onClick}
           onBadgeClick={module.onBadgeClick}

web/ASC.Web.Common/src/components/Layout/sub-components/nav-item.js

@@ -46,6 +46,11 @@ const NavItemBadge = styled(Badge)`
   ${props => (props.opened ? "" : badgeCss)}
 `;
 
+const NavCustomIcon = styled.img`
+  width: 24px;
+  height: 24px; 
+`;
+
 const NavItem = React.memo(props => {
   //console.log("NavItem render");
   const {
@@ -53,6 +58,7 @@ const NavItem = React.memo(props => {
     opened,
     active,
     iconName,
+    iconUrl,
     children,
     badgeNumber,
     onClick,
@@ -69,7 +75,9 @@ const NavItem = React.memo(props => {
       noHover={noHover}
       href={url} 
       onClick={onClick}>
-        {React.createElement(Icons[iconName], {
+        {iconUrl
+        ? (<NavCustomIcon src={iconUrl}/>)
+        : React.createElement(Icons[iconName], {
           size: "big",
           isfill: true,
           color: color
@@ -96,6 +104,7 @@ NavItem.propTypes = {
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
   url: PropTypes.string,
   iconName: PropTypes.string,
+  iconUrl: PropTypes.string,
   onBadgeClick: PropTypes.func,
   onClick: PropTypes.func,
   opened: PropTypes.bool,

web/ASC.Web.Common/src/components/StudioLayout/StudioLayout.js

@@ -20,6 +20,7 @@ const toModuleWrapper = (item, iconName) => {
     id: item.id,
     title: item.title,
     iconName: item.iconName || iconName || "PeopleIcon", //TODO: Change to URL
+    iconUrl: item.iconUrl, 
     notifications: 0,
     url: item.link,
     onClick: (e) => {