Make box better

Co-authored-by: dudleycu <dudleyc.twitch@gmail.com>

src/TestPanel.js

@@ -69,7 +69,7 @@ function PageControl(p) {
 	for (var i=0;i<p.pages;i++) {
 		pages.push(<PageControlButton pageName={p.pageNames?p.pageNames[i]:undefined} currentPage={p.currentPage} setCurrentPage={p.setCurrentPage} page={i+1}/>)
 	}
-	return <ul className="boxmenu">
+	return pages.length>0&&<ul className="boxmenu">
 			{pages.map((page,i)=>{return <React.Fragment key={i}>{page}</React.Fragment>})}
 		</ul>
 }
@@ -127,7 +127,7 @@ function PopupWindow(p) {
     <h1>{p.title}</h1>
     {p.showCloseButton&&<div className="boxExit" onClick={()=>{p.setModalOpen(false)}}></div>}
     </div>
-    <PageControl  pages={p.pageNames.length} pageNames={p.pageNames}  currentPage={p.page} setCurrentPage={p.setPage}/>
+    <PageControl  pages={p.pageNames?p.pageNames.length:0} pageNames={p.pageNames}  currentPage={p.page} setCurrentPage={p.setPage}/>
     
     {p.children}
   </div>
@@ -139,30 +139,34 @@ function SelectorWindow(p) {
   const [itemList,setItemList] = useState([])
 
   const [tabPage,setTabPage] = useState(1)
-  const [sortSelector,setSortSelector] = useState(p.sortItems[0])
+  const [sortSelector,setSortSelector] = useState(p.sortItems?p.sortItems[0]:"")
   const [filter,setFilter] = useState("")
   
   useEffect(()=>{
-    setItemList(p.dataFunction())
+    if (p.dataFunction) {
+      setItemList(p.dataFunction())
+    }
   },[p])
   
   return <PopupWindow page={tabPage} setPage={setTabPage} modalOpen={p.modalOpen} setModalOpen={p.setModalOpen} showCloseButton={true} title={p.title}
       pageNames={p.pageNames}
       filter={true}
     >
-    <div className="itemBar">
+    {(p.sortItems||p.filter)&&<div className="itemBar">
         <div className="itemBarSort">
-          <select className="itemBarForm" value={sortSelector} onChange={(f)=>{setSortSelector(f.currentTarget.value)}}>
+          {p.sortItems&&<select className="itemBarForm" value={sortSelector} onChange={(f)=>{setSortSelector(f.currentTarget.value)}}>
-            {p.sortItems&&p.sortItems.map((item)=><option value={item}>{item}</option>)}
+            {p.sortItems.map((item)=><option value={item}>{item}</option>)}
-          </select>
+          </select>}
         </div>
         <div className="itemBarFilter">
           {p.filter&&<input className="itemBarForm" type="text" placeholder="Filter" value={filter} onChange={(f)=>{setFilter(f.currentTarget.value)}} />}
         </div>
       </div>
+    }
     <div className="modalItemListContainer customScrollbar">
     <ul className="itemlist">
     {itemList.filter((item)=>p.filterFunction(tabPage,item)).filter((item)=>p.searchFieldFunction(filter,item)).sort((a,b)=>p.sortOrderFunction(sortSelector,a,b)).map((item)=>p.displayFunction(item))}
+    {p.children}
     </ul>
     </div>
   </PopupWindow>
@@ -186,6 +190,7 @@ const [effectPage,setEffectPage] = useState(1)
 const [weaponPage,setWeaponPage] = useState(1)
 const [statPage,setStatPage] = useState(1)
 
+const [classSelectWindowOpen,setClassSelectWindowOpen] = useState(false)
 const [weaponSelectWindowOpen,setWeaponSelectWindowOpen] = useState(false)
 
 useEffect(()=>{
@@ -209,11 +214,11 @@ useEffect(()=>{
     return (<>
 <div className="main">
 <div className="containerA">
-<div className="box">
+<div className="box basicInfoBox">
 <div className="boxTitleBar">
 <h1>Basic Information</h1></div>
 
-<table className="basicInfo">
+<table className="basicInfoTable">
   <tr>
     <td>Author</td>
     <td colspan="2"><EditBoxInput setData={setauthor} data={author}/></td>
@@ -223,9 +228,9 @@ useEffect(()=>{
     <td colspan="2"><EditBoxInput setData={setbuildName} data={buildName}/></td>
   </tr>
   <tr>
-    <td>Class</td>
+    <td onClick={()=>{setClassSelectWindowOpen(true)}} >Class</td>
     <td>
-    <EditableClass GetData={p.GetData} setClassName={setclassName} class={className}></EditableClass>
+<EditableClass GetData={p.GetData} setClassName={setclassName} class={className}></EditableClass>
     </td>
     <td>
     <span className="ye"><EditBoxInput prefix="Lv." setData={setLevel} data={level} type="number"/></span>
@@ -434,6 +439,8 @@ useEffect(()=>{
 </div>
 </div>
 
+<SelectorWindow title="Class Select" modalOpen={classSelectWindowOpen} setModalOpen={setClassSelectWindowOpen} GetData={p.GetData}>ez pz</SelectorWindow>
+
 <SelectorWindow title="Weapon Selection" modalOpen={weaponSelectWindowOpen} setModalOpen={setWeaponSelectWindowOpen} GetData={p.GetData}
   pageNames={["All","Rifle","Launcher","Rod","Talis"]}
   sortItems={["Standard Sort","Rarity","Attack","Potency"]}

src/style.css

@@ -158,23 +158,14 @@ em {
 	color: #97e2fc;
 	background-clip: padding-box;
 	background-color: rgba(38,53,63,0.80);
-	/*background-color: #151f25;*/
 	margin: 10px auto;
 	text-align: left;
 	text-shadow: -1px -1px 0 rgba(0,0,0,0.66), 1px -1px 0 rgba(0,0,0,0.66), -1px 1px 0 rgba(0,0,0,0.66), 1px 1px 0 rgba(0,0,0,0.66);
-	/*min-width: 300px;*/
-	/*max-width: 500px;*/
 	padding-bottom:10px;
-	filter: drop-shadow(0 5px 5px rgba(0,0,0,0.8));
+	/*filter: drop-shadow(0 5px 5px rgba(0,0,0,0.8));*/
+	box-shadow: 0 10px 16px 0 rgba(0,0,0,0.5), 0 6px 20px 0  rgba(0,0,0,0.5) !important;
 }
-/* box hover, save bcuz i will use this in popup menu
+
-.box:hover {
-	outline: 1px solid rgba(54,255,255,1);
-}
-.box:hover .boxTitleBar  {
-	background: linear-gradient(45deg, rgba(47,153,193,1),rgba(46,94,137,1) 30%,rgba(46,94,137,1) 70%, rgba(47,153,193,1));
-}
-*/
 .box table {
     border-spacing: 0;
 	color: white;
@@ -276,7 +267,10 @@ em {
 .da span:hover {
 	background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66));
 }
-.basicInfo {
+.basicInfoBox {
+
+}
+.basicInfoTable {
 	table-layout:fixed;
 	width: 100%;
 	line-height: 23px;
@@ -385,6 +379,7 @@ em {
 	color: white;
 	margin: 0 0 5px 10px;
 	padding: 12px 10px 7px 10px;
+	cursor: pointer;
 }
 .equipAugs li:hover {
 	background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66));
@@ -914,12 +909,13 @@ input#editBoxInput {
 	flex-wrap: wrap;
 }
 .popup2{
-	z-index:999;
+	z-index:5;
 	position: absolute;
 	background-color: rgba(128,128,128,0.9);
 	max-width: 250px;
 	min-width: 100px;
 	padding: 20px;
+	box-shadow: 0 10px 16px 0 rgba(0,0,0,0.5), 0 6px 20px 0  rgba(0,0,0,0.5) !important;
 }
 .popup button{
 	margin:5px;
@@ -987,12 +983,24 @@ button{
 	outline: 0;
 	grid-column: 2;
 	grid-row: 2;
-	filter: drop-shadow(0 15px 20px black);
   }
 .boxModal {
 	max-width: 580px;
 	margin: 0 auto;
+	box-shadow: 0 10px 16px 0 rgba(0,0,0,0.5), 0 6px 20px 0  rgba(0,0,0,0.5) !important;
+	outline: 1px solid rgba(54,255,255,1);	
+}
+.boxModal .boxTitleBar {
+	background: linear-gradient(45deg, rgba(47,153,193,1),rgba(46,94,137,1) 30%,rgba(46,94,137,1) 70%, rgba(47,153,193,1));
 }
+/* box hover, save bcuz i will use this in popup menu
+.box:hover {
+	outline: 1px solid rgba(54,255,255,1);
+}
+.box:hover .boxTitleBar  {
+	background: linear-gradient(45deg, rgba(47,153,193,1),rgba(46,94,137,1) 30%,rgba(46,94,137,1) 70%, rgba(47,153,193,1));
+}
+*/
 .modalItemListContainer {
 		overflow-y: auto;
 		overflow-x: hidden;