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 wrapperRef = useRef(null);
useOutsideAlerter(wrapperRef,p.setEdit);
return <div className="popup" ref={wrapperRef}>
Class Selector<br/>
{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>
return <><div className="popup2" ref={wrapperRef}>
Class Selector<hr/>
<div className="popup">
{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>
</>
}
function EditableClass(p){
@ -119,7 +122,7 @@ function EditableClass(p){
function PopupWindow(p) {
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">
<h1>{p.title}</h1>
{p.showCloseButton&&<div className="boxExit" onClick={()=>{p.setModalOpen(false)}}></div>}

33
src/style.css
View File

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