Merge pull request #637 from NicolasConstant/topic_refine-css-zones

Topic refine css zones

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

@@ -10,7 +10,7 @@
             <div class="floating-column__inner--left">
                 <div class="floating-column__header">
                     <a class="close-button" href (click)="closePanel()" title="close">
-                        <fa-icon [icon]="faTimes"></fa-icon>
+                        <fa-icon class="close-button__icon" [icon]="faTimes"></fa-icon>
                     </a>
                 </div>
 

src/app/components/floating-column/floating-column.component.scss

@@ -29,9 +29,20 @@
 }
 
 .close-button {
+    // outline: 1px dotted orange;
+
     display: block;
     float: right;
     font-size: 14px;
     color: white;
-    margin: 10px 16px 0 0;
+    margin: 5px 5px 0 0;
+
+    width: 40px;
+    height: 34px;
+
+    &__icon {
+        position: relative;
+        top: 6px;
+        left: 17px;
+    }
 }

src/app/components/floating-column/manage-account/my-account/my-account.component.ts

@@ -122,6 +122,17 @@ export class MyAccountComponent implements OnInit, OnDestroy {
                     }                    
                 }                
             })
+            .then(_ => {
+                this.availableLists.sort((a,b) => {
+                    if (a.name < b.name) {
+                        return -1;
+                      }
+                      if (a.name > b.name) {
+                        return 1;
+                      }
+                      return 0;
+                });
+            })
             .catch(err => {
                 this.notificationService.notifyHttpError(err, this.account.info);
             });

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>
+    <div class="image__alt" *ngIf="displayAltLabel && attachment.description" title="{{ attachment.description }}">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/stream-overlay/stream-overlay.component.html

@@ -1,9 +1,5 @@
 <div class="overlay">
     <div class="overlay__header">
-        <a href class="overlay__button overlay-close" title="close" (click)="close()">
-            <fa-icon class="overlay-close__icon" [icon]="faTimes"></fa-icon>
-        </a>
-
         <a href class="overlay__button overlay-previous"
             [ngClass]="{'overlay__button--focus': hasPreviousElements }" title="previous" (click)="previous()">
             <fa-icon class="overlay-previous__icon" [icon]="faAngleLeft"></fa-icon>
@@ -12,13 +8,17 @@
             title="refresh" (click)="refresh()">
             <fa-icon class="overlay-refresh__icon" [icon]="faRedoAlt"></fa-icon>
         </a>
+        
+        <a href class="overlay__button overlay-next" [ngClass]="{'overlay__button--focus': hasNextElements }"
+            title="next" (click)="next()">
+            <fa-icon class="overlay-next__icon" [icon]="faAngleRight"></fa-icon>
+        </a>
 
         <a href title="return to top" class="overlay-gototop" (click)="goToTop()">            
         </a>
 
-        <a href class="overlay__button overlay-next" [ngClass]="{'overlay__button--focus': hasNextElements }"
+        <a href class="overlay__button overlay-close" title="close" (click)="close()">
-            title="next" (click)="next()">
+            <fa-icon class="overlay-close__icon" [icon]="faTimes"></fa-icon>
-            <fa-icon class="overlay-next__icon" [icon]="faAngleRight"></fa-icon>
         </a>
     </div>
 

src/app/components/stream/stream-overlay/stream-overlay.component.scss

@@ -11,7 +11,9 @@ $header-content-height: 40px;
         width: calc(100%);
         height: $header-content-height;
         background-color: $column-header-background-color; 
-        border-bottom: 1px solid #222736;        
+        border-bottom: 1px solid #222736;
+        
+        display: flex;
     }
     &__content-wrapper  {
         transition: all .2s;
@@ -44,11 +46,17 @@ $header-content-height: 40px;
     }
 
     &__button {
+        // outline: 1px dotted orange;
+
         width: 25px;
         height: 25px;
+
+        width: $header-content-height;
+        height: $header-content-height;
+
         color: #354060;
         transition: all .2s;
-        margin: 8px 0 0 8px;
+        
         &:hover {
             color: #536599;
             color: #7a8dc7;
@@ -68,19 +76,8 @@ $header-content-height: 40px;
 
         &__icon {
             position: relative;
-            left: 7px;
+            left: 17px;
-            top: -1px
+            top: 7px
-        }
-    }
-    &-next {
-        display: block;
-        float: left;
-        font-size: 18px;
-
-        &__icon {
-            position: relative;
-            left: 8px;
-            top: -1px
         }
     }
     &-refresh {
@@ -90,29 +87,38 @@ $header-content-height: 40px;
 
         &__icon {
             position: relative;
-            left: 5px;
+            left: 13px;
-            top: 1px
+            top: 9px
+        }
+    }   
+    &-next {
+        display: block;
+        float: left;
+        font-size: 18px;
+
+        &__icon {
+            position: relative;
+            left: 13px;
+            top: 7px
         }
     }   
     &-gototop {
-        position: absolute;
+        // outline: 1px dotted orange;
-        top: 0;
+
-        left: 110px;
+        flex-grow: 1;
-        right: 40px;
+
         display: block;
         height: $header-content-height;
     }
     &-close {
         display: block;
-        float: right;
         font-size: 13px;
         color: white;
-        margin-right: 8px;
 
         &__icon {
             position: relative;
-            left: 7px;
+            left: 15px;
-            top: 1px
+            top: 9px
         }
     }    
 }

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

@@ -166,39 +166,27 @@
 
             <div class="profile__extra-info profile__extra-info__preparefloating" *ngIf="!isLoading"
                 [class.profile__extra-info__floating]="showFloatingStatusMenu">
-                <div class="profile__extra-info__section">
+                    <a href class="profile__extra-info__section profile__extra-info__links" (click)="switchStatusSection('status')" title="Status"
-                    <a href class="profile__extra-info__links" (click)="switchStatusSection('status')" title="Status"
                         [class.profile__extra-info__links--selected]="statusSection === 'status'">Status</a>
-                </div>
+                    <a href class="profile__extra-info__section profile__extra-info__links" (click)="switchStatusSection('replies')"
-                <div class="profile__extra-info__section">
-                    <a href class="profile__extra-info__links" (click)="switchStatusSection('replies')"
                         title="Status & Replies"
                         [class.profile__extra-info__links--selected]="statusSection === 'replies'">Status &
                         Replies</a>
-                </div>
+                    <a href class="profile__extra-info__section profile__extra-info__links" (click)="switchStatusSection('media')" title="Media"
-                <div class="profile__extra-info__section">
-                    <a href class="profile__extra-info__links" (click)="switchStatusSection('media')" title="Media"
                         [class.profile__extra-info__links--selected]="statusSection === 'media'">Media</a>
-                </div>
             </div>
 
             <div class="profile-statuses" #profilestatuses>
                 <div class="profile__extra-info" *ngIf="!isLoading">
-                    <div class="profile__extra-info__section">
+                        <a href class="profile__extra-info__section profile__extra-info__links" (click)="switchStatusSection('status')"
-                        <a href class="profile__extra-info__links" (click)="switchStatusSection('status')"
                             title="Status"
                             [class.profile__extra-info__links--selected]="statusSection === 'status'">Status</a>
-                    </div>
+                        <a href class="profile__extra-info__section profile__extra-info__links" (click)="switchStatusSection('replies')"
-                    <div class="profile__extra-info__section">
-                        <a href class="profile__extra-info__links" (click)="switchStatusSection('replies')"
                             title="Status & Replies"
                             [class.profile__extra-info__links--selected]="statusSection === 'replies'">Status &
                             Replies</a>
-                    </div>
+                        <a href class="profile__extra-info__section profile__extra-info__links" (click)="switchStatusSection('media')" title="Media"
-                    <div class="profile__extra-info__section">
-                        <a href class="profile__extra-info__links" (click)="switchStatusSection('media')" title="Media"
                             [class.profile__extra-info__links--selected]="statusSection === 'media'">Media</a>
-                    </div>
                 </div>
 
                 <div [class.profile__status-switching-section]="isSwitchingSection">
@@ -222,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>

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

@@ -275,14 +275,15 @@ $floating-header-height: 60px;
     &-follows {
         width: calc(100%);  
         font-size: 13px;
-        border-bottom: 1px solid #0f111a;;
+        border-bottom: 1px solid #0f111a;
+
+        display: flex;
 
         &__link {
             color: white;
-            width: calc(50%);
+            flex-grow: 1;
             padding: 5px;
             text-align: center;
-            display: inline-block;
             background-color: #1a1f2e;
             transition: all .2s;
 
@@ -311,15 +312,15 @@ $floating-header-height: 60px;
         font-size: 13px;
         transition: all .4s;
 
-        &__section {
+        display: flex;
-            text-align: center;
-            display: inline-block;
-            width: calc(33.333% - 5px);
-            padding: 5px 0 7px 0;
 
-            &:not(:last-child) {
+        &__section {
-                margin-right: 5px;
+            // outline: 1px dotted orange;
-            }
+
+            flex-grow: 1;
+
+            text-align: center;
+            padding: 5px 0 7px 0;
         }
 
         &__preparefloating {

src/app/services/mastodon.service.ts

@@ -398,11 +398,13 @@ export class MastodonService {
     uploadMediaAttachment(account: AccountInfo, file: File, description: string): Promise<Attachment> {
         let input = new FormData();
         input.append('file', file);
+
         if (description !== null && description !== undefined) {
             input.append('description', description);
         } else {
             input.append('description', '');
         }
+
         const route = `https://${account.instance}${this.apiRoutes.uploadMediaAttachment}`;
         const headers = new HttpHeaders({ 'Authorization': `Bearer ${account.token.access_token}` });
         return this.httpClient.post<Attachment>(route, input, { headers: headers }).toPromise();
@@ -411,7 +413,13 @@ export class MastodonService {
     //TODO: add focus support
     updateMediaAttachment(account: AccountInfo, mediaId: string, description: string): Promise<Attachment> {
         let input = new FormData();
-        input.append('description', description);
+        
+        if (description !== null && description !== undefined) {
+            input.append('description', description);
+        } else {
+            input.append('description', '');
+        }
+
         const route = `https://${account.instance}${this.apiRoutes.updateMediaAttachment.replace('{0}', mediaId)}`;
         const headers = new HttpHeaders({ 'Authorization': `Bearer ${account.token.access_token}` });
         return this.httpClient.put<Attachment>(route, input, { headers: headers }).toPromise();