Merge pull request #13 from NicolasConstant/feature_search-panel

Feature search panel

src/app/app.module.ts

@@ -32,6 +32,7 @@ import { AddNewAccountComponent } from './components/floating-column/add-new-acc
 import { SearchComponent } from './components/floating-column/search/search.component';
 import { AddNewStatusComponent } from "./components/floating-column/add-new-status/add-new-status.component";
 import { ManageAccountComponent } from "./components/floating-column/manage-account/manage-account.component";
+import { WaitingAnimationComponent } from './components/waiting-animation/waiting-animation.component';
 
 const routes: Routes = [
   { path: "", redirectTo: "home", pathMatch: "full" },
@@ -56,7 +57,8 @@ const routes: Routes = [
     AttachementsComponent,
     SettingsComponent,
     AddNewAccountComponent,
-    SearchComponent
+    SearchComponent,
+    WaitingAnimationComponent
   ],
   imports: [
     BrowserModule,

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

@@ -3,27 +3,29 @@
 
     <form (ngSubmit)="onSubmit()">
         <input type="text" class="form-control form-control-sm" [(ngModel)]="searchHandle" name="searchHandle"
-        placeholder="Search" autocomplete="off"/>
+            placeholder="Search" autocomplete="off" />
     </form>
 
+    <app-waiting-animation *ngIf="isLoading" class="waiting-icon"></app-waiting-animation>
+
     <div *ngIf="accounts.length > 0" class="search-results">
         <h3 class="search-results__title">Accounts</h3>
         <a href *ngFor="let account of accounts" class="account">
             <img src="{{account.avatar}}" class="account__avatar" />
             <div class="account__name">{{ account.username }}</div>
             <div class="account__fullhandle">@{{ account.acct }}</div>
-            
+
         </a>
-    </div> 
+    </div>
 
     <div *ngIf="statuses.length > 0" class="search-results">
         <h3 class="search-results__title">Statuses</h3>
     </div>
 
-    <div *ngIf="hashtags.length > 0"  class="search-results">
+    <div *ngIf="hashtags.length > 0" class="search-results">
         <h3 class="search-results__title">Hashtags</h3>
         <a href *ngFor="let hashtag of hashtags" class="search-results__hashtag">
             #{{ hashtag }}
-        </a> 
+        </a>
     </div>
 </div>

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

@@ -1,6 +1,7 @@
 @import "variables";
 @import "mixins";
 @import "panel";
+@import "commons";
 
 $separator-color:$color-primary;
 

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

@@ -18,6 +18,8 @@ export class SearchComponent implements OnInit {
     statuses: Status[] = [];
     hashtags: string[] = [];
 
+    isLoading: boolean;
+
     constructor(
         private readonly store: Store,
         private readonly mastodonService: MastodonService) { }
@@ -35,6 +37,7 @@ export class SearchComponent implements OnInit {
         this.accounts.length = 0;
         this.statuses.length = 0;
         this.hashtags.length = 0;
+        this.isLoading = true;
 
         console.warn(`search: ${data}`);
 
@@ -57,7 +60,8 @@ export class SearchComponent implements OnInit {
                         }
                     }
                 })
-                .catch((err) => console.error(err));
+                .catch((err) => console.error(err))
+                .then(() => { this.isLoading = false; });
         }
     }
 

src/app/components/waiting-animation/waiting-animation.component.html

@@ -0,0 +1,7 @@
+<!-- https://loading.io/css/ -->
+<div class="lds-ellipsis">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+</div>

src/app/components/waiting-animation/waiting-animation.component.scss

@@ -0,0 +1,67 @@
+//https://loading.io/css/
+.lds-ellipsis {
+    display: inline-block;
+    position: relative;
+    //width: 64px;    
+    //height: 64px;
+    width: 40px;
+    height: 20px;
+  }
+  .lds-ellipsis div {
+    position: absolute;
+    // top: 27px; 
+    // width: 11px;
+    // height: 11px;
+
+    // top: 27px; 
+    top: 8px; 
+    width: 5px;
+    height: 5px;
+
+    border-radius: 50%;
+    background: #fff;
+    animation-timing-function: cubic-bezier(0, 1, 1, 0);
+  }
+  .lds-ellipsis div:nth-child(1) {
+    left: 6px;
+    animation: lds-ellipsis1 0.6s infinite;
+  }
+  .lds-ellipsis div:nth-child(2) {
+    left: 6px;
+    animation: lds-ellipsis2 0.6s infinite;
+  }
+  .lds-ellipsis div:nth-child(3) {
+    left: 16px;
+    // left: 26px;
+    animation: lds-ellipsis2 0.6s infinite;
+  }
+  .lds-ellipsis div:nth-child(4) {
+    left: 25px;
+    // left: 45px;
+    animation: lds-ellipsis3 0.6s infinite;
+  }
+  @keyframes lds-ellipsis1 {
+    0% {
+      transform: scale(0);
+    }
+    100% {
+      transform: scale(1);
+    }
+  } 
+  @keyframes lds-ellipsis2 {
+    0% {
+      transform: translate(0, 0);
+    }
+    100% {
+      transform: translate(10px, 0);
+    }
+  }
+  @keyframes lds-ellipsis3 {
+    0% {
+      transform: scale(1);
+    }
+    100% {
+      transform: scale(0);
+    }
+  }
+  

src/app/components/waiting-animation/waiting-animation.component.spec.ts

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

src/app/components/waiting-animation/waiting-animation.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-waiting-animation',
+  templateUrl: './waiting-animation.component.html',
+  styleUrls: ['./waiting-animation.component.scss']
+})
+export class WaitingAnimationComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/index.html

@@ -2,24 +2,65 @@
 <html lang="en">
 
 <head>
-  <meta charset="utf-8">
+    <meta charset="utf-8">
-  <title>Sengi</title>
+    <title>Sengi</title>
-  <base href="./">
+    <base href="./">
 
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
+    <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
 
-  
 
+    <style>
+        .lds-ripple {
+            /* display: inline-block; */
+            margin: 30px auto;
+            position: relative;
+            width: 64px;
+            height: 64px;
+        }
+
+        .lds-ripple div {
+            position: absolute;
+            border: 4px solid #444f74;
+            opacity: 1;
+            border-radius: 50%;
+            animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
+        }
+
+        .lds-ripple div:nth-child(2) {
+            animation-delay: -0.5s;
+        }
+
+        @keyframes lds-ripple {
+            0% {
+                top: 28px;
+                left: 28px;
+                width: 0;
+                height: 0;
+                opacity: 1;
+            }
+
+            100% {
+                top: -1px;
+                left: -1px;
+                width: 58px;
+                height: 58px;
+                opacity: 0;
+            }
+        }
+    </style>
 </head>
 
 <body>
-  <app-root>
+    <app-root>
-    loading...
+        <div class="lds-ripple">
-  </app-root>
+            <div></div>
+            <div></div>
+        </div>
+    </app-root>
 
-  <script src="https://unpkg.com/ionicons@4.4.2/dist/ionicons.js"></script> 
+    <script src="https://unpkg.com/ionicons@4.4.2/dist/ionicons.js"></script>
 </body>
 
 </html>

src/sass/_commons.scss

@@ -0,0 +1,5 @@
+.waiting-icon {
+    width: 40px;
+    display: block;
+    margin:  5px auto;    
+}

src/sass/_panel.scss

@@ -1,4 +1,5 @@
 .panel{
+    width: 100%;
     padding: 10px 10px 0 7px;
     font-size: $small-font-size;
     &__title {
@@ -6,4 +7,4 @@
         text-transform: uppercase;
         margin: 6px 0 12px 0;
     }
-}
+}