Skip to content

Instantly share code, notes, and snippets.

@nickdandakis
Created March 16, 2018 23:10
Show Gist options
  • Save nickdandakis/7524e24acdc027284f9a2cb741d9096a to your computer and use it in GitHub Desktop.
Save nickdandakis/7524e24acdc027284f9a2cb741d9096a to your computer and use it in GitHub Desktop.
Microsoft Windows window controls
import React, { Component } from 'react';
import _ from 'lodash';
import classnames from 'classnames';
import { remote } from 'electron';
class WindowsWindowControls extends Component {
state = {
fullscreen: false,
blur: false,
};
componentDidMount() {
window.addEventListener('blur', this.handleBlur);
window.addEventListener('focus', this.handleFocus);
window.addEventListener('resize', this.handleResize);
this.setFullscreenStateFromBrowserWindow();
}
componentWillUnmount() {
window.removeEventListener('blur', this.handleBlur);
window.removeEventListener('focus', this.handleFocus);
window.removeEventListener('resize', this.handleResize);
}
setFullscreenStateFromBrowserWindow = () => {
const browserWindow = remote.BrowserWindow.getFocusedWindow();
if (browserWindow) {
this.setState({
...this.state,
fullscreen: browserWindow.isMaximized(),
});
}
}
handleResize = _.debounce(() => {
this.setFullscreenStateFromBrowserWindow();
}, 400);
handleBlur = () => {
this.setState({
...this.state,
blurred: true,
});
}
handleFocus = () => {
this.setState({
...this.state,
blurred: false,
});
}
handleMaximize = (event) => {
const { onMaximize } = this.props;
const { fullscreen } = this.state;
this.setState({
...this.state,
fullscreen: !this.state.fullscreen,
});
onMaximize();
}
render() {
const {
onClose,
onMinimize,
} = this.props;
const {
blurred,
fullscreen,
} = this.state;
const className = classnames({
'windows-window-controls': true,
blurred,
fullscreen,
});
return (
<div className={className}>
<div className="minimize" onClick={onMinimize}>
<svg x="0px" y="0px" viewBox="0 0 10 1">
<rect fill="#000000" width={10} height={1} />
</svg>
</div>
<div className="maximize" onClick={this.handleMaximize}>
<svg className="maximize-svg" x="0px" y="0px" viewBox="0 0 10 10">
<path fill="#000000" d="M 0 0 L 0 10 L 10 10 L 10 0 L 0 0 z M 1 1 L 9 1 L 9 9 L 1 9 L 1 1 z " />
</svg>
<svg className="unmaximize-svg" x="0px" y="0px" viewBox="0 0 10 10">
<mask id="Mask">
<rect fill="#ffffff" width={10} height={10} />
<path fill="#000000" d="M 3 1 L 9 1 L 9 7 L 8 7 L 8 2 L 3 2 L 3 1 z" />
<path fill="#000000" d="M 1 3 L 7 3 L 7 9 L 1 9 L 1 3 z" />
</mask>
<path fill="#000000" d="M 2 0 L 10 0 L 10 8 L 8 8 L 8 10 L 0 10 L 0 2 L 2 2 L 2 0 z" mask="url(#Mask)" />
</svg>
</div>
<div className="close" onClick={onClose}>
<svg x="0px" y="0px" viewBox="0 0 12 12">
<polygon fill="#000000" points="12,1 11,0 6,5 1,0 0,1 5,6 0,11 1,12 6,7 11,12 12,11 7,6" />
</svg>
</div>
<style jsx>{`
.windows-window-controls {
-webkit-app-region: no-drag;
&.blurred:not(:hover) svg {
opacity: 0.6;
}
&:not(.fullscreen) .maximize svg.unmaximize-svg { display: none; }
&.fullscreen .maximize svg.maximize-svg { display: none; }
}
.minimize,
.maximize,
.close {
-webkit-app-region: no-drag;
float: left;
width: 45px;
height: 29px;
margin: 0 0 1px 1px;
text-align: center;
line-height: 29px;
transition: background-color .2s;
& svg {
width: 10px;
height: 10px;
}
}
.close svg polygon {
transition: fill .2s;
}
&.fullscreen {
& .minimize,
& .maximize,
& .close {
height: 21px;
line-height: 21px;
}
}
.minimize:hover,
.maximize:hover {
background-color: rgba(127,127,127, 0.2);
}
.close:hover {
background-color: #E81123;
& svg polygon {
fill: #fff;
}
}
svg {
& > rect,
& > polygon,
& > path {
fill: #fff;
}
}
`}</style>
</div>
);
}
}
export default WindowsWindowControls;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment