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

style changes

Browse Source
This commit is contained in:
np.w
2020-12-15 22:08:13 -06:00
parent a6b6d55266
commit a23ba7ece5
3 changed files with 223 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/box.js
+58 -25
View File
@@ -1,32 +1,65 @@
import React, { useState } from 'react';
import React, { useState, useRef, useEffect } from 'react';
import Item from './item';
const Box = ({ boxData, boxHandler, itemHandler }) => {
return (
<>
<li className="box" draggable='true'
onDragStart={(event) => boxHandler.handleDragStart(boxData, event)}
onDragOver={boxHandler.handleDragOver}
onDrop={(event) => boxHandler.handleDrop(boxData, event)}>
{false && <span>{boxData.sort}</span>}
<h2 className="box-title">{boxData.name}</h2>
<h3 className='box-subtitle'>{boxData.description}</h3>
<div className='head-divider'></div>
<ul className="list-box-item">
{boxData.item.map(((item, index) => {
return <Item
key={index}
data={item}
boxID={boxData._id}
itemHandler={itemHandler} />
}))}
</ul>
<button className="edit-box box-function" onClick={() => boxHandler.handleEdit(boxData._id)}>edit</button>
<button className="remove-box box-function" onClick={() => boxHandler.handleRemove(boxData._id)}>remove</button>
<button className="add-item item-function" onClick={() => itemHandler.handleAdd(boxData._id)}>add item</button>
const menu = useRef(null);
useEffect(() => {
document.addEventListener('mousedown', handleClick);
return () => {
document.removeEventListener('mousedown', handleClick);
};
}, []);
const handleClick = (event) => {
if (menu.current.contains(event.target)) return;
setShowMenu(false);
}
</li>
</>
const [showMenu, setShowMenu] = useState(false);
const handleBoxMenuClick = () => {
setShowMenu(true);
}
const moreMenu = () => {
return (
<ul className='menu-more-list box'>
<li className='menu-action' onClick={() => boxHandler.handleEdit(boxData._id)}>
<span className='material-icons icon'>edit</span>
<span className='label'>edit</span>
</li>
<li className='menu-action' onClick={() => boxHandler.handleRemove(boxData._id)}>
<span className='material-icons icon'>delete</span>
<span className='label'>remove</span>
</li>
</ul>
)
}
return (
<li className='box' draggable='true'
onDragStart={(event) => boxHandler.handleDragStart(boxData, event)}
onDragOver={boxHandler.handleDragOver}
onDrop={(event) => boxHandler.handleDrop(boxData, event)}>
{false && <span>{boxData.sort}</span>}
<div ref={menu} className='menu-more-container'>{showMenu && moreMenu()}</div>
<div className='box-header'>
<div className='box-title-container'>
<h2 className='box-title'>{boxData.name}</h2>
<h3 className='box-subtitle'>{boxData.description}</h3>
</div>
<span className='menu-more box material-icons' onClick={handleBoxMenuClick}>more_vert</span>
</div>
<div className='head-divider'></div>
<ul className='list-box-item'>
{boxData.item.map(((item, index) => {
return <Item
key={index}
data={item}
boxID={boxData._id}
itemHandler={itemHandler} />
}))}
</ul>
<div className='menu-bottom'>
<span className='material-icons add' onClick={() => itemHandler.handleAdd(boxData._id)}>add</span>
</div>
</li>
)
}
client/src/item.js
+12 -6
View File
@@ -1,4 +1,4 @@
import React, { useState, setState, useRef, useEffect } from 'react';
import React, { useState, useRef, useEffect } from 'react';
const Item = ({ data, itemHandler, boxID }) => {
const menu = useRef(null);
const handleClick = (event) => {
@@ -17,17 +17,23 @@ const Item = ({ data, itemHandler, boxID }) => {
}
const moreMenu = () => {
return (
<div className='item-menu-more'>
<button className='item-function' onClick={() => itemHandler.handleEdit(boxID, data._id)}>edit</button>
<button className='item-function' onClick={() => itemHandler.handleRemove(boxID, data._id)}>remove</button>
</div>
<ul className='menu-more-list item'>
<li className='menu-action' onClick={() => itemHandler.handleEdit(boxID, data._id)}>
<span className='material-icons icon'>edit</span>
<span className='label'>edit</span>
</li>
<li className='menu-action' onClick={() => itemHandler.handleRemove(boxID, data._id)}>
<span className='material-icons icon'>delete</span>
<span className='label'>remove</span>
</li>
</ul>
)
}
return (
<li className='item'>
<div ref={menu} className='item-menu-more-container'>{showMenu && moreMenu()}</div>
<span className='item-name'>{data.name}</span>
<span className='item-menu material-icons' onClick={handleItemMenuClick}>
<span className='menu-more item material-icons' onClick={handleItemMenuClick}>
more_vert
</span>
</li>
client/src/styles/app.css
+153 -52
View File
@@ -23,16 +23,23 @@ h1, h2, h3, h4 {
margin: 0;
padding: 0;
}
button {
border: none;
padding: 0.4em;
}
button.box-function, button.item-function {
font-size: 1em;
}
button:hover {
cursor: pointer;
}
.box-header {
display: flex;
align-items: center;
padding: 0 16px;
}
.box-title-container {
}
.box-menu-container {
margin-right: 1em;
margin-left: auto;
}
.box-title {
font-size: 1.25rem;
line-height: 2rem;
@@ -51,10 +58,11 @@ ul.list-box {
gap: 1em;
}
.box {
li.box {
position: relative;
height: min-content;
width: 344px;
padding: 16px;
padding: 16px 0;
background-color: white;
border-radius: 4px;
border-width: 1px;
@@ -67,52 +75,17 @@ ul.list-box {
list-style: none;
}
.list-box-item {
margin: 1rem 0;
max-height: 200px;
overflow-y: scroll;
}
.list-box-item::-webkit-scrollbar {
width: 5px;
}
.list-box-item::-webkit-scrollbar-track {
background: #ddd;
}
.list-box-item::-webkit-scrollbar-thumb {
background: #666;
}
.item {
font-size: 0.75rem;
display: flex;
position: relative;
align-items: center;
justify-content: flex-start;
padding: 0.75rem;
list-style: none;
}
.head-divider {
margin: 1rem 0;
width: 100%;
height: 1px;
background-color: #e0e0e0;
.item-menu-more-container {
z-index: 1;
}
.item-menu {
font-size: 1rem;
margin-right: 0;
margin-left: auto;
}
.item-menu:hover {
cursor: pointer;
}
.item-menu-more {
.item-menu-more-list {
padding: 0;
width: 120px;
position: absolute;
margin: 0 10px 0 0;
top: 2rem;
right: 0;
height: 100px;
width: 75px;
z-index: 1;
background-color: white;
border-radius: 4px;
@@ -123,8 +96,136 @@ ul.list-box {
0px 0px 0px 0px rgba(0, 0, 0, 0.2),
0px 0px 0px 0px rgba(0, 0, 0, 0.14),
0px 0px 0px 0px rgba(0,0,0,.12);
}
.box-menu-action {
list-style: none;
display: flex;
align-items: center;
}
.item-menu-action:hover {
cursor: pointer;
background-color: #F2F2F2;
}
.item-menu-action > .icon {
margin: 1rem 1rem;
}
.item-menu-action > .label {
}
.list-box-item {
padding: 0;
margin: 1rem 0;
max-height: 200px;
overflow-y: auto;
}
.list-box-item::-webkit-scrollbar {
width: 5px;
}
.list-box-item::-webkit-scrollbar-track {
background: #ddd;
}
.list-box-item::-webkit-scrollbar-thumb {
background: #666;
}
li.item {
font-size: 0.75rem;
display: flex;
position: relative;
align-items: center;
justify-content: flex-start;
padding: 0.75rem 0.75rem 0.75rem 1.25rem;
list-style: none;
}
li.item:hover {
background-color:#F2F2F2;
}
.head-divider {
margin: 16px;
width: auto;
height: 1px;
background-color: #e0e0e0;
}
.menu-more-container {
z-index: 1;
}
.menu-bottom {
display: flex;
justify-content: center;
align-items: center;
margin-right: 1rem;
}
.add {
background-color: #f2f2f2;
padding: 0.75rem;
margin-right: 0;
margin-left: auto;
border-radius: 50%;
}
.scroll1::-webkit-scrollbar-thumb {
background: #666;
}
.add:hover {
cursor: pointer;
background-color: #e0e0e0;
}
.menu-more {
display: flex;
justify-content: center;
align-items: center;
padding: 0.1rem;
margin-right: 0;
margin-left: auto;
border-radius: 50%;
}
.menu-more:hover {
background-color: #e0e0e0;
}
.menu-more.box {
font-size: 1.25rem;
}
.menu-more.item {
font-size: 1rem;
}
.menu-more:hover {
cursor: pointer;
}
.menu-more-list {
padding: 0;
position: absolute;
z-index: 1;
background-color: white;
border-radius: 4px;
border-width: 1px;
border-style: solid;
border-color: #e0e0e0;
box-shadow:
0px 0px 0px 0px rgba(0, 0, 0, 0.2),
0px 0px 0px 0px rgba(0, 0, 0, 0.14),
0px 0px 0px 0px rgba(0,0,0,.12);
}
.menu-more-list.box {
width: 120px;
margin: 0 10px 0 0;
top: 4rem;
right: 0;
}
.menu-more-list.item {
width: 120px;
margin: 0 10px 0 0;
top: 2rem;
right: 0;
}
.menu-action {
z-index: inherit;
list-style: none;
display: flex;
align-items: center;
}
.menu-action:hover {
cursor: pointer;
background-color: #F2F2F2;
}
.menu-action > .icon {
margin: 1rem 1rem;
}