open status from image galery, fix #627

src/app/components/stream/status/attachements/attachement-image/attachement-image.component.html

@@ -1,5 +1,8 @@
 <div class="image">    
     <div class="image__alt" *ngIf="displayAltLabel">ALT</div>
+    <a *ngIf="status" href class="image__status" (click)="openStatus()" (auxclick)="openStatus()" title="open status">
+        <fa-icon class="image__status--icon" [icon]="faExternalLinkAlt"></fa-icon>
+    </a>
     <a href class="image__link" (click)="openExternal()" (auxclick)="openExternal()" title="open image">
         <fa-icon class="image__link--icon" [icon]="faLink"></fa-icon>
     </a>

src/app/components/stream/status/attachements/attachement-image/attachement-image.component.scss

@@ -25,11 +25,31 @@
         // }
     }
 
+    &__status {
+        z-index: 10;
+        position: absolute;
+        top: 0;
+        right: 25px;
+        padding: 5px 5px 8px 8px;
+        transition: all .2s;
+        opacity: 0;
+        color: white;
+
+        &--icon {  
+            filter: drop-shadow(0 0 3px rgb(78, 78, 78));        
+        }
+    }
+
     &:hover &__link {
         opacity: 1;
         cursor: pointer;
     }
 
+    &:hover &__status {
+        opacity: 1;
+        cursor: pointer;
+    }
+
     &__alt {
         display: inline;
         color: white;

src/app/components/stream/status/attachements/attachement-image/attachement-image.component.ts

@@ -1,8 +1,10 @@
 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
-import { faLink } from "@fortawesome/free-solid-svg-icons";
+import { faLink, faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons";
 
 import { SettingsService } from '../../../../../services/settings.service';
 import { Attachment } from '../../../../../services/models/mastodon.interfaces';
+import { StatusWrapper } from '../../../../../models/common.model';
+import { OpenThreadEvent } from '../../../../../services/tools.service';
 
 @Component({
     selector: 'app-attachement-image',
@@ -11,10 +13,13 @@ import { Attachment } from '../../../../../services/models/mastodon.interfaces';
 })
 export class AttachementImageComponent implements OnInit {
     faLink = faLink;
+    faExternalLinkAlt = faExternalLinkAlt;
     displayAltLabel: boolean;
 
     @Input() attachment: Attachment;
+    @Input() status: StatusWrapper;
     @Output() openEvent = new EventEmitter();
+    @Output() browseThreadEvent = new EventEmitter<OpenThreadEvent>();
 
     constructor(
         private readonly settingsService: SettingsService
@@ -34,4 +39,13 @@ export class AttachementImageComponent implements OnInit {
         window.open(this.attachment.url, '_blank');
         return false;
     }
+
+    openStatus(): boolean {
+        if(!this.status) return false;
+
+        const openThreadEvent = new OpenThreadEvent(this.status.status, this.status.provider);
+        this.browseThreadEvent.next(openThreadEvent);
+
+        return false;
+    }
 }

src/app/components/stream/user-profile/user-profile.component.html

@@ -210,7 +210,7 @@
                         </div>
                         <div *ngIf="statusSection === 'media'" class="status-media">
                             <div *ngFor="let media of statusWrapper.status.media_attachments">
-                                <app-attachement-image *ngIf="media.type === 'image' || media.type === 'gifv'" class="status-media__image" [attachment]="media" (openEvent)="openAttachment(media)"></app-attachement-image>
+                                <app-attachement-image *ngIf="media.type === 'image' || media.type === 'gifv'" class="status-media__image" [attachment]="media" [status]="statusWrapper" (openEvent)="openAttachment(media)" (browseThreadEvent)="browseThread($event)"></app-attachement-image>
                             </div>
                         </div>
                     </div>