page placeholder component

awmleer · Oct 15, 2018 · 8e1485c · 8e1485c
1 parent 1413f7a
commit 8e1485c
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 27 deletions.
diff --git a/src/components/components.module.ts b/src/components/components.module.ts
@@ -1,12 +1,19 @@
 import { NgModule } from '@angular/core';
 import { SearchBoxComponent } from './search-box/search-box';
 import {IonicModule} from "ionic-angular";
+import { PagePlaceholderComponent } from './page-placeholder/page-placeholder';
 
 @NgModule({
-	declarations: [SearchBoxComponent],
+	declarations: [
+	  SearchBoxComponent,
+    PagePlaceholderComponent,
+  ],
 	imports: [
     IonicModule,
   ],
-	exports: [SearchBoxComponent]
+	exports: [
+	  SearchBoxComponent,
+    PagePlaceholderComponent,
+  ]
 })
 export class ComponentsModule {}
diff --git a/src/components/page-placeholder/page-placeholder.html b/src/components/page-placeholder/page-placeholder.html
@@ -0,0 +1,4 @@
+<div class="placeholder">
+  <ion-icon [name]="icon"></ion-icon>
+  {{text}}
+</div>
diff --git a/src/components/page-placeholder/page-placeholder.scss b/src/components/page-placeholder/page-placeholder.scss
@@ -0,0 +1,13 @@
+page-placeholder {
+  div.placeholder{
+    width:100%;
+    text-align: center;
+    padding-top: 20vh;
+    color: #797979;
+    ion-icon{
+      font-size: 80px;
+      display: block;
+      margin-bottom: 40px;
+    }
+  }
+}
diff --git a/src/components/page-placeholder/page-placeholder.ts b/src/components/page-placeholder/page-placeholder.ts
@@ -0,0 +1,16 @@
+import {Component, Input} from '@angular/core';
+
+
+@Component({
+  selector: 'page-placeholder',
+  templateUrl: 'page-placeholder.html'
+})
+export class PagePlaceholderComponent {
+
+  @Input() icon: string;
+  @Input() text: string;
+
+  constructor() {
+  }
+
+}
diff --git a/src/pages/collection/collection.html b/src/pages/collection/collection.html
@@ -29,28 +29,15 @@ <h2>
         </span>
         </a>
       </div>
-      <div *ngIf="collections.length==0" class="placeholder">
-        <ion-icon name="ios-folder-open-outline"></ion-icon>
-        <br><br>
-        收藏夹空空如也
-      </div>
+      <page-placeholder *ngIf="collections.length==0" icon="ios-folder-open-outline" text="收藏夹空空如也"></page-placeholder>
     </ng-container>
     <ng-container *ngIf="collections === null">
-      <!--TODO separate this to ListPlaceholderComponent-->
-      <div class="placeholder">
-        <ion-icon name="ios-radio-outline"></ion-icon>
-        <br><br>
-        加载中
-      </div>
+      <page-placeholder icon="ios-radio-outline" text="加载中"></page-placeholder>
     </ng-container>
   </ng-container>
 
   <ng-container *ngIf="!accountSvc.user">
-    <div class="placeholder">
-      <ion-icon name="ios-cloud-circle-outline"></ion-icon>
-      <br><br>
-      登录后查看收藏夹
-    </div>
+    <page-placeholder icon="ios-cloud-circle-outline" text="登录后查看收藏夹"></page-placeholder>
   </ng-container>
 
 </ion-content>
diff --git a/src/pages/collection/collection.scss b/src/pages/collection/collection.scss
@@ -26,13 +26,4 @@ page-collection {
       color: #8b8b8b;
     }
   }
-  div.placeholder{
-    width:100%;
-    text-align: center;
-    padding-top: 20vh;
-    color: #797979;
-    ion-icon{
-      font-size: 80px;
-    }
-  }
 }