added alt label display option, fix #387

src/app/components/floating-column/settings/settings.component.html

@@ -69,13 +69,13 @@
                     <a href (click)="onAddLang(l)" class="form-button language__entry__action sound__play">add</a>
                 </div>
 
-                
+
             </div>
 
             <input class="sub-section__checkbox" [(ngModel)]="disableLangAutodetectEnabled"
-                    (change)="onDisableLangAutodetectChanged()" type="checkbox" name="disableLangAutodetec"
-                    value="disableLangAutodetec" id="disableLangAutodetec">
-                <label class="noselect sub-section__label" for="disableLangAutodetec">disable language autodetection</label>
+                (change)="onDisableLangAutodetectChanged()" type="checkbox" name="disableLangAutodetec"
+                value="disableLangAutodetec" id="disableLangAutodetec">
+            <label class="noselect sub-section__label" for="disableLangAutodetec">disable language autodetection</label>
         </div>
         <h4 class="panel__subtitle">Twitter Bridge</h4>
         <div class="sub-section">
@@ -167,7 +167,8 @@
 
             <input class="sub-section__checkbox" [checked]="timeLineHeader === 6" (change)="onTimeLineHeaderChange(6)"
                 type="radio" name="timelineheader-6" value="timelineheader-6" id="timelineheader-6">
-            <label class="noselect sub-section__label" for="timelineheader-6">Title - Account Icon - Username - Domain Name</label>
+            <label class="noselect sub-section__label" for="timelineheader-6">Title - Account Icon - Username - Domain
+                Name</label>
             <br>
 
             <span class="sub-section__title">loading behavior:</span><br />
@@ -194,7 +195,8 @@
                 <input class="sub-section__checkbox" [(ngModel)]="autoFollowOnListEnabled"
                     (change)="onAutoFollowOnListChanged()" type="checkbox" name="onAutoFollowOnListChanged"
                     value="onAutoFollowOnListChanged" id="onAutoFollowOnListChanged">
-                <label class="noselect sub-section__label" for="onAutoFollowOnListChanged">autofollow accounts when adding to list</label>
+                <label class="noselect sub-section__label" for="onAutoFollowOnListChanged">autofollow accounts when
+                    adding to list</label>
                 <br>
             </div>
         </div>
@@ -207,6 +209,11 @@
             <label class="noselect sub-section__label" for="disableRemoteFetching">disable remote status
                 fetching</label>
             <br>
+
+            <input class="sub-section__checkbox" [(ngModel)]="enableAltLabelEnabled"
+                (change)="onEnableAltLabelChanged()" type="checkbox" name="enableAltLabel"
+                value="enableAltLabel" id="enableAltLabel">
+            <label class="noselect sub-section__label" for="enableAltLabel">enable alt label</label>
         </div>
 
         <h4 class="panel__subtitle">About</h4>

src/app/components/floating-column/settings/settings.component.ts

@@ -30,6 +30,7 @@ export class SettingsComponent implements OnInit, OnDestroy {
     disableAvatarNotificationsEnabled: boolean;
     disableSoundsEnabled: boolean;
     disableLangAutodetectEnabled: boolean;
+    enableAltLabelEnabled: boolean;
     version: string;
 
     hasPleromaAccount: boolean;
@@ -148,6 +149,7 @@ export class SettingsComponent implements OnInit, OnDestroy {
 
         this.configuredLangs = this.languageService.getConfiguredLanguages();
         this.disableLangAutodetectEnabled = settings.disableLangAutodetec;
+        this.enableAltLabelEnabled = settings.enableAltLabel;
     }
 
     ngOnDestroy(): void {
@@ -275,6 +277,14 @@ export class SettingsComponent implements OnInit, OnDestroy {
         return false;
     }
 
+
+    onEnableAltLabelChanged(){
+        this.notifyRestartNeeded();
+        let settings = this.settingsService.getSettings();
+        settings.enableAltLabel = this.enableAltLabelEnabled;
+        this.settingsService.saveSettings(settings);
+    }
+
     onDisableLangAutodetectChanged() {
         this.notifyRestartNeeded();
         let settings = this.settingsService.getSettings();

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

@@ -1,4 +1,5 @@
-<div class="image">
+<div class="image">    
+    <div class="image__alt" *ngIf="displayAltLabel">ALT</div>
     <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

@@ -29,6 +29,24 @@
         opacity: 1;
         cursor: pointer;
     }
+
+    &__alt {
+        display: inline;
+        color: white;
+
+        z-index: 10;
+
+        position: absolute;
+        bottom: 5px;
+        left: 5px;
+
+        font-size: 10px;
+        font-weight: bolder;
+
+        background-color: rgba($color: #000000, $alpha: 0.5);
+        border-radius: 3px;
+        padding: 2px 5px;
+    }
 }
 
 img,

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

@@ -1,6 +1,7 @@
 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { faLink } from "@fortawesome/free-solid-svg-icons";
 
+import { SettingsService } from '../../../../../services/settings.service';
 import { Attachment } from '../../../../../services/models/mastodon.interfaces';
 
 @Component({
@@ -10,11 +11,16 @@ import { Attachment } from '../../../../../services/models/mastodon.interfaces';
 })
 export class AttachementImageComponent implements OnInit {
     faLink = faLink;
+    displayAltLabel: boolean;
 
     @Input() attachment: Attachment;
     @Output() openEvent = new EventEmitter();
 
-    constructor() { }
+    constructor(
+        private readonly settingsService: SettingsService
+    ) { 
+        this.displayAltLabel = this.settingsService.getSettings().enableAltLabel;
+    }
 
     ngOnInit() {
     }

src/app/states/settings.state.ts

@@ -85,6 +85,8 @@ export class GlobalSettings {
     configuredLanguages: ILanguage[] = [];
     selectedLanguage: ILanguage;
     disableLangAutodetec: boolean;
+
+    enableAltLabel: boolean;
 }
 
 export interface ILanguage {
@@ -183,6 +185,7 @@ export class SettingsState {
         newSettings.configuredLanguages = oldSettings.configuredLanguages;
         newSettings.selectedLanguage = oldSettings.selectedLanguage;
         newSettings.disableLangAutodetec = oldSettings.disableLangAutodetec;
+        newSettings.enableAltLabel = oldSettings.enableAltLabel;
 
         return newSettings;
     }