From 099713b9d2d4dcf09e0a89d5bce5184c95164285 Mon Sep 17 00:00:00 2001
From: Dani Palou <dani@moodle.com>
Date: Thu, 25 Feb 2021 15:38:06 +0100
Subject: [PATCH] MOBILE-3708 format-text: Fix magnifying glass

---
 src/core/directives/format-text.ts            |  4 +-
 .../viewer/components/image/image.html        |  4 +-
 .../features/viewer/components/image/image.ts |  1 +
 src/theme/components/format-text.scss         | 38 +++++++++++++++++++
 4 files changed, 43 insertions(+), 4 deletions(-)

diff --git a/src/core/directives/format-text.ts b/src/core/directives/format-text.ts
index 8ad9dd230..9b3d9cb96 100644
--- a/src/core/directives/format-text.ts
+++ b/src/core/directives/format-text.ts
@@ -208,8 +208,8 @@ export class CoreFormatTextDirective implements OnChanges {
 
             anchor.classList.add('core-image-viewer-icon');
             anchor.setAttribute('aria-label', label);
-            // @todo Add an ion-icon item to apply the right styles, but the ion-icon component won't be executed.
-            anchor.innerHTML = '<ion-icon name="fas-search" class="icon icon-md ion-md-search"></ion-icon>';
+            // Add an ion-icon item to apply the right styles, but the ion-icon component won't be executed.
+            anchor.innerHTML = '<ion-icon name="fas-search" src="assets/fonts/font-awesome/solid/search.svg"></ion-icon>';
 
             anchor.addEventListener('click', (e: Event) => {
                 e.preventDefault();
diff --git a/src/core/features/viewer/components/image/image.html b/src/core/features/viewer/components/image/image.html
index d293205fb..e911e9d56 100644
--- a/src/core/features/viewer/components/image/image.html
+++ b/src/core/features/viewer/components/image/image.html
@@ -8,7 +8,7 @@
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
-<!-- @todo: zoom="true" maxZoom="2" class="core-zoom-pane". Now we need to use ionSlider? -->
-<ion-content [scrollX]="true" [scrollY]="true">
+<!-- @todo: zoom="true" maxZoom="2" . Now we need to use ionSlider? -->
+<ion-content [scrollX]="true" [scrollY]="true" class="core-zoom-pane">
     <img [src]="image" [alt]="title" core-external-content [component]="component" [componentId]="componentId">
 </ion-content>
diff --git a/src/core/features/viewer/components/image/image.ts b/src/core/features/viewer/components/image/image.ts
index ed6a64f0b..ddb52fe3d 100644
--- a/src/core/features/viewer/components/image/image.ts
+++ b/src/core/features/viewer/components/image/image.ts
@@ -22,6 +22,7 @@ import { ModalController, Translate } from '@singletons';
 @Component({
     selector: 'core-viewer-image',
     templateUrl: 'image.html',
+    styleUrls: ['image.scss'],
 })
 export class CoreViewerImageComponent implements OnInit {
 
diff --git a/src/theme/components/format-text.scss b/src/theme/components/format-text.scss
index d8a8c498a..e94b4814e 100644
--- a/src/theme/components/format-text.scss
+++ b/src/theme/components/format-text.scss
@@ -1,5 +1,7 @@
 /** Format Text - Show more styles. */
 /** Styles of elements inside the directive should be placed in format-text.scss */
+@import "~theme/globals";
+
 core-format-text {
     user-select: text;
     word-break: break-word;
@@ -78,4 +80,40 @@ core-format-text {
             }
         }
     }
+
+    .core-adapted-img-container {
+        position: relative;
+        display: inline-block;
+        width: 100%;
+    }
+
+    .core-image-viewer-icon {
+        position: absolute;
+        @include position(null, 10px, 10px, null);
+        color: var(--black);
+        border-radius: 5px;
+        background-color: rgba(255, 255, 255, .5);
+        text-align: center;
+        cursor: pointer;
+
+        width: 32px;
+        height: 32px;
+        max-width: 32px;
+        line-height: 32px;
+        font-size: 24px;
+
+        ion-icon {
+            margin-top: 3px;
+        }
+
+        &:hover {
+            opacity: .7;
+        }
+    }
+}
+
+body.dark {
+    core-format-text .core-image-viewer-icon {
+        background-color: rgba(0, 0, 0, .5);
+    }
 }