Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

111 #9849

Open
wants to merge 1 commit into
base: scratch-desktop
Choose a base branch
from
Open

111 #9849

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions src/components/gui/gui.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,8 @@ import DragLayer from '../../containers/drag-layer.jsx';
import ConnectionModal from '../../containers/connection-modal.jsx';
import TelemetryModal from '../telemetry-modal/telemetry-modal.jsx';

import Header from '../header/header.jsx';

import layout, {STAGE_SIZE_MODES} from '../../lib/layout-constants';
import {resolveStageSize} from '../../lib/screen-utils';
import {themeMap} from '../../lib/themes';
Expand Down Expand Up @@ -165,6 +167,11 @@ const GUIComponent = props => {
dir={isRtl ? 'rtl' : 'ltr'}
{...componentProps}
>

<Header
title="scratch少儿编程大师"
logo='../../../static/logo.png'
/>
{telemetryModalVisible ? (
<TelemetryModal
isRtl={isRtl}
Expand Down
89 changes: 89 additions & 0 deletions src/components/header/header.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
@import "../../css/colors.css";
@import "../../css/units.css";
@import "../../css/z-index.css";

.menu-bar {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;

/*
For most things, we shouldn't explicitly set height, and let the
content push the element to whatever fits. Using a fixed height
instead, will help us subtract the value we assign from the body,
adding up to a perfect 100%. This means we don't need to set
overflow: hidden, which makes it hard to debug. border-box
simplifies by all of this by removing padding from the equation.
*/
box-sizing: border-box;
height: 3rem;

/*
@todo: This adds ~20px in Chrome, when scrolling to the right,
but fixes [FFx + Safari] [resize window down + scroll to the right] bug.
width: 100%;
*/
font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-size: 1.2rem;
font-weight: bold;
background-color: #f5f5f5;
color: #000;
}
.main-menu {
display: flex;
flex-direction: row;
justify-content: flex-start;
flex-wrap: nowrap;
align-items: center;
padding: 0 1rem;
}
.menu-bar-item{
margin-right: 0.5rem;
}
.scratch-logo {
height: 2rem;
vertical-align: middle;
}
.menuBarItemTime{
margin: 0.5rem 0;
display: flex;
flex-direction: row;
padding: 0.3rem 1.5rem;
align-items: center;
color: #fff;
background: linear-gradient(to right,#f79c48,#f3674e);
border-radius: 1.5rem;
}
.menuBarItemButton{
margin: 0.5rem 0;
display: flex;
padding: 0.5rem 1.5rem;
align-items: center;
color: #726e67;
background: linear-gradient(to right,#e6cab0,rgb(235,198,154));
border: 0 solid #c4a384;
border-radius: 1.5rem;
}
.memberIcon{
margin-right: 0.5rem;
width: 1.2rem;
height: 1.2rem;
}
.memberTimeinfo{
color: #f79c48;
margin-left: 0.5rem;
background: rgb(255, 230, 215);
border-radius: 0.5rem;
padding: 0.1rem 0.5rem;
font-size: 1.2rem;
}
.memberTimeButton{
color: #f7ab64;
background: rgb(255, 230, 215);
margin-left: 0.5rem;
border-radius: 0.5rem;
padding: 0.1rem 0.5rem;
font-size: 1.2rem;
}
82 changes: 82 additions & 0 deletions src/components/header/header.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
import React from 'react';
import classNames from 'classnames';
import PropTypes from 'prop-types';
import styles from './header.css';
import Box from '../box/box.jsx';

import memBer from './image/member1.svg';

class Header extends React.Component {
constructor(props) {
super(props);
this.state = {
timeLeft: 600 // 初始时间为1小时（3600秒）
};
this.timer = null;
}

componentDidMount() {
this.timer = setInterval(() => {
this.setState(prevState => ({
timeLeft: prevState.timeLeft > 0 ? prevState.timeLeft - 1 : 0
}));
}, 1000);
}

componentWillUnmount() {
clearInterval(this.timer);
}

formatTime(seconds) {
const h = String(Math.floor(seconds / 3600)).padStart(2, '0');
const m = String(Math.floor((seconds % 3600) / 60)).padStart(2, '0');
const s = String(seconds % 60).padStart(2, '0');
return `${h}:${m}:${s}`;
}

render() {
const { timeLeft } = this.state;
const { logo, title } = this.props;

return (
<Box className={classNames(styles.menuBar)}>
<div className={styles.mainMenu}>
<div className={styles.menuBarItem}>
<img
id="logo_img"
alt="Scratch"
className={classNames(styles.scratchLogo)}
src={logo}
/>
</div>
<div>{title}</div>
</div>
<div className={styles.menuBarItemTime}>
{timeLeft > 0 ? (
<>
<div>您已获得会员体验权限，您的体验时间剩余：</div>
<div className={styles.memberTimeinfo}>{this.formatTime(timeLeft)}</div>
</>
) : (
<>
<div>您的会员体验时间已用尽，成为会员 </div>
<div className={styles.memberTimeButton}>立即解锁所有功能</div>
</>
)}
</div>
<div className={styles.menuBarItem}>
<button className={styles.menuBarItemButton}>
<img src={memBer} alt="member" className={styles.memberIcon} />开通会员
</button>
</div>
</Box>
);
}
}

Header.propTypes = {
title: PropTypes.string.isRequired,
logo: PropTypes.string.isRequired,
};

export default Header;
1 change: 1 addition & 0 deletions src/components/header/image/member.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions src/components/header/image/member1.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
126 changes: 0 additions & 126 deletions src/components/menu-bar/menu-bar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -424,18 +424,6 @@ class MenuBar extends React.Component {
>
<div className={styles.mainMenu}>
<div className={styles.fileGroup}>
<div className={classNames(styles.menuBarItem)}>
<img
id="logo_img"
alt="Scratch"
className={classNames(styles.scratchLogo, {
[styles.clickable]: typeof this.props.onClickLogo !== 'undefined'
})}
draggable={false}
src={this.props.logo}
onClick={this.props.onClickLogo}
/>
</div>
{(this.props.canChangeTheme || this.props.canChangeLanguage) && (<SettingsMenu
canChangeLanguage={this.props.canChangeLanguage}
canChangeTheme={this.props.canChangeTheme}
Expand Down Expand Up @@ -614,78 +602,6 @@ class MenuBar extends React.Component {
</div>
)}
</div>
{this.props.canEditTitle ? (
<div className={classNames(styles.menuBarItem, styles.growable)}>
<MenuBarItemTooltip
enable
id="title-field"
>
<ProjectTitleInput
className={classNames(styles.titleFieldGrowable)}
/>
</MenuBarItemTooltip>
</div>
) : ((this.props.authorUsername && this.props.authorUsername !== this.props.username) ? (
<AuthorInfo
className={styles.authorInfo}
imageUrl={this.props.authorThumbnailUrl}
projectTitle={this.props.projectTitle}
userId={this.props.authorId}
username={this.props.authorUsername}
/>
) : null)}
<div className={classNames(styles.menuBarItem)}>
{this.props.canShare ? (
(this.props.isShowingProject || this.props.isUpdating) && (
<ProjectWatcher onDoneUpdating={this.props.onSeeCommunity}>
{
waitForUpdate => (
<ShareButton
className={styles.menuBarButton}
isShared={this.props.isShared}
/* eslint-disable react/jsx-no-bind */
onClick={() => {
this.handleClickShare(waitForUpdate);
}}
/* eslint-enable react/jsx-no-bind */
/>
)
}
</ProjectWatcher>
)
) : (
this.props.showComingSoon ? (
<MenuBarItemTooltip id="share-button">
<ShareButton className={styles.menuBarButton} />
</MenuBarItemTooltip>
) : []
)}
{this.props.canRemix ? remixButton : []}
</div>
<div className={classNames(styles.menuBarItem, styles.communityButtonWrapper)}>
{this.props.enableCommunity ? (
(this.props.isShowingProject || this.props.isUpdating) && (
<ProjectWatcher onDoneUpdating={this.props.onSeeCommunity}>
{
waitForUpdate => (
<CommunityButton
className={styles.menuBarButton}
/* eslint-disable react/jsx-no-bind */
onClick={() => {
this.handleClickSeeCommunity(waitForUpdate);
}}
/* eslint-enable react/jsx-no-bind */
/>
)
}
</ProjectWatcher>
)
) : (this.props.showComingSoon ? (
<MenuBarItemTooltip id="community-button">
<CommunityButton className={styles.menuBarButton} />
</MenuBarItemTooltip>
) : [])}
</div>
<Divider className={classNames(styles.divider)} />
<div className={styles.fileGroup}>
<div
Expand Down Expand Up @@ -788,48 +704,6 @@ class MenuBar extends React.Component {
) : (
// ******** no login session is available, so don't show login stuff
<React.Fragment>
{this.props.showComingSoon ? (
<React.Fragment>
<MenuBarItemTooltip id="mystuff">
<div
className={classNames(
styles.menuBarItem,
styles.hoverable,
styles.mystuffButton
)}
>
<img
className={styles.mystuffIcon}
src={mystuffIcon}
/>
</div>
</MenuBarItemTooltip>
<MenuBarItemTooltip
id="account-nav"
place={this.props.isRtl ? 'right' : 'left'}
>
<div
className={classNames(
styles.menuBarItem,
styles.hoverable,
styles.accountNavMenu
)}
>
<img
className={styles.profileIcon}
src={profileIcon}
/>
<span>
{'scratch-cat'}
</span>
<img
className={styles.dropdownCaretIcon}
src={dropdownCaret}
/>
</div>
</MenuBarItemTooltip>
</React.Fragment>
) : []}
</React.Fragment>
)}
</div>
Expand Down
Binary file added static/logo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.