MOBILE-3708 format-text: Fix magnifying glass

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();

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>

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 {
 

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);
+    }
 }