fix(CSS): various css & documentation links + delete annotation when editing (PR #2697 Fixes #2695)

arthur-lemeur · web-flow · commit 3acc25a028e8 · 2024-12-18T10:27:22.000+01:00
diff --git a/src/renderer/assets/styles/components/allPublicationsPage.scss b/src/renderer/assets/styles/components/allPublicationsPage.scss
@@ -30,13 +30,15 @@
 
             &_inputs {
                 display: flex;
-                align-items: center; 
+                align-items: end; 
                 gap: 10px;
+                height: 56px;
 
                 @media screen and (width <= 1072px) {
                     gap: 30px;
                     flex-direction: column;
                     align-items: start;
+                    height: unset;
                 }
             }
 
diff --git a/src/renderer/assets/styles/components/annotations.scss b/src/renderer/assets/styles/components/annotations.scss
@@ -201,7 +201,7 @@
     background-color: var(--color-light-blue);
     color: var(--color-blue);
 
-    &[data-selected], &:has(input:checked) {
+    &[data-selected], &:has(input:checked), &[data-state="checked"] {
       color: var(--color-secondary);
       background-color: var(--color-blue);
     }
diff --git a/src/renderer/assets/styles/components/popoverDialog.scss b/src/renderer/assets/styles/components/popoverDialog.scss
@@ -698,7 +698,21 @@
   outline-offset: -2px;
 }
 
-.delete_item {
+.delete_item_edition {
+  color: var(--color-blue);
+  margin-left: 5px;
+
+  &:hover {
+    background-color: var(--color-secondary);
+  }
+
+  svg {
+    color: var(--color-blue)!important;
+  }
+}
+
+
+.delete_item, .delete_item_edition {
   z-index: 1000;
   border: 1px solid var(--color-blue);
   background-color: var(--color-light-blue);
diff --git a/src/renderer/assets/styles/components/popoverDialog.scss.d.ts b/src/renderer/assets/styles/components/popoverDialog.scss.d.ts
@@ -15,6 +15,7 @@ export declare const CSS_END_components_popoverDialog: string;
 export declare const CSS_START_components_popoverDialog: string;
 export declare const currentPage: string;
 export declare const delete_item: string;
+export declare const delete_item_edition: string;
 export declare const display_options_item: string;
 export declare const docked_header: string;
 export declare const docked_header_controls: string;
diff --git a/src/renderer/library/components/catalog/AboutThoriumButton.tsx b/src/renderer/library/components/catalog/AboutThoriumButton.tsx
@@ -104,7 +104,7 @@ class AboutThoriumButton extends React.Component<IProps, IState> {
                     <p>{`v${_APP_VERSION}`}</p>
                     <a href="" onClick={async (ev) => {
                                 ev.preventDefault(); // necessary because href="", CSS must also ensure hyperlink visited style
-                                await shell.openExternal("https://thorium.edrlab.org/en/about/"); // TODO: not link to the english thorium hyperlink
+                                await shell.openExternal("https://thorium.edrlab.org/"); // TODO: not link to the english thorium hyperlink
                             }}
                         tabIndex={0}>{__("catalog.about.title", { appName: capitalizedAppName })}</a>
                     </div>
diff --git a/src/renderer/library/components/dialog/ApiappAddForm.tsx b/src/renderer/library/components/dialog/ApiappAddForm.tsx
@@ -100,7 +100,7 @@ export const ApiappHowDoesItWorkInfoBox = () => {
                     <a href=""
                         onClick={async (ev) => {
                             ev.preventDefault(); // necessary because href="", CSS must also ensure hyperlink visited style
-                            await shell.openExternal("https://thorium.edrlab.org/docs/");
+                            await shell.openExternal("https://thorium.edrlab.org/");
                         }}>
                         {__("apiapp.documentation")}
                         <SVG ariaHidden svg={FollowLinkIcon} />
diff --git a/src/renderer/library/components/settings/Settings.tsx b/src/renderer/library/components/settings/Settings.tsx
@@ -19,7 +19,7 @@ import * as QuitIcon from "readium-desktop/renderer/assets/icons/close-icon.svg"
 import * as CogIcon from "readium-desktop/renderer/assets/icons/cog-icon.svg";
 import * as PaletteIcon from "readium-desktop/renderer/assets/icons/palette-icon.svg";
 import * as KeyReturnIcon from "readium-desktop/renderer/assets/icons/keyreturn-icon.svg";
-import SVG from "readium-desktop/renderer/common/components/SVG";
+import SVG, { ISVGProps } from "readium-desktop/renderer/common/components/SVG";
 import classNames from "classnames";
 import { useTranslator } from "readium-desktop/renderer/common/hooks/useTranslator";
 import { useSelector } from "readium-desktop/renderer/common/hooks/useSelector";
@@ -42,6 +42,7 @@ import debounce from "debounce";
 import { IAnnotationCreator } from "readium-desktop/common/redux/states/creator";
 import { ILibraryRootState } from "readium-desktop/common/redux/states/renderer/libraryRootState";
 import { ApiappHowDoesItWorkInfoBox } from "../dialog/ApiappAddForm";
+import * as RadioGroup from "@radix-ui/react-radio-group";
 // import { TagGroup, TagList, Tag, Label } from "react-aria-components";
 
 interface ISettingsProps {};
@@ -154,6 +155,24 @@ const SaveSessionSettings: React.FC<{}> = () => {
     );
 };
 
+interface IRadioGroupItemProps {
+    value: string;
+    svg?: ISVGProps;
+    description: string;
+    disabled?: boolean;
+    className?: string;
+    style?: any;
+};
+
+const RadioGroupItem = (props: IRadioGroupItemProps) => {
+    return (
+        <RadioGroup.Item
+            data-input-type="radio"
+            value={props.value} id={props.value} className={props.className} disabled={props.disabled} style={props.style}>
+            {props.description}
+        </RadioGroup.Item>
+    );
+};
 
 
 const SaveCreatorSettings: React.FC<{}> = () => {
@@ -185,27 +204,14 @@ const SaveCreatorSettings: React.FC<{}> = () => {
                 }} />
                 <label htmlFor="creator-name">{__("settings.annotationCreator.name")}</label>
             </div>
-            <div className={stylesAnnotations.annotations_filter_taglist} style={{ margin: "10px" }}>
-                    <p>{__("settings.annotationCreator.type")}</p>
-                    <div className={stylesAnnotations.annotations_filter_tag}>
-                        <input type="radio" id="creator-organizationType" style={{display: "none"}} name="creator-type" value="Organization" checked={type === "Organization"} onChange={(e) => {
-                            const t = e.target.value;
-                            if (t === "Organization") {
-                                setType(t);
-                            }
-                        }}/>
-                            <label htmlFor="creator-organizationType">{__("settings.annotationCreator.organization")}</label>
-                    </div>
-                    <div className={stylesAnnotations.annotations_filter_tag}>
-                        <input type="radio" id="creator-personType" style={{display: "none"}} name="creator-type" value="Person" checked={type === "Person"} onChange={(e) => {
-                            const t = e.target.value;
-                            if (t === "Person") {
-                                setType(t);
-                            }
-                        }}/>
-                            <label htmlFor="creator-personType">{__("settings.annotationCreator.person")}</label>
-                    </div>
-            </div>
+            <RadioGroup.Root orientation="horizontal" style={{ display: "flex", gap: "10px", marginTop: "20px", flexWrap: "wrap" }}
+                value={type}
+                onValueChange={(option: "Organization" | "Person") => setType(option)}
+            >
+                 <p>{__("settings.annotationCreator.type")}</p>
+                <RadioGroupItem value="Organization" description={`${__("settings.annotationCreator.organization")}`} className={stylesAnnotations.annotations_filter_tag} />
+                <RadioGroupItem value="Person" description={`${__("settings.annotationCreator.person")}`} className={stylesAnnotations.annotations_filter_tag} />
+            </RadioGroup.Root>
         </section>
     );
 };
diff --git a/src/renderer/reader/components/ReaderMenu.tsx b/src/renderer/reader/components/ReaderMenu.tsx
@@ -563,9 +563,7 @@ const AnnotationCard: React.FC<{ timestamp: number, annotation: IAnnotationState
                     <>
                         <HardWrapComment comment={comment} />
                         {tagName ? <div className={stylesTags.tags_wrapper}>
-                            <div className={classNames(
-                                stylesTags.tag, stylesTags.no_hover,
-                            )}>
+                            <div className={stylesTags.tag}>
                                 <a onClick={() => setTagFilter(tagName)}
                                     onKeyUp={(e) => {
                                         if (e.key === "Enter" || e.key === "Space") {
@@ -632,9 +630,22 @@ const AnnotationCard: React.FC<{ timestamp: number, annotation: IAnnotationState
                         </DialogReactAria>
                     </PopoverReactAria>
                 </DialogTriggerReactAria> */}
+                {isEdited ?
+                <button title={__("reader.marks.delete")}
+                className={stylesPopoverDialog.delete_item_edition}
+                onClick={() => {
+                    triggerEdition(false);
+                    dispatch(readerActions.annotation.pop.build(annotation));
+                    // alert("deleted");
+                }}
+                >
+                    <SVG ariaHidden={true} svg={DeleteIcon} />
+                    {__("reader.marks.delete")}
+                </button> :
                 <Popover.Root>
                     <Popover.Trigger asChild>
-                        <button title={__("reader.marks.delete")}
+                        <button 
+                        title={__("reader.marks.delete")}
                         >
                             <SVG ariaHidden={true} svg={DeleteIcon} />
                         </button>
@@ -656,6 +667,7 @@ const AnnotationCard: React.FC<{ timestamp: number, annotation: IAnnotationState
                     </Popover.Portal>
 
                 </Popover.Root>
+                }
             </div>
         </div>
         <div className={stylesPopoverDialog.gauge}>

Original file line number	Diff line number	Diff line change
`@@ -30,13 +30,15 @@`
`30`	`30`
`31`	`31`	`&_inputs {`
`32`	`32`	`display: flex;`
`33`		`- align-items: center;`
	`33`	`+ align-items: end;`
`34`	`34`	`gap: 10px;`
	`35`	`+ height: 56px;`
`35`	`36`
`36`	`37`	`@media screen and (width <= 1072px) {`
`37`	`38`	`gap: 30px;`
`38`	`39`	`flex-direction: column;`
`39`	`40`	`align-items: start;`
	`41`	`+ height: unset;`
`40`	`42`	`}`
`41`	`43`	`}`
`42`	`44`
Original file line number	Diff line number	Diff line change
`@@ -201,7 +201,7 @@`
`201`	`201`	`background-color: var(--color-light-blue);`
`202`	`202`	`color: var(--color-blue);`
`203`	`203`
`204`		`- &[data-selected], &:has(input:checked) {`
	`204`	`+ &[data-selected], &:has(input:checked), &[data-state="checked"] {`
`205`	`205`	`color: var(--color-secondary);`
`206`	`206`	`background-color: var(--color-blue);`
`207`	`207`	`}`