From 4cf824caca1da102f1da29602011b4cc6f480039 Mon Sep 17 00:00:00 2001
From: Nicolas Constant <github@nicolas-constant.com>
Date: Mon, 5 Aug 2019 18:42:06 -0400
Subject: [PATCH] added moved information in profile

---
 .../user-profile/user-profile.component.html  | 27 ++++++++++---------
 .../user-profile/user-profile.component.scss  | 27 +++++++++++++++++++
 .../user-profile/user-profile.component.ts    |  3 ++-
 .../services/models/mastodon.interfaces.ts    |  2 +-
 4 files changed, 44 insertions(+), 15 deletions(-)

diff --git a/src/app/components/stream/user-profile/user-profile.component.html b/src/app/components/stream/user-profile/user-profile.component.html
index 09e4a138..4083c9fa 100644
--- a/src/app/components/stream/user-profile/user-profile.component.html
+++ b/src/app/components/stream/user-profile/user-profile.component.html
@@ -1,18 +1,22 @@
 <div class="profile flexcroll" #statusstream (scroll)="onScroll()">
     <app-waiting-animation *ngIf="isLoading" class="waiting-icon"></app-waiting-animation>
 
+    <div class="profile__moved" *ngIf="displayedAccount && displayedAccount.moved">
+        {{displayedAccount | accountEmoji }} has moved to <a href (click)="browseAccount(displayedAccount.moved.acct)" class="profile__moved--link" title="open @{{displayedAccount.moved.acct }}">@{{displayedAccount.moved.acct }}</a>
+    </div>
 
     <div *ngIf="displayedAccount" class="profile-header"
         [ngStyle]="{'background-image':'url('+displayedAccount.header+')'}">
         <div class="profile-header__inner">
             <a href (click)="showAvatar(displayedAccount.avatar)" (auxclick)="openAccount()" title="open avatar">
-                <img class="profile-header__avatar" src="{{displayedAccount.avatar}}" alt="header" />
+                <img class="profile-header__avatar" [class.profile__disabled]="displayedAccount.moved"
+                    src="{{displayedAccount.avatar}}" alt="header" />
             </a>
             <h2 class="profile-header__display-name" innerHTML="{{displayedAccount | accountEmoji }}"></h2>
             <h2 class="profile-header__fullhandle"><a href="{{displayedAccount.url}}"
                     target="_blank">@{{displayedAccount.acct}}</a></h2>
 
-            <div class="profile-header__follow" *ngIf="relationship">
+            <div class="profile-header__follow" *ngIf="relationship && !displayedAccount.moved">
                 <button class="profile-header__follow--button profile-header__follow--unfollowed" title="follow"
                     (click)="follow()" *ngIf="!relationship.following && !relationship.requested">
                     <fa-icon [icon]="faUserRegular"></fa-icon>
@@ -26,17 +30,18 @@
                     <fa-icon [icon]="faHourglassHalf"></fa-icon>
                 </button>
             </div>
-            <div class="profile-header__state" *ngIf="relationship">
+            <div class="profile-header__state" *ngIf="relationship && !displayedAccount.moved">
                 <div class="profile-header__state--data" *ngIf="relationship.followed_by">follows you</div>
                 <div class="profile-header__state--data" *ngIf="relationship.blocking">blocked</div>
                 <div class="profile-header__state--data" *ngIf="relationship.blocked_by">blocks you</div>
                 <div class="profile-header__state--data" *ngIf="relationship.domain_blocking">domain blocked</div>
                 <div class="profile-header__state--data" *ngIf="relationship.muting">muted</div>
-                <div class="profile-header__state--data" *ngIf="relationship.muting_notifications">notifications muted</div>
+                <div class="profile-header__state--data" *ngIf="relationship.muting_notifications">notifications muted
+                </div>
             </div>
-
         </div>
     </div>
+
     <div class="profile-sub-header ">
         <div *ngIf="displayedAccount && hasNote" class="profile-description">
             <app-databinded-text class="profile-description__content" [textIsSelectable]="false" [text]="note"
@@ -60,18 +65,14 @@
             </div>
 
             <div *ngFor="let statusWrapper of pinnedStatuses">
-                <app-status [statusWrapper]="statusWrapper" 
-                    (browseHashtagEvent)="browseHashtag($event)"
-                    (browseAccountEvent)="browseAccount($event)" 
-                    (browseThreadEvent)="browseThread($event)">
+                <app-status [statusWrapper]="statusWrapper" (browseHashtagEvent)="browseHashtag($event)"
+                    (browseAccountEvent)="browseAccount($event)" (browseThreadEvent)="browseThread($event)">
                 </app-status>
             </div>
 
             <div *ngFor="let statusWrapper of statuses">
-                <app-status [statusWrapper]="statusWrapper" 
-                    (browseHashtagEvent)="browseHashtag($event)"
-                    (browseAccountEvent)="browseAccount($event)" 
-                    (browseThreadEvent)="browseThread($event)">
+                <app-status [statusWrapper]="statusWrapper" (browseHashtagEvent)="browseHashtag($event)"
+                    (browseAccountEvent)="browseAccount($event)" (browseThreadEvent)="browseThread($event)">
                 </app-status>
             </div>
 
diff --git a/src/app/components/stream/user-profile/user-profile.component.scss b/src/app/components/stream/user-profile/user-profile.component.scss
index 95db8ce5..c52e1fd7 100644
--- a/src/app/components/stream/user-profile/user-profile.component.scss
+++ b/src/app/components/stream/user-profile/user-profile.component.scss
@@ -8,6 +8,33 @@ $header-height: 160px;
     // overflow: auto;
     height: calc(100%);
     overflow: auto;
+
+    &__moved {
+        padding: 5px;
+        text-align: center;        
+
+        &--link {
+            transition: .2s;
+            color: white;
+            display: inline-block;
+            max-width: calc(100%);
+            text-overflow: ellipsis;
+            overflow: hidden;
+
+            &:hover {
+                color: rgb(255, 190, 71);
+            }
+        }
+    }
+
+    &__disabled {
+        filter: gray; 
+        -webkit-filter: grayscale(100%);
+        -moz-filter:    grayscale(100%);
+        -ms-filter:     grayscale(100%);
+        -o-filter:      grayscale(100%);
+    }
+
     &-header {
         background-size: cover;
         position: relative; // height: 140px;
diff --git a/src/app/components/stream/user-profile/user-profile.component.ts b/src/app/components/stream/user-profile/user-profile.component.ts
index 078351db..29aeb69f 100644
--- a/src/app/components/stream/user-profile/user-profile.component.ts
+++ b/src/app/components/stream/user-profile/user-profile.component.ts
@@ -196,8 +196,9 @@ export class UserProfileComponent implements OnInit {
         this.load(this.lastAccountName);
     }
 
-    browseAccount(accountName: string): void {
+    browseAccount(accountName: string): boolean {
         this.browseAccountEvent.next(accountName);
+        return false;
     }
 
     browseHashtag(hashtag: string): void {
diff --git a/src/app/services/models/mastodon.interfaces.ts b/src/app/services/models/mastodon.interfaces.ts
index 41dbe107..48e4cb3b 100644
--- a/src/app/services/models/mastodon.interfaces.ts
+++ b/src/app/services/models/mastodon.interfaces.ts
@@ -38,7 +38,7 @@ export interface Account {
     header: string;
     header_static: string;
     emojis: Emoji[];
-    moved: boolean;
+    moved: Account;
     fields: Field[];
     bot: boolean;
     source: AccountInfo;