created account component

src/app/app.module.ts

@@ -85,6 +85,7 @@ import { BookmarksComponent } from './components/floating-column/manage-account/
 import { AttachementImageComponent } from './components/stream/status/attachements/attachement-image/attachement-image.component';
 import { EnsureHttpsPipe } from './pipes/ensure-https.pipe';
 import { UserFollowsComponent } from './components/stream/user-follows/user-follows.component';
+import { AccountComponent } from './components/common/account/account.component';
 
 
 const routes: Routes = [
@@ -150,7 +151,8 @@ const routes: Routes = [
         BookmarksComponent,
         AttachementImageComponent,
         EnsureHttpsPipe,
-        UserFollowsComponent
+        UserFollowsComponent,
+        AccountComponent
     ],
     entryComponents: [
         EmojiPickerComponent

src/app/components/common/account/account.component.html

@@ -0,0 +1,5 @@
+<a href class="account" title="open account" (click)="selected()">
+    <img src="{{account.avatar}}" class="account__avatar" />
+    <div class="account__name">{{ account.username }}</div>
+    <div class="account__fullhandle">@{{ account.acct }}</div>
+</a>

src/app/components/common/account/account.component.scss

@@ -0,0 +1,40 @@
+@import "variables";
+@import "mixins";
+
+.account {
+    display: block;
+    color: white;
+    border-radius: 2px;
+    transition: all .3s; 
+    border-top: 1px solid $separator-color;
+
+    &:last-of-type {
+        border-bottom: 1px solid $separator-color;
+    }
+
+    &__avatar {
+        width: 40px;
+        margin: 5px 10px 5px 5px;
+        float: left;
+        border-radius: 2px;
+    }
+
+    &__name {
+        margin: 7px 0 0 0;
+    }
+
+    &__fullhandle {
+        margin: 0 0 5px 0;
+        color: $status-secondary-color;
+        transition: all .3s;
+    }
+
+    &:hover,
+    &:hover &__fullhandle {
+        color: white;
+        text-decoration: none;
+        background-color: $button-background-color-hover;
+    }
+
+    @include clearfix;
+}

src/app/components/common/account/account.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AccountComponent } from './account.component';
+
+xdescribe('AccountComponent', () => {
+  let component: AccountComponent;
+  let fixture: ComponentFixture<AccountComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AccountComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AccountComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/common/account/account.component.ts

@@ -0,0 +1,24 @@
+import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';
+
+import { Account } from '../../../services/models/mastodon.interfaces';
+
+@Component({
+    selector: 'app-account',
+    templateUrl: './account.component.html',
+    styleUrls: ['./account.component.scss']
+})
+export class AccountComponent implements OnInit {
+
+    @Input() account: Account;
+    @Output() accountSelected = new EventEmitter<Account>();
+
+    constructor() { }
+
+    ngOnInit() {
+    }
+
+    selected(): boolean{
+        this.accountSelected.next(this.account);
+        return false;
+    }
+}

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

@@ -15,12 +15,17 @@
 
         <div *ngIf="accounts.length > 0" class="search-results">
             <h3 class="search-results__title">Accounts</h3>
-            <a href *ngFor="let account of accounts" class="account" title="open account"
+
+            <app-account *ngFor="let account of accounts"
+                [account]="account"
+                (accountSelected)="processAndBrowseAccount($event)"></app-account>
+
+            <!-- <a href *ngFor="let account of accounts" class="account" title="open account"
                 (click)="processAndBrowseAccount(account)">
                 <img src="{{account.avatar}}" class="account__avatar" />
                 <div class="account__name">{{ account.username }}</div>
                 <div class="account__fullhandle">@{{ account.acct }}</div>
-            </a>
+            </a> -->
         </div>
 
         <div *ngIf="hashtags.length > 0" class="search-results">

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

@@ -135,42 +135,4 @@ $search-form-height: 70px;
 
 .account {
     display: block;
-    color: white;
-    border-radius: 2px;
-    transition: all .3s; // &:hover &__name {
-    //     text-decoration: underline;
-    // }
-    border-top: 1px solid $separator-color;
-
-    &:last-of-type {
-        border-bottom: 1px solid $separator-color;
-    }
-
-    &__avatar {
-        width: 40px;
-        margin: 5px 10px 5px 5px;
-        float: left;
-        border-radius: 2px;
-    }
-
-    &__name {
-        margin: 7px 0 0 0;
-    }
-
-    &__fullhandle {
-        margin: 0 0 5px 0;
-        color: $status-secondary-color;
-        transition: all .3s; // &:hover {
-        //     color: white;
-        // }
-    }
-
-    &:hover,
-    &:hover &__fullhandle {
-        color: white;
-        text-decoration: none;
-        background-color: $button-background-color-hover;
-    }
-
-    @include clearfix;
 }