Feat/sidebar progress (#2630)

* feat: add sidebar of step names * feat: add sidebar for progress * feat: remove prompt phase from useCases * feat: use Confirm then Next on buttons throughout * feat: right align success cards with the buttons * fix: positioning of step markers to allow correct guttering
DiscipleTools · Dec 19, 2024 · 07bfc0d · 07bfc0d
1 parent e987631
commit 07bfc0d
Show file tree

Hide file tree

Showing 6 changed files with 118 additions and 37 deletions.
diff --git a/dt-core/admin/components/setup-wizard-keys.js b/dt-core/admin/components/setup-wizard-keys.js
@@ -41,6 +41,12 @@ export class SetupWizardKeys extends OpenLitElement {
   skip() {
     this.dispatchEvent(new CustomEvent('next'));
   }
+  nextLabel() {
+    if (this._finished) {
+      return 'Next';
+    }
+    return 'Confirm';
+  }
 
   render() {
     this._options.dt_mapbox_api_key = this.step.config.dt_mapbox_api_key;
@@ -222,15 +228,16 @@ export class SetupWizardKeys extends OpenLitElement {
             </tbody>
           </table>
           ${this._finished
-            ? html` <section class="card success">Keys saved</section> `
+            ? html` <section class="ms-auto card success">Keys saved</section> `
             : ''}
         </div>
         <setup-wizard-controls
           ?hideBack=${this.firstStep}
+          ?saving=${this._saving}
+          nextLabel=${this.nextLabel()}
           @next=${this.next}
           @back=${this.back}
           @skip=${this.skip}
-          ?saving=${this._saving}
         ></setup-wizard-controls>
       </div>
     `;

diff --git a/dt-core/admin/components/setup-wizard-modules.js b/dt-core/admin/components/setup-wizard-modules.js
@@ -65,7 +65,10 @@ export class SetupWizardModules extends OpenLitElement {
     this.dispatchEvent(new CustomEvent('next'));
   }
   nextLabel() {
-    return this.translations.next;
+    if (this.finished) {
+      return this.translations.next;
+    }
+    return this.translations.confirm;
   }
   toggleModule(key) {
     const checkbox = this.renderRoot.querySelector(`#${key}`);
@@ -143,7 +146,7 @@ export class SetupWizardModules extends OpenLitElement {
                 </section>
                 ${this.finished
                   ? html`
-                      <section class="card success">
+                      <section class="ms-auto card success">
                         <p>
                           <strong
                             >The modules you have chosen have been turned

diff --git a/dt-core/admin/components/setup-wizard-plugins.js b/dt-core/admin/components/setup-wizard-plugins.js
@@ -84,7 +84,7 @@ export class SetupWizardPlugins extends OpenLitElement {
     if (this.finished) {
       return 'Next';
     }
-    return 'Install and Activate Selected Plugins';
+    return 'Confirm';
   }
 
   render() {
@@ -167,7 +167,7 @@ export class SetupWizardPlugins extends OpenLitElement {
           ${
             this.finished
               ? html`
-                  <section class="card success">
+                  <section class="ms-auto card success">
                     Finished installing and activating plugins
                   </section>
                 `

diff --git a/dt-core/admin/components/setup-wizard-use-cases.js b/dt-core/admin/components/setup-wizard-use-cases.js
@@ -19,7 +19,7 @@ export class SetupWizardUseCases extends OpenLitElement {
 
   constructor() {
     super();
-    this.stage = 'prompt';
+    this.stage = 'work';
     this.data = window.setupWizardShare.data;
     this.translations = window.setupWizardShare.translations;
     this.availableModules = [];
@@ -56,18 +56,12 @@ export class SetupWizardUseCases extends OpenLitElement {
         this.stage = 'work';
         break;
       case 'work':
-        this.stage = 'prompt';
-        break;
-      case 'prompt':
         this.dispatchEvent(new CustomEvent('back'));
         break;
     }
   }
   next() {
     switch (this.stage) {
-      case 'prompt':
-        this.stage = 'work';
-        break;
       case 'work':
         this.saveOptions();
         this.stage = 'follow-up';
@@ -108,19 +102,7 @@ export class SetupWizardUseCases extends OpenLitElement {
       <div class="cover">
         <div class="content flow">
           <h2>Part 1: Use Cases</h2>
-          ${this.stage === 'prompt'
-            ? html`
-                <p>
-                  In the next step you will be able to choose between some
-                  common use cases of Disciple.Tools
-                </p>
-                <p>
-                  You will still be able to customize to your particular use
-                  case.
-                </p>
-              `
-            : ''}
-          ${this.stage === 'work'
+          ${this.stage === 'work' && this.useCases
             ? html`
                 <p>
                   Choose one or more of these use cases to tailor what parts of

diff --git a/dt-core/admin/components/setup-wizard.js b/dt-core/admin/components/setup-wizard.js
@@ -1,6 +1,7 @@
 import {
   html,
   css,
+  repeat,
   LitElement,
   staticHtml,
   unsafeStatic,
@@ -20,6 +21,7 @@ export class SetupWizard extends LitElement {
         --default-color: #efefef;
         --default-hover-color: #cdcdcd;
         --default-dark: #ababab;
+        --s1: 1rem;
       }
       /* Resets */
       /* Inherit fonts for inputs and buttons */
@@ -56,6 +58,10 @@ export class SetupWizard extends LitElement {
       p {
         max-width: 60ch;
       }
+      ul[role='list'],
+      ol[role='list'] {
+        list-style: none;
+      }
       button {
         border: none;
         padding: 0.5rem 1.5rem;
@@ -145,6 +151,25 @@ export class SetupWizard extends LitElement {
       .cover > :last-child:not(.content) {
         margin-block-end: 0;
       }
+      .with-sidebar {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--s1);
+      }
+
+      .with-sidebar > :first-child {
+        flex-grow: 1;
+      }
+
+      .with-sidebar > :last-child {
+        flex-basis: 0;
+        flex-grow: 999;
+        min-inline-size: 50%;
+      }
+      .center {
+        margin-left: auto;
+        margin-right: auto;
+      }
       /* Utilities */
       .ms-auto {
         margin-left: auto;
@@ -167,9 +192,27 @@ export class SetupWizard extends LitElement {
         padding: 1rem;
       }
       .sidebar {
-        background-color: grey;
-        color: white;
+        background-color: white;
         padding: 1rem;
+        border-radius: 10px;
+      }
+      .steps {
+        padding-left: 24px;
+      }
+      .step {
+        position: relative;
+      }
+      .step::before {
+        content: var(--svg-url, '');
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        height: 100%;
+        left: 0;
+        transform: translateX(-150%) scale(1.4);
+      }
+      .step[current]::before {
+        transform: translate(-210%) scale(1.4);
       }
       .btn-primary {
         background-color: var(--primary-color);
@@ -361,6 +404,7 @@ export class SetupWizard extends LitElement {
 
     this.translations = window.setupWizardShare.translations;
     this.adminUrl = window.setupWizardShare.admin_url;
+    this.imageUrl = window.setupWizardShare.image_url;
     this.steps = [];
     this.currentStepNumber = 0;
 
@@ -383,6 +427,27 @@ export class SetupWizard extends LitElement {
       this.steps = window.setupWizardShare.steps;
     }
   }
+  updated() {
+    const allSteps = this.renderRoot.querySelectorAll('.step') || [];
+    const completedSteps =
+      this.renderRoot.querySelectorAll('.step[completed]') || [];
+    const currentStep = this.renderRoot.querySelector('.step[current]');
+    allSteps.forEach((step) => {
+      step.style.setProperty('--svg-url', '');
+    });
+    completedSteps.forEach((step) => {
+      step.style.setProperty(
+        '--svg-url',
+        `url('${this.imageUrl + 'verified.svg'}')`,
+      );
+    });
+    if (currentStep) {
+      currentStep.style.setProperty(
+        '--svg-url',
+        `url('${this.imageUrl + 'chevron_right.svg'}')`,
+      );
+    }
+  }
 
   render() {
     return html`
@@ -393,10 +458,32 @@ export class SetupWizard extends LitElement {
           </button>
           <h2 class="me-auto">${this.translations.title}</h2>
         </div>
-        <div class="wizard">
-          ${this.isKitchenSink
-            ? this.kitchenSink()
-            : html` ${this.renderStep()} `}
+        <div class="with-sidebar">
+          <div class="sidebar">
+            <ul class="flow | steps" role="list">
+              ${repeat(
+                this.steps,
+                (step) => step.key,
+                (step, i) => {
+                  return html`
+                    <li
+                      class="step"
+                      ?completed=${i < this.currentStepNumber}
+                      ?current=${i === this.currentStepNumber}
+                      key=${step.key}
+                    >
+                      ${step.name}
+                    </li>
+                  `;
+                },
+              )}
+            </ul>
+          </div>
+          <div class="wizard">
+            ${this.isKitchenSink
+              ? this.kitchenSink()
+              : html` ${this.renderStep()} `}
+          </div>
         </div>
       </div>
     `;

diff --git a/dt-core/admin/menu/menu-setup-wizard.php b/dt-core/admin/menu/menu-setup-wizard.php
@@ -68,6 +68,7 @@ public function enqueue_scripts(){
             'steps' => $this->setup_wizard_steps(),
             'data' => $this->setup_wizard_data(),
             'admin_url' => admin_url(),
+            'image_url' => trailingslashit( get_template_directory_uri() ) . 'dt-assets/images/',
             'can_install_plugins' => current_user_can( 'install_plugins' ),
         ] );
     }
@@ -155,15 +156,15 @@ public function content() {
     }
 
     public function setup_wizard_steps() {
-        $bloginfo = get_bloginfo();
         $steps = [
             [
                 'key' => 'intro',
+                'name' => 'Intro',
                 'component' => 'setup-wizard-intro',
             ],
             [
                 'key' => 'choose_your_use_cases',
-                'name' => 'Choose your use cases',
+                'name' => 'Part 1: Use cases',
                 'component' => 'setup-wizard-use-cases',
                 'description' => 'How are you planning to use DT?',
                 'config' => [
@@ -174,17 +175,17 @@ public function setup_wizard_steps() {
             ],
             [
                 'key' => 'choose_your_modules',
-                'name' => 'Choose your modules',
+                'name' => 'Part 1: Modules',
                 'component' => 'setup-wizard-modules',
                 'description' => 'What modules do you want to use?',
             ],
             [
-                'name' => 'Plugins',
+                'name' => 'Part 2: Plugins',
                 'description' => 'Choose which plugins to install.',
                 'component' => 'setup-wizard-plugins',
             ],
             [
-                'name' => 'Site keys',
+                'name' => 'Part 3: Site keys',
                 'description' => 'Fill in some site details',
                 'component' => 'setup-wizard-keys',
                 'config' => [
@@ -194,6 +195,7 @@ public function setup_wizard_steps() {
             ],
             [
                 'key' => 'celebration',
+                'name' => 'Celebration',
                 'component' => 'setup-wizard-celebration',
             ]
         ];