Added button for closing media-overlay #37

This commit is contained in:
Nicolas Constant 2019-02-27 19:35:01 -05:00
parent 7d88b0c50c
commit 9b2710a99f
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
3 changed files with 26 additions and 2 deletions

View File

@ -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>

View File

@ -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%);

View File

@ -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')