Added button for closing media-overlay #37
This commit is contained in:
parent
7d88b0c50c
commit
9b2710a99f
|
@ -1,3 +1,6 @@
|
|||
<div class="media-viewer-canvas" (click)="close()">
|
||||
<img class="media-viewer-canvas__image" *ngIf="imageUrl" src="{{imageUrl}}"/>
|
||||
<button class="media-viewer-canvas__close" title="close">
|
||||
<fa-icon [icon]="faTimes"></fa-icon>
|
||||
</button>
|
||||
<img class="media-viewer-canvas__image" *ngIf="imageUrl" src="{{imageUrl}}" />
|
||||
</div>
|
|
@ -1,11 +1,28 @@
|
|||
@import "variables";
|
||||
@import "mixins";
|
||||
|
||||
.media-viewer-canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
&__close {
|
||||
@include clearButton;
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 20px;
|
||||
font-size: 24px;
|
||||
color: $font-link-primary;
|
||||
&:hover {
|
||||
color: $font-link-primary-hover;
|
||||
}
|
||||
}
|
||||
|
||||
&__image {
|
||||
max-width: 95%;
|
||||
max-height: calc(100% - 120px);
|
||||
margin-top: 50vh;
|
||||
margin-left: 50vw;
|
||||
transform: translate(-50%, -50%);
|
||||
|
|
|
@ -1,8 +1,9 @@
|
|||
import { Component, OnInit, Input, Output } from '@angular/core';
|
||||
import { faChevronLeft, faChevronRight, faTimes } from "@fortawesome/free-solid-svg-icons";
|
||||
import { Subject } from 'rxjs';
|
||||
|
||||
import { OpenMediaEvent } from '../../models/common.model';
|
||||
import { Attachment } from '../../services/models/mastodon.interfaces';
|
||||
import { Subject } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector: 'app-media-viewer',
|
||||
|
@ -12,6 +13,9 @@ import { Subject } from 'rxjs';
|
|||
export class MediaViewerComponent implements OnInit {
|
||||
private _mediaEvent: OpenMediaEvent;
|
||||
|
||||
faChevronLeft = faChevronLeft;
|
||||
faChevronRight = faChevronRight;
|
||||
faTimes = faTimes;
|
||||
imageUrl: string;
|
||||
|
||||
@Input('openedMediaEvent')
|
||||
|
|
Loading…
Reference in New Issue