From 73a3aa6ac931a1f708990d9c90e23b515f225dc2 Mon Sep 17 00:00:00 2001 From: Daniel Date: Wed, 22 Jun 2022 13:11:13 +0430 Subject: [PATCH 1/8] Initial commit. --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 4e81f36..975114c 100644 --- a/README.md +++ b/README.md @@ -38,6 +38,8 @@ The objective is to have a self-hosted place to keep useful links in one place, * 🏷 Set multiple tags to each link. +* 🗂 Assign each link to a list where we can further group links. + **Also take a look at our planned features in the [project roadmap section](https://github.com/Daniel31x13/link-warden/wiki#project-roadmap).** ## Installation From abffa9050680c1e83db916bc109392746f73aed8 Mon Sep 17 00:00:00 2001 From: Daniel Date: Wed, 22 Jun 2022 17:35:58 +0430 Subject: [PATCH 2/8] Added list feature. --- docker-compose.yml | 2 ++ src/App.js | 5 +++ src/componets/AddItem.js | 25 ++++++++++---- src/componets/EditItem.js | 23 ++++++++++--- src/componets/List.js | 3 +- src/componets/ListSelection.js | 63 ++++++++++++++++++++++++++++++++++ src/componets/TagSelection.js | 6 ---- src/modules/concatLists.js | 13 +++++++ src/modules/send.js | 2 ++ 9 files changed, 125 insertions(+), 17 deletions(-) create mode 100644 src/componets/ListSelection.js create mode 100644 src/modules/concatLists.js diff --git a/docker-compose.yml b/docker-compose.yml index e25d6ea..fec9548 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -7,6 +7,8 @@ services: image: mongo volumes: - ./mongo:/data/db + ports: + - 27017:27017 restart: unless-stopped link-warden-api: diff --git a/src/App.js b/src/App.js index 2190a34..2dc7c0f 100644 --- a/src/App.js +++ b/src/App.js @@ -7,6 +7,7 @@ import Filters from "./componets/Filters"; import sortList from "./modules/sortList"; import filter from "./modules/filterData"; import concatTags from "./modules/concatTags"; +import concatLists from "./modules/concatLists"; import NoResults from "./componets/NoResults"; import Loader from "./componets/Loader"; import SideBar from "./componets/SideBar"; @@ -59,6 +60,8 @@ function App() { const tags = concatTags(data); + const lists = concatLists(data); + async function fetchData() { const res = await fetch(API_HOST + "/api"); const resJSON = await res.json(); @@ -153,6 +156,7 @@ function App() { reFetch={fetchData} lightMode={lightMode} tags={() => tags} + lists={() => lists} /> ) : null} @@ -171,6 +175,7 @@ function App() { SetLoader={SetLoader} data={filteredData} tags={tags} + lists={lists} reFetch={fetchData} /> diff --git a/src/componets/AddItem.js b/src/componets/AddItem.js index 24a489f..f42bac8 100644 --- a/src/componets/AddItem.js +++ b/src/componets/AddItem.js @@ -2,15 +2,17 @@ import { useState } from "react"; import "../styles/SendItem.css"; import TagSelection from "./TagSelection"; import addItem from "../modules/send"; +import ListSelection from "./ListSelection"; -const AddItem = ({ onExit, reFetch, tags, SetLoader, lightMode }) => { - const [name, setName] = useState(""); - const [link, setLink] = useState(""); - const [tag, setTag] = useState([]); +const AddItem = ({ onExit, reFetch, tags, lists, SetLoader, lightMode }) => { + const [name, setName] = useState(""), + [link, setLink] = useState(""), + [tag, setTag] = useState([]), + [list, setList] = useState([]); function newItem() { SetLoader(true); - addItem(name, link, tag, reFetch, onExit, SetLoader, "POST"); + addItem(name, link, tag, list, reFetch, onExit, SetLoader, "POST"); } function SetName(e) { @@ -22,10 +24,13 @@ const AddItem = ({ onExit, reFetch, tags, SetLoader, lightMode }) => { } function SetTags(value) { - setTag(value); setTag(value.map((e) => e.value.toLowerCase())); } + function SetList(value) { + setList(value.value); + } + function abort(e) { if (e.target.className === "add-overlay") { onExit(); @@ -61,6 +66,14 @@ const AddItem = ({ onExit, reFetch, tags, SetLoader, lightMode }) => { Tags: (Optional) +

+ List: (Optional) +

+ diff --git a/src/componets/EditItem.js b/src/componets/EditItem.js index 78c0a76..9638a09 100644 --- a/src/componets/EditItem.js +++ b/src/componets/EditItem.js @@ -3,10 +3,12 @@ import deleteEntity from "../modules/deleteEntity"; import "../styles/SendItem.css"; import TagSelection from "./TagSelection"; import editItem from "../modules/send"; +import ListSelection from "./ListSelection"; -const EditItem = ({ tags, item, onExit, SetLoader, reFetch, lightMode }) => { - const [name, setName] = useState(item.name); - const [tag, setTag] = useState(item.tag); +const EditItem = ({ tags, lists, item, onExit, SetLoader, reFetch, lightMode }) => { + const [name, setName] = useState(item.name), + [tag, setTag] = useState(item.tag), + [list, setList] = useState(item.list); function EditItem() { SetLoader(true); @@ -14,6 +16,7 @@ const EditItem = ({ tags, item, onExit, SetLoader, reFetch, lightMode }) => { name, item.link, tag, + list, reFetch, onExit, SetLoader, @@ -33,10 +36,13 @@ const EditItem = ({ tags, item, onExit, SetLoader, reFetch, lightMode }) => { } function SetTags(value) { - setTag(value); setTag(value.map((e) => e.value.toLowerCase())); } + function SetList(value) { + setList(value.value); + } + function abort(e) { if (e.target.className === "add-overlay") { onExit(); @@ -89,6 +95,15 @@ const EditItem = ({ tags, item, onExit, SetLoader, reFetch, lightMode }) => { tag={tag} lightMode={lightMode} /> +

+ List: (Optional) +

+ diff --git a/src/componets/List.js b/src/componets/List.js index ee8d87c..8497492 100644 --- a/src/componets/List.js +++ b/src/componets/List.js @@ -5,7 +5,7 @@ import EditItem from "./EditItem"; import { useState } from "react"; import { Link } from "react-router-dom"; -const List = ({ data, tags, reFetch, SetLoader, lightMode }) => { +const List = ({ data, tags, lists, reFetch, SetLoader, lightMode }) => { const [editBox, setEditBox] = useState(false); const [editIndex, setEditIndex] = useState(0); @@ -24,6 +24,7 @@ const List = ({ data, tags, reFetch, SetLoader, lightMode }) => { tags} + lists={() => lists} onExit={exitEditing} SetLoader={SetLoader} reFetch={reFetch} diff --git a/src/componets/ListSelection.js b/src/componets/ListSelection.js new file mode 100644 index 0000000..1282cd1 --- /dev/null +++ b/src/componets/ListSelection.js @@ -0,0 +1,63 @@ +import CreatableSelect from "react-select/creatable"; + +export default function ListSelection({ setList, lists, list = 'Unsorted', lightMode }) { + const customStyles = { + container: (provided) => ({ + ...provided, + textShadow: "none", + }), + + placeholder: (provided) => ({ + ...provided, + color: "#a9a9a9", + }), + + menu: (provided) => ({ + ...provided, + border: "solid", + borderWidth: "1px", + borderRadius: "0px", + borderColor: "rgb(141, 141, 141)", + opacity: "90%", + color: "gray", + background: lightMode ? "lightyellow" : "#273949", + boxShadow: + "rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px", + }), + + input: (provided) => ({ + ...provided, + color: lightMode ? "rgb(64, 64, 64)" : "white", + }), + + singleValue: (provided) => ({ + ...provided, + color: lightMode ? "rgb(64, 64, 64)" : "white", + }), + + control: (provided, state) => ({ + ...provided, + background: lightMode ? "lightyellow" : "#273949", + border: "none", + borderRadius: "0px", + boxShadow: state.isFocused + ? "rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px" + : "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", + }), + }; + + const data = lists().map((e) => { + return { value: e, label: e }; + }); + + const defaultList = { value: list, label: list }; + + return ( + + ); +} diff --git a/src/componets/TagSelection.js b/src/componets/TagSelection.js index 3f36e76..30f44b1 100644 --- a/src/componets/TagSelection.js +++ b/src/componets/TagSelection.js @@ -1,6 +1,5 @@ import CreatableSelect from "react-select/creatable"; -// lightMode ? "Black" : "White" export default function TagSelection({ setTags, tags, tag = [], lightMode }) { const customStyles = { container: (provided) => ({ @@ -18,11 +17,6 @@ export default function TagSelection({ setTags, tags, tag = [], lightMode }) { color: "gray", }), - indicatorSeparator: (provided) => ({ - ...provided, - display: "none", - }), - menu: (provided) => ({ ...provided, border: "solid", diff --git a/src/modules/concatLists.js b/src/modules/concatLists.js new file mode 100644 index 0000000..31b496d --- /dev/null +++ b/src/modules/concatLists.js @@ -0,0 +1,13 @@ +const concatLists = (data) => { + let lists = []; + + for (let i = 0; i < data.length; i++) { + lists = lists.concat(data[i].list); + } + + lists = lists.filter((v, i, a) => a.indexOf(v) === i); + + return lists; +}; + +export default concatLists; diff --git a/src/modules/send.js b/src/modules/send.js index 4b22bec..72c6b41 100644 --- a/src/modules/send.js +++ b/src/modules/send.js @@ -5,6 +5,7 @@ const addItem = async ( name, link, tag, + list, reFetch, onExit, SetLoader, @@ -36,6 +37,7 @@ const addItem = async ( title: title, link: link, tag: tag, + list: list, date: dateCreated, }), headers: { From f32b04c0579bd63e0feca852c5e26cdcf7f8a353 Mon Sep 17 00:00:00 2001 From: Daniel Date: Wed, 22 Jun 2022 20:44:16 +0430 Subject: [PATCH 3/8] Fully added listing functionality. --- src/App.js | 33 +++++++++++++++++++++++---------- src/componets/SideBar.js | 30 +++++++++++++++++++++++++++++- src/routes/Lists.js | 24 ++++++++++++++++++++++++ src/routes/Tags.js | 3 ++- src/styles/SideBar.css | 2 +- 5 files changed, 79 insertions(+), 13 deletions(-) create mode 100644 src/routes/Lists.js diff --git a/src/App.js b/src/App.js index 2dc7c0f..ec93a26 100644 --- a/src/App.js +++ b/src/App.js @@ -12,6 +12,7 @@ import NoResults from "./componets/NoResults"; import Loader from "./componets/Loader"; import SideBar from "./componets/SideBar"; import Tags from "./routes/Tags.js"; +import Lists from "./routes/Lists.js"; import { Route, Routes } from "react-router-dom"; function App() { @@ -58,10 +59,6 @@ function App() { const filteredData = filter(data, searchQuery, filterCheckbox); - const tags = concatTags(data); - - const lists = concatLists(data); - async function fetchData() { const res = await fetch(API_HOST + "/api"); const resJSON = await res.json(); @@ -98,7 +95,8 @@ function App() { return (
@@ -155,8 +153,8 @@ function App() { onExit={exitAdding} reFetch={fetchData} lightMode={lightMode} - tags={() => tags} - lists={() => lists} + tags={() => concatTags(data)} + lists={() => concatLists(data)} /> ) : null} @@ -174,8 +172,8 @@ function App() { lightMode={lightMode} SetLoader={SetLoader} data={filteredData} - tags={tags} - lists={lists} + tags={concatTags(data)} + lists={concatLists(data)} reFetch={fetchData} />
@@ -189,7 +187,22 @@ function App() { lightMode={lightMode} SetLoader={SetLoader} data={filteredData} - tags={tags} + tags={concatTags(data)} + lists={concatLists(data)} + reFetch={fetchData} + /> + } + /> + + } diff --git a/src/componets/SideBar.js b/src/componets/SideBar.js index c20a10e..cb6bcc5 100644 --- a/src/componets/SideBar.js +++ b/src/componets/SideBar.js @@ -11,7 +11,7 @@ import "react-pro-sidebar/dist/css/styles.css"; import "../styles/SideBar.css"; import { Link } from "react-router-dom"; -const SideBar = ({ tags, handleToggleSidebar, toggle }) => { +const SideBar = ({ tags, lists, handleToggleSidebar, toggle }) => { const sortedTags = tags.sort((a, b) => { const A = a.toLowerCase(), B = b.toLowerCase(); @@ -19,6 +19,19 @@ const SideBar = ({ tags, handleToggleSidebar, toggle }) => { if (A > B) return 1; return 0; }); + + const sortedLists = lists + .sort((a, b) => { + const A = a.toLowerCase(), + B = b.toLowerCase(); + if (A < B) return -1; + if (A > B) return 1; + return 0; + }) + .filter((e) => { + return e != "Unsorted"; + }); + return ( { + } + suffix={{sortedTags.length}} + title={

Lists

} + > + {sortedLists.map((e, i) => { + const path = `/lists/${e}`; + return ( + + {e} + + ); + })} + + } suffix={{sortedTags.length}} diff --git a/src/routes/Lists.js b/src/routes/Lists.js new file mode 100644 index 0000000..64366fd --- /dev/null +++ b/src/routes/Lists.js @@ -0,0 +1,24 @@ +import { useParams } from "react-router-dom"; +import List from "../componets/List"; + +const Lists = ({ data, tags, lists, SetLoader, lightMode, reFetch }) => { + const { listId } = useParams(); + const dataWithMatchingTag = data.filter((e) => { + return e.list.includes(listId); + }); + + return ( +
+ +
+ ); +}; + +export default Lists; diff --git a/src/routes/Tags.js b/src/routes/Tags.js index d2f8fee..e15288f 100644 --- a/src/routes/Tags.js +++ b/src/routes/Tags.js @@ -1,7 +1,7 @@ import { useParams } from "react-router-dom"; import List from "../componets/List"; -const Tags = ({ data, tags, SetLoader, lightMode, reFetch }) => { +const Tags = ({ data, tags, lists, SetLoader, lightMode, reFetch }) => { const { tagId } = useParams(); const dataWithMatchingTag = data.filter((e) => { return e.tag.includes(tagId); @@ -13,6 +13,7 @@ const Tags = ({ data, tags, SetLoader, lightMode, reFetch }) => { lightMode={lightMode} data={dataWithMatchingTag} tags={tags} + lists={lists} SetLoader={SetLoader} reFetch={reFetch} /> diff --git a/src/styles/SideBar.css b/src/styles/SideBar.css index 219396e..5e9dd4d 100644 --- a/src/styles/SideBar.css +++ b/src/styles/SideBar.css @@ -46,4 +46,4 @@ .pro-inner-item { margin-bottom: 10px; -} \ No newline at end of file +} From 27ddf1c54ee8677d1a77fd26a30b25df7ec13161 Mon Sep 17 00:00:00 2001 From: Daniel Date: Thu, 23 Jun 2022 08:28:55 +0430 Subject: [PATCH 4/8] UI improvements. --- src/componets/SideBar.js | 18 +++++++++--------- src/styles/SideBar.css | 10 +++++++++- 2 files changed, 18 insertions(+), 10 deletions(-) diff --git a/src/componets/SideBar.js b/src/componets/SideBar.js index cb6bcc5..4e3a3a1 100644 --- a/src/componets/SideBar.js +++ b/src/componets/SideBar.js @@ -40,26 +40,26 @@ const SideBar = ({ tags, lists, handleToggleSidebar, toggle }) => { className="sidebar" > -

LinkWarden

+

LinkWarden

 }> -

All

+
All
 } + icon={

} suffix={{sortedTags.length}} - title={

Lists

} + title={
Lists
} > {sortedLists.map((e, i) => { const path = `/lists/${e}`; return ( - - {e} + } key={i}> + {e} ); })} @@ -68,13 +68,13 @@ const SideBar = ({ tags, lists, handleToggleSidebar, toggle }) => { } suffix={{sortedTags.length}} - title={

Tags

} + title={
Tags
} > {sortedTags.map((e, i) => { const path = `/tags/${e}`; return ( - - {e} + #} key={i}> + {e} ); })} diff --git a/src/styles/SideBar.css b/src/styles/SideBar.css index 5e9dd4d..f5e01c3 100644 --- a/src/styles/SideBar.css +++ b/src/styles/SideBar.css @@ -3,7 +3,7 @@ position: fixed; } -.sidebar h1 { +.sidebar h3 { text-align: center; } @@ -47,3 +47,11 @@ .pro-inner-item { margin-bottom: 10px; } + +.sidebar-entity { + font-size: 1.2rem; +} + +.sidebar-item-prefix { + font-family: "Font Awesome 5 Free"; +} \ No newline at end of file From ceeb44901b3c13cc822b93e9800195411eaa511c Mon Sep 17 00:00:00 2001 From: Daniel Date: Thu, 23 Jun 2022 16:24:08 +0430 Subject: [PATCH 5/8] Renamed list to collection. --- README.md | 2 +- src/App.js | 18 +++++------ src/componets/AddItem.js | 27 ++++++++++------ ...istSelection.js => CollectionSelection.js} | 15 ++++++--- src/componets/EditItem.js | 32 ++++++++++++------- src/componets/List.js | 4 +-- src/componets/SideBar.js | 15 +++++---- src/modules/concatCollections.js | 13 ++++++++ src/modules/concatLists.js | 13 -------- src/modules/send.js | 4 +-- src/routes/{Lists.js => Collections.js} | 10 +++--- 11 files changed, 88 insertions(+), 65 deletions(-) rename src/componets/{ListSelection.js => CollectionSelection.js} (81%) create mode 100644 src/modules/concatCollections.js delete mode 100644 src/modules/concatLists.js rename src/routes/{Lists.js => Collections.js} (60%) diff --git a/README.md b/README.md index 975114c..6b914c7 100644 --- a/README.md +++ b/README.md @@ -38,7 +38,7 @@ The objective is to have a self-hosted place to keep useful links in one place, * 🏷 Set multiple tags to each link. -* 🗂 Assign each link to a list where we can further group links. +* 🗂 Assign each link to a collection where we can further group links. **Also take a look at our planned features in the [project roadmap section](https://github.com/Daniel31x13/link-warden/wiki#project-roadmap).** diff --git a/src/App.js b/src/App.js index ec93a26..b6e2f5f 100644 --- a/src/App.js +++ b/src/App.js @@ -7,12 +7,12 @@ import Filters from "./componets/Filters"; import sortList from "./modules/sortList"; import filter from "./modules/filterData"; import concatTags from "./modules/concatTags"; -import concatLists from "./modules/concatLists"; +import concatCollections from "./modules/concatCollections"; import NoResults from "./componets/NoResults"; import Loader from "./componets/Loader"; import SideBar from "./componets/SideBar"; import Tags from "./routes/Tags.js"; -import Lists from "./routes/Lists.js"; +import Collections from "./routes/Collections.js"; import { Route, Routes } from "react-router-dom"; function App() { @@ -96,7 +96,7 @@ function App() {
@@ -154,7 +154,7 @@ function App() { reFetch={fetchData} lightMode={lightMode} tags={() => concatTags(data)} - lists={() => concatLists(data)} + collections={() => concatCollections(data)} /> ) : null} @@ -173,7 +173,7 @@ function App() { SetLoader={SetLoader} data={filteredData} tags={concatTags(data)} - lists={concatLists(data)} + collections={concatCollections(data)} reFetch={fetchData} />
@@ -188,21 +188,21 @@ function App() { SetLoader={SetLoader} data={filteredData} tags={concatTags(data)} - lists={concatLists(data)} + collections={concatCollections(data)} reFetch={fetchData} /> } /> } diff --git a/src/componets/AddItem.js b/src/componets/AddItem.js index f42bac8..e17ac16 100644 --- a/src/componets/AddItem.js +++ b/src/componets/AddItem.js @@ -2,17 +2,24 @@ import { useState } from "react"; import "../styles/SendItem.css"; import TagSelection from "./TagSelection"; import addItem from "../modules/send"; -import ListSelection from "./ListSelection"; +import CollectionSelection from "./CollectionSelection"; -const AddItem = ({ onExit, reFetch, tags, lists, SetLoader, lightMode }) => { +const AddItem = ({ + onExit, + reFetch, + tags, + collections, + SetLoader, + lightMode, +}) => { const [name, setName] = useState(""), [link, setLink] = useState(""), [tag, setTag] = useState([]), - [list, setList] = useState([]); + [collection, setCollection] = useState("Unsorted"); function newItem() { SetLoader(true); - addItem(name, link, tag, list, reFetch, onExit, SetLoader, "POST"); + addItem(name, link, tag, collection, reFetch, onExit, SetLoader, "POST"); } function SetName(e) { @@ -27,8 +34,8 @@ const AddItem = ({ onExit, reFetch, tags, lists, SetLoader, lightMode }) => { setTag(value.map((e) => e.value.toLowerCase())); } - function SetList(value) { - setList(value.value); + function SetCollection(value) { + setCollection(value.value); } function abort(e) { @@ -67,11 +74,11 @@ const AddItem = ({ onExit, reFetch, tags, lists, SetLoader, lightMode }) => {

- List: (Optional) + Collections: (Optional)

- - {numberOfResults > 0 ? ( -

{numberOfResults} Bookmarks found

- ) : null} - {filterBox ? ( ) : null} - {numberOfResults === 0 ? : null} + {loader ? : null} diff --git a/src/componets/List.js b/src/componets/List.js index bfcf05d..33b33f8 100644 --- a/src/componets/List.js +++ b/src/componets/List.js @@ -2,12 +2,14 @@ import "../styles/List.css"; import LazyLoad from "react-lazyload"; import ViewArchived from "./ViewArchived"; import EditItem from "./EditItem"; -import { useState } from "react"; +import { useState, useEffect } from "react"; import { Link } from "react-router-dom"; +import NoResults from "./NoResults"; const List = ({ data, tags, collections, reFetch, SetLoader, lightMode }) => { - const [editBox, setEditBox] = useState(false); - const [editIndex, setEditIndex] = useState(0); + const [editBox, setEditBox] = useState(false), + [editIndex, setEditIndex] = useState(0), + [numberOfResults, setNumberOfResults] = useState(0); function edit(index) { setEditBox(true); @@ -18,8 +20,18 @@ const List = ({ data, tags, collections, reFetch, SetLoader, lightMode }) => { setEditBox(false); } + useEffect(() => { + setNumberOfResults(data.length); + }, [data]); + return (
+ {numberOfResults > 0 ? ( +

{numberOfResults} Bookmarks found

+ ) : null} + + {numberOfResults === 0 ? : null} + {editBox ? ( { return 0; }) .filter((e) => { - return e != "Unsorted"; + return e !== "Unsorted"; }); return ( @@ -52,7 +52,7 @@ const SideBar = ({ tags, collections, handleToggleSidebar, toggle }) => { } - suffix={{sortedCollections.length}} + suffix={{sortedCollections.length + 1}} title={
Collections
} >
}> diff --git a/src/modules/filterData.js b/src/modules/filterData.js index cb77e46..5867bfe 100644 --- a/src/modules/filterData.js +++ b/src/modules/filterData.js @@ -4,24 +4,24 @@ const filteredData = ( filterCheckbox ) => { return data.filter((e) => { - const name = e.name.toLowerCase().includes(searchQuery.toLowerCase()); - const title = e.title.toLowerCase().includes(searchQuery.toLowerCase()); + const linkName = e.name.toLowerCase().includes(searchQuery.toLowerCase()); + const websiteTitle = e.title.toLowerCase().includes(searchQuery.toLowerCase()); const tags = e.tag.some((e) => e.includes(searchQuery.toLowerCase())); - if (filterCheckbox === [true, true, true]) { - return name || title || tags; + if (filterCheckbox.every(e => e === true)) { + return linkName || websiteTitle || tags; } else if (filterCheckbox[0] && filterCheckbox[2]) { - return name || tags; + return linkName || tags; } else if (filterCheckbox[0] && filterCheckbox[1]) { - return name || title; + return linkName || websiteTitle; } else if (filterCheckbox[2] && filterCheckbox[1]) { - return tags || title; + return tags || websiteTitle; } else if (filterCheckbox[0]) { - return name; + return linkName; } else if (filterCheckbox[1]) { - return tags; + return websiteTitle; } else if (filterCheckbox[2]) { - return title; + return tags; } }); }; diff --git a/src/styles/App.css b/src/styles/App.css index f73e08b..fc270a5 100644 --- a/src/styles/App.css +++ b/src/styles/App.css @@ -32,7 +32,7 @@ } .content { - padding: 0px 20px 20px 20px; + padding: 0px 20px 0 20px; } .head { @@ -86,20 +86,6 @@ input:focus { outline: none; } -.results { - margin: 20px 20px 0px 0px; - display: inline-block; -} - -.no-results { - text-align: center; - padding-top: 5%; - padding-bottom: 5%; - 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; - margin-top: 10px; -} - .dark-light-btn { margin-left: 10px; font-size: 1.2em; diff --git a/src/styles/List.css b/src/styles/List.css index 9544082..c381c30 100644 --- a/src/styles/List.css +++ b/src/styles/List.css @@ -208,3 +208,12 @@ opacity: 80%; margin-right: auto; } + +.no-results { + text-align: center; + padding-top: 5%; + padding-bottom: 5%; + 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; + margin-top: 10px; +} \ No newline at end of file diff --git a/src/styles/SideBar.css b/src/styles/SideBar.css index f5e01c3..54e0698 100644 --- a/src/styles/SideBar.css +++ b/src/styles/SideBar.css @@ -54,4 +54,4 @@ .sidebar-item-prefix { font-family: "Font Awesome 5 Free"; -} \ No newline at end of file +} From 73173a603e88d67b91c138cba7c1200644e0e3f3 Mon Sep 17 00:00:00 2001 From: Daniel Date: Thu, 23 Jun 2022 20:54:27 +0430 Subject: [PATCH 7/8] UI improvements. --- src/componets/CollectionSelection.js | 14 ++++++++++++++ src/componets/TagSelection.js | 17 +++++++++++++++++ src/styles/App.css | 4 ++++ 3 files changed, 35 insertions(+) diff --git a/src/componets/CollectionSelection.js b/src/componets/CollectionSelection.js index d5b999e..a20999a 100644 --- a/src/componets/CollectionSelection.js +++ b/src/componets/CollectionSelection.js @@ -17,6 +17,14 @@ export default function CollectionSelection({ color: "#a9a9a9", }), + option: (provided) => ({ + ...provided, + ':before': { + content: '""', + marginRight: 8, + }, + }), + menu: (provided) => ({ ...provided, border: "solid", @@ -33,10 +41,15 @@ export default function CollectionSelection({ input: (provided) => ({ ...provided, color: lightMode ? "rgb(64, 64, 64)" : "white", + }), singleValue: (provided) => ({ ...provided, + ':before': { + content: '""', + marginRight: 8, + }, color: lightMode ? "rgb(64, 64, 64)" : "white", }), @@ -59,6 +72,7 @@ export default function CollectionSelection({ return ( ({ + ...provided, + ':before': { + content: '"#"', + marginRight: 8, + }, + }), + multiValueRemove: (provided) => ({ ...provided, color: "gray", @@ -35,6 +43,14 @@ export default function TagSelection({ setTags, tags, tag = [], lightMode }) { color: lightMode ? "rgb(64, 64, 64)" : "white", }), + multiValueLabel: (provided) => ({ + ...provided, + ':before': { + content: '"#"', + marginRight: 4, + }, + }), + control: (provided, state) => ({ ...provided, background: lightMode ? "lightyellow" : "#273949", @@ -55,6 +71,7 @@ export default function TagSelection({ setTags, tags, tag = [], lightMode }) { return ( Date: Fri, 24 Jun 2022 00:57:23 +0430 Subject: [PATCH 8/8] Bug fix + UI improvements. --- package-lock.json | 37 +++++++++++++++++++++++++++++++++++++ package.json | 1 + src/componets/EditItem.js | 4 +++- src/componets/SideBar.js | 16 ++++++++++------ src/routes/Tags.js | 4 ++-- src/styles/List.css | 24 ++++++++++++++---------- src/styles/SideBar.css | 12 +++++------- src/styles/SideBar_S.scss | 4 ++++ src/styles/index.css | 10 ---------- 9 files changed, 76 insertions(+), 36 deletions(-) create mode 100644 src/styles/SideBar_S.scss diff --git a/package-lock.json b/package-lock.json index 93fffbc..73a7899 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,6 +20,7 @@ "react-router-dom": "^6.3.0", "react-scripts": "5.0.0", "react-select": "^5.3.2", + "sass": "^1.53.0", "web-vitals": "^2.1.4" } }, @@ -8448,6 +8449,11 @@ "url": "https://opencollective.com/immer" } }, + "node_modules/immutable": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz", + "integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ==" + }, "node_modules/import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", @@ -14030,6 +14036,22 @@ "resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz", "integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA==" }, + "node_modules/sass": { + "version": "1.53.0", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.53.0.tgz", + "integrity": "sha512-zb/oMirbKhUgRQ0/GFz8TSAwRq2IlR29vOUJZOx0l8sV+CkHUfHa4u5nqrG+1VceZp7Jfj59SVW9ogdhTvJDcQ==", + "dependencies": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + }, + "bin": { + "sass": "sass.js" + }, + "engines": { + "node": ">=12.0.0" + } + }, "node_modules/sass-loader": { "version": "12.6.0", "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz", @@ -22432,6 +22454,11 @@ "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.12.tgz", "integrity": "sha512-lk7UNmSbAukB5B6dh9fnh5D0bJTOFKxVg2cyJWTYrWRfhLrLMBquONcUs3aFq507hNoIZEDDh8lb8UtOizSMhA==" }, + "immutable": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz", + "integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ==" + }, "import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", @@ -26292,6 +26319,16 @@ "resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz", "integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA==" }, + "sass": { + "version": "1.53.0", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.53.0.tgz", + "integrity": "sha512-zb/oMirbKhUgRQ0/GFz8TSAwRq2IlR29vOUJZOx0l8sV+CkHUfHa4u5nqrG+1VceZp7Jfj59SVW9ogdhTvJDcQ==", + "requires": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + } + }, "sass-loader": { "version": "12.6.0", "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz", diff --git a/package.json b/package.json index 3f7cb3d..4e18806 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "react-router-dom": "^6.3.0", "react-scripts": "5.0.0", "react-select": "^5.3.2", + "sass": "^1.53.0", "web-vitals": "^2.1.4" }, "scripts": { diff --git a/src/componets/EditItem.js b/src/componets/EditItem.js index c23eb77..c8f78aa 100644 --- a/src/componets/EditItem.js +++ b/src/componets/EditItem.js @@ -64,10 +64,12 @@ const EditItem = ({
-

Edit bookmark

+
+

Edit bookmark

+

Link:{" "} diff --git a/src/componets/SideBar.js b/src/componets/SideBar.js index 077cba0..6d1dcc2 100644 --- a/src/componets/SideBar.js +++ b/src/componets/SideBar.js @@ -7,7 +7,8 @@ import { MenuItem, SubMenu, } from "react-pro-sidebar"; -import "react-pro-sidebar/dist/css/styles.css"; +// import "react-pro-sidebar/dist/css/styles.css"; +import "../styles/SideBar_S.scss"; import "../styles/SideBar.css"; import { Link } from "react-router-dom"; @@ -44,20 +45,23 @@ const SideBar = ({ tags, collections, handleToggleSidebar, toggle }) => { -

}> + }>
All
 + }> + +
Unsorted
+ + + } - suffix={{sortedCollections.length + 1}} + suffix={{sortedCollections.length}} title={
Collections
} > -
}> - Unsorted - {sortedCollections.map((e, i) => { const path = `/collections/${e}`; return ( diff --git a/src/routes/Tags.js b/src/routes/Tags.js index e15288f..1d2abb7 100644 --- a/src/routes/Tags.js +++ b/src/routes/Tags.js @@ -1,7 +1,7 @@ import { useParams } from "react-router-dom"; import List from "../componets/List"; -const Tags = ({ data, tags, lists, SetLoader, lightMode, reFetch }) => { +const Tags = ({ data, tags, collections, SetLoader, lightMode, reFetch }) => { const { tagId } = useParams(); const dataWithMatchingTag = data.filter((e) => { return e.tag.includes(tagId); @@ -13,7 +13,7 @@ const Tags = ({ data, tags, lists, SetLoader, lightMode, reFetch }) => { lightMode={lightMode} data={dataWithMatchingTag} tags={tags} - lists={lists} + collections={collections} SetLoader={SetLoader} reFetch={reFetch} /> diff --git a/src/styles/List.css b/src/styles/List.css index c381c30..52f13dd 100644 --- a/src/styles/List.css +++ b/src/styles/List.css @@ -172,9 +172,9 @@ } .delete { - margin: 20px 20px 20px 0px; - background-color: #273949; - float: right; + margin-top: 20px; + margin-left: 10px; + display: inline; font-size: 1.1rem; width: 40px; height: 40px; @@ -188,17 +188,13 @@ 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; - background-color: #273949; + background-color: rgba(255, 75, 75, 0.8); + color: white; border: none; - transition: background-color 0.1s; + transition: box-shadow 0.1s; } .delete:hover { - background-color: rgba(255, 75, 75, 0.8); - color: #d8d8d8; -} - -.delete:active { box-shadow: 0px 0px 10px rgb(255, 83, 140); } @@ -216,4 +212,12 @@ 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; margin-top: 10px; +} + +.edit-title { + display: inline; +} + +.title-delete-group { + text-align: center; } \ No newline at end of file diff --git a/src/styles/SideBar.css b/src/styles/SideBar.css index 54e0698..75d71e4 100644 --- a/src/styles/SideBar.css +++ b/src/styles/SideBar.css @@ -17,18 +17,11 @@ text-decoration: underline; } -.pro-sidebar-layout { - background: #384952; - text-shadow: none; - color: white; -} - .badge { padding: 3px 10px; font-size: 0.8rem; letter-spacing: 1px; border-radius: 14px; - background-color: rgb(52, 121, 181); } .sidebar-icon { @@ -55,3 +48,8 @@ .sidebar-item-prefix { font-family: "Font Awesome 5 Free"; } + +.pro-sidebar-layout * { + color: white; + text-shadow: none; +} diff --git a/src/styles/SideBar_S.scss b/src/styles/SideBar_S.scss new file mode 100644 index 0000000..48c4bc8 --- /dev/null +++ b/src/styles/SideBar_S.scss @@ -0,0 +1,4 @@ +$sidebar-bg-color: #373737; +$submenu-bg-color: #373737; + +@import '~react-pro-sidebar/dist/scss/styles.scss'; \ No newline at end of file diff --git a/src/styles/index.css b/src/styles/index.css index 6f71356..dce6689 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -23,11 +23,6 @@ body { content: ""; } -.delete { - background-color: #1f2c38; - color: #ffffffb6; -} - .no-results { background-color: #1f2c38; } @@ -111,11 +106,6 @@ body { color: gray; } -.light .delete { - background-color: lightyellow; - color: rgb(176, 176, 176); -} - .light input { background-color: lightyellow; color: black;