feat: Add new app detail page (#655)

* refactor: Modify Header and TitleBanner by design

Author: dongrui

src/App.jsx

@@ -56,7 +56,7 @@ class App extends React.Component {
 
       return (
         <LazyLoad>
-          {(hasHeader || isHome) && <Header isHome={isHome} />}
+          {(hasHeader || isHome) && <Header />}
           <WrapComp {...props} />
           {(hasHeader || isHome) && <Footer />}
         </LazyLoad>

src/components/AppImages/index.jsx

@@ -36,7 +36,7 @@ export default class AppImages extends Component {
             <Link
               className={styles.image}
               key={app_id}
-              to={user.isDev ? `/dashboard/app/${app_id}` : `/store/${app_id}`}
+              to={`/apps/${app_id}`}
               title={name}
             >
               <Image src={icon} iconLetter={name} className={styles.img} />

src/components/AppList/index.jsx

@@ -63,7 +63,7 @@ export default class AppList extends PureComponent {
                   icon={app.icon}
                   name={app.name}
                   desc={app.description}
-                  link={`/${skipLink}/${app.app_id}`}
+                  link={`/apps/${app.app_id}`}
                   fold
                 />
               ))}
@@ -94,7 +94,7 @@ export default class AppList extends PureComponent {
               name={app.name}
               desc={app.description}
               key={idx}
-              link={`/${skipLink}/${app.app_id}`}
+              link={`/apps/${app.app_id}`}
             />
           ))}
 

src/components/Header/index.jsx

@@ -6,7 +6,7 @@ import { observer, inject } from 'mobx-react';
 import { translate } from 'react-i18next';
 import { toUrl } from 'utils/url';
 
-import { Popover, Icon, Input } from 'components/Base';
+import { Popover, Icon } from 'components/Base';
 import MenuLayer from 'components/MenuLayer';
 import Logo from '../Logo';
 
@@ -21,24 +21,13 @@ import styles from './index.scss';
 }))
 @observer
 class Header extends Component {
-  static propTypes = {
-    isHome: PropTypes.bool
-  };
-
-  onSearch = async value => {
-    const { appStore, history, isHome } = this.props;
-    const pushUrl = isHome ? `/apps/search/${value}` : `/store/search/${value}`;
-    history.push(pushUrl);
-    await appStore.fetchAll({ search_word: value });
-    appStore.homeApps = appStore.apps;
-  };
-
-  onClearSearch = async () => {
-    this.props.history.push('/');
-  };
-
   isLinkActive = curLink => {
     const { pathname } = location;
+
+    if (curLink === 'apps') {
+      return pathname === '/' || pathname.indexOf(curLink) > -1;
+    }
+
     return pathname.indexOf(curLink) > -1;
   };
 
@@ -48,10 +37,10 @@ class Header extends Component {
     return (
       <div className={styles.menus}>
         <NavLink
-          to="/store"
+          to="/apps"
           exact
           activeClassName={styles.active}
-          isActive={() => this.isLinkActive('store')}
+          isActive={() => this.isLinkActive('apps')}
         >
           {t('App Store')}
         </NavLink>
@@ -106,41 +95,21 @@ class Header extends Component {
   }
 
   render() {
-    const {
-      t,
-      isHome,
-      match,
-      rootStore: { fixNav }
-    } = this.props;
-    const logoUrl = fixNav ? '/logo_light.svg' : '/logo_dark.svg';
-    const appSearch = match.params.search;
+    const { user, t } = this.props;
 
-    if (isHome) {
+    if (!user.isNormal) {
       return (
-        <div
-          className={classnames('header', styles.header, {
-            [styles.deepHome]: fixNav
-          })}
-        >
+        <div className={styles.header}>
           <div className={styles.wrapper}>
-            <Logo className={styles.logo} url={logoUrl} />
+            <Logo className={styles.logo} url="/logo_light.svg" />
             {this.renderMenuBtns()}
-            {fixNav && (
-              <Input.Search
-                className={styles.search}
-                placeholder={t('search.placeholder')}
-                value={appSearch}
-                onSearch={this.onSearch}
-                onClear={this.onClearSearch}
-              />
-            )}
           </div>
         </div>
       );
     }
 
     return (
-      <div className={classnames(styles.header, styles.deepInner)}>
+      <div className={classnames(styles.header, styles.menusHeader)}>
         <div className={styles.wrapper}>
           <Link className={styles.logoIcon} to="/">
             <Icon

src/components/Header/index.scss

@@ -14,12 +14,12 @@ $profile-hover-color: #efe6f8;
 }
 
 .header {
-  position: absolute;
+  position: fixed;
   top: 0;
+  z-index: 99;
   width: 100%;
   height: $header-height;
-  z-index: 99;
-  background: none;
+  background-color: $N400;
 
   .wrapper {
     width: $content-width;
@@ -99,9 +99,10 @@ $profile-hover-color: #efe6f8;
   .login{
     float: right;
     display: inline-block;
-    margin: 14px 0;
-    line-height: 20px;
-    color: $N500;
+    margin: 16px 0;
+    line-height: 16px;
+    font-size: 12px;
+    color: $N0;
     font-weight: 500;
     opacity: 0.9;
 
@@ -118,25 +119,28 @@ $profile-hover-color: #efe6f8;
       height: 16px;
       width: auto;
       line-height: 16px;
-      font-size: 14px;
-      opacity: 0.9;
-      color: $N500;
+      font-size: 12px;
+      color: $N65;
+      opacity: 1;
       font-weight: 500;
       border: 0 none;
 
       .icon {
         float: right;
         margin-left: 2px;
         svg {
-          --primary-color: #{$N500};
-          --secondary-color: #{$N500};
+          --primary-color: #{$N65};
+          --secondary-color: #{$N65};
         }
       }
 
-      &:hover{
-        border: 0 none;
-        box-shadow: none;
-        opacity: 1;
+      &:hover {
+        color: $N30;
+
+        .icon svg {
+          --primary-color: #{$N30};
+          --secondary-color: #{$N30};
+        }
       }
     }
   }
@@ -149,36 +153,7 @@ $profile-hover-color: #efe6f8;
   }
 }
 
-.deepInner,
-.deepHome {
-  position: fixed;
-}
-
-.deepHome {
-  background: linear-gradient(to left, $P75, #854fb9 32%, #484999);
-  animation-duration: 0.5s;
-  animation-name: deepHeader;
-  animation-iteration-count: 1;
-  animation-timing-function: ease-in-out;
-  animation-fill-mode: forwards;
-
-  .login {
-    color: $N0;
-  }
-
-  .user [class*='target']{
-    color: $N0;
-
-    .icon svg{
-      --primary-color: #{$N0};
-      --secondary-color: #{$N0};
-    }
-  }
-}
-
-.deepInner {
-  background-color: $N400;
-
+.menusHeader {
   .logoIcon {
     float: left;
     display: inline-block;
@@ -220,26 +195,6 @@ $profile-hover-color: #efe6f8;
     }
   }
 
-  .user [class*='target'] {
-    font-size: 12px;
-    color: $N65;
-    opacity: 1;
-
-    .icon svg{
-      --primary-color: #{$N65};
-      --secondary-color: #{$N65};
-    }
-
-    &:hover {
-      color: $N30;
-
-      .icon svg {
-        --primary-color: #{$N30};
-        --secondary-color: #{$N30};
-      }
-    }
-  }
-
   .mail {
     float: right;
     margin: 14px 8px;

src/components/Layout/TitleBanner.jsx

@@ -3,12 +3,13 @@ import PropTypes from 'prop-types';
 import { withRouter } from 'react-router-dom';
 import { translate } from 'react-i18next';
 
-import { Image } from 'components/Base';
+import { Image, Input } from 'components/Base';
 import styles from './index.scss';
 
 @translate()
 class TitleBanner extends Component {
   static propTypes = {
+    appSearch: PropTypes.string,
     className: PropTypes.string,
     description: PropTypes.string,
     hasSearch: PropTypes.bool,
@@ -20,11 +21,12 @@ class TitleBanner extends Component {
     icon: '',
     title: '',
     description: '',
-    hasSearch: false
+    hasSearch: false,
+    appSearch: ''
   };
 
   onSearch = async value => {
-    this.props.history.push(`/store/search/${value}`);
+    this.props.history.push(`/apps/search/${value}`);
   };
 
   onClearSearch = async () => {
@@ -33,19 +35,31 @@ class TitleBanner extends Component {
 
   render() {
     const {
-      icon, title, description, t
+      icon, title, description, hasSearch, appSearch, t
     } = this.props;
 
     return (
       <div className={styles.titleBanner}>
         <div className={styles.wrapper}>
-          {Boolean(icon) && (
-            <span className={styles.image}>
-              <Image src={icon} iconSize={48} iconLetter={title} />
-            </span>
+          <div className={styles.words}>
+            {Boolean(icon) && (
+              <span className={styles.image}>
+                <Image src={icon} iconSize={48} iconLetter={title} />
+              </span>
+            )}
+            <div className={styles.name}>{t(title)}</div>
+            <div className={styles.description}>{t(description)}</div>
+          </div>
+
+          {hasSearch && (
+            <Input.Search
+              className={styles.search}
+              placeholder={t('search.placeholder')}
+              value={appSearch}
+              onSearch={this.onSearch}
+              onClear={this.onClearSearch}
+            />
           )}
-          <div className={styles.name}>{t(title)}</div>
-          <div className={styles.description}>{t(description)}</div>
         </div>
       </div>
     );

src/components/Layout/index.jsx

@@ -113,7 +113,8 @@ class Layout extends Component {
       isCenterPage,
       centerWidth,
       hasBack,
-      user
+      user,
+      match
     } = this.props;
 
     const hasMenu = !user.isNormal && !isHome;