Skip to content
Permalink
Browse files

feat: custom header

* custom Error message

* custom header buttons

* no footer window for Error
  • Loading branch information...
ShizukuIchi committed Apr 10, 2019
1 parent f5a9cfa commit 066ca0a49fc6f3a1071b7f09c6233c7a2437612c
Showing with 251 additions and 178 deletions.
  1. +13 −12 src/WinXP/Footer/index.js
  2. +186 −0 src/WinXP/Windows/HeaderButtons.js
  3. +15 −141 src/WinXP/Windows/index.js
  4. +20 −11 src/WinXP/apps/ErrorBox/index.js
  5. +5 −12 src/WinXP/apps/index.js
  6. +12 −2 src/WinXP/index.js
@@ -76,18 +76,19 @@ function Footer({
className="footer__start"
onMouseDown={toggleMenu}
/>
{[...apps]
// .sort((a, b) => a.id - b.id)
.map(app => (
<FooterWindow
key={app.id}
id={app.id}
icon={app.header.icon}
title={app.header.title}
onMouseDown={onMouseDownApp}
isFocus={focusedAppId === app.id}
/>
))}
{[...apps].map(
app =>
!app.header.noFooterWindow && (
<FooterWindow
key={app.id}
id={app.id}
icon={app.header.icon}
title={app.header.title}
onMouseDown={onMouseDownApp}
isFocus={focusedAppId === app.id}
/>
),
)}
</div>

<div className="footer__items right">
@@ -0,0 +1,186 @@
import React from 'react';
import styled from 'styled-components';

function HeaderButtons({
buttons,
onMaximize,
onMinimize,
onClose,
maximized,
resizable,
className,
}) {
const buttonElements = {
minimize: (
<button
key="minimize"
className="header__button header__button--minimize"
onMouseUp={onMinimize}
/>
),
maximize: (
<button
key="maximize"
className={`header__button ${
maximized ? 'header__button--maximized' : 'header__button--maximize'
} ${resizable ? '' : 'header__button--disable'}`}
onMouseUp={onMaximize}
/>
),
close: (
<button
key="button"
className="header__button header__button--close"
onMouseUp={onClose}
/>
),
};

return (
<div className={className}>
{buttons ? (
buttons.map(b => buttonElements[b])
) : (
<>
{buttonElements.minimize}
{buttonElements.maximize}
{buttonElements.close}
</>
)}
</div>
);
}

export default styled(HeaderButtons)`
opacity: ${({ isFocus }) => (isFocus ? 1 : 0.6)};
height: 22px;
display: flex;
align-items: center;
margin-top: -1px;
margin-right: 1px;
.header__button {
margin-right: 1px;
position: relative;
width: 22px;
height: 22px;
border: 1px solid #fff;
border-radius: 3px;
&:hover {
filter: brightness(120%);
}
&:hover:active {
filter: brightness(90%);
}
}
.header__button--minimize {
box-shadow: inset 0 -1px 2px 1px #4646ff;
background-image: radial-gradient(
circle at 90% 90%,
#0054e9 0%,
#2263d5 55%,
#4479e4 70%,
#a3bbec 90%,
white 100%
);
&:before {
content: '';
position: absolute;
left: 4px;
top: 13px;
height: 3px;
width: 8px;
background-color: white;
}
}
.header__button--maximize {
box-shadow: inset 0 -1px 2px 1px #4646ff;
background-image: radial-gradient(
circle at 90% 90%,
#0054e9 0%,
#2263d5 55%,
#4479e4 70%,
#a3bbec 90%,
white 100%
);
&:before {
content: '';
position: absolute;
display: block;
left: 4px;
top: 4px;
box-shadow: inset 0 3px white, inset 0 0 0 1px white;
height: 12px;
width: 12px;
}
}
.header__button--maximized {
box-shadow: inset 0 -1px 2px 1px #4646ff;
background-image: radial-gradient(
circle at 90% 90%,
#0054e9 0%,
#2263d5 55%,
#4479e4 70%,
#a3bbec 90%,
white 100%
);
&:before {
content: '';
position: absolute;
display: block;
left: 7px;
top: 4px;
box-shadow: inset 0 2px white, inset 0 0 0 1px white;
height: 8px;
width: 8px;
}
&:after {
content: '';
position: absolute;
display: block;
left: 4px;
top: 7px;
box-shadow: inset 0 2px white, inset 0 0 0 1px white, 1px -1px #136dff;
height: 8px;
width: 8px;
background-color: #136dff;
}
}
.header__button--close {
box-shadow: inset 0 -1px 2px 1px #da4600;
background-image: radial-gradient(
circle at 90% 90%,
#cc4600 0%,
#dc6527 55%,
#cd7546 70%,
#ffccb2 90%,
white 100%
);
&:before {
content: '';
position: absolute;
left: 9px;
top: 2px;
transform: rotate(45deg);
height: 16px;
width: 2px;
background-color: white;
}
&:after {
content: '';
position: absolute;
left: 9px;
top: 2px;
transform: rotate(-45deg);
height: 16px;
width: 2px;
background-color: white;
}
}
.header__button--disable {
outline: none;
opacity: 0.5;
&:hover {
filter: brightness(100%);
}
}
`;
Oops, something went wrong.

1 comment on commit 066ca0a

@now

This comment has been minimized.

Copy link

now bot commented on 066ca0a Apr 10, 2019

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