feat(#196): add a placeholder

Author: peterpeterparker

studio/src/app/modals/editor/app-custom-images/app-custom-images.scss

@@ -32,6 +32,30 @@ app-custom-images {
       }
     }
   }
+
+  div.photos-placeholder {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+
+    > div {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+
+      position: relative;
+
+      ion-icon {
+        font-size: 10rem;
+      }
+
+      ion-label, ion-icon {
+        color: var(--ion-color-medium);
+      }
+    }
+  }
 }
 
 ion-alert.custom-images {

studio/src/app/modals/editor/app-custom-images/app-custom-images.tsx

@@ -229,6 +229,8 @@ export class AppCustomImages {
                                   onSelectImage={($event: CustomEvent) => this.selectImage($event)}>
                 </app-image-columns>
 
+                {this.renderImagesPlaceHolder()}
+
                 <input type="file" accept="image/x-png,image/jpeg,image/gif" onChange={() => this.upload()}/>
 
                 <ion-infinite-scroll threshold="100px" disabled={this.disableInfiniteScroll}
@@ -249,6 +251,19 @@ export class AppCustomImages {
         ];
     }
 
+    private renderImagesPlaceHolder() {
+        if ((!this.imagesOdd || this.imagesOdd.length <= 0) && (!this.imagesEven || this.imagesEven.length <= 0)) {
+            return <div class="photos-placeholder">
+                <div>
+                    <ion-icon name="images"></ion-icon>
+                    <ion-label class="ion-text-center">Your collection of images is empty</ion-label>
+                </div>
+            </div>
+        } else {
+            return undefined;
+        }
+    }
+
     private renderToolbarAction() {
         if (!this.uploading) {
             return <ion-button onClick={() => this.uploadNewImage()} shape="round" color="tertiary">

studio/src/app/modals/editor/app-photo/app-photo.tsx

@@ -227,7 +227,7 @@ export class AppPhoto {
             return <div class="photos-placeholder">
                 <div>
                     <ion-icon name="images"></ion-icon>
-                    <ion-label>Photos by Unsplash</ion-label>
+                    <ion-label class="ion-text-center">Photos by Unsplash</ion-label>
                     {this.renderPlaceHolderSearching()}
                 </div>
             </div>