Añadir plantilla

Base para front

3 files changed, 273 insertions, 0 deletions

diff --git a/front/odiparpack/app/components/TemplateSettings/ThemeThumb.js b/front/odiparpack/app/components/TemplateSettings/ThemeThumb.js
new file mode 100644
index 0000000..df16917
--- /dev/null
+++ b/front/odiparpack/app/components/TemplateSettings/ThemeThumb.js
@@ -0,0 +1,74 @@
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { withStyles } from '@material-ui/core/styles';
+import themePalette from 'ba-api/themePalette';
+import { Radio, Paper } from '@material-ui/core';
+import styles from './themeStyles-jss';
+
+const ThemeThumb = props => {
+  const { classes } = props;
+  return (
+    <Paper className={classNames(classes.thumb, props.theme === props.value ? classes.selectedTheme : '')}>
+      <Radio
+        checked={props.selectedValue === props.value}
+        value={props.value}
+        onChange={props.handleChange}
+      />
+      { props.name }
+      <div className={classes.appPreview}>
+        <header style={{ background: themePalette(props.value).palette.primary.main }} />
+        <aside>
+          <ul>
+            {[0, 1, 2, 3].map(index => {
+              if (index === 1) {
+                return (
+                  <li key={index.toString()}>
+                    <i style={{ background: themePalette(props.value).palette.secondary.main }} />
+                    <p style={{ background: themePalette(props.value).palette.secondary.main }} />
+                  </li>
+                );
+              }
+              return (
+                <li key={index.toString()}>
+                  <i style={{ background: themePalette(props.value).palette.secondary.main }} />
+                  <p />
+                </li>
+              );
+            })}
+          </ul>
+        </aside>
+        <Paper className={classes.content}>
+          <div className={classes.title} style={{ background: themePalette(props.value).palette.primary.main }} />
+          <div className={classes.ctn1} style={{ background: themePalette(props.value).palette.secondary.main }} />
+          <div className={classes.ctn2} style={{ background: themePalette(props.value).palette.primary.light }} />
+          <div className={classes.ctn2} style={{ background: themePalette(props.value).palette.primary.light }} />
+          <div className={classes.ctn2} style={{ background: themePalette(props.value).palette.secondary.light }} />
+          <div className={classes.ctn2} style={{ background: themePalette(props.value).palette.secondary.light }} />
+        </Paper>
+      </div>
+    </Paper>
+  );
+};
+
+ThemeThumb.propTypes = {
+  value: PropTypes.string.isRequired,
+  theme: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  selectedValue: PropTypes.string.isRequired,
+  classes: PropTypes.object.isRequired,
+  handleChange: PropTypes.func.isRequired,
+};
+
+// Redux
+const reducer = 'ui';
+const mapStateToProps = state => ({
+  theme: state.getIn([reducer, 'theme']),
+});
+
+const ThumbsMapped = connect(
+  mapStateToProps,
+)(ThemeThumb);
+
+export default withStyles(styles)(ThumbsMapped);
diff --git a/front/odiparpack/app/components/TemplateSettings/index.js b/front/odiparpack/app/components/TemplateSettings/index.js
new file mode 100644
index 0000000..d36f5ec
--- /dev/null
+++ b/front/odiparpack/app/components/TemplateSettings/index.js
@@ -0,0 +1,93 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import {
+  FormControl,
+  Grid,
+  FormControlLabel,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Icon,
+  Slide,
+  Button,
+} from '@material-ui/core';
+import styles from './themeStyles-jss';
+import ThemeThumb from './ThemeThumb';
+
+const Transition = React.forwardRef(function Transition(props, ref) { // eslint-disable-line
+  return <Slide direction="left" ref={ref} {...props} />;
+});
+
+function TemplateSettings(props) {
+  const {
+    classes,
+    palette,
+    open,
+    selectedValue,
+    changeTheme,
+    close
+  } = props;
+
+  const getItem = dataArray => dataArray.map((item, index) => (
+    <FormControlLabel
+      key={index.toString()}
+      className={classes.themeField}
+      control={(
+        <ThemeThumb
+          value={item.value}
+          selectedValue={selectedValue}
+          handleChange={changeTheme}
+          name={item.name}
+        />
+      )}
+    />
+  ));
+
+  return (
+    <Dialog
+      open={open}
+      TransitionComponent={Transition}
+      keepMounted
+      onClose={close}
+      className={classes.themeChooser}
+      aria-labelledby="alert-dialog-slide-title"
+      aria-describedby="alert-dialog-slide-description"
+      maxWidth="md"
+    >
+      <DialogTitle id="alert-dialog-slide-title">
+        <Icon>palette</Icon>
+        {' '}
+        Choose Theme
+      </DialogTitle>
+      <DialogContent>
+        <Grid container>
+          <FormControl component="fieldset" className={classes.group}>
+            { palette !== undefined && getItem(palette) }
+          </FormControl>
+        </Grid>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={close} color="primary">
+          Done
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
+
+TemplateSettings.propTypes = {
+  classes: PropTypes.object.isRequired,
+  palette: PropTypes.object,
+  selectedValue: PropTypes.string.isRequired,
+  changeTheme: PropTypes.func.isRequired,
+  close: PropTypes.func.isRequired,
+  open: PropTypes.bool.isRequired,
+};
+
+TemplateSettings.defaultProps = {
+  palette: undefined
+};
+
+export default withStyles(styles)(TemplateSettings);
diff --git a/front/odiparpack/app/components/TemplateSettings/themeStyles-jss.js b/front/odiparpack/app/components/TemplateSettings/themeStyles-jss.js
new file mode 100644
index 0000000..efbac9c
--- /dev/null
+++ b/front/odiparpack/app/components/TemplateSettings/themeStyles-jss.js
@@ -0,0 +1,106 @@
+const styles = theme => ({
+  group: {
+    margin: `${theme.spacing(1)}px 0`,
+    maxWidth: 1000,
+    display: 'block',
+    '& label': {
+      display: 'inline-block',
+      margin: 0,
+      width: '99%',
+      [theme.breakpoints.up('sm')]: {
+        width: '45%'
+      },
+      [theme.breakpoints.up('md')]: {
+        width: '33.33%'
+      },
+    },
+    '& > label': {
+      position: 'relative',
+      '& > span': {
+        marginTop: 10,
+        display: 'block',
+        textAlign: 'center',
+        position: 'absolute',
+        top: 12,
+        left: 48,
+      }
+    }
+  },
+  thumb: {
+    margin: theme.spacing(1)
+  },
+  selectedTheme: {
+    boxShadow: `0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12), 0 0 0px 4px ${theme.palette.secondary.main}`
+  },
+  content: {},
+  title: {},
+  ctn1: {},
+  ctn2: {},
+  appPreview: {
+    width: '100%',
+    padding: 5,
+    height: 200,
+    position: 'relative',
+    display: 'flex',
+    background: theme.palette.grey[50],
+    '& header': {
+      width: '100%',
+      height: 50,
+      background: theme.palette.primary.main,
+      position: 'absolute',
+      top: 0,
+      left: 0
+    },
+    '& aside': {
+      width: '30%',
+      marginTop: 70,
+      '& li': {
+        margin: '0 10px 10px 5px',
+        display: 'flex',
+        '& i': {
+          borderRadius: '50%',
+          width: 8,
+          height: 8,
+          marginRight: 5,
+          marginTop: -3,
+          background: theme.palette.secondary.main,
+        },
+        '& p': {
+          width: 40,
+          height: 2,
+          background: theme.palette.grey[400],
+        }
+      }
+    },
+    '& $content': {
+      padding: 10,
+      marginTop: 20,
+      width: '70%',
+      zIndex: 10,
+      marginBottom: 10,
+      '& $title': {
+        background: theme.palette.primary.main,
+        height: 5,
+        width: '60%',
+        marginBottom: 10
+      },
+      '& $ctn1': {
+        margin: '5px 5px 10px 0',
+        width: '100%',
+        height: 30,
+        background: theme.palette.secondary.main,
+        display: 'block'
+      },
+      '& $ctn2': {
+        width: '50%',
+        marginLeft: 0,
+        height: 40,
+        border: '2px solid #FFF',
+        background: theme.palette.secondary.light,
+        display: 'inline-block'
+      }
+    }
+  }
+});
+
+export default styles;