feat: add new navbar onboarding (#402)

marie-j · Joffrey LEVEUGLE · commit df14e7e6f9be · 2019-04-30T16:47:29.000+02:00
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -9,7 +9,7 @@ module.exports = {
     jquery: true,
   },
   globals: {
-    d3: true,
+    d3: true
   },
   rules: {
     'no-bitwise': ['error', { allow: ['~'] }],
diff --git a/packages/manager/apps/public-cloud/.eslintrc.js b/packages/manager/apps/public-cloud/.eslintrc.js
@@ -1,5 +1,6 @@
 module.exports = {
   "globals": {
     "__FEEDBACK_URL__": true,
+    Tour: true,
   },
 };
diff --git a/packages/manager/apps/public-cloud/package.json b/packages/manager/apps/public-cloud/package.json
@@ -47,6 +47,7 @@
     "angular-translate": "^2.18.1",
     "angular-ui-bootstrap": "^1.3.3",
     "angular-ui-validate": "^1.2.3",
+    "bootstrap-tour": "^0.12.0",
     "bootstrap4": "twbs/bootstrap#v4.0.0",
     "font-awesome": "^4.0.0",
     "jquery": "^2.1.3",
diff --git a/packages/manager/apps/public-cloud/src/assets/theme/_icons.less b/packages/manager/apps/public-cloud/src/assets/theme/_icons.less
@@ -0,0 +1,5 @@
+@import './_variables.less';
+
+.oui-icon {
+  color: @primary-color;
+}
diff --git a/packages/manager/apps/public-cloud/src/assets/theme/_variables.less b/packages/manager/apps/public-cloud/src/assets/theme/_variables.less
@@ -4,6 +4,7 @@
 @background-color: #fff;
 @light-color: #fff;
 @primary-color: rgb(40, 89, 192);
+@secondary-color: rgb(71, 255, 250);
 @text-color: rgb(17,63,109);
 
 // Success
diff --git a/packages/manager/apps/public-cloud/src/assets/theme/index.less b/packages/manager/apps/public-cloud/src/assets/theme/index.less
@@ -1,5 +1,6 @@
 .ovhstack {
   @import './_button.less';
+  @import './_icons.less';
   @import './_input.less';
   @import './_link.less';
   @import './_message.less';
diff --git a/packages/manager/apps/public-cloud/src/components/walkMe/index.js b/packages/manager/apps/public-cloud/src/components/walkMe/index.js
@@ -0,0 +1,24 @@
+import angular from 'angular';
+import translate from 'angular-translate';
+import ngOvhUserPref from '@ovh-ux/ng-ovh-user-pref';
+
+/* eslint-disable import/no-webpack-loader-syntax, import/extensions */
+import 'script-loader!bootstrap-tour/build/js/bootstrap-tour-standalone.min.js';
+/* eslint-enable import/no-webpack-loader-syntax, import/extensions */
+
+import 'bootstrap-tour/build/css/bootstrap-tour.min.css';
+import './walkme.less';
+
+import service from './walkme.service';
+
+const moduleName = 'publicCloudWalkMe';
+
+angular
+  .module(moduleName, [
+    ngOvhUserPref,
+    translate,
+  ])
+  .service('WalkMe', service)
+  .run(/* @ngTranslationsInject:json ./translations */);
+
+export default moduleName;
diff --git a/packages/manager/apps/public-cloud/src/components/walkMe/template.class.js b/packages/manager/apps/public-cloud/src/components/walkMe/template.class.js
@@ -0,0 +1,15 @@
+import indicator from './templates/indicator.html';
+import nextButton from './templates/nextButton.html';
+import prevButton from './templates/prevButton.html';
+
+export default class WalkMeTemplate {
+  static getNavigation(currentIndex, steps) {
+    return `
+      ${prevButton.replace('{{ visibility }}', currentIndex === 0 ? 'invisible' : 'visible')}
+      <div class="oui-slideshow__indicators mr-4 text-center">
+        ${steps.map((step, index) => indicator.replace('{{ id }}', index)).join('')}
+      </div>
+      ${nextButton.replace('{{ visibility }}', currentIndex === steps.length - 1 ? 'invisible' : 'visible')}
+    `;
+  }
+}
diff --git a/packages/manager/apps/public-cloud/src/components/walkMe/templates/indicator.html b/packages/manager/apps/public-cloud/src/components/walkMe/templates/indicator.html
@@ -0,0 +1 @@
+<div class="walkme-indicator" id="indicator-{{ id }}"></div>
diff --git a/packages/manager/apps/public-cloud/src/components/walkMe/templates/nextButton.html b/packages/manager/apps/public-cloud/src/components/walkMe/templates/nextButton.html
@@ -0,0 +1,3 @@
+<button class="oui-button oui-button_icon-alone {{ visibility }} mr-0" data-role="next">
+    <span class="oui-icon oui-icon-arrow-right_extra-thin"></span>
+</button>
diff --git a/packages/manager/apps/public-cloud/src/components/walkMe/templates/popover.html b/packages/manager/apps/public-cloud/src/components/walkMe/templates/popover.html
@@ -0,0 +1,14 @@
+<div class="popover tour oui-popover visible">
+    <div class="walkme-line"></div>
+    <button class="oui-button oui-button_icon-alone walkme-close mr-2 pt-2 position-absolute" data-role="end">
+        <span class="oui-icon oui-icon-close_extra-thin"></span>
+    </button>
+    <div class="walkme-title mt-2 position-relative">
+        <h3 class="popover-title py-0 pl-2 border-bottom-0 bg-transparent"></h3>
+        <div class="walkme-bubble ml-3 position-absolute"></div>
+    </div>
+    <div class="popover-content oui-popover__content-container px-4 py-0"></div>
+    <div class="popover-navigation d-flex justify-content-between p-0 align-items-center ml-4 mr-2">
+        {{ navigation }}
+    </div>
+</div>
diff --git a/packages/manager/apps/public-cloud/src/components/walkMe/templates/prevButton.html b/packages/manager/apps/public-cloud/src/components/walkMe/templates/prevButton.html
@@ -0,0 +1,3 @@
+<button class="oui-button oui-button_icon-alone {{ visibility }}" data-role="prev">
+    <span class="oui-icon oui-icon-arrow-left_extra-thin"></span>
+</button>
diff --git a/packages/manager/apps/public-cloud/src/components/walkMe/translations/Messages_fr_FR.json b/packages/manager/apps/public-cloud/src/components/walkMe/translations/Messages_fr_FR.json
@@ -0,0 +1,6 @@
+{
+  "walkme_title": "Nouveau",
+  "walkme_content_server": "<strong>Votre menu a évolué pour vous faire gagner du temps !</strong> Retrouvez notamment vos produits VPS, serveurs dédiés et Private Cloud",
+  "walkme_content_server_mobile": "<strong>Votre menu a changé !</strong> Le nouvel onglet « server » regroupe tous vos produits serveurs dédiés, Private Cloud, etc…",
+  "walkme_content_cloud": "Retrouvez ici tous vos projets Public Cloud et profitez maintenant d'une <span class=\"oui-font-semibold\">nouvelle interface avec activation facilitée…</strong>"
+}
diff --git a/packages/manager/apps/public-cloud/src/components/walkMe/walkme.constants.js b/packages/manager/apps/public-cloud/src/components/walkMe/walkme.constants.js
@@ -0,0 +1,32 @@
+export const BREAKPOINT = 1024;
+
+export const DESKTOP_STEPS = [
+  {
+    element: '#server',
+    content: 'walkme_content_server',
+  },
+  {
+    element: '#public-cloud',
+    content: 'walkme_content_cloud',
+  },
+];
+
+export const KEY = 'PUBLIC_CLOUD_WALKME';
+
+export const MOBILE_STEPS = [
+  {
+    element: 'oui-navbar',
+    content: 'walkme_content_server_mobile',
+  },
+  {
+    element: 'oui-navbar',
+    content: 'walkme_content_cloud_mobile',
+  },
+];
+
+export default {
+  BREAKPOINT,
+  DESKTOP_STEPS,
+  KEY,
+  MOBILE_STEPS,
+};
diff --git a/packages/manager/apps/public-cloud/src/components/walkMe/walkme.less b/packages/manager/apps/public-cloud/src/components/walkMe/walkme.less
@@ -0,0 +1,92 @@
+@import "~ovh-ui-kit/packages/oui-color/_variables";
+@import '~ovh-ui-kit/packages/oui-responsive/responsive';
+@import '~ovh-ui-kit/packages/oui-typography/_constants.less';
+@import '../../assets/theme/_variables.less';
+
+.tour-public-cloud-walkme {
+  pointer-events: auto;
+  max-width: 305px;
+
+  .oui-icon::before {
+    font-size: 1.5rem;
+  }
+
+  .oui-font-semibold {
+    font-weight: @oui-font-semibold;
+  }
+
+  .walkme-close {
+    right: 0;
+    z-index: 1;
+  }
+
+  .walkme-title {
+    .popover-title {
+      background-color: #fff;
+      font-weight: @oui-font-semibold;
+      color: @oui-color-brand;
+      font-size: 1rem;
+    }
+
+    .walkme-bubble {
+      background-color: @secondary-color;
+      border-radius: 12px;
+      top: 5px;
+      width: 15%;
+      z-index: -1;
+      height: 70%;
+    }
+  }
+
+  .walkme-indicator {
+    background-color: @oui-color-iron;
+    border-radius: 50%;
+    height: 8px;
+    width: 8px;
+    padding: 4px;
+    margin: 0 1px;
+  }
+
+  .walkme-indicator_active {
+    background-color: @primary-color;
+  }
+
+  .popover-navigation .oui-button_icon-alone {
+    line-height: 1;
+  }
+}
+
+@media screen and (min-width: @oui-responsive-breakpoint-tablet) {
+  .tour-public-cloud-walkme {
+    margin-left: 100px;
+  }
+
+  .walkme-highlighted {
+    border: 3px solid @secondary-color;
+  }
+
+  .walkme-active-link {
+    .walkme-highlighted {
+      z-index: 1;
+    }
+  }
+
+  .walkme-link:not(.walkme-active-link) {
+    .walkme-highlighted {
+      border-bottom: 0;
+
+      + .oui-navbar-list__item {
+        border-bottom: 3px solid @secondary-color;
+      }
+    }
+  }
+
+  .walkme-line {
+    position: absolute;
+    border-right: 3px solid @secondary-color;
+    height: 25px;
+    top: -11px;
+    z-index: 1103;
+    width: 18%;
+  }
+}
diff --git a/packages/manager/apps/public-cloud/src/components/walkMe/walkme.service.js b/packages/manager/apps/public-cloud/src/components/walkMe/walkme.service.js
@@ -0,0 +1,81 @@
+import angular from 'angular';
+
+import popoverTemplate from './templates/popover.html';
+
+import WalkMeTemplate from './template.class';
+
+import {
+  BREAKPOINT, DESKTOP_STEPS, KEY, MOBILE_STEPS,
+} from './walkme.constants';
+
+export default class WalkMe {
+  /* @ngInject */
+  constructor($translate, $window, ovhUserPref) {
+    this.$translate = $translate;
+    this.$window = $window;
+
+    this.ovhUserPref = ovhUserPref;
+
+    this.initSteps();
+  }
+
+  initSteps() {
+    this.STEPS = this.$window.matchMedia(`(min-width: ${BREAKPOINT}px)`).matches
+      ? DESKTOP_STEPS : MOBILE_STEPS;
+  }
+
+  getTour() {
+    return new Tour({
+      name: 'public-cloud-walkme',
+      steps: this.getSteps(),
+      // AngularJS will not be interpreted within the popover
+      template: index => popoverTemplate.replace('{{ navigation }}', WalkMeTemplate.getNavigation(index, this.STEPS)),
+      storage: false,
+      onEnd: () => {
+        angular.element('.tour-backdrop').remove();
+        this.end();
+      },
+    });
+  }
+
+  getSteps() {
+    return this.STEPS.map(step => ({
+      element: step.element,
+      content: this.$translate.instant(step.content),
+      placement: 'bottom',
+      title: this.$translate.instant('walkme_title'),
+      onShown: (tour) => {
+        const index = tour.getCurrentStep();
+        angular.element(`#indicator-${index}`).addClass('walkme-indicator_active');
+        angular.element(step.element).addClass('walkme-highlighted');
+      },
+      onHide: () => {
+        angular.element(step.element).removeClass('walkme-highlighted');
+      },
+    }));
+  }
+
+  start(index = 0) {
+    const tour = this.getTour();
+    tour.init();
+    tour.start();
+    tour.goTo(index);
+
+    this.$window.onresize = () => {
+      // save current step before resizing
+      const currentIndex = tour.getCurrentStep();
+      tour.end();
+
+      if (this.$window.matchMedia(`(min-width: ${BREAKPOINT}px)`).matches) {
+        this.initSteps();
+        this.start(currentIndex);
+      }
+    };
+
+    return tour;
+  }
+
+  end() {
+    return this.ovhUserPref.assign(KEY, true);
+  }
+}
diff --git a/packages/manager/apps/public-cloud/src/index.controller.js b/packages/manager/apps/public-cloud/src/index.controller.js
@@ -1,16 +1,44 @@
+import angular from 'angular';
+
 import feedback from './feedback-icon.svg';
+import { BREAKPOINT, KEY } from './components/walkMe/walkme.constants';
 
 export default class PublicCloudController {
   /* @ngInject */
-  constructor($state, $transitions) {
+  constructor($scope, $state, $transitions, $window, ovhUserPref, WalkMe) {
     this.$state = $state;
     this.feedbackUrl = __FEEDBACK_URL__;
     this.feedback = feedback;
     this.$transitions = $transitions;
+    this.ovhUserPref = ovhUserPref;
+    this.WalkMe = WalkMe;
 
     this.$transitions.onSuccess({}, () => {
       this.shouldDisplaySidebar = $state.includes('pci.projects.project')
         && !$state.is('pci.projects.project.creating');
     });
+
+    $scope.$on('navbar.loaded', () => this.ovhUserPref.getValue(KEY)
+      .then(({ value }) => {
+        this.shouldShowWalkMe = value;
+      })
+      .catch(({ status }) => {
+        if (status === 404) {
+          this.shouldShowWalkMe = true;
+        }
+      })
+      .finally(() => {
+        // TODO : Remove matchMedia for mobile version
+        if (this.shouldShowWalkMe && $window.matchMedia(`(min-width: ${BREAKPOINT}px)`).matches) {
+          this.tour = this.WalkMe.start();
+          angular.element('oui-navbar').on('click', () => this.endWalkMe());
+        }
+      }));
+  }
+
+  endWalkMe() {
+    this.tour.end();
+    this.WalkMe.end();
+    this.shouldShowWalkMe = false;
   }
 }
diff --git a/packages/manager/apps/public-cloud/src/index.html b/packages/manager/apps/public-cloud/src/index.html
@@ -11,6 +11,7 @@
                 <ovh-manager-navbar data-navbar-options="{ universe: 'public-cloud' }"></ovh-manager-navbar>
             </div>
             <div class="w-100 h-100">
+                <div class="tour-backdrop w-100 h-100" data-ng-if="$ctrl.shouldShowWalkMe" data-ng-click="$ctrl.endWalkMe()"></div>
                 <div class="container-fluid h-100">
                     <div class="row h-100">
                         <div class="col-md-2 p-0 h-100 d-none d-md-flex flex-column" data-ng-if="$ctrl.shouldDisplaySidebar">
diff --git a/packages/manager/apps/public-cloud/src/index.js b/packages/manager/apps/public-cloud/src/index.js
diff --git a/packages/manager/modules/navbar/src/controller.js b/packages/manager/modules/navbar/src/controller.js
diff --git a/packages/manager/modules/navbar/src/template.html b/packages/manager/modules/navbar/src/template.html
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+<div class="walkme-indicator" id="indicator-{{ id }}"></div>`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+<button class="oui-button oui-button_icon-alone {{ visibility }} mr-0" data-role="next">`
	`2`	`+ <span class="oui-icon oui-icon-arrow-right_extra-thin"></span>`
	`3`	`+</button>`