yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-08-13 11:17:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

Remove all scss files in admin container and components

Browse Source
This commit is contained in:
soupette 2019-09-17 18:00:42 +02:00
parent db7ab9d9a4
commit 00b18c38d5
4 changed files with 104 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
packages/strapi-admin/admin/src/components/OnboardingVideo/styles.scss → packages/strapi-admin/admin/src/components/OnboardingVideo/Li.js
View File

@ -1,4 +1,6 @@
li.listItem { import styled from 'styled-components';
const Li = styled.li`
display: block; display: block;
padding: 17px 15px; padding: 17px 15px;
cursor: pointer; cursor: pointer;
@ -27,7 +29,7 @@ li.listItem {
z-index: 1; z-index: 1;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: rgba(#0E7DE7, .8); background-color: rgba(#0e7de7, 0.8);
} }
img { img {
position: relative; position: relative;
@ -100,45 +102,47 @@ li.listItem {
line-height: 11px; line-height: 11px;
} }
} }
}
.hiddenPlayerWrapper { .hiddenPlayerWrapper {
display: none; display: none;
} }
.videoModal { .videoModal {
margin-right: auto !important; margin-right: auto !important;
margin-left: auto !important; margin-left: auto !important;
.videoModalHeader { .videoModalHeader {
padding-bottom: 0; padding-bottom: 0;
border-bottom: 0; border-bottom: 0;
> h5 { > h5 {
font-family: Lato; font-family: Lato;
font-weight: bold!important; font-weight: bold !important;
font-size: 1.8rem!important; font-size: 1.8rem !important;
line-height: 3.1rem; line-height: 3.1rem;
color: #333740; color: #333740;
}
> button {
display: flex;
position: absolute;
right: 0;
top: 0;
margin-top: 0;
margin-right: 0;
padding: 10px;
cursor: pointer;
span {
line-height: 0.6em;
}
}
} }
> button { .videoPlayer {
display: flex; > button {
position: absolute; top: 50%;
right: 0; margin-top: -0.75em;
top: 0; left: 50%;
margin-top: 0; margin-left: -1.5em;
margin-right: 0;
padding: 10px;
cursor: pointer;
span {
line-height: 0.6em;
} }
} }
} }
.videoPlayer { `;
> button {
top: 50%; export default Li;
margin-top: -0.75em;
left: 50%;
margin-left: -1.5em;
}
}
}

40
packages/strapi-admin/admin/src/components/OnboardingVideo/index.js
View File

@ -10,10 +10,8 @@ import cn from 'classnames';
import { Modal, ModalHeader, ModalBody } from 'reactstrap'; import { Modal, ModalHeader, ModalBody } from 'reactstrap';
import { Player } from 'video-react'; import { Player } from 'video-react';
import 'video-react/dist/video-react.css'; import 'video-react/dist/video-react.css';
import Li from './Li';
import styles from './styles.scss';
class OnboardingVideo extends React.Component { class OnboardingVideo extends React.Component {
componentDidMount() { componentDidMount() {
@ -46,7 +44,7 @@ class OnboardingVideo extends React.Component {
this.props.getVideoCurrentTime( this.props.getVideoCurrentTime(
this.props.id, this.props.id,
curr, curr,
this.props.video.duration, this.props.video.duration
); );
}; };
@ -84,49 +82,47 @@ class OnboardingVideo extends React.Component {
render() { render() {
const { video } = this.props; const { video } = this.props;
return ( return (
<li <Li
key={this.props.id} key={this.props.id}
onClick={this.props.onClick} onClick={this.props.onClick}
id={this.props.id} id={this.props.id}
className={cn(styles.listItem, video.end && styles.finished)} className={cn(video.end && 'finished')}
> >
<div className={styles.thumbWrapper}> <div className="thumbWrapper">
<img src={video.preview} alt="preview" /> <img src={video.preview} alt="preview" />
<div className={styles.overlay} /> <div className="overlay" />
<div className={styles.play} /> <div className="play" />
</div> </div>
<div className={styles.txtWrapper}> <div className="txtWrapper">
<p className={styles.title}>{video.title}</p> <p className="title">{video.title}</p>
<p className={styles.time}> <p className="time">
{isNaN(video.duration) {isNaN(video.duration)
? '\xA0' ? '\xA0'
: `${Math.floor(video.duration / 60)}:${Math.floor( : `${Math.floor(video.duration / 60)}:${Math.floor(
video.duration, video.duration
) % 60}`} ) % 60}`}
</p> </p>
</div> </div>
<Modal <Modal
isOpen={video.isOpen} isOpen={video.isOpen}
toggle={this.props.onClick} // eslint-disable-line react/jsx-handler-names toggle={this.props.onClick} // eslint-disable-line react/jsx-handler-names
className={styles.videoModal} className="videoModal"
onOpened={this.handleModalOpen} onOpened={this.handleModalOpen}
onClosed={this.handleModalClose} onClosed={this.handleModalClose}
> >
<ModalHeader <ModalHeader
toggle={this.props.onClick} // eslint-disable-line react/jsx-handler-names toggle={this.props.onClick} // eslint-disable-line react/jsx-handler-names
className={styles.videoModalHeader} className="videoModalHeader"
> >
{video.title} {video.title}
</ModalHeader> </ModalHeader>
<ModalBody className={styles.modalBodyHelper}> <ModalBody className="modalBodyHelper">
<div> <div>
<Player <Player
ref={this.player} ref={this.player}
className={styles.videoPlayer} className="videoPlayer"
// poster="/assets/poster.png"
src={video.video} src={video.video}
startTime={video.startTime} startTime={video.startTime}
preload="auto" preload="auto"
@ -139,7 +135,7 @@ class OnboardingVideo extends React.Component {
</Modal> </Modal>
{!this.props.video.duration && ( {!this.props.video.duration && (
<div className={cn(styles.hiddenPlayerWrapper)}> <div className="hiddenPlayerWrapper">
<Player <Player
ref={this.hiddenPlayer} ref={this.hiddenPlayer}
// poster="/assets/poster.png" // poster="/assets/poster.png"
@ -149,7 +145,7 @@ class OnboardingVideo extends React.Component {
/> />
</div> </div>
)} )}
</li> </Li>
); );
} }
} }

65
packages/strapi-admin/admin/src/containers/Onboarding/styles.scss → packages/strapi-admin/admin/src/containers/Onboarding/Wrapper.js
View File

@ -1,4 +1,6 @@
.videosWrapper { import styled, { keyframes } from 'styled-components';
const Wrapper = styled.div`
position: fixed; position: fixed;
right: 15px; right: 15px;
bottom: 15px; bottom: 15px;
@ -45,10 +47,10 @@
border-radius: 3px; border-radius: 3px;
overflow: hidden; overflow: hidden;
&.shown { &.shown {
animation: fadeIn 0.5s forwards; animation: ${fadeIn} 0.5s forwards;
} }
&.hide { &.hide {
animation: fadeOut 0.5s forwards; animation: ${fadeOut} 0.5s forwards;
} }
ul { ul {
@ -81,36 +83,37 @@
} }
} }
} }
`;
const fadeIn = keyframes`
0% {
width: auto;
height: auto;
opacity: 0;
} }
@keyframes fadeIn { 5% {
0% { opacity: 0;
width: auto;
height: auto;
opacity: 0;
}
5% {
opacity: 0;
}
100% {
opacity: 1;
}
} }
@keyframes fadeOut { 100% {
0% { opacity: 1;
opacity: 1;
}
60% {
opacity: 0;
}
100% {
opacity: 0;
width: 0;
height: 0;
}
} }
`;
const fadeOut = keyframes`
0% {
opacity: 1;
}
60% {
opacity: 0;
}
100% {
opacity: 0;
width: 0;
height: 0;
}
`;
export default Wrapper;

26
packages/strapi-admin/admin/src/containers/Onboarding/index.js
View File

@ -13,9 +13,8 @@ import { FormattedMessage } from 'react-intl';
import { GlobalContext } from 'strapi-helper-plugin'; import { GlobalContext } from 'strapi-helper-plugin';
import injectSaga from '../../utils/injectSaga'; import injectSaga from '../../utils/injectSaga';
import injectReducer from '../../utils/injectReducer'; import injectReducer from '../../utils/injectReducer';
import OnboardingVideo from '../../components/OnboardingVideo'; import OnboardingVideo from '../../components/OnboardingVideo';
import Wrapper from './Wrapper';
import { import {
getVideos, getVideos,
onClick, onClick,
@ -28,8 +27,6 @@ import makeSelectOnboarding from './selectors';
import reducer from './reducer'; import reducer from './reducer';
import saga from './saga'; import saga from './saga';
import styles from './styles.scss';
export class Onboarding extends React.Component { export class Onboarding extends React.Component {
static contextType = GlobalContext; static contextType = GlobalContext;
@ -101,21 +98,18 @@ export class Onboarding extends React.Component {
const style = showVideos ? {} : { maxWidth: 0 }; const style = showVideos ? {} : { maxWidth: 0 };
return ( return (
<div <Wrapper
style={style} style={style}
className={cn( className={cn(videos.length > 0 ? 'visible' : 'hidden')}
styles.videosWrapper,
videos.length > 0 ? styles.visible : styles.hidden
)}
> >
<div <div
style={style} style={style}
className={cn( className={cn(
styles.videosContent, 'videosContent',
this.state.showVideos ? styles.shown : styles.hide this.state.showVideos ? 'shown' : 'hide'
)} )}
> >
<div className={styles.videosHeader}> <div className="videosHeader">
<p> <p>
<FormattedMessage id="app.components.Onboarding.title" /> <FormattedMessage id="app.components.Onboarding.title" />
</p> </p>
@ -128,7 +122,7 @@ export class Onboarding extends React.Component {
</p> </p>
)} )}
</div> </div>
<ul className={styles.onboardingList}> <ul className="onboardingList">
{videos.map((video, i) => { {videos.map((video, i) => {
return ( return (
<OnboardingVideo <OnboardingVideo
@ -146,17 +140,17 @@ export class Onboarding extends React.Component {
</ul> </ul>
</div> </div>
<div className={styles.openBtn}> <div className="openBtn">
<button <button
onClick={this.handleVideosToggle} onClick={this.handleVideosToggle}
className={this.state.showVideos ? styles.active : ''} className={this.state.showVideos ? 'active' : ''}
> >
<i className="fa fa-question" /> <i className="fa fa-question" />
<i className="fa fa-times" /> <i className="fa fa-times" />
<span /> <span />
</button> </button>
</div> </div>
</div> </Wrapper>
); );
} }
} }