sigonasr2/ngsplanner
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix class selector popup, basic modal setup

Browse Source 
Co-authored-by: dudleycu <dudleyc.twitch@gmail.com>
This commit is contained in:
Joshua Sigona 2021-08-08 00:05:52 +09:00
parent f48b5a83e0
commit dbdc0ee55f
2 changed files with 29 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/TestPanel.js
View File

@ -101,12 +101,15 @@ function ClassSelector(p){
const CLASSES = p.GetData("class") const CLASSES = p.GetData("class")
const wrapperRef = useRef(null); const wrapperRef = useRef(null);
useOutsideAlerter(wrapperRef,p.setEdit); useOutsideAlerter(wrapperRef,p.setEdit);
return <div className="popup" ref={wrapperRef}> return <><div className="popup2" ref={wrapperRef}>
Class Selector<br/> Class Selector<hr/>
{Object.keys(CLASSES).map((cl,i)=>{ <div className="popup">
return <button id={i} className="rounded" onClick={()=>{p.setClassName(cl);p.setEdit(false)}}><img src={process.env.PUBLIC_URL+CLASSES[cl].icon}/><br/>{CLASSES[cl].name}</button> {Object.keys(CLASSES).map((cl,i)=>{
})} return <button id={i} className="rounded" onClick={()=>{p.setClassName(cl);p.setEdit(false)}}><img src={process.env.PUBLIC_URL+CLASSES[cl].icon}/><br/>{CLASSES[cl].name}</button>
</div> })}
</div>
</div>
</>
} }
function EditableClass(p){ function EditableClass(p){
@ -119,7 +122,7 @@ function EditableClass(p){
function PopupWindow(p) { function PopupWindow(p) {
return <Modal isOpen={p.modalOpen} onRequestClose={()=>{p.setModalOpen(false)}} shouldFocusAfterRender={true} shouldCloseOnOverlayClick={true} shouldCloseOnEsc={true} className="modal" overlayClassName="modalOverlay"> return <Modal isOpen={p.modalOpen} onRequestClose={()=>{p.setModalOpen(false)}} shouldFocusAfterRender={true} shouldCloseOnOverlayClick={true} shouldCloseOnEsc={true} className="modal" overlayClassName="modalOverlay">
<div className="box"> <div className="box boxModal">
<div className="boxTitleBar"> <div className="boxTitleBar">
<h1>{p.title}</h1> <h1>{p.title}</h1>
{p.showCloseButton&&<div className="boxExit" onClick={()=>{p.setModalOpen(false)}}></div>} {p.showCloseButton&&<div className="boxExit" onClick={()=>{p.setModalOpen(false)}}></div>}

33
src/style.css
View File

@ -549,17 +549,17 @@ li.r4 {
clear: both; clear: both;
} }
.itemlistcontainer { .itemlistcontainer {
max-height: 400px; /* max-height: 400px;*/
overflow-y: scroll; overflow-y: scroll;
overflow-x: hidden; overflow-x: hidden;
margin: 10px 5px 0 0; margin: 10px 5px 0 0;
padding: 2px; padding: 2px;
} }/*
@media screen and (min-width:390px) and (max-width:860px) { @media screen and (min-width:390px) and (max-width:860px) {
.itemlistcontainer { .itemlistcontainer {
max-height: 300px; max-height: 300px;
} }
} }*/
.itemlist li:hover, .treeList li:hover { .itemlist li:hover, .treeList li:hover {
background-color: rgba(113,169,189,0.33); background-color: rgba(113,169,189,0.33);
outline: 2px solid rgba(54,255,255,0.66); outline: 2px solid rgba(54,255,255,0.66);
@ -890,12 +890,16 @@ input#editBoxInput {
outline: 2px solid #30cdef; outline: 2px solid #30cdef;
} }
.popup{ .popup{
display: flex;
flex-wrap: wrap;
}
.popup2{
z-index:5;
position: absolute; position: absolute;
background-color: rgba(128,128,128,0.9); background-color: rgba(128,128,128,0.9);
max-width: 250px; max-width: 250px;
min-width: 100px; min-width: 100px;
padding: 20px; padding: 20px;
} }
.popup button{ .popup button{
margin:5px; margin:5px;
@ -942,16 +946,10 @@ button{
padding: 4px; padding: 4px;
} }
.modal { .modal {
position: absolute; flex-grow: 1;
top: 0; flex-basis: 200px;
left: 0; max-width: 580px;
right: 0;
bottom: 0;
background-color: papayawhip;
outline: 0; outline: 0;
display: flex;
flex-flow: row wrap;
justify-content: center;
} }
.modalOverlay { .modalOverlay {
position: fixed; position: fixed;
@ -959,7 +957,14 @@ button{
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background: rgba(0,0,0,.33); background: rgba(0,0,0,.80);
display: flex;
flex-flow: row wrap;
justify-content: center;
}
.boxModal {
} }
.webicon{ .webicon{
color:maroon; color:maroon;