Commit bcd0d3bb authored by TJHeeringa's avatar TJHeeringa

A little bit to many changes for a single commit

parent feab61f4
......@@ -1210,18 +1210,11 @@
"integrity": "sha512-AlEKV7TxjeK+jxWVKcCFrfYAk8spX9aCyiToFIiLPtfQbsjmRGLIhb5VZgptQcJdHtLXo7+m0DuurwFgUToQuA=="
},
"@date-io/moment": {
"version": "2.9.0",
"resolved": "https://registry.npmjs.org/@date-io/moment/-/moment-2.9.0.tgz",
"integrity": "sha512-czblvCzxV3vIkVN+JZjtF4GUOL8WGxyiTZETRzt+FQtHHzg+fo0eeQg2X/mDiBqrBnY6CdVNwYSIHPAW4lxOIg==",
"version": "1.3.13",
"resolved": "https://registry.npmjs.org/@date-io/moment/-/moment-1.3.13.tgz",
"integrity": "sha512-3kJYusJtQuOIxq6byZlzAHoW/18iExJer9qfRF5DyyzdAk074seTuJfdofjz4RFfTd/Idk8WylOQpWtERqvFuQ==",
"requires": {
"@date-io/core": "^2.9.0"
},
"dependencies": {
"@date-io/core": {
"version": "2.9.0",
"resolved": "https://registry.npmjs.org/@date-io/core/-/core-2.9.0.tgz",
"integrity": "sha512-OhPFn+mnVHzfF/zJNUTV1CeUCL51ngXo9sG458cwwsORTgc1Pw7Dx9dS1wqPsq+CcMQ5Sh1MsUIXi1zclFbHTQ=="
}
"@date-io/core": "^1.3.13"
}
},
"@devexpress/dx-core": {
......@@ -1311,6 +1304,21 @@
"@fortawesome/fontawesome-common-types": "^0.2.30"
}
},
"@fortawesome/free-brands-svg-icons": {
"version": "5.15.0",
"resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.15.0.tgz",
"integrity": "sha512-Qy6sOeSIYfjCQ2CFa/VKQZUo1ycOzoRP7AtITHRp0lmWP1DTgEa1Ow22CgaSh7lNcDbRs5u/v/h2wtjSb2ox4A==",
"requires": {
"@fortawesome/fontawesome-common-types": "^0.2.31"
},
"dependencies": {
"@fortawesome/fontawesome-common-types": {
"version": "0.2.31",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.31.tgz",
"integrity": "sha512-xfnPyH6NN5r/h1/qDYoGB0BlHSID902UkQzxR8QsoKDh55KAPr8ruAoie12WQEEQT8lRE2wtV7LoUllJ1HqCag=="
}
}
},
"@fortawesome/free-solid-svg-icons": {
"version": "5.14.0",
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.14.0.tgz",
......@@ -1711,6 +1719,18 @@
"@babel/runtime": "^7.4.4"
}
},
"@material-ui/lab": {
"version": "4.0.0-alpha.56",
"resolved": "https://registry.npmjs.org/@material-ui/lab/-/lab-4.0.0-alpha.56.tgz",
"integrity": "sha512-xPlkK+z/6y/24ka4gVJgwPfoCF4RCh8dXb1BNE7MtF9bXEBLN/lBxNTK8VAa0qm3V2oinA6xtUIdcRh0aeRtVw==",
"requires": {
"@babel/runtime": "^7.4.4",
"@material-ui/utils": "^4.10.2",
"clsx": "^1.0.4",
"prop-types": "^15.7.2",
"react-is": "^16.8.0"
}
},
"@material-ui/pickers": {
"version": "3.2.10",
"resolved": "https://registry.npmjs.org/@material-ui/pickers/-/pickers-3.2.10.tgz",
......@@ -1836,6 +1856,35 @@
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.4.4.tgz",
"integrity": "sha512-1oO6+dN5kdIA3sKPZhRGJTfGVP4SWV6KqlMOwry4J3HfyD68sl/3KmG7DeYUzvN+RbhXDnv/D8vNNB8168tAMg=="
},
"@react-hook/latest": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/@react-hook/latest/-/latest-1.0.3.tgz",
"integrity": "sha512-dy6duzl+JnAZcDbNTfmaP3xHiKtbXYOaz3G51MGVljh548Y8MWzTr+PHLOfvpypEVW9zwvl+VyKjbWKEVbV1Rg=="
},
"@react-hook/passive-layout-effect": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/@react-hook/passive-layout-effect/-/passive-layout-effect-1.2.1.tgz",
"integrity": "sha512-IwEphTD75liO8g+6taS+4oqz+nnroocNfWVHWz7j+N+ZO2vYrc6PV1q7GQhuahL0IOR7JccFTsFKQ/mb6iZWAg=="
},
"@react-hook/resize-observer": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@react-hook/resize-observer/-/resize-observer-1.1.0.tgz",
"integrity": "sha512-ERM7omDqG/ZzNQz061XHCfYXxGiX68Y46sVi8/ZHjjz7NbZQSxt+dnGkhfEbfsK+JxIzSqSfiXh2pNUl6aYQWA==",
"requires": {
"@react-hook/latest": "^1.0.2",
"@react-hook/passive-layout-effect": "^1.2.0",
"resize-observer-polyfill": "^1.5.1"
}
},
"@react-hook/size": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/@react-hook/size/-/size-2.1.1.tgz",
"integrity": "sha512-QtHDsrvz8p4cai2UKxBpzk0r/uM63UyhmozTVChaDHJsVpN5/7A2yu8wuGyNhExdeCYMclLM21QjY1dyqpGbuQ==",
"requires": {
"@react-hook/passive-layout-effect": "^1.2.0",
"@react-hook/resize-observer": "^1.1.0"
}
},
"@restart/context": {
"version": "2.1.4",
"resolved": "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz",
......@@ -11011,9 +11060,9 @@
"integrity": "sha1-z4tP9PKWQGdNbN0CsOO8UjwrvcA="
},
"moment": {
"version": "2.27.0",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.27.0.tgz",
"integrity": "sha512-al0MUK7cpIcglMv3YF13qSgdAIqxHTO7brRtaz3DlSULbqfazqkc5kEjNrLDOM7fsjshoFIihnU8snrP7zUvhQ=="
"version": "2.29.0",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.29.0.tgz",
"integrity": "sha512-z6IJ5HXYiuxvFTI6eiQ9dm77uE0gyy1yXNApVHqTcnIKfY9tIwEjlzsZ6u1LQXvVgKeTnv9Xm7NDvJ7lso3MtA=="
},
"move-concurrently": {
"version": "1.0.1",
......@@ -17817,6 +17866,11 @@
"resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
"integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8="
},
"resize-observer-polyfill": {
"version": "1.5.1",
"resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
"integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
},
"resolve": {
"version": "1.17.0",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.17.0.tgz",
......@@ -20451,6 +20505,11 @@
"dequal": "^2.0.2"
}
},
"use-light-switch": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/use-light-switch/-/use-light-switch-1.0.1.tgz",
"integrity": "sha512-R9TQa/HAXR4A/u0PPjQ0OoEY9mB4UOvyKqz0deVTBTOprVUjYar/2pFZ8D9CRTNlGrL4Dl5GRGMq00hEm25abA=="
},
"util": {
"version": "0.10.3",
"resolved": "https://registry.npmjs.org/util/-/util-0.10.3.tgz",
......
import "@icon/open-iconic/open-iconic.css";
import MomentUtils from "@date-io/moment";
import { library } from "@fortawesome/fontawesome-svg-core";
import {faBars,faCheck,faChevronLeft,faHome,faIgloo,faPlus,faSignOutAlt,faTimes,faUser} from "@fortawesome/free-solid-svg-icons";
import { createMuiTheme, MuiThemeProvider,ThemeProvider } from "@material-ui/core/styles";
import { fab } from "@fortawesome/free-brands-svg-icons";
import CssBaseline from "@material-ui/core/CssBaseline";
import { MuiPickersUtilsProvider } from "@material-ui/pickers";
import moment from "moment";
import React, { Component } from "react";
import PublicPageLayout from "./Components/PageLayout/PublicPageLayout";
import { AuthenticationContext } from "./Contexts/Authentication";
import { PageLayoutContext } from "./Contexts/PageLayout";
import ThemeProvider from "./Contexts/Theme";
import { Routing } from "./Routing/Routing";
require("bootstrap");
library.add(faSignOutAlt, faUser, faIgloo, faBars, faCheck, faTimes, faHome, faPlus, faChevronLeft);
library.add(fab,faSignOutAlt, faUser, faIgloo, faBars, faCheck, faTimes, faHome, faPlus, faChevronLeft);
const theme_dark = createMuiTheme({
palette: {
type: "dark",
}
});
const theme_light = createMuiTheme();
class App extends Component {
constructor(props){
super(props);
......@@ -40,20 +37,22 @@ class App extends Component {
pagelayout: {
component: PublicPageLayout,
setLayout: setLayout
}
},
};
}
render() {
const PageLayout = this.state.pagelayout.component;
return (
<div className={"App"}>
<AuthenticationContext.Provider value={this.state.authentication}>
<MuiThemeProvider theme={theme_light}>
<PageLayoutContext.Provider value={this.state.pagelayout}>
<Routing/>
</PageLayoutContext.Provider>
</MuiThemeProvider>
<ThemeProvider>
<CssBaseline/>
<MuiPickersUtilsProvider libInstance={moment} utils={MomentUtils}>
<PageLayoutContext.Provider value={this.state.pagelayout}>
<Routing/>
</PageLayoutContext.Provider>
</MuiPickersUtilsProvider>
</ThemeProvider>
</AuthenticationContext.Provider>
</div>
);
......
import PropTypes from "prop-types";
import React from "react";
import { Col, Row } from "reactstrap";
import makeStyles from "@material-ui/core/styles/makeStyles";
const useStyles = makeStyles(theme=>({
column: {
marginTop: theme.spacing(2),
marginBottom: theme.spacing(2),
},
row: {
marginBottom: theme.spacing(1),
}
}));
const CardGrid = (props) => {
const classes = useStyles();
var CardGrid = (props) => {
const chunkArrayIntoListOfArrays = (ar, num) => {
return ar.reduce(function(r, v, i) {
if (i % num === 0) r.push(ar.slice(i, i + num));
return r;
}, []);
};
console.log(props.card_grid);
let card_grid = props.chunk_size > 0 ? chunkArrayIntoListOfArrays(props.card_grid, props.chunk_size) : props.card_grid;
return (
<Col className={"mb-5"}>
<Col className={classes.column}>
{ card_grid.map((card_rows, r)=>{
return(
<Row key={"card_row "+r} className={"card-wrapper mb-2"}>
<Row key={"card_row "+r} className={classes.row}>
{ card_rows.map((card, c)=>{
return(
<Col key={"card "+r+" "+c}>
<Col key={"card "+r+" "+c} className={classes.column}>
<props.component {...card}/>
</Col>
);
......
......@@ -2,7 +2,7 @@ import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import CardMedia from "@material-ui/core/CardMedia";
import { makeStyles, useTheme } from "@material-ui/core/styles";
import TextInfoContent from "@mui-treasury/components/content/textInfo";
import Typography from "@material-ui/core/Typography";
import { useOverShadowStyles } from "@mui-treasury/styles/shadow/over";
import { useBlogTextInfoContentStyles } from "@mui-treasury/styles/textInfoContent/blog";
import Info from "App/Components/Info/Info";
......@@ -19,10 +19,10 @@ const useStyles = makeStyles(theme => ({
boxShadow: "0px 14px 80px rgba(34, 35, 58, 0.2)",
position: "relative",
minWidth: 304,
maxWidth: 500,
maxWidth: 600,
marginLeft: "auto",
overflow: "initial",
background: "#ffffff",
background: theme.palette.background.paper,
display: "flex",
flexDirection: "column",
alignItems: "center",
......@@ -33,14 +33,15 @@ const useStyles = makeStyles(theme => ({
},
},
media: {
maxWidth: 150,
minWidth: 50,
maxWidth: 200,
width: "88%",
marginLeft: 10,
marginRight: 10,
height: 0,
paddingBottom: "48%",
borderRadius: theme.spacing(2),
backgroundColor: "#fff",
backgroundColor: theme.palette.background.paper,
position: "relative",
transform: "translateY(8px)",
paddingLeft: 10,
......@@ -86,15 +87,12 @@ const ContactCard = (props) => {
image={photo || "https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2F3.bp.blogspot.com%2F-AJ9Cw3DdY48%2FUFCb1npjRHI%2FAAAAAAAAALs%2Fy1BaWpM2WfI%2Fs1600%2FNature-wallpaper%2B%25286%2529.jpg&f=1&nofb=1"}
/>
<CardContent>
<TextInfoContent
classes={contentStyles}
heading={duty}
body={description}
/>
<Typography variant={"h5"}>{ duty }</Typography>
<Info
headerless={true}
data={data}
/>
<Typography variant={"body1"}>{ description }</Typography>
{ /*<Button className={buttonStyles}>Read more</Button>*/ }
</CardContent>
</Card>
......
import Box from "@material-ui/core/Box";
import Button from "@material-ui/core/Button";
import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import CardMedia from "@material-ui/core/CardMedia";
import { makeStyles, useTheme } from "@material-ui/core/styles";
import Typography from "@material-ui/core/Typography";
import PeopleCardFooter from "@mui-treasury/components/cardFooter/people";
import TextInfoContent from "@mui-treasury/components/content/textInfo";
import EmojiEmotionsIcon from "@material-ui/icons/EmojiEmotions";
import EmojiPeopleIcon from "@material-ui/icons/EmojiPeople";
import HelpIcon from "@material-ui/icons/Help";
import { useOverShadowStyles } from "@mui-treasury/styles/shadow/over";
import { useBlogTextInfoContentStyles } from "@mui-treasury/styles/textInfoContent/blog";
import cx from "clsx";
import PropTypes from "prop-types";
import React from "react";
import {Link} from "react-router-dom";
const useStyles = makeStyles(theme => ({
root: {
......@@ -24,7 +22,7 @@ const useStyles = makeStyles(theme => ({
maxWidth: 500,
marginLeft: "auto",
overflow: "initial",
background: "#ffffff",
background: theme.palette.background.paper,
display: "flex",
flexDirection: "column",
alignItems: "center",
......@@ -35,7 +33,7 @@ const useStyles = makeStyles(theme => ({
width: "100%",
paddingBottom: "48%",
borderRadius: theme.shape.borderRadius,
backgroundColor: "#fff",
backgroundColor: theme.palette.background.paper,
position: "relative",
paddingLeft: 10,
paddingRight: 10,
......@@ -59,30 +57,63 @@ const useStyles = makeStyles(theme => ({
title: {
padding: theme.spacing(1),
color: theme.palette.common.white,
textAlign: "center"
},
icon: {
color: theme.palette.background.paper
},
iconWrapper: {
width: "90%",
display: "flex",
justifyContent: "space-between"
},
link: {
width: "100%"
}
}));
const GroupCard = (props) => {
const styles = useStyles();
const theme = useTheme();
const styles = useStyles(theme);
const shadowStyles = useOverShadowStyles();
const { title, photo} = props;
const { title, photo, enrolled, self_enrollable, seeks_members, path} = props;
return (
<Card className={cx(styles.root, shadowStyles.root)}>
<CardMedia
className={styles.media}
image={photo}
/>
<Typography variant={"h4"} className={styles.title}>{ title }</Typography>
<Link to={path} className={styles.link}>
<div className={styles.iconWrapper}>
<div>{ enrolled && <EmojiEmotionsIcon className={styles.icon}/> }</div>
<div>
{ seeks_members && <HelpIcon className={styles.icon}/> }
{ self_enrollable && <EmojiPeopleIcon className={styles.icon}/> }
</div>
</div>
<CardMedia
className={styles.media}
image={photo}
/>
<Typography variant={"h4"} className={styles.title}>{ title }</Typography>
</Link>
</Card>
);
};
GroupCard.propTypes = {
title: PropTypes.string.isRequired,
description: PropTypes.string.isRequired,
photo: PropTypes.string.isRequired,
group_memberships: PropTypes.array.isRequired,
photo: PropTypes.string,
path: PropTypes.string,
enrolled: PropTypes.bool,
self_enrollable: PropTypes.bool,
seeks_members: PropTypes.bool
};
GroupCard.defaultProps = {
photo: "url(https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2F3.bp.blogspot.com%2F-AJ9Cw3DdY48%2FUFCb1npjRHI%2FAAAAAAAAALs%2Fy1BaWpM2WfI%2Fs1600%2FNature-wallpaper%2B%25286%2529.jpg&f=1&nofb=1)",
path: undefined,
enrolled: false,
self_enrollable: false,
seeks_members: false
};
export default GroupCard;
import React from "react";
import DateTimeField from "./DateTimeField";
export const DateField = (props) => {return <DateTimeField format={"YYYY/MM/DD"} {...props}/>}
export default DateField
\ No newline at end of file
import { makeStyles, useTheme } from "@material-ui/core/styles";
import PropTypes from "prop-types";
import React from "react";
import {TextValidator} from "react-material-ui-form-validator";
import {KeyboardDatePicker} from "@material-ui/pickers";
import EmailLists from "../../Pages/Email/EmailLists";
const useStyles = makeStyles(theme => ({
picker: {
marginRight: theme.spacing(2),
"&:last-child": {
marginRight: 0,
},
width: "100%",
},
}));
export const DateTimeField = (props) => {
const theme = useTheme();
const classes = useStyles(theme);
const {name, format, ...remaining_props} = props;
const pickerEditorProps = field => ({
className: classes.picker,
ampm: false,
inputVariant: "outlined",
format: format,
label: field[0].toUpperCase() + field.slice(1).replaceAll("_", " "),
});
return (
<KeyboardDatePicker
{...pickerEditorProps(name)}
{...remaining_props}
/>
);
};
DateTimeField.propTypes = {
name: PropTypes.string.isRequired,
format: PropTypes.string
};
DateTimeField.defaultProps = {
format: "YYYY/MM/DD HH:mm"
};
export default DateTimeField;
\ No newline at end of file
import { makeStyles, useTheme } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";
import PropTypes from "prop-types";
import React from "react";
const useStyles = makeStyles(theme => ({
textField: {
width: "100%",
},
}));
export const FileField = (props) => {
const theme = useTheme();
const classes = useStyles(theme);
const {name, ...remaining_props} = props;
const textEditorProps = field => ({
variant: "outlined",
label: field[0].toUpperCase() + field.slice(1).replaceAll("_", " "),
className: classes.textField,
});
return (
<TextField
{...textEditorProps(name)}
InputLabelProps={{ shrink: true }}
type={"file"}
{...remaining_props}
/>
);
};
FileField.propTypes = {
name: PropTypes.string
};
export default FileField;
\ No newline at end of file
import { makeStyles, useTheme } from "@material-ui/core/styles";
import PropTypes from "prop-types";
import React from "react";
import {SelectValidator} from "react-material-ui-form-validator";
const useStyles = makeStyles(theme => ({
selectField: {
width: "100%",
},
}));
const SelectField = (props) => {
const theme = useTheme();
const classes = useStyles(theme);
const {name, children, ...remaining_props} = props;
const selectEditorProps = field => ({
variant: "outlined",
label: field[0].toUpperCase() + field.slice(1).replaceAll("_", " "),
className: classes.selectField,
containerProps: {className: classes.selectField}
});