From 817ad3bd2ba124e40d06711ea250ba0c749206fb Mon Sep 17 00:00:00 2001 From: pjohans Date: Mon, 28 Aug 2023 13:20:29 +0200 Subject: [PATCH 01/24] in progress - new bookmark svg --- .../icons/{bookmark.svg => bookmark_OLD.svg} | 0 public/icons/bookmark_medium.svg | 4 ++++ src/components/base/bookmark/Bookmark.js | 2 +- src/components/work/overview/Overview.js | 6 ++++++ .../work/overview/Overview.module.css | 2 +- .../BookmarkDropDown.module.css | 6 ++++++ .../bookmarkDropdown/BookmarkDropdown.js | 20 +++++++++++++------ 7 files changed, 32 insertions(+), 8 deletions(-) rename public/icons/{bookmark.svg => bookmark_OLD.svg} (100%) create mode 100644 public/icons/bookmark_medium.svg diff --git a/public/icons/bookmark.svg b/public/icons/bookmark_OLD.svg similarity index 100% rename from public/icons/bookmark.svg rename to public/icons/bookmark_OLD.svg diff --git a/public/icons/bookmark_medium.svg b/public/icons/bookmark_medium.svg new file mode 100644 index 000000000..ae833a039 --- /dev/null +++ b/public/icons/bookmark_medium.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/base/bookmark/Bookmark.js b/src/components/base/bookmark/Bookmark.js index ae049f9ea..b7b486bbd 100644 --- a/src/components/base/bookmark/Bookmark.js +++ b/src/components/base/bookmark/Bookmark.js @@ -6,7 +6,7 @@ import Skeleton from "@/components/base/skeleton"; import Icon from "@/components/base/icon"; import translate from "@/components/base/translate"; -import BookmarkSvg from "@/public/icons/bookmark_large.svg"; +import BookmarkSvg from "@/public/icons/bookmark_medium.svg"; // import BookmarkSvg from "@/public/icons/bookmark.svg"; import styles from "./Bookmark.module.css"; diff --git a/src/components/work/overview/Overview.js b/src/components/work/overview/Overview.js index 9051eabbc..6d1cb6432 100644 --- a/src/components/work/overview/Overview.js +++ b/src/components/work/overview/Overview.js @@ -24,6 +24,7 @@ import { import Title from "@/components/base/title/Title"; import { useRouter } from "next/router"; import Breadcrumbs from "@/components/work/overview/breadcrumbs/Breadcrumbs"; +import BookMarkDropDown from "@/components/work/overview/bookmarkDropdown/BookmarkDropdown"; function useInitMaterialType( uniqueMaterialTypes, @@ -155,7 +156,12 @@ export function Overview({ workId={workId} selectedPids={selectedPids} /> + + {}; @@ -47,6 +49,9 @@ export function BookMarkMaterialSelector({ materialTypes, workId }) { })} > {options.map((material, index) => { + const activeItem = + bookmark?.findIndex((book) => book.key === workId + material) !== + -1; return ( book.key === workId + material - ) !== -1 - ? styles.active - : "" + activeItem ? styles.active : "" }`} onClick={() => { onSelect(material, workId); @@ -69,7 +70,14 @@ export function BookMarkMaterialSelector({ materialTypes, workId }) { } }} > - {material} +
+ {material} + {activeItem && ( + + + + )} +
); })} From 49c15a70de665ccae77e02ac9b45204955208c8d Mon Sep 17 00:00:00 2001 From: pjohans Date: Mon, 28 Aug 2023 13:57:55 +0200 Subject: [PATCH 02/24] bookmark with one material only --- .../overview/bookmarkDropdown/BookmarkDropdown.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/components/work/overview/bookmarkDropdown/BookmarkDropdown.js b/src/components/work/overview/bookmarkDropdown/BookmarkDropdown.js index 08f857399..a009d14d3 100644 --- a/src/components/work/overview/bookmarkDropdown/BookmarkDropdown.js +++ b/src/components/work/overview/bookmarkDropdown/BookmarkDropdown.js @@ -30,6 +30,17 @@ export function BookMarkMaterialSelector({ materialTypes, workId }) { const options = materialTypes.map((mat) => mat); + if (options.length === 1) { + return ( + { + onSelect(options[0], workId); + }} + /> + ); + } + return ( Date: Mon, 28 Aug 2023 14:59:09 +0200 Subject: [PATCH 03/24] no need for async here --- src/components/base/bookmark/Bookmark.js | 8 ++------ src/components/hooks/useBookmarks.js | 2 +- .../bookmarkDropdown/BookmarkDropDown.module.css | 4 ++++ .../overview/bookmarkDropdown/BookmarkDropdown.js | 15 ++++++++++----- 4 files changed, 17 insertions(+), 12 deletions(-) diff --git a/src/components/base/bookmark/Bookmark.js b/src/components/base/bookmark/Bookmark.js index b7b486bbd..465034737 100644 --- a/src/components/base/bookmark/Bookmark.js +++ b/src/components/base/bookmark/Bookmark.js @@ -24,6 +24,7 @@ function handleOnBookmarkClick() { * @returns {component} */ function Bookmark({ + size = { w: 5, h: 5 }, className = "", selected = false, onClick = null, @@ -52,12 +53,7 @@ function Bookmark({ className={`${className} ${styles.bookmark} ${selectedClass}`} onClick={() => (onClick ? onClick() : handleOnBookmarkClick())} > - + diff --git a/src/components/hooks/useBookmarks.js b/src/components/hooks/useBookmarks.js index c67039508..f2216df0c 100644 --- a/src/components/hooks/useBookmarks.js +++ b/src/components/hooks/useBookmarks.js @@ -10,7 +10,7 @@ export default function useBookmarks() { /** * Set a value in bookmark list */ - const setBookmark = async (value) => { + const setBookmark = (value) => { // Find existing const existingIndex = bookmark?.findIndex((obj) => obj.key === value.key); // push if not there diff --git a/src/components/work/overview/bookmarkDropdown/BookmarkDropDown.module.css b/src/components/work/overview/bookmarkDropdown/BookmarkDropDown.module.css index f0f9f4f2c..89a9eadaf 100644 --- a/src/components/work/overview/bookmarkDropdown/BookmarkDropDown.module.css +++ b/src/components/work/overview/bookmarkDropdown/BookmarkDropDown.module.css @@ -12,6 +12,10 @@ cursor: pointer; } +.bookmark { + margin-left: var(--pt4); +} + .active { color: white; background-color: green; diff --git a/src/components/work/overview/bookmarkDropdown/BookmarkDropdown.js b/src/components/work/overview/bookmarkDropdown/BookmarkDropdown.js index a009d14d3..e005d92e8 100644 --- a/src/components/work/overview/bookmarkDropdown/BookmarkDropdown.js +++ b/src/components/work/overview/bookmarkDropdown/BookmarkDropdown.js @@ -14,9 +14,9 @@ export function BookMarkMaterialSelector({ materialTypes, workId }) { const { bookmark, setBookmark, isLoading } = useBookmarks(); - const onSelect = async (material, workId) => { + const onSelect = (material, workId) => { const item = { key: workId + material, id: workId, materialType: material }; - await setBookmark(item); + setBookmark(item); }; const [active, setActive] = useState(false); @@ -33,6 +33,8 @@ export function BookMarkMaterialSelector({ materialTypes, workId }) { if (options.length === 1) { return ( { onSelect(options[0], workId); @@ -49,7 +51,12 @@ export function BookMarkMaterialSelector({ materialTypes, workId }) { variant="success" id="dropdown-basic" > - + Date: Tue, 29 Aug 2023 09:25:21 +0200 Subject: [PATCH 04/24] different svgs on dropdown --- public/icons/bookmark_large.svg | 6 --- public/icons/bookmark_medium.svg | 2 +- public/icons/bookmark_small.svg | 4 ++ .../BookmarkDropDown.module.css | 49 ++++++++++++++++--- .../bookmarkDropdown/BookmarkDropdown.js | 18 +++---- 5 files changed, 52 insertions(+), 27 deletions(-) delete mode 100644 public/icons/bookmark_large.svg create mode 100644 public/icons/bookmark_small.svg diff --git a/public/icons/bookmark_large.svg b/public/icons/bookmark_large.svg deleted file mode 100644 index 8a67d195c..000000000 --- a/public/icons/bookmark_large.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/public/icons/bookmark_medium.svg b/public/icons/bookmark_medium.svg index ae833a039..8df303bc4 100644 --- a/public/icons/bookmark_medium.svg +++ b/public/icons/bookmark_medium.svg @@ -1,4 +1,4 @@ - + diff --git a/public/icons/bookmark_small.svg b/public/icons/bookmark_small.svg new file mode 100644 index 000000000..5ce19db46 --- /dev/null +++ b/public/icons/bookmark_small.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/work/overview/bookmarkDropdown/BookmarkDropDown.module.css b/src/components/work/overview/bookmarkDropdown/BookmarkDropDown.module.css index 89a9eadaf..555ee977f 100644 --- a/src/components/work/overview/bookmarkDropdown/BookmarkDropDown.module.css +++ b/src/components/work/overview/bookmarkDropdown/BookmarkDropDown.module.css @@ -3,8 +3,8 @@ .dropdownitem { display: block; - border-bottom: 1px solid var(--mine-shaft); - padding: var(--pt1) var(--pt2) var(--pt1) var(--pt2); + border-bottom: 1px solid var(--gray); + padding: var(--pt1) var(--pt05) var(--pt1) var(--pt2); text-decoration: none; color: var(--mine-shaft); text-align: inherit; @@ -12,18 +12,29 @@ cursor: pointer; } +.dropdownitem i svg { + display: none; +} + .bookmark { - margin-left: var(--pt4); + margin-left: var(--pt2); } .active { color: white; - background-color: green; + background-color: var(--blue); +} + +.dropdownitem.active i svg { + display: block; +} + +.active i svg path { + stroke: var(--white); } .itemContainer { display: flex; - border: 1px solid red; justify-content: space-between; } @@ -31,20 +42,42 @@ text-decoration: none; } -.dropdownitem:focus { +.dropdownitem:hover { + color: var(--blue); + font-weight: var(--body-font-semibold); +} + +.dropdownitem:hover i svg { + display: block; +} + +.dropdownitem:hover i svg path { + stroke: var(--blue); +} + +.dropdownitem:focus i svg { + display: block; +} + +.dropdownitem:focus i svg path { + stroke: var(--blue); +} + +/*.dropdownitem:focus { background: linear-gradient(to right, var(--blue) 10px, var(--concrete) 10px); } .dropdownitem:hover { background: linear-gradient(to right, var(--blue) 10px, var(--concrete) 10px); -} +}*/ .dropdownwrap :global(.dropdown-toggle::after) { display: none; } .dropdownmenu { - border: 1px solid var(--blue); + margin-top: var(--pt1_5); + border: 1px solid var(--gray); background-color: var(--white); z-index: 1; /* bootstrap default styles override */ diff --git a/src/components/work/overview/bookmarkDropdown/BookmarkDropdown.js b/src/components/work/overview/bookmarkDropdown/BookmarkDropdown.js index e005d92e8..b5438cb33 100644 --- a/src/components/work/overview/bookmarkDropdown/BookmarkDropdown.js +++ b/src/components/work/overview/bookmarkDropdown/BookmarkDropdown.js @@ -7,7 +7,7 @@ import React, { useEffect, useState } from "react"; import { cyKey } from "@/utils/trim"; import useBookmarks from "@/components/hooks/useBookmarks"; import Icon from "@/components/base/icon/Icon"; -import BookmarkMedium from "@/public/icons/bookmark_medium.svg"; +import BookmarkMedium from "@/public/icons/bookmark_small.svg"; export function BookMarkMaterialSelector({ materialTypes, workId }) { const bookmarkClick = () => {}; @@ -33,7 +33,7 @@ export function BookMarkMaterialSelector({ materialTypes, workId }) { if (options.length === 1) { return ( { @@ -80,19 +80,13 @@ export function BookMarkMaterialSelector({ materialTypes, workId }) { onClick={() => { onSelect(material, workId); }} - onKeyDown={(e) => { - if (e.key === "Enter") { - onSelect(material, workId); - } - }} >
{material} - {activeItem && ( - - - - )} + + + +
); From 499b5bb13af5f1077e8e8ae09f2cd75bb0aceab5 Mon Sep 17 00:00:00 2001 From: pjohans Date: Tue, 29 Aug 2023 12:20:05 +0200 Subject: [PATCH 05/24] bookmark on editions --- .../manifestationfull/ManifestationFull.js | 20 +++++++--- .../ManifestationFull.module.css | 7 +++- .../bookmarkDropdown/BookmarkDropdown.js | 38 ++++++++++++++----- 3 files changed, 48 insertions(+), 17 deletions(-) diff --git a/src/components/work/bibliographicdata/manifestationfull/ManifestationFull.js b/src/components/work/bibliographicdata/manifestationfull/ManifestationFull.js index 04eb46599..6009e4455 100644 --- a/src/components/work/bibliographicdata/manifestationfull/ManifestationFull.js +++ b/src/components/work/bibliographicdata/manifestationfull/ManifestationFull.js @@ -29,6 +29,7 @@ import CheckMarkBlue from "@/public/icons/checkmark_blue.svg"; import Tooltip from "react-bootstrap/Tooltip"; import OverlayTrigger from "react-bootstrap/OverlayTrigger"; import cx from "classnames"; +import BookMarkDropDown from "@/components/work/overview/bookmarkDropdown/BookmarkDropdown"; /** * Column one of full view. Some links and a button. @@ -84,13 +85,20 @@ function ColumnOne({ workId, manifestation }) { /> )} -
- +
+ +
+
diff --git a/src/components/work/bibliographicdata/manifestationfull/ManifestationFull.module.css b/src/components/work/bibliographicdata/manifestationfull/ManifestationFull.module.css index 8ce5dec19..0bf605541 100644 --- a/src/components/work/bibliographicdata/manifestationfull/ManifestationFull.module.css +++ b/src/components/work/bibliographicdata/manifestationfull/ManifestationFull.module.css @@ -7,7 +7,6 @@ } .fullmanifestation .button { - margin-bottom: var(--pt2); font-family: var(--body-font-semibold); transition: color 0.5s; color: var(--blue); @@ -58,7 +57,11 @@ } /** end manifestation parts list **/ - +.reservationwrapper { + display: flex; + align-items: center; + margin-bottom: var(--pt2); +} .container { column-count: 1; -webkit-column-count: 1; diff --git a/src/components/work/overview/bookmarkDropdown/BookmarkDropdown.js b/src/components/work/overview/bookmarkDropdown/BookmarkDropdown.js index b5438cb33..71daa1e11 100644 --- a/src/components/work/overview/bookmarkDropdown/BookmarkDropdown.js +++ b/src/components/work/overview/bookmarkDropdown/BookmarkDropdown.js @@ -9,31 +9,47 @@ import useBookmarks from "@/components/hooks/useBookmarks"; import Icon from "@/components/base/icon/Icon"; import BookmarkMedium from "@/public/icons/bookmark_small.svg"; -export function BookMarkMaterialSelector({ materialTypes, workId }) { +export function BookMarkMaterialSelector({ + materialTypes, + workId, + size = { w: 6, h: 6 }, +}) { const bookmarkClick = () => {}; const { bookmark, setBookmark, isLoading } = useBookmarks(); const onSelect = (material, workId) => { - const item = { key: workId + material, id: workId, materialType: material }; + const item = { + key: workId + material, + id: workId, + materialType: material[0], + }; setBookmark(item); }; const [active, setActive] = useState(false); + const options = materialTypes.map((mat) => mat); useEffect(() => { if (!isLoading) { - const bookmarkIndex = bookmark?.findIndex((bookm) => bookm.id === workId); + let bookmarkIndex = -1; + // this one is used to set the overall button to active or not (if one of the materialtypes is selected) + if (options.length > 1) { + bookmarkIndex = bookmark?.findIndex((bookm) => bookm.id === workId); + } else if (options.length === 1) { + // if we have one material only we look for a specific key + bookmarkIndex = bookmark?.findIndex( + (bookm) => bookm.key === workId + options[0] + ); + } setActive(bookmarkIndex !== -1); } }, [bookmark]); - const options = materialTypes.map((mat) => mat); - if (options.length === 1) { return ( { @@ -68,7 +84,7 @@ export function BookMarkMaterialSelector({ materialTypes, workId }) { > {options.map((material, index) => { const activeItem = - bookmark?.findIndex((book) => book.key === workId + material) !== + bookmark?.findIndex((book) => book.key === workId + material[0]) !== -1; return ( + ); } From 033f7ccd61dcbd036091932ea1fcdc840f8f2f5d Mon Sep 17 00:00:00 2001 From: pjohans Date: Tue, 29 Aug 2023 12:38:45 +0200 Subject: [PATCH 06/24] removed unused css --- src/components/work/overview/Overview.module.css | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/work/overview/Overview.module.css b/src/components/work/overview/Overview.module.css index 57db081df..6aa0040fa 100644 --- a/src/components/work/overview/Overview.module.css +++ b/src/components/work/overview/Overview.module.css @@ -57,7 +57,6 @@ .basket { padding-top: var(--pt3); display: flex; - /*justify-content: space-between;*/ } .info { From dd0dc4af0b8ea850e00ea5de8ffbc9f3dcbd30ce Mon Sep 17 00:00:00 2001 From: pjohans Date: Tue, 29 Aug 2023 12:39:53 +0200 Subject: [PATCH 07/24] removed unused css --- .../overview/bookmarkDropdown/BookmarkDropDown.module.css | 8 -------- 1 file changed, 8 deletions(-) diff --git a/src/components/work/overview/bookmarkDropdown/BookmarkDropDown.module.css b/src/components/work/overview/bookmarkDropdown/BookmarkDropDown.module.css index 555ee977f..d1a795912 100644 --- a/src/components/work/overview/bookmarkDropdown/BookmarkDropDown.module.css +++ b/src/components/work/overview/bookmarkDropdown/BookmarkDropDown.module.css @@ -63,14 +63,6 @@ stroke: var(--blue); } -/*.dropdownitem:focus { - background: linear-gradient(to right, var(--blue) 10px, var(--concrete) 10px); -} - -.dropdownitem:hover { - background: linear-gradient(to right, var(--blue) 10px, var(--concrete) 10px); -}*/ - .dropdownwrap :global(.dropdown-toggle::after) { display: none; } From eb5e9bc71377263f19f77622c8371579acc37e02 Mon Sep 17 00:00:00 2001 From: pjohans Date: Tue, 29 Aug 2023 14:17:18 +0200 Subject: [PATCH 08/24] fixed localstorage --- src/components/hooks/useBookmarks.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/components/hooks/useBookmarks.js b/src/components/hooks/useBookmarks.js index f2216df0c..8791182d0 100644 --- a/src/components/hooks/useBookmarks.js +++ b/src/components/hooks/useBookmarks.js @@ -1,11 +1,11 @@ import useSWR from "swr"; const KEY_NAME = "bookmarks"; export default function useBookmarks() { - const { + let { data: bookmark, mutate: mutateBookmark, error, - } = useSWR(KEY_NAME, (key) => JSON.parse(localStorage.getItem(key) || [])); + } = useSWR(KEY_NAME, (key) => JSON.parse(localStorage.getItem(key) || "[]")); /** * Set a value in bookmark list @@ -21,12 +21,13 @@ export default function useBookmarks() { else { bookmark?.splice(existingIndex, 1); } + // store const stringified = JSON.stringify(bookmark); localStorage.setItem(KEY_NAME, stringified); // mutate - mutateBookmark(JSON.parse(stringified)); + mutateBookmark(bookmark); }; function clearBookmarks() { @@ -35,7 +36,7 @@ export default function useBookmarks() { const stringified = JSON.stringify(fisk); localStorage.setItem(KEY_NAME, stringified); //mutate - mutateBookmark(JSON.parse(stringified)); + mutateBookmark(fisk); } return { From a8d720ea1909f7043be56fa0ebb4cdbb847d1ec4 Mon Sep 17 00:00:00 2001 From: pjohans Date: Tue, 29 Aug 2023 14:52:39 +0200 Subject: [PATCH 09/24] fixed a typo --- src/components/hooks/useBookmarks.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/hooks/useBookmarks.js b/src/components/hooks/useBookmarks.js index 8791182d0..08528377f 100644 --- a/src/components/hooks/useBookmarks.js +++ b/src/components/hooks/useBookmarks.js @@ -5,7 +5,7 @@ export default function useBookmarks() { data: bookmark, mutate: mutateBookmark, error, - } = useSWR(KEY_NAME, (key) => JSON.parse(localStorage.getItem(key) || "[]")); + } = useSWR(KEY_NAME, (key) => JSON.parse(localStorage.getItem(key)) || []); /** * Set a value in bookmark list From 008b95606e85d8404199014ec55d9f66be3f5bcd Mon Sep 17 00:00:00 2001 From: pjohans Date: Tue, 29 Aug 2023 15:10:02 +0200 Subject: [PATCH 10/24] redid pid as id --- .../bibliographicdata/manifestationfull/ManifestationFull.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/work/bibliographicdata/manifestationfull/ManifestationFull.js b/src/components/work/bibliographicdata/manifestationfull/ManifestationFull.js index 6009e4455..ebad7ce94 100644 --- a/src/components/work/bibliographicdata/manifestationfull/ManifestationFull.js +++ b/src/components/work/bibliographicdata/manifestationfull/ManifestationFull.js @@ -96,7 +96,7 @@ function ColumnOne({ workId, manifestation }) { /> From 298887f8ec81003543b2d884689ec7b7f42cf92f Mon Sep 17 00:00:00 2001 From: pjohans Date: Tue, 5 Sep 2023 08:30:12 +0200 Subject: [PATCH 11/24] fixes from review --- src/components/base/bookmark/Bookmark.module.css | 8 ++++++++ .../bookmarkDropdown/BookmarkDropDown.module.css | 10 +++++++++- .../work/overview/bookmarkDropdown/BookmarkDropdown.js | 4 ++-- 3 files changed, 19 insertions(+), 3 deletions(-) diff --git a/src/components/base/bookmark/Bookmark.module.css b/src/components/base/bookmark/Bookmark.module.css index 92b6e3102..e4945b57c 100644 --- a/src/components/base/bookmark/Bookmark.module.css +++ b/src/components/base/bookmark/Bookmark.module.css @@ -37,6 +37,14 @@ * Selected * */ +.bookmark.selected { + border-color: var(--blue); +} + +.bookmark.selected:hover { + background-color: green; +} + .bookmark.selected i { /* Use of important to override dynamic inline style */ background-color: var(--blue) !important; diff --git a/src/components/work/overview/bookmarkDropdown/BookmarkDropDown.module.css b/src/components/work/overview/bookmarkDropdown/BookmarkDropDown.module.css index d1a795912..24d1e5676 100644 --- a/src/components/work/overview/bookmarkDropdown/BookmarkDropDown.module.css +++ b/src/components/work/overview/bookmarkDropdown/BookmarkDropDown.module.css @@ -25,6 +25,10 @@ background-color: var(--blue); } +.active:hover { + background-color: black; +} + .dropdownitem.active i svg { display: block; } @@ -47,11 +51,15 @@ font-weight: var(--body-font-semibold); } +.dropdownitem.active:hover { + color: var(--white); +} + .dropdownitem:hover i svg { display: block; } -.dropdownitem:hover i svg path { +.dropdownitem:not(.active):hover i svg path { stroke: var(--blue); } diff --git a/src/components/work/overview/bookmarkDropdown/BookmarkDropdown.js b/src/components/work/overview/bookmarkDropdown/BookmarkDropdown.js index 71daa1e11..a86ad534d 100644 --- a/src/components/work/overview/bookmarkDropdown/BookmarkDropdown.js +++ b/src/components/work/overview/bookmarkDropdown/BookmarkDropdown.js @@ -12,7 +12,7 @@ import BookmarkMedium from "@/public/icons/bookmark_small.svg"; export function BookMarkMaterialSelector({ materialTypes, workId, - size = { w: 6, h: 6 }, + size = { w: 7, h: 7 }, }) { const bookmarkClick = () => {}; @@ -68,7 +68,7 @@ export function BookMarkMaterialSelector({ id="dropdown-basic" > Date: Tue, 5 Sep 2023 09:11:25 +0200 Subject: [PATCH 12/24] in progress - menu nav --- .../BookmarkDropDown.module.css | 47 ++++++++++--------- .../bookmarkDropdown/BookmarkDropdown.js | 6 ++- 2 files changed, 30 insertions(+), 23 deletions(-) diff --git a/src/components/work/overview/bookmarkDropdown/BookmarkDropDown.module.css b/src/components/work/overview/bookmarkDropdown/BookmarkDropDown.module.css index 24d1e5676..cf693f1d9 100644 --- a/src/components/work/overview/bookmarkDropdown/BookmarkDropDown.module.css +++ b/src/components/work/overview/bookmarkDropdown/BookmarkDropDown.module.css @@ -1,6 +1,15 @@ .dropdownwrap { } +.bookmark { + margin-left: var(--pt2); +} + +.itemContainer { + display: flex; + justify-content: space-between; +} + .dropdownitem { display: block; border-bottom: 1px solid var(--gray); @@ -12,12 +21,8 @@ cursor: pointer; } -.dropdownitem i svg { - display: none; -} - -.bookmark { - margin-left: var(--pt2); +.dropdownitem.active i svg { + display: block; } .active { @@ -25,21 +30,26 @@ background-color: var(--blue); } -.active:hover { +.active i svg path { + stroke: var(--white); +} + +.dropdownitem.active:hover { background-color: black; + color: var(--white); } -.dropdownitem.active i svg { - display: block; +.dropdownitem.active:focus { + background-color: black; + color: var(--white); } -.active i svg path { +.dropdownitem.active:focus i svg path { stroke: var(--white); } -.itemContainer { - display: flex; - justify-content: space-between; +.dropdownitem i svg { + display: none; } .dropdownitem a { @@ -51,11 +61,8 @@ font-weight: var(--body-font-semibold); } -.dropdownitem.active:hover { - color: var(--white); -} - -.dropdownitem:hover i svg { +.dropdownitem:hover i svg, +.dropdownitem:focus i svg { display: block; } @@ -63,10 +70,6 @@ stroke: var(--blue); } -.dropdownitem:focus i svg { - display: block; -} - .dropdownitem:focus i svg path { stroke: var(--blue); } diff --git a/src/components/work/overview/bookmarkDropdown/BookmarkDropdown.js b/src/components/work/overview/bookmarkDropdown/BookmarkDropdown.js index a86ad534d..5fd3e7264 100644 --- a/src/components/work/overview/bookmarkDropdown/BookmarkDropdown.js +++ b/src/components/work/overview/bookmarkDropdown/BookmarkDropdown.js @@ -60,7 +60,11 @@ export function BookMarkMaterialSelector({ } return ( - + Date: Tue, 5 Sep 2023 09:56:46 +0200 Subject: [PATCH 13/24] minor css --- src/components/base/bookmark/Bookmark.module.css | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/components/base/bookmark/Bookmark.module.css b/src/components/base/bookmark/Bookmark.module.css index e4945b57c..4b594a0ee 100644 --- a/src/components/base/bookmark/Bookmark.module.css +++ b/src/components/base/bookmark/Bookmark.module.css @@ -10,7 +10,7 @@ .bookmark i svg path { stroke: var(--gray); - fill: var(--white); + /*fill: var(--white);*/ } /* @@ -45,14 +45,18 @@ background-color: green; } -.bookmark.selected i { +.bookmark.selected { /* Use of important to override dynamic inline style */ - background-color: var(--blue) !important; + background-color: var(--blue); +} + +.bookmark.selected:hover { + background-color: black; } .bookmark.selected i svg path { stroke: var(--white); - fill: var(--blue); + /*fill: var(--blue);*/ } .bookmark:focus { From cbfda29d117e33087233604b4794c5b9e909dd9a Mon Sep 17 00:00:00 2001 From: Jonas Praem Date: Tue, 5 Sep 2023 14:01:20 +0200 Subject: [PATCH 14/24] Bibdk2021 1790 bookmark page (#891) * bug fixes (#883) * bug fixes * headerrow * space * init * to page * working populate * bookmark layout * checkbox functionality * disable logic * polish of layout * cleanup * translations --------- Co-authored-by: Yousef --- public/icons/bookmark_full.svg | 7 + public/icons/close_grey.svg | 4 + src/components/base/bookmark/Bookmark.js | 2 - src/components/base/button/Button.module.css | 9 +- .../base/forms/checkbox/Checkbox.js | 20 ++- src/components/base/iconButton/IconButton.js | 15 +- .../base/iconButton/iconButton.module.css | 20 +-- src/components/base/translate/Translate.json | 32 ++++ src/components/header/Header.js | 12 +- .../header/icons/bookmark/bookmark.js | 40 +++++ .../header/icons/bookmark/bookmark.module.css | 0 src/components/header/icons/bookmark/index.js | 1 + src/components/hooks/useBookmarks.js | 31 +++- .../profile/bookmarks/Bookmark.module.css | 38 +++++ src/components/profile/bookmarks/Page.js | 149 ++++++++++++++++++ src/components/profile/bookmarks/index.js | 1 + .../profile/materialRow/MaterialRow.js | 100 ++++++++---- .../materialRow/MaterialRow.module.css | 38 ++++- .../profile/orderHistoryPage/Page.js | 5 +- .../orderHistoryPage.module.css | 1 + .../profile/profileLayout/ProfileLayout.js | 15 +- .../profilemenu/desktop/ProfileMenu.js | 13 +- .../bookmarkDropdown/BookmarkDropdown.js | 13 +- src/css/colors.css | 1 + src/lib/api/work.fragments.js | 32 ++++ src/pages/profil/huskeliste.js | 25 +++ 26 files changed, 525 insertions(+), 99 deletions(-) create mode 100644 public/icons/bookmark_full.svg create mode 100644 public/icons/close_grey.svg create mode 100644 src/components/header/icons/bookmark/bookmark.js create mode 100644 src/components/header/icons/bookmark/bookmark.module.css create mode 100644 src/components/header/icons/bookmark/index.js create mode 100644 src/components/profile/bookmarks/Bookmark.module.css create mode 100644 src/components/profile/bookmarks/Page.js create mode 100644 src/components/profile/bookmarks/index.js create mode 100644 src/pages/profil/huskeliste.js diff --git a/public/icons/bookmark_full.svg b/public/icons/bookmark_full.svg new file mode 100644 index 000000000..70361fe37 --- /dev/null +++ b/public/icons/bookmark_full.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/public/icons/close_grey.svg b/public/icons/close_grey.svg new file mode 100644 index 000000000..0637888be --- /dev/null +++ b/public/icons/close_grey.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/base/bookmark/Bookmark.js b/src/components/base/bookmark/Bookmark.js index 465034737..4f2f8eed3 100644 --- a/src/components/base/bookmark/Bookmark.js +++ b/src/components/base/bookmark/Bookmark.js @@ -5,9 +5,7 @@ import { cyKey } from "@/utils/trim"; import Skeleton from "@/components/base/skeleton"; import Icon from "@/components/base/icon"; import translate from "@/components/base/translate"; - import BookmarkSvg from "@/public/icons/bookmark_medium.svg"; -// import BookmarkSvg from "@/public/icons/bookmark.svg"; import styles from "./Bookmark.module.css"; diff --git a/src/components/base/button/Button.module.css b/src/components/base/button/Button.module.css index 4d087c095..2f70efe87 100644 --- a/src/components/base/button/Button.module.css +++ b/src/components/base/button/Button.module.css @@ -31,6 +31,7 @@ .primary.disabled { background-color: var(--concrete); outline: 2px solid var(--iron); + color: var(--dove); } /* Secondary */ @@ -48,6 +49,7 @@ .secondary.disabled { outline: 2px solid var(--concrete); + color: var(--dove); } /* @@ -106,7 +108,6 @@ /* * Disabled -* */ .button.disabled { @@ -114,14 +115,8 @@ cursor: default; } -.disabled, -.disabled:hover { - color: var(--mine-shaft); -} - /* * Skeleton -* */ .skeleton { diff --git a/src/components/base/forms/checkbox/Checkbox.js b/src/components/base/forms/checkbox/Checkbox.js index a8a5bedec..8360ed09c 100644 --- a/src/components/base/forms/checkbox/Checkbox.js +++ b/src/components/base/forms/checkbox/Checkbox.js @@ -2,7 +2,7 @@ import PropTypes from "prop-types"; import { useState, useEffect } from "react"; import Skeleton from "@/components/base/skeleton"; - +import cx from "classnames"; import styles from "./Checkbox.module.css"; /** @@ -38,13 +38,13 @@ export function Checkbox({ setStatus(checked); }, [checked]); - const disabledClass = disabled ? styles.disabled : ""; - const readOnlyClass = readOnly ? styles.readOnly : ""; - return (