Bibdk2021 1324 bookmark work part2

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";
@@ -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())}
  >
- <Icon
- skeleton={skeleton}
- disabled={disabled}
- size={{ w: 5, h: 5 }}
- alt="bookmark"
- >
+ <Icon skeleton={skeleton} disabled={disabled} size={size} alt="bookmark">
  <BookmarkSvg />
  </Icon>
  </button>

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

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 }) {
  />
  )}
 
- <div className={styles.button}>
- <ReservationButton
+ <div className={styles.reservationwrapper}>
+ <div className={styles.button}>
+ <ReservationButton
+ workId={workId}
+ selectedPids={[manifestation?.pid]}
+ singleManifestation={true}
+ buttonType="secondary"
+ size="small"
+ />
+ </div>
+ <BookMarkDropDown
  workId={workId}
- selectedPids={[manifestation?.pid]}
- singleManifestation={true}
- buttonType="secondary"
- size="small"
+ materialTypes={[[manifestation?.materialTypes?.[0]?.specific]]}
+ size={{ w: 4, h: 4 }}
  />
  </div>
 

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;

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}
  />
+ <BookMarkDropDown
+ workId={workId}
+ materialTypes={uniqueMaterialTypes}
+ />
  </Col>
+
  <OrderButtonTextBelow
  workId={workId}
  selectedPids={selectedPids}

src/components/work/overview/Overview.module.css

@@ -57,7 +57,6 @@
 .basket {
  padding-top: var(--pt3);
  display: flex;
- justify-content: space-between;
 }
 
 .info {

src/components/work/overview/bookmarkDropdown/BookmarkDropDown.module.css

@@ -3,38 +3,73 @@
 
 .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;
  white-space: nowrap;
  cursor: pointer;
 }
 
+.dropdownitem i svg {
+ display: none;
+}
+
+.bookmark {
+ 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;
+ justify-content: space-between;
 }
 
 .dropdownitem a {
  text-decoration: none;
 }
 
-.dropdownitem:focus {
- background: linear-gradient(to right, var(--blue) 10px, var(--concrete) 10px);
+.dropdownitem:hover {
+ color: var(--blue);
+ font-weight: var(--body-font-semibold);
 }
 
-.dropdownitem:hover {
- background: linear-gradient(to right, var(--blue) 10px, var(--concrete) 10px);
+.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);
 }
 
 .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 */

src/components/work/overview/bookmarkDropdown/BookmarkDropdown.js

@@ -6,27 +6,58 @@ import Text from "@/components/base/text/Text";
 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_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 = async (material, workId) => {
- const item = { key: workId + material, id: workId, materialType: material };
- await setBookmark(item);
+ const onSelect = (material, workId) => {
+ 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 (
+ <Bookmark
+ size={size}
+ className={styles.bookmark}
+ selected={active}
+ onClick={() => {
+ onSelect(options[0], workId);
+ }}
+ />
+ );
+ }
 
  return (
  <Dropdown className={`${styles.dropdownwrap} `} align="end">
@@ -36,7 +67,12 @@ export function BookMarkMaterialSelector({ materialTypes, workId }) {
  variant="success"
  id="dropdown-basic"
  >
- <Bookmark onClick={bookmarkClick} selected={active} />
+ <Bookmark
+ size={{ w: 7, h: 7 }}
+ onClick={bookmarkClick}
+ selected={active}
+ className={styles.bookmark}
+ />
  </Dropdown.Toggle>
  <Dropdown.Menu
  className={styles.dropdownmenu}
@@ -47,29 +83,27 @@ export function BookMarkMaterialSelector({ materialTypes, workId }) {
  })}
  >
  {options.map((material, index) => {
+ const activeItem =
+ bookmark?.findIndex((book) => book.key === workId + material[0]) !==
+ -1;
  return (
  <Dropdown.Item
- as="div"
- tabIndex="-1"
  data-cy={`bookmark-${material}-${index}`}
  key={`bookmark-${index}`}
  className={`${styles.dropdownitem} ${
- bookmark?.findIndex(
- (book) => book.key === workId + material
- ) !== -1
- ? styles.active
- : ""
+ activeItem ? styles.active : ""
  }`}
  onClick={() => {
  onSelect(material, workId);
  }}
- onKeyDown={(e) => {
- if (e.key === "Enter") {
- onSelect(material, workId);
- }
- }}
  >
- <Text type="text3">{material}</Text>
+ <div className={styles.itemContainer}>
+ <Text type="text3">{material}</Text>
+
+ <Icon size={{ w: 3, h: 3 }}>
+ <BookmarkMedium />
+ </Icon>
+ </div>
  </Dropdown.Item>
  );
  })}
@@ -78,8 +112,12 @@ export function BookMarkMaterialSelector({ materialTypes, workId }) {
  );
 }
 
-export default function wrapper({ materialTypes, workId }) {
+export default function wrapper({ materialTypes, workId, size }) {
  return (
- <BookMarkMaterialSelector materialTypes={materialTypes} workId={workId} />
+ <BookMarkMaterialSelector
+ materialTypes={materialTypes}
+ workId={workId}
+ size={size}
+ />
  );
 }