-
Notifications
You must be signed in to change notification settings - Fork 40
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: implement a button to switch between new and old UI (#609)
* feat: implement a button to switch between new and old UI * fix: get rid of unnecessary invisible space * fix: disable settings button while loading * feat: add notification on how to switch back to old UI
- Loading branch information
Showing
22 changed files
with
486 additions
and
44 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| export enum LocalStorageKey { | ||
| UIMode = 'ui-mode' | ||
| } | ||
|
|
||
| export enum UiMode { | ||
| Old = 'old', | ||
| New = 'new', | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,36 +1,51 @@ | ||
| import React, {Component} from 'react'; | ||
| import {Flask} from '@gravity-ui/icons'; | ||
| import React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import {connect} from 'react-redux'; | ||
| import {Label} from '@gravity-ui/uikit'; | ||
| import {Button, Icon, Label} from '@gravity-ui/uikit'; | ||
| import {isEmpty} from 'lodash'; | ||
| import {version} from '../../../../package.json'; | ||
| import useLocalStorage from '@/static/hooks/useLocalStorage'; | ||
| import {LocalStorageKey, UiMode} from '@/constants/local-storage'; | ||
|
|
||
| class ReportInfo extends Component { | ||
| static propTypes = { | ||
| gui: PropTypes.bool.isRequired, | ||
| timestamp: PropTypes.number.isRequired | ||
| function ReportInfo(props) { | ||
| const {gui, timestamp} = props; | ||
| const lang = isEmpty(navigator.languages) ? navigator.language : navigator.languages[0]; | ||
| const date = new Date(timestamp).toLocaleString(lang); | ||
|
|
||
| const [, setUiMode] = useLocalStorage(LocalStorageKey.UIMode, UiMode.New); | ||
|
|
||
| const onNewUiButtonClick = () => { | ||
| setUiMode(UiMode.New); | ||
|
|
||
| const targetUrl = new URL(window.location.href); | ||
|
|
||
| targetUrl.pathname = targetUrl.pathname.replace(/\/(index\.html)?$/, (match, ending) => ending ? '/new-ui.html' : '/new-ui'); | ||
| targetUrl.searchParams.set('switched-from-old-ui', '1'); | ||
|
|
||
| window.location.href = targetUrl.href; | ||
| }; | ||
|
|
||
| render() { | ||
| const {gui, timestamp} = this.props; | ||
| const lang = isEmpty(navigator.languages) ? navigator.language : navigator.languages[0]; | ||
| const date = new Date(timestamp).toLocaleString(lang); | ||
|
|
||
| return ( | ||
| <div className="report-info"> | ||
| <Label qa='version-label' size='m' className='label'> | ||
| Version | ||
| <div className='detail'>{version}</div> | ||
| </Label> | ||
| {!gui && <Label qa='created-at-label' size='m' className='label'> | ||
| Created at | ||
| <div className='detail'>{date}</div> | ||
| </Label>} | ||
| </div> | ||
| ); | ||
| } | ||
| return ( | ||
| <div className="report-info"> | ||
| <Button className={'new-ui-button'} onClick={onNewUiButtonClick}><div className='new-ui-button__glow'></div><Icon data={Flask}/>Try New UI</Button> | ||
| <Label qa='version-label' size='m' className='label'> | ||
| Version | ||
| <div className='detail'>{version}</div> | ||
| </Label> | ||
| {!gui && <Label qa='created-at-label' size='m' className='label'> | ||
| Created at | ||
| <div className='detail'>{date}</div> | ||
| </Label>} | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| ReportInfo.propTypes = { | ||
| gui: PropTypes.bool.isRequired, | ||
| timestamp: PropTypes.number.isRequired | ||
| }; | ||
|
|
||
| export default connect( | ||
| ({gui, timestamp}) => ({gui, timestamp}) | ||
| )(ReportInfo); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,67 @@ | ||
| import {Gear} from '@gravity-ui/icons'; | ||
| import {FooterItem, MenuItem as GravityMenuItem} from '@gravity-ui/navigation'; | ||
| import {Icon} from '@gravity-ui/uikit'; | ||
| import classNames from 'classnames'; | ||
| import React, {ReactNode, useEffect, useState} from 'react'; | ||
| import {useSelector} from 'react-redux'; | ||
|
|
||
| import {UiModeHintNotification} from '@/static/new-ui/components/UiModeHintNotification'; | ||
| import styles from '@/static/new-ui/components/MainLayout/index.module.css'; | ||
| import {getIsInitialized} from '@/static/new-ui/store/selectors'; | ||
| import useLocalStorage from '@/static/hooks/useLocalStorage'; | ||
| import {PanelId} from '@/static/new-ui/components/MainLayout/index'; | ||
|
|
||
| interface FooterProps { | ||
| visiblePanel: PanelId | null; | ||
| onFooterItemClick: (item: GravityMenuItem) => void; | ||
| } | ||
|
|
||
| export function Footer(props: FooterProps): ReactNode { | ||
| const isInitialized = useSelector(getIsInitialized); | ||
| const [isHintVisible, setIsHintVisible] = useState<boolean | null>(null); | ||
| const [wasHintShownBefore, setWasHintShownBefore] = useLocalStorage('ui-mode-hint-shown', false); | ||
|
|
||
| useEffect(() => { | ||
| const hasJustSwitched = new URL(window.location.href).searchParams.get('switched-from-old-ui') === '1'; | ||
| if (isInitialized && hasJustSwitched && !wasHintShownBefore) { | ||
| setIsHintVisible(true); | ||
| setWasHintShownBefore(true); | ||
|
|
||
| const timeoutId = setTimeout(() => { | ||
| setIsHintVisible(false); | ||
| }, 20000); | ||
|
|
||
| return () => { | ||
| clearTimeout(timeoutId); | ||
| }; | ||
| } | ||
|
|
||
| return; | ||
| }, [isInitialized]); | ||
|
|
||
| useEffect(() => { | ||
| if (isHintVisible && props.visiblePanel) { | ||
| setIsHintVisible(false); | ||
| } | ||
| }, [props.visiblePanel]); | ||
|
|
||
| const isCurrent = props.visiblePanel === PanelId.Settings; | ||
|
|
||
| return <> | ||
| <UiModeHintNotification isVisible={isHintVisible} onClose={(): void => setIsHintVisible(false)} /> | ||
| <FooterItem compact={false} item={{ | ||
| id: PanelId.Settings, | ||
| title: 'Settings', | ||
| onItemClick: props.onFooterItemClick, | ||
| current: isCurrent, | ||
| itemWrapper: (params, makeItem) => makeItem({ | ||
| ...params, | ||
| icon: <Icon className={classNames({ | ||
| [styles.footerItem]: !isCurrent, | ||
| [styles['footer-item--active']]: isCurrent, | ||
| disabled: !isInitialized | ||
| })} data={Gear} /> | ||
| }) | ||
| }} /> | ||
| </>; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.