feat: update "jump to" to "slides"

Author: peterpeterparker

studio/src/app/components/editor/actions/app-editor-actions/app-editor-actions.tsx

@@ -217,8 +217,8 @@ export class AppEditorActions {
 
                 <ion-tab-button onClick={() => this.openSlideNavigate()} color="primary" class="wider-devices"
                                 mode="md">
-                    <ion-icon src="/assets/icons/chapters.svg"></ion-icon>
-                    <ion-label>Go to slide</ion-label>
+                    <ion-icon src="/assets/icons/ionicons/list.svg"></ion-icon>
+                    <ion-label>Slides</ion-label>
                 </ion-tab-button>
 
                 <ion-tab-button onClick={() => this.toggleFullScreenMode()} color="primary" class="wider-devices" mode="md">

studio/src/app/modals/editor/app-slide-navigate/app-slide-navigate.scss

@@ -1,7 +1,11 @@
 app-slide-navigate {
-  ion-list {
+  ion-reorder-group {
     ion-item {
       --border-color: transparent;
     }
   }
+
+  p {
+    font-size: var(--font-size-very-small);
+  }
 }

studio/src/app/modals/editor/app-slide-navigate/app-slide-navigate.tsx

@@ -96,10 +96,12 @@ export class AppSlideNavigate {
                             <ion-icon name="close"></ion-icon>
                         </ion-button>
                     </ion-buttons>
-                    <ion-title class="ion-text-uppercase">Go to slide</ion-title>
+                    <ion-title class="ion-text-uppercase">Slides</ion-title>
                 </ion-toolbar>
             </ion-header>,
             <ion-content class="ion-padding">
+                <p class="ion-padding-start ion-padding-end">Jump to a specific slide or change the order of your slides.</p>
+
                 <ion-reorder-group onIonItemReorder={($event: CustomEvent<ItemReorderEventDetail>) => this.onReorder($event)} disabled={!this.slides || this.slides.length <= 1}>
                     {this.renderSlides()}
                 </ion-reorder-group>
@@ -114,7 +116,7 @@ export class AppSlideNavigate {
 
                     const text = 'Slide ' + (i + 1) + (slideTitle ? ': ' + slideTitle : '');
 
-                    return <ion-item ion-item button onClick={() => this.jumpToSlide(i)}>
+                    return <ion-item ion-item button onClick={() => this.jumpToSlide(i)} detail={false}>
                         <ion-label>{text}</ion-label>
                         <ion-reorder slot="end"></ion-reorder>
                     </ion-item>

studio/src/app/popovers/editor/actions/app-more-actions/app-more-actions.tsx

@@ -31,7 +31,7 @@ export class AppMoreActions {
 
     render() {
         return <div class="ion-padding">
-            <a onClick={() => this.closePopover(MoreAction.JUMP_TO)}><p>Go to slide</p></a>
+            <a onClick={() => this.closePopover(MoreAction.JUMP_TO)}><p>Slides</p></a>
             {this.renderFullscreenOption()}
             <a onClick={() => this.closePopover(MoreAction.REMOTE)}><p>Remote control</p></a>
             <app-share-options onSelectedOption={($event: CustomEvent<MoreAction>) => this.closeSharePopover($event)}></app-share-options>