Skip to content
Permalink
Browse files

feat: power off

  • Loading branch information...
ShizukuIchi committed Mar 28, 2019
1 parent 5cd4bd3 commit ea75bb422ec3c706c27655f5fd8e231ab7009c79
@@ -1,6 +1,11 @@
{
"version": 2,
"name": "winXP",
"build": {
"env": {
"NODE_PATH": "./"
}
},
"builds": [
{
"src": "package.json",
@@ -30,7 +35,7 @@
}
],
"alias": [
"winxp.now.sh",
"windowsxp.now.sh"
"windowsxp.now.sh",
"winxp.now.sh"
]
}
@@ -1,5 +1,5 @@
{
"name": "win-xp",
"name": "winXP",
"version": "0.1.0",
"private": true,
"author": "ShizukuIchi <shizukuichi@gmail.com>",
@@ -176,11 +176,14 @@ function FooterMenu({ className, onClick }) {
</div>
</section>
<footer>
<div className="footer__item">
<div className="footer__item" onClick={() => onClick('Log Off')}>
<img className="footer__item__img" src={lock} alt="" />
<span>Log Off</span>
</div>
<div className="footer__item">
<div
className="footer__item"
onClick={() => onClick('Turn Off Computer')}
>
<img className="footer__item__img" src={shut} alt="" />
<span>Turn Off Computer</span>
</div>
@@ -296,7 +299,7 @@ export default styled(FooterMenu)`
align-items: center;
justify-content: flex-end;
color: #fff;
height: 32px;
height: 36px;
width: 100%;
background: linear-gradient(
to bottom,
@@ -319,9 +322,16 @@ export default styled(FooterMenu)`
}
.footer__item {
padding: 3px;
display: flex;
margin-right: 10px;
align-items: center;
&:hover {
background-color: rgba(60, 80, 210, 0.5);
}
&:hover:active > * {
transform: translate(1px, 1px);
}
}
.footer__item__img {
border-radius: 3px;
@@ -3,7 +3,7 @@ import styled from 'styled-components';
import FooterMenu from './FooterMenu';
import Balloon from 'src/components/Balloon';

import startButton from 'src/assets/start.png';
import startButton from 'src/assets/windowsIcons/start.png';
import sound from 'src/assets/windowsIcons/690(16x16).png';
import usb from 'src/assets/windowsIcons/394(16x16).png';
import risk from 'src/assets/windowsIcons/229(16x16).png';
@@ -0,0 +1,235 @@
import React from 'react';
import { createPortal } from 'react-dom';
import styled from 'styled-components';

import { POWER_STATE } from 'src/WinXP/constants';

import windowLogo from 'src/assets/windowsIcons/windows-off.png';
import off from 'src/assets/windowsIcons/310(32x32).png';
import lock from 'src/assets/windowsIcons/546(32x32).png';
import restart from 'src/assets/windowsIcons/restart.ico';
import switcher from 'src/assets/windowsIcons/290.png';

function Modal(props) {
return createPortal(
<StyledContainer>
<Menu {...props} />
</StyledContainer>,
document.body,
);
}

const Container = ({ className, children }) => {
function noop(e) {
e.preventDefault();
e.stopPropagation();
}
return (
<div
className={className}
onMouseMove={noop}
onClick={noop}
onMouseDown={noop}
onMouseUp={noop}
>
{children}
</div>
);
};
const Menu = ({ mode, onClose, onClickButton }) => {
console.log(mode, POWER_STATE.TURN_OFF);
function renderButtons() {
if (mode === POWER_STATE.TURN_OFF) {
return (
<>
<ButtonDisabled img={off} text="Stand By" />
<Button img={off} text="Turn Off" onClick={onClickButton} />
<Button
style={{ margin: '-3px 0 0px 0', width: '33px', height: '33px' }}
img={restart}
text="Restart"
onClick={onClickButton}
/>
</>
);
}
return (
<>
<Button
img={switcher}
text="Switch User"
style={{ border: '1px solid #fff', borderRadius: '3px' }}
onClick={onClickButton}
/>
<Button img={lock} text="Log Off" onClick={onClickButton} />
</>
);
}
return (
<div className="modal">
<header className="header">
<span className="header__text">Log Off Windows</span>
<img src={windowLogo} alt="" className="header__img" />
</header>
<div className="content">{renderButtons()}</div>
<footer className="footer">
<button onClick={onClose} className="footer__button">
Cancel
</button>
</footer>
</div>
);
};
const Button = ({ style, img, text, onClick }) => {
function _onClick() {
onClick(text);
}
return (
<div className="button-container">
<img
onClick={_onClick}
style={{ ...style }}
src={img}
alt={text}
className="button-img"
/>
<span className="button-text">{text}</span>
</div>
);
};
const ButtonDisabled = ({ img, text }) => (
<div className="button-container disable">
<img src={img} alt={text} className="button-img" />
<span className="button-text">{text}</span>
</div>
);
const StyledContainer = styled(Container)`
font-family: Tahoma, 'Noto Sans', sans-serif;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
.modal {
margin-top: 30vh;
width: 300px;
height: 190px;
border: 1px solid black;
display: flex;
flex-direction: column;
}
.header {
height: 42px;
display: flex;
padding-left: 10px;
align-items: center;
background: #092178;
}
.header__text {
font-size: 17px;
font-family: 'Noto Sans';
color: #fff;
flex: 1;
}
.header__img {
width: auto;
height: 30px;
margin-right: 5px;
}
.content {
flex: 1;
background: linear-gradient(
to right,
#3349e0 0%,
#617ee6 47%,
#617ee6 53%,
#3349e0 100%
);
display: flex;
align-items: center;
justify-content: space-around;
padding: 0 30px;
position: relative;
&:before {
content: '';
display: block;
position: absolute;
height: 2px;
top: 0;
left: 0;
right: 0;
background: linear-gradient(
to right,
transparent 0,
rgba(255, 255, 255, 0.3) 40%,
rgba(255, 255, 255, 0.3) 60%,
transparent 100%
);
}
}
.button-container {
display: flex;
flex-direction: column;
align-items: center;
color: #fff;
&.disable {
color: gray;
.button-img {
opacity: 0.3;
&:hover {
filter: none;
}
&:hover:active {
filter: none;
}
}
}
}
.button-img {
height: 30px;
width: 30px;
&:hover {
filter: brightness(1.1);
}
&:hover:active {
filter: brightness(0.7);
}
}
.button-text {
padding-top: 3px;
font-weight: bold;
font-size: 11px;
}
.footer {
height: 42px;
background: #092178;
display: flex;
justify-content: flex-end;
align-items: center;
}
.footer__button {
font-size: 11px;
padding: 0 8px;
line-height: 10px;
background: rgb(240, 240, 240);
margin-right: 10px;
height: 16px;
border-radius: 1px;
box-shadow: 2px 2px 4px 1px #0005b0, 2px 2px 2px 0px white,
inset 0 0 0 1px skyblue, inset 2px -2px skyblue;
border: none;
outline: none;
&:hover {
box-shadow: 1px 1px black, 1px 1px 2px 0px white, inset 0 0 0 1px orange,
inset 2px -2px orange;
}
&:hover:active {
box-shadow: none;
background: rgb(220, 220, 220);
}
}
`;

export default Modal;
@@ -265,7 +265,7 @@ function MyComputer({ onClose }) {
title="ghbtn"
style={{ margin: '0 0 2px -1px' }}
src="https://ghbtns.com/github-btn.html?user=ShizukuIchi&repo=winXP&type=star&count=true"
frameborder="0"
frameBorder="0"
scrolling="0"
width="170px"
height="20px"
@@ -52,7 +52,7 @@ export const defaultAppState = [
height: 500,
},
defaultOffset: {
x: 330,
x: 340,
y: 30,
},
resizable: true,
@@ -144,7 +144,7 @@ export const appSettings = {
height: 500,
},
defaultOffset: {
x: 340,
x: 350,
y: 40,
},
resizable: true,
@@ -0,0 +1,12 @@
export const ADD_APP = 'ADD_APP';
export const DEL_APP = 'DEL_APP';
export const FOCUS_APP = 'FOCUS_APP';
export const MINIMIZE_APP = 'MINIMIZE_APP';
export const TOGGLE_MAXIMIZE_APP = 'TOGGLE_MAXIMIZE_APP';
export const FOCUS_ICON = 'FOCUS_ICON';
export const SELECT_ICONS = 'SELECT_ICONS';
export const FOCUS_DESKTOP = 'FOCUS_DESKTOP';
export const START_SELECT = 'START_SELECT';
export const END_SELECT = 'END_SELECT';
export const POWER_OFF = 'POWER_OFF';
export const CANCEL_POWER_OFF = 'CANCEL_POWER_OFF';
@@ -0,0 +1,10 @@
export const FOCUSING = {
WINDOW: 'WINDOW',
ICON: 'ICON',
DESKTOP: 'DESKTOP',
};
export const POWER_STATE = {
START: 'START',
LOG_OFF: 'LOG_OFF',
TURN_OFF: 'TURN_OFF',
};
Oops, something went wrong.

1 comment on commit ea75bb4

@now

This comment has been minimized.

Copy link

now bot commented on ea75bb4 Mar 28, 2019

Please sign in to comment.
You can’t perform that action at this time.