feat: add an explanation of the photos history

Author: peterpeterparker

studio/src/app/popovers/editor/app-code/app-code.scss

@@ -1,4 +1,6 @@
 app-code {
+  @import "../../../../global/theme/editor/editor-info";
+
   h2 {
     color: var(--ion-color-primary);
   }
@@ -50,19 +52,5 @@ app-code {
     ion-label {
       margin: 16px 0 4px;
     }
-
-    button.info {
-      background: transparent;
-      border: 1px solid var(--ion-color-primary);
-      border-radius: 50%;
-      height: 1.5rem;
-      width: 1.5rem;
-      margin: 16px 16px 0;
-      padding: 0;
-
-      ion-icon {
-        color: var(--ion-color-primary);
-      }
-    }
   }
 }

studio/src/app/popovers/editor/app-image/app-image.scss

@@ -1,4 +1,6 @@
 app-image {
+  @import "../../../../global/theme/editor/editor-info";
+  
   h2 {
     color: var(--ion-color-primary);
   }

studio/src/app/popovers/editor/app-image/app-image.tsx

@@ -10,6 +10,8 @@ import {PhotoHistoryService} from '../../../services/editor/photo-history/photo-
 })
 export class AppImage {
 
+    @Prop({connect: 'ion-alert-controller'}) alertController: HTMLIonAlertControllerElement;
+
     @Element() el: HTMLElement;
 
     @Prop()
@@ -78,6 +80,21 @@ export class AppImage {
         });
     }
 
+    private selectApplyToAllDeck($event: CustomEvent) {
+        if ($event && $event.detail) {
+            this.applyToAllDeck = $event.detail.value;
+        }
+    }
+
+    private async presentHistoryInfo() {
+        const alert = await this.alertController.create({
+            message: 'The editor keeps track of the last 10 images you would have use in any of your presentations.<br/><br/>Select one to add it again quickly.',
+            buttons: ['Ok']
+        });
+
+        return await alert.present();
+    }
+
     render() {
         return [<div class="ion-padding"><h2>{this.deckOrSlide ? 'Background' : 'Image'}</h2></div>,
             <ion-list>
@@ -91,19 +108,18 @@ export class AppImage {
 
                 {this.renderDeleteAction()}
 
-                <ion-item-divider class="ion-padding-top"><ion-label>History</ion-label></ion-item-divider>
+                <ion-item-divider class="ion-padding-top">
+                    <ion-label>History</ion-label>
+                    <button slot="end" class="info" onClick={() => this.presentHistoryInfo()}>
+                        <ion-icon name="help"></ion-icon>
+                    </button>
+                </ion-item-divider>
 
                 {this.renderPhotosHistory()}
             </ion-list>
         ];
     }
 
-    private selectApplyToAllDeck($event: CustomEvent) {
-        if ($event && $event.detail) {
-            this.applyToAllDeck = $event.detail.value;
-        }
-    }
-
     private renderDeckOrSlide() {
         if (!this.deckOrSlide) {
             return undefined;

studio/src/global/theme/editor/editor-info.scss

@@ -0,0 +1,15 @@
+ion-item-divider {
+  button.info {
+    background: transparent;
+    border: 1px solid var(--ion-color-primary);
+    border-radius: 50%;
+    height: 1.5rem;
+    width: 1.5rem;
+    margin: 16px 16px 0;
+    padding: 0;
+
+    ion-icon {
+      color: var(--ion-color-primary);
+    }
+  }
+}