theme and animations

This commit is contained in:
Benjamin Boudreau 2018-05-27 21:09:44 -04:00
parent 370b5cc7fa
commit 4703a601cf
4 changed files with 160 additions and 31 deletions

17
package-lock.json generated
View File

@ -3382,6 +3382,12 @@
"esutils": "2.0.2"
}
},
"dom-helpers": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.3.1.tgz",
"integrity": "sha512-2Sm+JaYn74OiTM2wHvxJOo3roiq/h25Yi69Fqk269cNUwIXsCvATB6CRSFC9Am/20G2b28hGv/+7NiWydIrPvg==",
"dev": true
},
"domain-browser": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
@ -9592,6 +9598,17 @@
"prop-types": "15.6.1"
}
},
"react-transition-group": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.3.1.tgz",
"integrity": "sha512-hu4/LAOFSKjWt1+1hgnOv3ldxmt6lvZGTWz4KUkFrqzXrNDIVSu6txIcPszw7PNduR8en9YTN55JLRyd/L1ZiQ==",
"dev": true,
"requires": {
"dom-helpers": "3.3.1",
"loose-envify": "1.3.1",
"prop-types": "15.6.1"
}
},
"read-chunk": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/read-chunk/-/read-chunk-2.1.0.tgz",

View File

@ -32,6 +32,7 @@
"eslint-plugin-react": "^7.8.2",
"mini-css-extract-plugin": "^0.4.0",
"node-sass": "^4.9.0",
"react-transition-group": "^2.3.1",
"sass-loader": "^7.0.1",
"style-loader": "^0.21.0",
"webpack": "^4.8.3",

View File

@ -1,22 +1,59 @@
import React from 'react';
import PropTypes from 'prop-types';
import './widget.scss'
import { Transition } from 'react-transition-group';
import './widget.scss';
class Widget extends React.Component {
state = {
opened: false,
showDock: true,
}
handleOpen = () => {
handleToggleOpen = () => {
this.setState((prev) => {
let showDock = prev.showDock;
if (!prev.opened) {
showDock = false;
}
return {
showDock,
opened: !prev.opened,
};
});
}
handleWidgetExit = () => {
this.setState({
showDock: true,
});
}
renderBody = () => {
if (this.state.showDock) {
return (
<a className="dock" onClick={this.handleToggleOpen}>
^ OPEN ^
</a>
);
}
return "";
}
render() {
let body = "";
if (this.state.opened) {
body = (
<div className="widget-dialog">
<div className="widget-title">
Open
let body = this.renderBody();
return (
<div className="docked-widget">
<Transition in={this.state.opened} timeout={250} onExited={this.handleWidgetExit}>
{(status) => (
<div className={`widget widget-${status}`}>
<div className="widget-header">
<div className="widget-header-title">
Header
</div>
<a className="widget-header-icon" onClick={this.handleToggleOpen}>
X
</a>
</div>
<div className="widget-body">
Body
@ -25,11 +62,8 @@ class Widget extends React.Component {
Footer
</div>
</div>
);
}
return (
<div className="widget">
Open
)}
</Transition>
{body}
</div>
);

View File

@ -1,17 +1,94 @@
.widget {
@keyframes slideInUp {
from {
transform: translate3d(0, 100%, 0);
visibility: visible;
}
to {
transform: translate3d(0, 0, 0);
}
}
@keyframes slideOutDown {
from {
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
transform: translate3d(0, 100%, 0);
}
}
.docked-widget {
position: fixed;
bottom: 10px;
bottom: 0px;
right: 10px;
width: 50px;
height: 20px;
text-align: center;
border: 1px solid;
padding: 10px;
width: 200px;
}
.widget:hover {
background-color: blue;
color: white;
.dock {
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
width: 180px;
border: 1px solid grey;
}
.widget {
width: 200px;
border: 1px solid grey;
border-bottom: none;
animation-duration: 0.2s;
animation-fill-mode: forwards;
&-entering {
animation-name: slideInUp;
}
&-entered {
visibility: visible;
}
&-exiting {
animation-name: slideOutDown;
}
&-exited {
visibility: hidden;
}
&-header {
height: 30px;
line-height: 30px;
background: lightgrey;
color: grey;
padding-left: 10px;
display: flex;
align-items: stretch;
&-title {
display: flex;
flex-grow: 1;
}
&-icon {
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: .75rem;
}
}
&-body {
background: white;
padding: 10px;
height: 150px;
}
&-footer {
background: green;
line-height: 30px;
padding-left: 10px;
}
}