EVOgeek
/
Vmeda.Online
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-3708 format-text: Fix magnifying glass

main
Dani Palou 2021-02-25 15:38:06 +01:00
parent 200b01eef6
commit 099713b9d2
4 changed files with 43 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/core/directives/format-text.ts
View File

@ -208,8 +208,8 @@ export class CoreFormatTextDirective implements OnChanges {
anchor.classList.add('core-image-viewer-icon'); anchor.classList.add('core-image-viewer-icon');
anchor.setAttribute('aria-label', label); 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. // 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>'; anchor.innerHTML = '<ion-icon name="fas-search" src="assets/fonts/font-awesome/solid/search.svg"></ion-icon>';
anchor.addEventListener('click', (e: Event) => { anchor.addEventListener('click', (e: Event) => {
e.preventDefault(); e.preventDefault();

4
src/core/features/viewer/components/image/image.html
View File

@ -8,7 +8,7 @@
</ion-buttons> </ion-buttons>
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
<!-- @todo: zoom="true" maxZoom="2" class="core-zoom-pane". Now we need to use ionSlider? --> <!-- @todo: zoom="true" maxZoom="2" . Now we need to use ionSlider? -->
<ion-content [scrollX]="true" [scrollY]="true"> <ion-content [scrollX]="true" [scrollY]="true" class="core-zoom-pane">
<img [src]="image" [alt]="title" core-external-content [component]="component" [componentId]="componentId"> <img [src]="image" [alt]="title" core-external-content [component]="component" [componentId]="componentId">
</ion-content> </ion-content>

1
src/core/features/viewer/components/image/image.ts
View File

@ -22,6 +22,7 @@ import { ModalController, Translate } from '@singletons';
@Component({ @Component({
selector: 'core-viewer-image', selector: 'core-viewer-image',
templateUrl: 'image.html', templateUrl: 'image.html',
styleUrls: ['image.scss'],
}) })
export class CoreViewerImageComponent implements OnInit { export class CoreViewerImageComponent implements OnInit {

38
src/theme/components/format-text.scss
View File

@ -1,5 +1,7 @@
/** Format Text - Show more styles. */ /** Format Text - Show more styles. */
/** Styles of elements inside the directive should be placed in format-text.scss */ /** Styles of elements inside the directive should be placed in format-text.scss */
@import "~theme/globals";
core-format-text { core-format-text {
user-select: text; user-select: text;
word-break: break-word; 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);
}
} }