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

Make box better

Browse Source 
Co-authored-by: dudleycu <dudleyc.twitch@gmail.com>
This commit is contained in:
Joshua Sigona 2021-08-09 19:38:21 +09:00
parent c1030c6ac0
commit 43d0a6eb7e
2 changed files with 42 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/TestPanel.js
View File

@ -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(()=>{
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&&p.sortItems.map((item)=><option value={item}>{item}</option>)}
</select>
{p.sortItems&&<select className="itemBarForm" value={sortSelector} onChange={(f)=>{setSortSelector(f.currentTarget.value)}}>
{p.sortItems.map((item)=><option value={item}>{item}</option>)}
</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,7 +228,7 @@ 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>
</td>
@ -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"]}

38
src/style.css
View File

@ -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;