Merge pull request #481 from ONLYOFFICE/feature/redesign-start-page

Feature/redesign start page
ONLYOFFICE · Dec 27, 2021 · c78cd07 · c78cd07
2 parents 829fba7 + f2548e2
commit c78cd07
Show file tree

Hide file tree

Showing 23 changed files with 704 additions and 291 deletions.
diff --git a/packages/asc-web-common/components/PageLayout/index.js b/packages/asc-web-common/components/PageLayout/index.js
@@ -210,6 +210,7 @@ class PageLayout extends React.Component {
       isBackdropVisible,
       isArticlePinned,
       isDesktop,
+      isHomepage,
     } = this.props;
     let articleHeaderContent = null;
     let articleMainButtonContent = null;
@@ -377,6 +378,7 @@ class PageLayout extends React.Component {
                           autoFocus={isMobile || isTabletView ? false : true}
                           pinned={isArticlePinned}
                           viewAs={viewAs}
+                          isHomepage={isHomepage}
                         >
                           {isSectionFilterAvailable && (
                             <SubSectionFilter className="section-body_filter">
@@ -508,6 +510,7 @@ PageLayout.propTypes = {
   isTabletView: PropTypes.bool,
   isHeaderVisible: PropTypes.bool,
   firstLoad: PropTypes.bool,
+  isHomepage: PropTypes.bool,
 };
 
 PageLayout.defaultProps = {

diff --git a/packages/asc-web-common/components/PageLayout/sub-components/section-body.js b/packages/asc-web-common/components/PageLayout/sub-components/section-body.js
@@ -104,7 +104,8 @@ const StyledSpacer = styled.div`
   min-height: 64px;
 
   @media ${tablet} {
-    display: ${(props) => (props.pinned ? "none" : "block")};
+    display: ${(props) =>
+      props.isHomepage || props.pinned ? "none" : "block"};
   }
 `;
 
@@ -141,6 +142,7 @@ class SectionBody extends React.Component {
       withScroll,
       isLoaded,
       isDesktop,
+      isHomepage,
     } = this.props;
 
     const focusProps = autoFocus
@@ -208,7 +210,7 @@ class SectionBody extends React.Component {
             <div className="section-wrapper">
               <div className="section-wrapper-content" {...focusProps}>
                 {children}
-                <StyledSpacer pinned={pinned} />
+                <StyledSpacer pinned={pinned} isHomepage={isHomepage} />
               </div>
             </div>
           )
@@ -235,13 +237,15 @@ SectionBody.propTypes = {
   ]),
   viewAs: PropTypes.string,
   isLoaded: PropTypes.bool,
+  isHomepage: PropTypes.bool,
 };
 
 SectionBody.defaultProps = {
   autoFocus: false,
   pinned: false,
   uploadFiles: false,
   withScroll: true,
+  isHomepage: false,
 };
 
 export default inject(({ auth }) => {

diff --git a/web/ASC.Web.Client/public/locales/en/Home.json b/web/ASC.Web.Client/public/locales/en/Home.json
@@ -0,0 +1,5 @@
+{
+  "GoodMorning": "Good morning, {{displayName}}!",
+  "GoodAfternoon": "Good afternoon, {{displayName}}!",
+  "GoodEvening": "Good evening, {{displayName}}!"
+}
diff --git a/web/ASC.Web.Client/public/locales/ru/Home.json b/web/ASC.Web.Client/public/locales/ru/Home.json
@@ -0,0 +1,5 @@
+{
+  "GoodMorning": "Доброе утро, {{displayName}}!",
+  "GoodAfternoon": "Добрый день, {{displayName}}!",
+  "GoodEvening": "Добрый вечер, {{displayName}}!"
+}
diff --git a/web/ASC.Web.Client/src/components/NavMenu/sub-components/header-nav.js b/web/ASC.Web.Client/src/components/NavMenu/sub-components/header-nav.js
@@ -68,6 +68,7 @@ const HeaderNav = ({
   setUserIsUpdate,
   buildVersionInfo,
   debugInfo,
+  settingsModule,
 }) => {
   const { t } = useTranslation(["NavMenu", "Common", "About"]);
   const [visibleAboutDialog, setVisibleAboutDialog] = useState(false);
@@ -106,14 +107,29 @@ const HeaderNav = ({
 
   const onLogoutClick = useCallback(() => logout && logout(), [logout]);
 
+  const settingsUrl =
+    settingsModule && combineUrl(PROXY_HOMEPAGE_URL, settingsModule.link);
+  const onSettingsClick =
+    settingsModule && useCallback(() => history.push(settingsUrl), []);
+
   const getCurrentUserActions = useCallback(() => {
+    const settings = settingsModule
+      ? {
+          key: "SettingsBtn",
+          label: t("Common:Settings"),
+          onClick: onSettingsClick,
+          url: settingsUrl,
+        }
+      : null;
+
     const actions = [
       {
         key: "ProfileBtn",
         label: t("Common:Profile"),
         onClick: onProfileClick,
         url: peopleAvailable ? PROFILE_SELF_URL : PROFILE_MY_URL,
       },
+      settings,
       {
         key: "SwitchToBtn",
         ...(!isPersonal && {
@@ -225,6 +241,7 @@ export default withRouter(
     } = settingsStore;
     const { user, userIsUpdate, setUserIsUpdate } = userStore;
     const modules = auth.availableModules;
+    const settingsModule = modules.find((module) => module.id === "settings");
 
     return {
       isPersonal,
@@ -240,6 +257,7 @@ export default withRouter(
       setUserIsUpdate,
       buildVersionInfo,
       debugInfo,
+      settingsModule,
     };
   })(observer(HeaderNav))
 );
diff --git a/web/ASC.Web.Client/src/components/NavMenu/sub-components/header.js b/web/ASC.Web.Client/src/components/NavMenu/sub-components/header.js
@@ -19,10 +19,17 @@ import i18n from "../i18n";
 import { combineUrl } from "@appserver/common/utils";
 import { AppServerConfig } from "@appserver/common/constants";
 import NoUserSelect from "@appserver/components/utils/commonStyles";
+import {
+  getLink,
+  checkIfModuleOld,
+  onItemClick,
+} from "@appserver/studio/src/helpers/utils";
+import StyledExternalLinkIcon from "@appserver/studio/src/components/StyledExternalLinkIcon";
 
 const { proxyURL } = AppServerConfig;
 
 const backgroundColor = "#0F4071";
+const linkColor = "#7a95b0";
 
 const Header = styled.header`
   align-items: center;
@@ -84,6 +91,7 @@ const Header = styled.header`
     height: 24px;
     position: relative;
     padding: ${(props) => (!props.isPersonal ? "0 20px 0 6px" : "0")};
+    margin-left: ${(props) => (props.needNavMenu ? "0" : "10px")};
     cursor: pointer;
 
     @media ${tablet} {
@@ -107,22 +115,22 @@ const Header = styled.header`
 const StyledLink = styled.div`
   display: inline;
   .nav-menu-header_link {
-    color: #7a95b0;
+    color: ${linkColor};
     font-size: 13px;
   }
 
   a {
     text-decoration: none;
   }
   :hover {
-    color: #7a95b0;
+    color: ${linkColor};
     -webkit-text-decoration: underline;
     text-decoration: underline;
   }
 `;
 
 const versionBadgeProps = {
-  color: "#7A95B0",
+  color: linkColor,
   fontWeight: "600",
   fontSize: "13px",
 };
@@ -164,15 +172,34 @@ const HeaderComponent = ({
     if (item) item.onBadgeClick(e);
   };
 
-  const onItemClick = (e) => {
-    if (!e) return;
-    const link = e.currentTarget.dataset.link;
-    history.push(link);
-    backdropClick();
-    e.preventDefault();
-  };
-
   const numberOfModules = mainModules.filter((item) => !item.separator).length;
+  const needNavMenu = currentProductId !== "home";
+
+  const navItems = mainModules
+    .filter((module) => module.id !== "settings")
+    .map(({ id, separator, iconUrl, notifications, link, title, dashed }) => {
+      const itemLink = getLink(link);
+      const shouldRenderIcon = checkIfModuleOld(link);
+      return (
+        <NavItem
+          separator={!!separator}
+          key={id}
+          data-id={id}
+          data-link={itemLink}
+          opened={isNavOpened}
+          active={id == currentProductId}
+          iconUrl={iconUrl}
+          badgeNumber={notifications}
+          onClick={onItemClick}
+          onBadgeClick={onBadgeClick}
+          url={itemLink}
+          dashed={dashed}
+        >
+          {title}
+          {shouldRenderIcon && <StyledExternalLinkIcon color={linkColor} />}
+        </NavItem>
+      );
+    });
 
   return (
     <>
@@ -182,8 +209,9 @@ const HeaderComponent = ({
         isPersonal={isPersonal}
         isAuthenticated={isAuthenticated}
         className="navMenuHeader hidingHeader"
+        needNavMenu={needNavMenu}
       >
-        {!isPersonal && (
+        {!isPersonal && needNavMenu && (
           <NavItem
             badgeNumber={totalNotifications}
             onClick={onClick}
@@ -239,35 +267,7 @@ const HeaderComponent = ({
             key={"nav-products-separator"}
             data-id={"nav-products-separator"}
           />
-          {mainModules.map(
-            ({
-              id,
-              separator, //iconName,
-              iconUrl,
-              notifications,
-              link,
-              title,
-              dashed,
-            }) => (
-              <NavItem
-                separator={!!separator}
-                key={id}
-                data-id={id}
-                data-link={link}
-                opened={isNavOpened}
-                active={id == currentProductId}
-                //iconName={iconName}
-                iconUrl={iconUrl}
-                badgeNumber={notifications}
-                onClick={onItemClick}
-                onBadgeClick={onBadgeClick}
-                url={link}
-                dashed={dashed}
-              >
-                {id === "settings" ? i18n.t("Common:Settings") : title}
-              </NavItem>
-            )
-          )}
+          {navItems}
           <Box className="version-box">
             <Link
               as="a"
@@ -314,6 +314,7 @@ HeaderComponent.propTypes = {
   version: PropTypes.string,
   isAuthenticated: PropTypes.bool,
   isAdmin: PropTypes.bool,
+  needNavMenu: PropTypes.bool,
 };
 
 export default inject(({ auth }) => {

diff --git a/web/ASC.Web.Client/src/components/NavMenu/sub-components/profile-actions.js b/web/ASC.Web.Client/src/components/NavMenu/sub-components/profile-actions.js
@@ -106,16 +106,19 @@ class ProfileActions extends React.PureComponent {
           forwardedRef={this.ref}
         >
           <div style={{ paddingTop: "8px" }}>
-            {this.props.userActions.map((action) => (
-              <Link
-                noHover={true}
-                key={action.key}
-                href={action.url}
-                onClick={this.onClickItemLink}
-              >
-                <DropDownItem {...action} />
-              </Link>
-            ))}
+            {this.props.userActions.map(
+              (action) =>
+                action && (
+                  <Link
+                    noHover={true}
+                    key={action.key}
+                    href={action.url}
+                    onClick={this.onClickItemLink}
+                  >
+                    <DropDownItem {...action} />
+                  </Link>
+                )
+            )}
           </div>
         </ProfileMenu>
       </div>

diff --git a/web/ASC.Web.Client/src/components/StyledExternalLinkIcon.js b/web/ASC.Web.Client/src/components/StyledExternalLinkIcon.js
@@ -0,0 +1,13 @@
+import ExternalLinkIcon from "../../../../public/images/external.link.react.svg";
+import styled from "styled-components";
+
+const StyledExternalLinkIcon = styled(ExternalLinkIcon)`
+  height: 12px;
+  width: 12px;
+  margin: 0 4px;
+  path {
+    fill: ${(props) => props.color};
+  }
+`;
+
+export default StyledExternalLinkIcon;