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

31
src/TestPanel.js
View File

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

38
src/style.css
View File

@ -158,23 +158,14 @@ em {
color: #97e2fc; color: #97e2fc;
background-clip: padding-box; background-clip: padding-box;
background-color: rgba(38,53,63,0.80); background-color: rgba(38,53,63,0.80);
/*background-color: #151f25;*/
margin: 10px auto; margin: 10px auto;
text-align: left; 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); 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; 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 { .box table {
border-spacing: 0; border-spacing: 0;
color: white; color: white;
@ -276,7 +267,10 @@ em {
.da span:hover { .da span:hover {
background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66)); background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66));
} }
.basicInfo { .basicInfoBox {
}
.basicInfoTable {
table-layout:fixed; table-layout:fixed;
width: 100%; width: 100%;
line-height: 23px; line-height: 23px;
@ -385,6 +379,7 @@ em {
color: white; color: white;
margin: 0 0 5px 10px; margin: 0 0 5px 10px;
padding: 12px 10px 7px 10px; padding: 12px 10px 7px 10px;
cursor: pointer;
} }
.equipAugs li:hover { .equipAugs li:hover {
background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66)); 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; flex-wrap: wrap;
} }
.popup2{ .popup2{
z-index:999; 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;
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{ .popup button{
margin:5px; margin:5px;
@ -987,12 +983,24 @@ button{
outline: 0; outline: 0;
grid-column: 2; grid-column: 2;
grid-row: 2; grid-row: 2;
filter: drop-shadow(0 15px 20px black);
} }
.boxModal { .boxModal {
max-width: 580px; max-width: 580px;
margin: 0 auto; 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 { .modalItemListContainer {
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;