nicholas/storage-manager
1
0
Fork 0
Code Issues Pull Requests Activity

make button component; put submit button inline

Browse Source
This commit is contained in:
np.w
2021-03-02 16:20:29 -06:00
parent d0118ddabf
commit ee36a493d3
6 changed files with 88 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/app.js
+6 -7
View File
@@ -3,6 +3,7 @@ import axios from 'axios';
import Box from './box';
import api from './api';
import Modal from './modal';
import Button from './button';
import ColorSelect from './color';
import Color from 'color';
import './styles/app.css';
@@ -383,7 +384,7 @@ function App() {
</div>
const boxForm =
<form onSubmit={boxHandler.handleSubmit}>
<form id="form">
<input id="id" name="id" value={boxID} readOnly hidden></input>
<legend>New Box</legend>
<fieldset>
@@ -395,10 +396,9 @@ function App() {
</label>
{colorSelector}
</fieldset>
<button type="submit">submit</button>
</form>
const itemForm = <form onSubmit={itemHandler.handleSubmit}>
const itemForm = <form id="form">
<legend>New Item</legend>
<fieldset>
<input id="id" name="id" value={itemID} readOnly hidden></input>
@@ -412,7 +412,6 @@ function App() {
<input onChange={itemHandler.handleQuantity} value={itemQuantity} id="item-quantity" name="quantity" type="text"></input>
</label>
</fieldset>
<button type="submit">submit</button>
</form>
const itemView = <div>
<h1>{itemName}</h1>
@@ -421,8 +420,8 @@ function App() {
return (
<>
{<Modal show={showModalItem} content={itemForm} handleClose={handleModalCloseItem} />}
{<Modal show={showModalBox} content={boxForm} handleClose={handleModalCloseBox} />}
{<Modal show={showModalItem} content={itemForm} handleSubmit={itemHandler.handleSubmit} handleClose={handleModalCloseItem} />}
{<Modal show={showModalBox} content={boxForm} handleSubmit={boxHandler.handleSubmit} handleClose={handleModalCloseBox} />}
{<Modal show={showModalItemReadOnly} content={itemView} handleClose={handleModalCloseItem} />}
<div className='header-container'>
@@ -431,7 +430,7 @@ function App() {
<input spellCheck='false' className='filter' type="search" id="box-filter" name="filter" value={filter} onChange={handleFilterChange} />
<span className='material-icons icon clear' onClick={handleClearFilter}>clear</span>
</span>
{<button className='button' onClick={handleAddBox}>new box</button>}
{<Button label='new box' onClick={handleAddBox} />}
</div>
<div className='body-container scroll-container'>
<ul className="list-box">
client/src/button.js
+9
View File
@@ -0,0 +1,9 @@
import React, {useState} from 'react';
import './styles/button.css';
const Button = ({style, form, onClick, label, className}) => {
return <button style={style} form={form} onClick={onClick} className={`button ${className}`}>{label}</button>
}
export default Button;
client/src/modal.js
+10 -5
View File
@@ -1,9 +1,14 @@
import React from 'react';
import Button from './button';
import './styles/modal.css';
const Modal = ({show, content, handleClose}) => {
import './styles/app.css';
const confirmStyle = {
backgroundColor: '#0495FC',
color: 'white'
}
const Modal = ({ show, content, handleSubmit, handleClose }) => {
const handleClickOff = (event) => {
if(event.target.classList.contains('modal-container'))
if (event.target.classList.contains('modal-container'))
handleClose();
}
return show ?
@@ -13,10 +18,10 @@ const Modal = ({show, content, handleClose}) => {
{content}
</div>
<div className='modal-action'>
<button onClick={handleClose}>close</button>
<Button label='cancel' onClick={handleClose} className='btn btn-close' />
{handleSubmit && <Button style={confirmStyle} form='id' label='submit' onClick={handleSubmit} className='btn btn-submit' />}
</div>
</div>
</div>
: null;
}
client/src/styles/app.css
-42
View File
@@ -267,51 +267,9 @@ li.item {
.menu-action > .icon {
margin: 1rem 1rem;
}
button.button {
height: 2.5rem;
display: flex;
font-size: .875rem;
text-transform: uppercase;
padding: 0.75rem;
align-items: center;
justify-content: center;
min-width: 64px;
background-color: var(--white_light);
border: 1px solid var(--black_light);
border-radius: 4px;
}
button.button:hover {
background-color: var(--white_darker);
}
.header-container {
display: flex;
justify-content: center;
align-items: center;
}
.color-selector-container {
display: grid;
grid-auto-flow: column;
width: fit-content;
gap:3px;
}
.color-selector-container > .color {
border-radius: 50%;
width: 2em;
height: 2em;
}
.color-selector-container > .color.selected {
border-width: 3px;
border-style: solid;
border-color: var(--black_light);
}
.color-selector-container > .color:hover {
cursor: pointer;
}
.color-selector-container > .color > input[type=radio] {
visibility: hidden;
}
client/src/styles/button.css
+17
View File
@@ -0,0 +1,17 @@
button.button {
height: 2.5rem;
display: flex;
font-size: .875rem;
text-transform: uppercase;
padding: 0.75rem;
align-items: center;
justify-content: center;
min-width: 64px;
background-color: var(--white_light);
border: 1px solid var(--black_light);
border-radius: 4px;
}
button.button:hover {
background-color: var(--white_darker);
}
client/src/styles/modal.css
+45
View File
@@ -9,6 +9,8 @@
background-color: rgba(0, 0, 0, 0.32)
}
.modal-content {
display: grid;
grid-template-rows: 1fr auto;
width: 80%;
height: 90%;
border-radius: 4px;
@@ -18,3 +20,46 @@
0 9px 46px 8px rgba(0,0,0,.12);
background: #fff;
}
.modal-action {
display: grid;
gap: 0.2rem;
grid-template-columns: auto auto;
justify-content: end;
padding: 0.2rem;
}
.btn {
background-color: white;
}
.btn-cancel {
}
.btn-submit {
}
.btn-close:hover {
cursor: pointer;
background-color: var(--white_darker);
}
.color-selector-container {
display: grid;
grid-auto-flow: column;
width: fit-content;
gap:3px;
}
.color-selector-container > .color {
border-radius: 50%;
width: 2em;
height: 2em;
}
.color-selector-container > .color.selected {
border-width: 3px;
border-style: solid;
border-color: var(--black_light);
}
.color-selector-container > .color:hover {
cursor: pointer;
}
.color-selector-container > .color > input[type=radio] {
visibility: hidden;
}