xwx.moe/el.xwx.moe
xwx.moe/ el.xwx.moe
1
0
Disbranĉigi 0
Fontkodo Issues Tirpetoj Actions Packages Projects Eldonoj Wiki Activity

Added sort button

This commit is contained in:
Daniel 2022-05-31 14:02:05 +04:30
parent 78fe86b911
commit 55efe787fa
8 changed files with 122 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/App.js
View File

@ -4,11 +4,13 @@ import List from './componets/List';
import AddItem from './componets/AddItem';
import config from './config.json';
import Filters from './componets/Filters';
import Sort from './componets/Sort';
function App() {
const [data, setData] = useState([]);
const [isAdding, setIsAdding] = useState(false);
const [isFiltering, setIsFiltering] = useState(false);
const [newBox, setNewBox] = useState(false);
const [filterBox, setFilterBox] = useState(false);
const [sortBox, setSortBox] = useState(false);
const [searchQuery, setSearchQuery] = useState('');
const [numberOfResults, setNumberOfResults] = useState(0);
const [nameChecked, setNameChecked] = useState(true);
@ -28,11 +30,15 @@ function App() {
}
function exitAdding() {
setIsAdding(!isAdding);
setNewBox(!newBox);
}
function exitFilter() {
setIsFiltering(!isFiltering);
setFilterBox(!filterBox);
}
function exitSorting() {
setSortBox(!sortBox);
}
function search(e) {
@ -78,8 +84,6 @@ function App() {
return tags;
}
useEffect(() => {
fetchData();
}, []);
@ -92,13 +96,21 @@ function App() {
<div className="App">
<div className="head">
<input className="search" type="search" placeholder="&#xf002; Search" onChange={search}/>
<button className="add-btn" onClick={() => setIsAdding(true)}>&#xf067;</button>
<button className="btn" onClick={() => setNewBox(true)}>&#xf067;</button>
</div>
<p className="results">{numberOfResults > 0 ? numberOfResults + ' Bookmarks found' : 'No bookmarks found.'}</p>
<button className='filter-button' onClick={() => setIsFiltering(true)}>&#xf0b0;</button>
{isFiltering ? <Filters
<button className='btn' onClick={() => setFilterBox(true)}>&#xf0b0;</button>
<button className='btn' onClick={() => setSortBox(true)}>&#xf0dc;</button>
<List data={filteredData} reFetch={fetchData} />
{sortBox ? <Sort
onExit={exitSorting}
reFetch={fetchData}
/> : null}
{filterBox ? <Filters
nameChecked={nameChecked}
handleNameCheckbox={handleNameCheckbox}
descriptionChecked={descriptionChecked}
@ -108,9 +120,11 @@ function App() {
onExit={exitFilter}
/> : null}
<List data={filteredData} reFetch={fetchData} />
{isAdding ? <AddItem onExit={exitAdding} reFetch={fetchData} tags={concatTags} /> : null}
{newBox ? <AddItem
onExit={exitAdding}
reFetch={fetchData}
tags={concatTags}
/> : null}
</div>
);
}

5
src/componets/AddItem.js
View File

@ -79,7 +79,8 @@ const AddItem = ({onExit, reFetch, tags}) => {
return (
<>
<div className='add-overlay' onClick={abort}></div>
<div className='box'>
<fieldset className='box'>
<legend >New Bookmark</legend>
<div className='AddItem-content'>
<h3>Name:</h3>
<input onChange={SetName} className="AddItem-input" type="search" placeholder="e.g. Example Tutorial"/>
@ -89,7 +90,7 @@ const AddItem = ({onExit, reFetch, tags}) => {
<TagSelection setTags={SetTags} tags={tags} />
<button onClick={submitBookmark} className="upload-btn">Upload &#xf093;</button>
</div>
</div>
</fieldset>
</>
)
}

9
src/componets/Filters.js
View File

@ -8,13 +8,14 @@ const Filters = ({nameChecked, handleNameCheckbox, descriptionChecked, handleDes
}
return (
<>
<>
<div className='filter-overlay' onClick={abort}></div>
<div className='filter'>
<fieldset className='filter'>
<legend >Filter Results</legend>
<label><input type="checkbox" checked={nameChecked} onChange={handleNameCheckbox} />Name</label>
<label><input type="checkbox" checked={descriptionChecked} onChange={handleDescriptionCheckbox} />Title/Description</label>
<label><input type="checkbox" checked={descriptionChecked} onChange={handleDescriptionCheckbox} />Title</label>
<label><input type="checkbox" checked={tagsChecked} onChange={handleTagsCheckbox} />Tags</label>
</div>
</fieldset>
</>
)
}

24
src/componets/Sort.js Normal file
View File

@ -0,0 +1,24 @@
import '../styles/Sort.css'
const Sort = ({ onExit }) => {
function abort(e) {
if (e.target.className === "sort-overlay") {
onExit();
}
}
return (
<>
<div className='sort-overlay' onClick={abort}></div>
<fieldset className='sort'>
<legend>Sort List</legend>
<label><input name="sort" type="radio" />Date</label>
<label><input name="sort" type="radio" />Name</label>
<label><input name="sort" type="radio" />Title</label>
<label><input name="sort" type="radio" />Tags</label>
</fieldset>
</>
)
}
export default Sort

13
src/styles/AddItem.css
View File

@ -1,4 +1,6 @@
.add-overlay {
background-color: black;
opacity: 10%;
position: fixed;
top: 0;
left: 0;
@ -9,18 +11,23 @@
.box {
border: solid;
border-width: 1px;
border-color: rgb(80, 80, 80);
border-color: rgb(141, 141, 141);
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
position: absolute;
z-index: 2;
top: 70px;
top: 63px;
right: 20px;
background-color: #1f2c38;
width: 40%;
width: 50%;
max-width: 500px;
overflow-x: hidden;
overflow-y: auto;
}
.box legend {
font-weight: 600;
}
.box h3 {
font-weight: 300;
}

37
src/styles/App.css
View File

@ -22,20 +22,18 @@
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}
.settings-btn:active, .add-btn:active {
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
.search:focus {
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
.add-btn {
.btn {
border-radius: 100%;
margin: 20px 20px 0px auto;
font-family: 'Font Awesome 5 Free';
width: 40px;
height: 40px;
padding: 10px;
font-size: 1.5rem;
font-size: 1.1rem;
cursor: pointer;
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
color: #ffffffb6;
@ -44,10 +42,14 @@
transition: background-color 0.1s;
}
.add-btn:hover {
.btn:hover {
background-color: rgb(76, 117, 170);
}
.btn:active {
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
textarea:focus, input:focus{
outline: none;
}
@ -56,24 +58,3 @@ textarea:focus, input:focus{
margin: 20px 20px 0px 30px;
display: inline-block;
}
.filter-button {
border-radius: 100%;
font-family: 'Font Awesome 5 Free';
padding: 10px;
font-size: 1rem;
cursor: pointer;
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
color: #ffffffb6;
background-color:#273949;
border: none;
transition: background-color 0.1s;
}
.filter-button:active {
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
.filter-button:hover {
background-color: rgb(76, 117, 170);
}

12
src/styles/Filters.css
View File

@ -2,14 +2,14 @@
border: solid;
border-width: 1px;
font-weight: 300;
border-color: rgb(80, 80, 80);
border-color: rgb(141, 141, 141);
display: flex;
flex-direction: column;
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
z-index: 2;
background-color: #273949;
padding: 5px;
left: 200px;
top: 120px;
left: 195px;
position: absolute;
margin-top: 4px;
-moz-user-select: none;
@ -17,11 +17,17 @@
user-select: none;
}
.filter legend {
font-weight: 600;
}
.filter label {
margin: 5px;
}
.filter-overlay {
background-color: black;
opacity: 10%;
position: fixed;
top: 0;
left: 0;

36
src/styles/Sort.css Normal file
View File

@ -0,0 +1,36 @@
.sort-overlay {
background-color: black;
opacity: 10%;
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 100vw;
}
.sort {
border: solid;
border-width: 1px;
font-weight: 300;
border-color: rgb(141, 141, 141);
display: flex;
flex-direction: column;
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
background-color: #273949;
padding: 5px;
top: 120px;
left: 250px;
position: absolute;
margin-top: 4px;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}
.sort legend {
font-weight: 600;
}
.sort label {
margin: 5px;
}