merge: a couple of UX improvements

Author: peterpeterparker

docs/docs/deck/app-deck-pager/app-deck-pager.md

@@ -4,16 +4,18 @@
 
 Also worth to notice that the pager inherits per default the document and deck direction (LTR or RTL for example).
 
-- [Show or hide](#app-deck-pager-show-or-hide)
+- [Deck](#app-deck-pager-deck)
 - [Customization](#app-deck-pager-customization)
 
 ## Show or hide
 
-The show or hide options of the pager are available on the `<deckgo-deck>` element.
+To show or hide the pager, a CSS4 variable has to be set on the `<deckgo-deck>` element. Two more options are also available when set on this element.
 
-| Attribute                      | Type   | Default   | Description   |
-| -------------------------- |-----------------|-----------------|-----------------|
-| pagerPercentage | boolean | true | Show or hide the progression in percentage inside the pager |
+| Attribute                      | Default   | Description   |
+| -------------------------- |-----------------|-----------------|
+| --pager-display | | The display property of the pager. Set to `none` to hide it. |
+| --pager-position-left | | The left attribute of the absolute positioning of the pager over the deck |
+| --pager-position-right | | The right attribute of the absolute positioning of the pager over the deck |
 
 ## Customization
 
@@ -31,8 +33,9 @@ The following style options are available to style the pager:
 | --pager-text-size | 0.5em | |
 | --pager-stroke-outer-width | 2.8 | |
 | --pager-stroke-inner-width | 1.8 | |
-| --pager-position-left | | |
-| --pager-position-right | | |
-| --pager-display | | To hide the pager |
+| --pager-text-percentage-display | hidden | Set to `block` to display a progression with percentage (for example: 35%) |
+| --pager-text-slides-display | hidden | Set to `block` to display a progression as slides' count (for example: 2/15) |
+
+Note: of course if you would display both `--pager-text-percentage-display` and `--pager-text-slides-display` it would be a weird display, use just one at once.
 
 [DeckDeckGo]: https://deckdeckgo.com

docs/src/app/pages/docs/deck/app-deck-pager/app-deck-pager.tsx

@@ -34,25 +34,33 @@ export class AppDeckPager {
 <p><a href="https://deckdeckgo.com">DeckDeckGo</a> will per default display a pager in form of a progress circle bar. It&#39;s possible to hide it or to customize the following various style options.</p>
 <p>Also worth to notice that the pager inherits per default the document and deck direction (LTR or RTL for example).</p>
 <ul>
-<li><a href="#app-deck-pager-show-or-hide">Show or hide</a></li>
+<li><a href="#app-deck-pager-deck">Deck</a></li>
 <li><a href="#app-deck-pager-customization">Customization</a></li>
 </ul>
 <h2 id="app-deck-pager-show-or-hide">Show or hide</h2>
-<p>The show or hide options of the pager are available on the <code>&lt;deckgo-deck&gt;</code> element.</p>
+<p>To show or hide the pager, a CSS4 variable has to be set on the <code>&lt;deckgo-deck&gt;</code> element. Two more options are also available when set on this element.</p>
 <table>
 <thead>
 <tr>
 <th>Attribute</th>
-<th>Type</th>
 <th>Default</th>
 <th>Description</th>
 </tr>
 </thead>
 <tbody><tr>
-<td>pagerPercentage</td>
-<td>boolean</td>
-<td>true</td>
-<td>Show or hide the progression in percentage inside the pager</td>
+<td>--pager-display</td>
+<td></td>
+<td>The display property of the pager. Set to <code>none</code> to hide it.</td>
+</tr>
+<tr>
+<td>--pager-position-left</td>
+<td></td>
+<td>The left attribute of the absolute positioning of the pager over the deck</td>
+</tr>
+<tr>
+<td>--pager-position-right</td>
+<td></td>
+<td>The right attribute of the absolute positioning of the pager over the deck</td>
 </tr>
 </tbody></table>
 <h2 id="app-deck-pager-customization">Customization</h2>
@@ -116,21 +124,17 @@ export class AppDeckPager {
 <td></td>
 </tr>
 <tr>
-<td>--pager-position-left</td>
-<td></td>
-<td></td>
-</tr>
-<tr>
-<td>--pager-position-right</td>
-<td></td>
-<td></td>
+<td>--pager-text-percentage-display</td>
+<td>hidden</td>
+<td>Set to <code>block</code> to display a progression with percentage (for example: 35%)</td>
 </tr>
 <tr>
-<td>--pager-display</td>
-<td></td>
-<td>To hide the pager</td>
+<td>--pager-text-slides-display</td>
+<td>hidden</td>
+<td>Set to <code>block</code> to display a progression as slides&#39; count (for example: 2/15)</td>
 </tr>
 </tbody></table>
+<p>Note: of course if you would display both <code>--pager-text-percentage-display</code> and <code>--pager-text-slides-display</code> it would be a weird display, use just one at once.</p>
 </main>
 
         <app-footer></app-footer>

studio/src/app/components/editor/app-add-slide-action/app-add-slide-action.tsx

@@ -40,10 +40,10 @@ export class AppAddSlideAction {
     }
 
     render() {
-        return <ion-button onClick={(e: UIEvent) => this.openSlideAdd(e)} color="primary" shape="round" disabled={this.deckBusy}
-                           size="small" fill="solid">
+        return <ion-tab-button onClick={(e: UIEvent) => this.openSlideAdd(e)} color="primary" disabled={this.deckBusy} mode="md">
+            <ion-icon name="add"></ion-icon>
             <ion-label>Add slide</ion-label>
-        </ion-button>;
+        </ion-tab-button>;
     }
 
 }

studio/src/app/handlers/editor/events/deck/deck-events.handler.tsx

@@ -101,6 +101,7 @@ export class DeckEventsHandler {
 
     private onSlidesDidLoad = async ($event: CustomEvent) => {
         if ($event) {
+            await this.initSlideSize();
             await this.slideToLastSlide();
         }
     };
@@ -589,4 +590,18 @@ export class DeckEventsHandler {
             resolve();
         });
     }
+
+    initSlideSize(): Promise<void> {
+        return new Promise<void>(async (resolve) => {
+            const deck: HTMLElement = this.el.querySelector('deckgo-deck');
+
+            if (!deck) {
+                return;
+            }
+
+            await (deck as any).initSlideSize();
+
+            resolve();
+        });
+    }
 }

studio/src/app/handlers/editor/events/editor/editor-events.handler.tsx

@@ -6,7 +6,12 @@ export class EditorEventsHandler {
         return new Promise<void>(async (resolve) => {
             this.el = el;
 
-            this.el.addEventListener('keyup', this.onKeyUp, false);
+            const deck: HTMLElement = this.el.querySelector('deckgo-deck');
+
+            if (deck) {
+                deck.addEventListener('keyup', this.onKeyUp, false);
+            }
+
             this.el.addEventListener('blockSlide', this.onBlockSlide, false);
             document.addEventListener('keydown', this.onKeyDown, false);
 
@@ -15,7 +20,12 @@ export class EditorEventsHandler {
     }
 
     destroy() {
-        this.el.removeEventListener('keyup', this.onKeyUp, true);
+        const deck: HTMLElement = this.el.querySelector('deckgo-deck');
+
+        if (deck) {
+            deck.removeEventListener('keyup', this.onKeyUp, true);
+        }
+
         this.el.removeEventListener('blockSlide', this.onBlockSlide, true);
         document.removeEventListener('keydown', this.onKeyDown, true);
     }

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

@@ -1,4 +1,4 @@
-import {Component, Listen, Element, Prop, h} from '@stencil/core';
+import {Component, Listen, Element, State, h} from '@stencil/core';
 
 @Component({
     tag: 'app-slide-navigate',
@@ -8,11 +8,13 @@ export class AppSlideNavigate {
 
     @Element() el: HTMLElement;
 
-    @Prop()
+    @State()
     slides: string[];
 
     async componentDidLoad() {
         history.pushState({modal: true}, null);
+
+        this.slides = await this.getSlidesTitle();
     }
 
     @Listen('popstate', { target: 'window' })
@@ -28,6 +30,47 @@ export class AppSlideNavigate {
         await (this.el.closest('ion-modal') as HTMLIonModalElement).dismiss(index);
     }
 
+    private getSlidesTitle(): Promise<string[]> {
+        return new Promise<string[]>((resolve) => {
+            if (!document) {
+                resolve();
+                return;
+            }
+
+            const results: string[] = [];
+
+            const slides: NodeListOf<HTMLElement> = document.querySelectorAll('deckgo-deck > *');
+
+            if (slides) {
+                for (const slide of Array.from(slides)) {
+                    if (slide.tagName && slide.tagName.toLowerCase().indexOf('deckgo-slide') > -1) {
+                        const title: HTMLElement = slide.querySelector('[slot="title"]');
+
+                        if (title && title.textContent !== '') {
+                            results.push(title.textContent);
+                        } else {
+                            const start: HTMLElement = slide.querySelector('[slot="start"],[slot="header"]');
+
+                            if (start && start.textContent !== '') {
+                                results.push(start.textContent);
+                            } else {
+                                const end: HTMLElement = slide.querySelector('[slot="end"],[slot="footer"]');
+
+                                if (end && end.textContent !== '') {
+                                    results.push(end.textContent);
+                                } else {
+                                    results.push('');
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+
+            resolve(results);
+        });
+    }
+
     render() {
         return [
             <ion-header>

studio/src/app/pages/core/about/app-about/app-about.tsx

@@ -17,9 +17,9 @@ export class AppAbout {
                     <ion-grid>
                         <ion-row>
                             <ion-col size="12" size-md="6">
-                                <h3 class="padding-top">Edit anywhere, display everywhere</h3>
+                                <h3 class="ion-padding-top">Edit anywhere, display everywhere</h3>
 
-                                <p class="padding-top">DeckDeckGo aims to be the open source web editor for presentations.</p>
+                                <p class="ion-padding-top">DeckDeckGo aims to be the open source web editor for presentations.</p>
 
                                 <p>What makes it different 🤔? Every presentations published with DeckDeckGo are standalone <strong>Progressive Web Apps</strong> 🚀</p>