up style of imgViewer modal and description

Author: arthur-lemeur

src/renderer/assets/styles/components/modals.scss

@@ -44,6 +44,8 @@
   box-sizing: border-box;
   border: 1px solid var(--color-gray-250);
 
+  @include mx.scrollbar_styling;
+
   &.modal_dialog_full {
     position: relative;
     box-sizing: border-box;
@@ -53,7 +55,6 @@
       height: calc(100vh - 100px);
     }
   }
-  
   background-color: var(--color-neutral-base);
   color: var(--color-text-primary);
 
@@ -260,6 +261,19 @@
   }
 }
 
+.imageViewerContent {
+  position: relative;
+  display: flex;
+  gap: 10;
+  width: 100%;
+  height: 100%;
+  padding-left: 5;
+  flex: 1;
+  flex-direction: column;
+
+  @include mx.scrollbar_styling
+}
+
 .CSS_END_components_modals {
   display: none;
 }

src/renderer/assets/styles/components/modals.scss.d.ts

@@ -9,6 +9,7 @@ export declare const field: string;
 export declare const guidedTour_buttons: string;
 export declare const guidedTour_content: string;
 export declare const guidedTour_tab: string;
+export declare const imageViewerContent: string;
 export declare const lcp_hint: string;
 export declare const modal_dialog: string;
 export declare const modal_dialog_body: string;

src/renderer/reader/components/ImageClickManagerViewerOnly.tsx

@@ -46,6 +46,7 @@ const Controls = () => {
     // opacity: 0;
     transition: 200ms;
     gap: 10px;
+    margin-top: 10px;
 }
 
 .imgViewerControls button {
@@ -91,7 +92,38 @@ export const ImageClickManagerImgViewerOnly: React.FC = () => {
     let scale = Math.min(scaleX, scaleY);
     if (scale > 1) scale = 1;
 
-    const imageDescription = dom_detailsText || dom_figcaptionText || dom_describedbyText || dom_labelledByText || altAttributeOf_HTMLImg_SVGImage_SVGFragment || "";
+    const descriptions = [
+        { label: __("reader.imgViewer.description.details"), value: dom_detailsText },
+        { label: __("reader.imgViewer.description.figcaption"), value: dom_figcaptionText },
+        { label: __("reader.imgViewer.description.describedby"), value: dom_describedbyText },
+        { label: __("reader.imgViewer.description.labelledby"), value: dom_labelledByText },
+    ];
+
+    const hasAlt = !!altAttributeOf_HTMLImg_SVGImage_SVGFragment;
+    const activeDescriptions = descriptions.filter(d => !!d.value);
+    const hasOtherDescriptions = activeDescriptions.length > 0;
+
+    const imageHasDescription = hasAlt || hasOtherDescriptions;
+    const imageHasOnlyAltDescription = hasAlt && !hasOtherDescriptions;
+
+    const DescriptionList = (
+        <details style={{ fontSize: "14px", cursor: "pointer" }}>
+            <summary>
+                {altAttributeOf_HTMLImg_SVGImage_SVGFragment || __("reader.imgViewer.description.about")}
+            </summary>
+            <ul style={{ marginTop: "10px", listStyleType: "none", paddingLeft: 0 }}>
+                {activeDescriptions.map(({ label, value }) => (
+                    <li key={label} style={{ marginBottom: "10px" }}>
+                        <strong>{label}: </strong> {value}
+                    </li>
+                ))}
+            </ul>
+        </details>
+    );
+
+    const imageDescription = imageHasOnlyAltDescription 
+        ? altAttributeOf_HTMLImg_SVGImage_SVGFragment 
+        : DescriptionList;
 
     return (<>
 
@@ -115,9 +147,10 @@ export const ImageClickManagerImgViewerOnly: React.FC = () => {
                         </Dialog.Close>
                     </div>
                     <div style={{ display: "flex", flexDirection: "column", padding: "5px 10px", alignItems: "center", flex: 1 }}>
-                        <div style={{ position: "relative", display: "flex", gap: 10, width: "100%", height: "100%", paddingLeft: 5, flex: 1, flexDirection: "column" }}>
+                        <div className={stylesModals.imageViewerContent}>
+                            <div style={{transition: "600ms ease-in-out"}}>
                             <TransformWrapper initialScale={scale} minScale={scale / 2} maxScale={4 * scale}>
-                                <TransformComponent wrapperStyle={{ display: "flex", width: "100%", height: "100%", minHeight: "350px", flex: "1", position: "relative" }} >
+                                <TransformComponent wrapperStyle={{ display: "flex", margin: "auto", width: "90%", height: "90%", minHeight: "350px", flex: "1", position: "relative", transition: "600ms ease-in-out" }} >
                                     <img
                                         style={{ height: "100%", width: "100%", maxHeight: "calc(100vh - 250px)", backgroundColor: "white", color: "black", fill: "currentcolor", stroke: "currentcolor" }}
                                         src={isSVGFragment ? ("data:image/svg+xml;base64," + Buffer.from(HTMLImgSrc_SVGImageHref_SVGFragmentMarkup).toString("base64")) : HTMLImgSrc_SVGImageHref_SVGFragmentMarkup}
@@ -129,12 +162,12 @@ export const ImageClickManagerImgViewerOnly: React.FC = () => {
                                 </TransformComponent>
                                 <Controls />
                             </TransformWrapper>
-                            {imageDescription ?
-                                <p style={{ maxWidth: "unset", fontStyle: "italic"}}>
+                            </div>
+                            {imageHasDescription && (
+                                <div style={{ width: "100%", marginTop: "10px" }}>
                                     {imageDescription}
-                                </p>
-                                : <></>
-                            }
+                                </div>
+                            )}
                         </div>
                     </div>
                 </Dialog.Content>

src/resources/locales/ar.json

@@ -227,7 +227,9 @@
             "urlHint": "هل نسيت عبارة مرورك؟ اضغط هنا للحصول على الدعم.",
             "whatIsLcp?": "ما هي LCP؟",
             "whatIsLcpInfoDetails": "ترمز LCP إلى 'حماية المحتوى المرخَّص'.",
-            "whatIsLcpInfoDetailsLink": "لمعرفة المزيد، اضغط على هذا الرابط لزيارة موقع EDRLab."
+            "whatIsLcpInfoDetailsLink": "لمعرفة المزيد، اضغط على هذا الرابط لزيارة موقع EDRLab.",
+            "showPassphrase": "",
+            "hidePassphrase": ""
         }
     },
     "message": {
@@ -722,7 +724,15 @@
             "title": "عارض الصور (تكبير)",
             "zoomIn": "تكبير",
             "zoomOut": "تصغير",
-            "zoomReset": "إعادة ضبط التكبير"
+            "zoomReset": "إعادة ضبط التكبير",
+            "description": {
+                "altText": "",
+                "details": "",
+                "figcaption": "",
+                "describedby": "",
+                "labelledby": "",
+                "about": ""
+            }
         },
         "marks": {
             "annotations": "التعليقات",

src/resources/locales/bg.json

@@ -207,7 +207,9 @@
             "urlHint": "Забравили сте паролата си? Намерете помощ тук.",
             "whatIsLcp?": "",
             "whatIsLcpInfoDetails": "",
-            "whatIsLcpInfoDetailsLink": ""
+            "whatIsLcpInfoDetailsLink": "",
+            "showPassphrase": "",
+            "hidePassphrase": ""
         }
     },
     "message": {
@@ -702,7 +704,15 @@
             "title": "",
             "zoomIn": "",
             "zoomOut": "",
-            "zoomReset": ""
+            "zoomReset": "",
+            "description": {
+                "altText": "",
+                "details": "",
+                "figcaption": "",
+                "describedby": "",
+                "labelledby": "",
+                "about": ""
+            }
         },
         "marks": {
             "annotations": "Анотации",

src/resources/locales/ca.json

@@ -212,7 +212,9 @@
             "urlHint": "Has olvidat la contrassenya? Clica si necessites ajuda",
             "whatIsLcp?": "Què és LCP?",
             "whatIsLcpInfoDetails": "LCP significa 'Protecció del contingut llicenciat'.",
-            "whatIsLcpInfoDetailsLink": "Per saber-ne més, feu clic en aquest enllaç a la pàgina web de l'EDRLab."
+            "whatIsLcpInfoDetailsLink": "Per saber-ne més, feu clic en aquest enllaç a la pàgina web de l'EDRLab.",
+            "showPassphrase": "",
+            "hidePassphrase": ""
         }
     },
     "message": {
@@ -707,7 +709,15 @@
             "title": "",
             "zoomIn": "",
             "zoomOut": "",
-            "zoomReset": ""
+            "zoomReset": "",
+            "description": {
+                "altText": "",
+                "details": "",
+                "figcaption": "",
+                "describedby": "",
+                "labelledby": "",
+                "about": ""
+            }
         },
         "marks": {
             "annotations": "Anotacions",

src/resources/locales/cs.json

@@ -217,7 +217,9 @@
             "urlHint": "Zapomněli jste svou heslovou frázi? Po získání podpory klikněte zde.",
             "whatIsLcp?": "Co je LCP?",
             "whatIsLcpInfoDetails": "LCP znamená „Licensed Content Protection“.",
-            "whatIsLcpInfoDetailsLink": "Pro více informací klikněte na tento odkaz na webovou stránku EDRLabu."
+            "whatIsLcpInfoDetailsLink": "Pro více informací klikněte na tento odkaz na webovou stránku EDRLabu.",
+            "showPassphrase": "",
+            "hidePassphrase": ""
         }
     },
     "message": {
@@ -712,7 +714,15 @@
             "title": "",
             "zoomIn": "",
             "zoomOut": "",
-            "zoomReset": ""
+            "zoomReset": "",
+            "description": {
+                "altText": "",
+                "details": "",
+                "figcaption": "",
+                "describedby": "",
+                "labelledby": "",
+                "about": ""
+            }
         },
         "marks": {
             "annotations": "Anotace",

src/resources/locales/da.json

@@ -207,7 +207,9 @@
             "urlHint": "Har du glemt dit nøgleord? Få hjælp her.",
             "whatIsLcp?": "Hvad er LCP?",
             "whatIsLcpInfoDetails": "LCP står for 'Licensed Content Protection'.",
-            "whatIsLcpInfoDetailsLink": "For at læse mere, følg dette link til EDRLab websitet."
+            "whatIsLcpInfoDetailsLink": "For at læse mere, følg dette link til EDRLab websitet.",
+            "showPassphrase": "",
+            "hidePassphrase": ""
         }
     },
     "message": {
@@ -702,7 +704,15 @@
             "title": "Billedfremviser",
             "zoomIn": "Zoom ind",
             "zoomOut": "Zoom ud",
-            "zoomReset": "Nulstil Zoom"
+            "zoomReset": "Nulstil Zoom",
+            "description": {
+                "altText": "",
+                "details": "",
+                "figcaption": "",
+                "describedby": "",
+                "labelledby": "",
+                "about": ""
+            }
         },
         "marks": {
             "annotations": "Noter",

src/resources/locales/de.json

@@ -207,7 +207,9 @@
             "urlHint": "Passwort vergessen? Klicke hier für Support.",
             "whatIsLcp?": "Was ist LCP?",
             "whatIsLcpInfoDetails": "LCP steht für „Licensed Content Protection“.",
-            "whatIsLcpInfoDetailsLink": "Um mehr zu erfahren, klicken Sie auf diesen Link zur EDRLab-Website."
+            "whatIsLcpInfoDetailsLink": "Um mehr zu erfahren, klicken Sie auf diesen Link zur EDRLab-Website.",
+            "showPassphrase": "",
+            "hidePassphrase": ""
         }
     },
     "message": {
@@ -702,7 +704,15 @@
             "title": "",
             "zoomIn": "",
             "zoomOut": "",
-            "zoomReset": ""
+            "zoomReset": "",
+            "description": {
+                "altText": "",
+                "details": "",
+                "figcaption": "",
+                "describedby": "",
+                "labelledby": "",
+                "about": ""
+            }
         },
         "marks": {
             "annotations": "Meine Anmerkungen",

src/resources/locales/el.json

@@ -207,7 +207,9 @@
             "urlHint": "Ξέχασες τα αναγνωριστικά σου; Κλίκαρε εδώ για βοήθεια.",
             "whatIsLcp?": "Τι είναι η προστασία LCP;",
             "whatIsLcpInfoDetails": "Το LCP σημαίνει 'Προστασία αδειοδοτημένου περιεχομένου'.",
-            "whatIsLcpInfoDetailsLink": "Για περισσότερα, κάντε κλικ σε αυτόν τον σύνδεσμο προς τον ιστότοπο του EDRLab."
+            "whatIsLcpInfoDetailsLink": "Για περισσότερα, κάντε κλικ σε αυτόν τον σύνδεσμο προς τον ιστότοπο του EDRLab.",
+            "showPassphrase": "",
+            "hidePassphrase": ""
         }
     },
     "message": {
@@ -702,7 +704,15 @@
             "title": "Προβολή εικόνων (zoom)",
             "zoomIn": "Μεγέθυνση",
             "zoomOut": "Σμίκρυνση",
-            "zoomReset": "Επαναφορά Zoom"
+            "zoomReset": "Επαναφορά Zoom",
+            "description": {
+                "altText": "",
+                "details": "",
+                "figcaption": "",
+                "describedby": "",
+                "labelledby": "",
+                "about": ""
+            }
         },
         "marks": {
             "annotations": "Σχόλια",