From f668cca0948d19238662ee4fe6681552b1e36245 Mon Sep 17 00:00:00 2001 From: dongrui Date: Mon, 20 May 2019 12:02:52 +0800 Subject: [PATCH 1/2] chore: Add menu introduction on boarding pages --- public/menu/install.svg | 90 ++++++++++++++ public/menu/instance.svg | 95 ++++++++++++++ public/menu/runtime.png | Bin 0 -> 15115 bytes public/menu/store.svg | 138 +++++++++++++++++++++ src/components/Base/Button/index.scss | 2 +- src/components/Header/index.jsx | 64 +++++++--- src/components/Header/index.scss | 2 + src/components/Header/menus.js | 40 ++++++ src/components/MenuIntroduction/index.jsx | 76 ++++++++++++ src/components/MenuIntroduction/index.scss | 95 ++++++++++++++ 10 files changed, 583 insertions(+), 19 deletions(-) create mode 100644 public/menu/install.svg create mode 100644 public/menu/instance.svg create mode 100644 public/menu/runtime.png create mode 100644 public/menu/store.svg create mode 100644 src/components/Header/menus.js create mode 100644 src/components/MenuIntroduction/index.jsx create mode 100644 src/components/MenuIntroduction/index.scss diff --git a/public/menu/install.svg b/public/menu/install.svg new file mode 100644 index 00000000..fc7d41c6 --- /dev/null +++ b/public/menu/install.svg @@ -0,0 +1,90 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/menu/instance.svg b/public/menu/instance.svg new file mode 100644 index 00000000..460b513c --- /dev/null +++ b/public/menu/instance.svg @@ -0,0 +1,95 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/menu/runtime.png b/public/menu/runtime.png new file mode 100644 index 0000000000000000000000000000000000000000..bf1f4096627bf65b426df800687b7b5949303096 GIT binary patch literal 15115 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 k#k}{90||ZQ^&6rwu=x@Cvm~qJe06h6od;kCd literal 0 HcmV?d00001 diff --git a/public/menu/store.svg b/public/menu/store.svg new file mode 100644 index 00000000..67eaca1a --- /dev/null +++ b/public/menu/store.svg @@ -0,0 +1,138 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/Base/Button/index.scss b/src/components/Base/Button/index.scss index 36d00501..006af9b9 100644 --- a/src/components/Base/Button/index.scss +++ b/src/components/Base/Button/index.scss @@ -3,7 +3,7 @@ .button { height: 32px; padding: 7px 12px; - line-height: 16px; + line-height: 18px; font-size: $body-size; border-radius: 2px; border: 0 none; diff --git a/src/components/Header/index.jsx b/src/components/Header/index.jsx index bec6fa2f..f497b814 100644 --- a/src/components/Header/index.jsx +++ b/src/components/Header/index.jsx @@ -7,12 +7,16 @@ import { withTranslation } from 'react-i18next'; import { Popover, Icon } from 'components/Base'; import MenuLayer from 'components/MenuLayer'; import routes, { toRoute } from 'routes'; +import MenuIntroduction from 'components/MenuIntroduction'; +import { getCookie, setCookie } from 'utils'; +import menus from './menus'; import styles from './index.scss'; -const LinkItem = ({ to, title, path }) => { +const LinkItem = ({ + to, title, path, index +}) => { const isActive = to === '/' ? ['/', '/apps/:appId'].includes(path) : path.startsWith(to); - return ( { })) @observer export class Header extends Component { + state = { + activeIndex: 1 + }; + + changeIntroduction = isKnow => { + const index = this.state.activeIndex; + this.setState({ + activeIndex: this.state.activeIndex + 1 + }); + if (index >= menus.length || isKnow) { + const { user } = this.props; + setCookie(`${user.user_id}_no_introduction`, true); + } + }; + renderMenus = () => { const { t, user, match } = this.props; const { path } = match; + const { activeIndex } = this.state; + const introduction = (menus[activeIndex - 1] || {}).introduction; + const len = menus.length; + const noIntroduction = getCookie(`${user.user_id}_no_introduction`); + console.log(noIntroduction, activeIndex); if (!user.isLoggedIn()) { return null; @@ -42,22 +66,26 @@ export class Header extends Component { return (
- - - - + {menus.map((item, index) => ( + + ))} + {!noIntroduction && ( + + )}
); }; diff --git a/src/components/Header/index.scss b/src/components/Header/index.scss index 61166ea5..9a1bba77 100644 --- a/src/components/Header/index.scss +++ b/src/components/Header/index.scss @@ -179,9 +179,11 @@ $profile-hover-color: #efe6f8; .menusHeader { .menus { + position: relative; display: inline-block; margin-left: 8px; a { + position: relative; display: inline-block; margin: 0 8px; padding: 16px 0; diff --git a/src/components/Header/menus.js b/src/components/Header/menus.js new file mode 100644 index 00000000..4f50e528 --- /dev/null +++ b/src/components/Header/menus.js @@ -0,0 +1,40 @@ +export default [ + { + name: 'App Store', + link: '', + introduction: { + title: 'App Store', + description: + '包含 SaaS 类，容器器，VM 类等众多类型的应用，超过 1200 款，可以随时购买与部署。', + image: '/menu/store.svg' + } + }, + { + name: 'Purchased', + link: 'apps', + introduction: { + title: 'Purchased', + description: '所有部署或购买过的应用都可以在此统一查看和管理。', + image: '/menu/install.svg' + } + }, + { + name: 'My Instances', + link: 'clusters', + introduction: { + title: 'My Instances', + description: + '包括所有部署的实例以及实例的重要监控信息，支持不同维度的搜索和过滤。', + image: '/menu/instance.svg' + } + }, + { + name: 'My Runtimes', + link: 'runtimes', + introduction: { + title: 'My Runtimes', + description: '支持多种云平台的环境接入，统一管理，全面监控。', + image: '/menu/runtime.png' + } + } +]; diff --git a/src/components/MenuIntroduction/index.jsx b/src/components/MenuIntroduction/index.jsx new file mode 100644 index 00000000..bed9ce85 --- /dev/null +++ b/src/components/MenuIntroduction/index.jsx @@ -0,0 +1,76 @@ +import React, { PureComponent } from 'react'; +import PropTypes from 'prop-types'; +import classnames from 'classnames'; + +import { Button } from 'components/Base'; +import styles from './index.scss'; + +export default class MenuIntroduction extends PureComponent { + static propTypes = { + activeIndex: PropTypes.number, + changeIntroduction: PropTypes.func, + className: PropTypes.string, + description: PropTypes.string, + image: PropTypes.string, + title: PropTypes.string, + total: PropTypes.number + }; + + render() { + const { + className, + title, + description, + image, + activeIndex, + total, + changeIntroduction + } = this.props; + const dots = Array.from(Array(total).keys()); + const left = (activeIndex - 1) * 75; + + return ( +
+
+
+
+
{title}
+
{description}
+
+ + +
+ +
+ {dots.map((dot, index) => ( +
+
+
+
+ ); + } +} diff --git a/src/components/MenuIntroduction/index.scss b/src/components/MenuIntroduction/index.scss new file mode 100644 index 00000000..968907fd --- /dev/null +++ b/src/components/MenuIntroduction/index.scss @@ -0,0 +1,95 @@ +@import '~scss/vars'; + +.menuIntroduction { + position: absolute; + left: 0; + top: 100%; + z-index: 2; + width: 445px; + //height: 184.6px; + border-radius: 2px; + background-color: $N0; + + &::after { + content: ''; + position: absolute; + top: -6px; + left: 24px; + border-bottom: 6px solid $N0; + border-right: 5px solid transparent; + border-left: 5px solid transparent; + } + + .content { + padding-left: 24px; + + .title { + @include title-font($line-height: 32px, $font-size: 20px); + padding: 28px 0 12px; + } + + .description { + @include normal-font; + width: 265px; + padding-bottom: 24px; + } + + .word { + display: inline-block; + } + + .image { + float: right; + max-height: 135px; + } + } + + .footer { + padding: 0 24px; + height: 48px; + line-height: 48px; + border-radius: 2px; + background-color: #eff0f5; + + .dot { + display: inline-block; + width: 6px; + height: 6px; + border-radius: 50%; + background-color: #d5dae5; + margin-right: 16px; + + &.active { + background-color: #8454cd; + } + } + + .skip { + display: inline-block; + margin-right: 12px; + line-height: 20px; + font-size: 12px; + color: #8c96ad; + text-align: center; + cursor: pointer; + } + + button { + height: 24px; + font-size: 12px; + padding: 4px 8px; + cursor: pointer; + } + } +} + +.shadow { + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: -1; + border-radius: 2px; + background-color: rgba(52, 57, 69, 0.7); +} From 3a268cadefc98b653d21eb1b8db6059934512e75 Mon Sep 17 00:00:00 2001 From: dongrui Date: Wed, 22 May 2019 17:55:34 +0800 Subject: [PATCH 2/2] chore: Add translation and test code --- src/components/Header/index.jsx | 56 ++++++++++-- src/components/Header/index.scss | 85 ++++++++++++++++++- src/components/Header/menus.js | 10 +-- src/components/MenuIntroduction/index.jsx | 10 ++- src/components/MenuIntroduction/index.scss | 10 +-- src/locales/en/base.json | 9 +- src/locales/zh/base.json | 13 ++- src/pages/Login/index.jsx | 4 +- test/components/MenuIntroduction.test.js | 16 ++++ .../MenuIntroduction.test.js.snap | 66 ++++++++++++++ 10 files changed, 251 insertions(+), 28 deletions(-) create mode 100644 test/components/MenuIntroduction.test.js create mode 100644 test/components/__snapshots__/MenuIntroduction.test.js.snap diff --git a/src/components/Header/index.jsx b/src/components/Header/index.jsx index f497b814..3cc9ce2a 100644 --- a/src/components/Header/index.jsx +++ b/src/components/Header/index.jsx @@ -4,7 +4,7 @@ import { withRouter, Link, NavLink } from 'react-router-dom'; import { observer, inject } from 'mobx-react'; import { withTranslation } from 'react-i18next'; -import { Popover, Icon } from 'components/Base'; +import { Popover, Icon, Button } from 'components/Base'; import MenuLayer from 'components/MenuLayer'; import routes, { toRoute } from 'routes'; import MenuIntroduction from 'components/MenuIntroduction'; @@ -14,14 +14,17 @@ import menus from './menus'; import styles from './index.scss'; const LinkItem = ({ - to, title, path, index + to, title, path, isIntroduction }) => { const isActive = to === '/' ? ['/', '/apps/:appId'].includes(path) : path.startsWith(to); return ( {title} @@ -37,7 +40,7 @@ const LinkItem = ({ @observer export class Header extends Component { state = { - activeIndex: 1 + activeIndex: 0 }; changeIntroduction = isKnow => { @@ -51,14 +54,47 @@ export class Header extends Component { } }; - renderMenus = () => { + rederStartModal() { + const { t } = this.props; + + return ( +
+
+
+ this.changeIntroduction(true)} + className={styles.close} + name="close" + size={36} + type="white" + /> +
+
+
{t('WELCOME_TO_OPENPITRIX')}
+
+ {t('WELCOME_TO_OPENPITRIX_DESC')} +
+ +
+
+
+
+ ); + } + + renderMenus() { const { t, user, match } = this.props; const { path } = match; const { activeIndex } = this.state; const introduction = (menus[activeIndex - 1] || {}).introduction; const len = menus.length; const noIntroduction = getCookie(`${user.user_id}_no_introduction`); - console.log(noIntroduction, activeIndex); if (!user.isLoggedIn()) { return null; @@ -73,10 +109,14 @@ export class Header extends Component { title={t(item.name)} path={path} index={index} + isIntroduction={index === activeIndex - 1} changeIntroduction={this.changeIntroduction} /> ))} - {!noIntroduction && ( + + {!noIntroduction && activeIndex === 0 && this.rederStartModal()} + + {!noIntroduction && activeIndex > 0 && ( ); - }; + } renderMenuBtns() { const { t, user } = this.props; diff --git a/src/components/Header/index.scss b/src/components/Header/index.scss index 9a1bba77..25568e17 100644 --- a/src/components/Header/index.scss +++ b/src/components/Header/index.scss @@ -183,7 +183,6 @@ $profile-hover-color: #efe6f8; display: inline-block; margin-left: 8px; a { - position: relative; display: inline-block; margin: 0 8px; padding: 16px 0; @@ -199,6 +198,15 @@ $profile-hover-color: #efe6f8; &.active { color: $N10; } + + &.introduction { + position: relative; + z-index: 1; + margin: 0; + padding: 8px; + color: $N10; + background: $N400; + } } } @@ -229,3 +237,78 @@ $profile-hover-color: #efe6f8; } } } + +.startModal { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 2; + width: 626px; + height: 480px; + border-radius: 2px; + box-shadow: 0 1px 4px 0 rgba(73, 33, 173, 0.06), + 0 4px 8px 0 rgba(35, 35, 36, 0.04); + background-color: $N0; + + .banner { + position: relative; + width: 626px; + height: 181px; + border-radius: 2px; + background-image: radial-gradient(circle at 9% 0, $P75, $N500); + + .close { + position: absolute; + right: 12px; + top: 24px; + } + + .circle { + width: 308px; + height: 308px; + border-radius: 50%; + background-image: radial-gradient( + circle at 50% 0, + $Y200, + rgba(252, 217, 102, 0) + ); + } + } + + .word { + width: 368px; + margin: 0 auto; + text-align: center; + + .title { + @include title-font($line-height: 36px, $font-size: 24px); + margin-top: 40px; + margin-bottom: 8px; + } + + .description { + @include note-font($line-height: 28px, $font-size: 14px); + margin-bottom: 32px; + } + + button { + padding: 7px 24px; + } + } +} + +.modalShadow { + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + background-color: rgba(52, 57, 69, 0.7); +} + +:lang(en) { + .startModal .word { + width: 420px; + } +} diff --git a/src/components/Header/menus.js b/src/components/Header/menus.js index 4f50e528..c3f5c879 100644 --- a/src/components/Header/menus.js +++ b/src/components/Header/menus.js @@ -4,8 +4,7 @@ export default [ link: '', introduction: { title: 'App Store', - description: - '包含 SaaS 类，容器器，VM 类等众多类型的应用，超过 1200 款，可以随时购买与部署。', + description: 'MENU_APP_INTRO', image: '/menu/store.svg' } }, @@ -14,7 +13,7 @@ export default [ link: 'apps', introduction: { title: 'Purchased', - description: '所有部署或购买过的应用都可以在此统一查看和管理。', + description: 'MENU_PURCHASED_INTRO', image: '/menu/install.svg' } }, @@ -23,8 +22,7 @@ export default [ link: 'clusters', introduction: { title: 'My Instances', - description: - '包括所有部署的实例以及实例的重要监控信息，支持不同维度的搜索和过滤。', + description: 'MENU_CLUSTER_INTRO', image: '/menu/instance.svg' } }, @@ -33,7 +31,7 @@ export default [ link: 'runtimes', introduction: { title: 'My Runtimes', - description: '支持多种云平台的环境接入，统一管理，全面监控。', + description: 'MENU_RUNTIME_INTRO', image: '/menu/runtime.png' } } diff --git a/src/components/MenuIntroduction/index.jsx b/src/components/MenuIntroduction/index.jsx index bed9ce85..b27c950f 100644 --- a/src/components/MenuIntroduction/index.jsx +++ b/src/components/MenuIntroduction/index.jsx @@ -1,10 +1,12 @@ import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; +import { withTranslation } from 'react-i18next'; import { Button } from 'components/Base'; import styles from './index.scss'; +@withTranslation() export default class MenuIntroduction extends PureComponent { static propTypes = { activeIndex: PropTypes.number, @@ -24,7 +26,8 @@ export default class MenuIntroduction extends PureComponent { image, activeIndex, total, - changeIntroduction + changeIntroduction, + t } = this.props; const dots = Array.from(Array(total).keys()); const left = (activeIndex - 1) * 75; @@ -53,18 +56,17 @@ export default class MenuIntroduction extends PureComponent { key={index} /> ))} -
{activeIndex !== total && ( )}
diff --git a/src/components/MenuIntroduction/index.scss b/src/components/MenuIntroduction/index.scss index 968907fd..3148bcd9 100644 --- a/src/components/MenuIntroduction/index.scss +++ b/src/components/MenuIntroduction/index.scss @@ -6,7 +6,6 @@ top: 100%; z-index: 2; width: 445px; - //height: 184.6px; border-radius: 2px; background-color: $N0; @@ -49,18 +48,18 @@ height: 48px; line-height: 48px; border-radius: 2px; - background-color: #eff0f5; + background-color: $N10; .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; - background-color: #d5dae5; + background-color: $N30; margin-right: 16px; &.active { - background-color: #8454cd; + background-color: $P75; } } @@ -69,7 +68,7 @@ margin-right: 12px; line-height: 20px; font-size: 12px; - color: #8c96ad; + color: $N75; text-align: center; cursor: pointer; } @@ -89,7 +88,6 @@ bottom: 0; left: 0; right: 0; - z-index: -1; border-radius: 2px; background-color: rgba(52, 57, 69, 0.7); } diff --git a/src/locales/en/base.json b/src/locales/en/base.json index 6b14ce36..111ff348 100644 --- a/src/locales/en/base.json +++ b/src/locales/en/base.json @@ -191,5 +191,12 @@ "TIP_HELM_NAMESPACE": "The input characters for the namespace contain only lowercase letters and numbers", "MY_INSTANCES_DESCRIPTION": "List of instances created based on the application.", - "SPECIFICATION_LINK_TITLE": "{{type}} specification and application development" + "SPECIFICATION_LINK_TITLE": "{{type}} specification and application development", + + "WELCOME_TO_OPENPITRIX": "Welcome to the OpenPitrix App Center", + "WELCOME_TO_OPENPITRIX_DESC": "You just created an account, let us introduce you how to quickly find the application you need and deploy and manage it.", + "MENU_APP_INTRO": "There are many types of applications including SaaS class, container, VM class, etc., more than 1200 models, you can purchase and deploy at any time.", + "MENU_PURCHASED_INTRO": "All deployed or purchased apps can be viewed and managed here.", + "MENU_CLUSTER_INTRO": "Includes all deployed instances and important monitoring information for the instances, supporting different dimensions of search and filtering.", + "MENU_RUNTIME_INTRO": "Supports environment access, unified management, and comprehensive monitoring of multiple cloud platforms." } diff --git a/src/locales/zh/base.json b/src/locales/zh/base.json index 6d30b802..5a716363 100644 --- a/src/locales/zh/base.json +++ b/src/locales/zh/base.json @@ -499,5 +499,16 @@ "Back home": " 返回首页", "Sorry, the page you visited does not exist": "抱歉，您访问的页面不存在。", - "Invalid operation": "非法操作" + "Invalid operation": "非法操作", + + "WELCOME_TO_OPENPITRIX": "欢迎进入 OpenPitrix 应用中心", + "WELCOME_TO_OPENPITRIX_DESC": "你刚刚创建了账户，接下来让我们来为你介绍一下如何快速找到你需要的应用并部署和管理。", + "Let's start": "开始吧", + "MENU_APP_INTRO": "包含 SaaS 类，容器器，VM 类等众多类型的应用，超过 1200 款，可以随时购买与部署。", + "MENU_PURCHASED_INTRO": "所有部署或购买过的应用都可以在此统一查看和管理。", + "MENU_CLUSTER_INTRO": "包括所有部署的实例以及实例的重要监控信息，支持不同维度的搜索和过滤。", + "MENU_RUNTIME_INTRO": "支持多种云平台的环境接入，统一管理，全面监控。", + "Skip": "跳过", + "Learn all": "全部了解", + "To understanding": "了解" } diff --git a/src/pages/Login/index.jsx b/src/pages/Login/index.jsx index 1ec4fa41..4687e2ca 100644 --- a/src/pages/Login/index.jsx +++ b/src/pages/Login/index.jsx @@ -40,7 +40,9 @@ export default class Login extends Component { await store.fetchDetail(res.user.sub, true); } - const defaultUrl = toRoute(routes.portal.apps, user.defaultPortal); + const defaultUrl = user.isNormal + ? toRoute(routes.home) + : toRoute(routes.portal.apps, user.defaultPortal); if (!(res && res.err)) { localStorage.removeItem('menuApps'); // clear newest visited menu apps diff --git a/test/components/MenuIntroduction.test.js b/test/components/MenuIntroduction.test.js new file mode 100644 index 00000000..f8672077 --- /dev/null +++ b/test/components/MenuIntroduction.test.js @@ -0,0 +1,16 @@ +import MenuIntroduction from 'components/MenuIntroduction'; + +describe('Layout/MenuIntroduction', () => { + it('basic render', () => { + const wrapper = render( + + ); + + expect(toJson(wrapper)).toMatchSnapshot(); + }); +}); diff --git a/test/components/__snapshots__/MenuIntroduction.test.js.snap b/test/components/__snapshots__/MenuIntroduction.test.js.snap new file mode 100644 index 00000000..ef809ff6 --- /dev/null +++ b/test/components/__snapshots__/MenuIntroduction.test.js.snap @@ -0,0 +1,66 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Layout/MenuIntroduction basic render 1`] = ` +
+
+
+
+
+ title +
+
+ test +
+
+ +
+
+
+
+
+
+`;