fix: fix responsive sidebar menu

marie-j · jleveugle · commit fb3456c39c39 · 2019-05-02T12:10:47.000+02:00
diff --git a/packages/manager/apps/public-cloud/package.json b/packages/manager/apps/public-cloud/package.json
@@ -20,6 +20,7 @@
     "@ovh-ux/manager-pci": "^0.1.0-alpha.0",
     "@ovh-ux/manager-telecom-styles": "^2.0.2",
     "@ovh-ux/ng-at-internet": "^4.0.0",
+    "@ovh-ux/ng-ovh-actions-menu": "^5.0.0-alpha.0",
     "@ovh-ux/ng-ovh-api-wrappers": "^3.0.0",
     "@ovh-ux/ng-ovh-cloud-universe-components": "^1.1.0-alpha.0",
     "@ovh-ux/ng-ovh-contacts": "^1.0.1",
@@ -47,6 +48,7 @@
     "angular-ui-bootstrap": "^1.3.3",
     "angular-ui-validate": "^1.2.3",
     "bootstrap-tour": "^0.12.0",
+    "angular-vs-repeat": "^2.0.13",
     "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/_navbar.less b/packages/manager/apps/public-cloud/src/assets/theme/_navbar.less
@@ -1,3 +1,4 @@
+@import "~ovh-ui-kit/packages/oui/_settings";
 @import "~ovh-ui-kit/packages/oui-color/_variables";
 @import "~ovh-ui-kit/packages/oui-icons/_icons";
 @import "~ovh-ui-kit/packages/oui-navbar/_variables";
@@ -35,6 +36,10 @@
     }
   }
 
+  .oui-navbar-toggler__hamburger span {
+    background: @primary-color;
+  }
+
   .oui-navbar-link {
     color: rgb(17, 63, 109);
 
@@ -77,6 +82,20 @@
     display: none;
   }
 
+  .oui-navbar-menu_toggle {
+    button.oui-navbar-link::after {
+      content: @oui-icon-index-chevron-right;
+      font-family: @oui-global-base-font-family-icon;
+      font-size: @oui-navbar-arrow-size;
+      color: @oui-navbar-arrow-color;
+      padding: 0;
+      position: absolute;
+      top: 50%;
+      right: @oui-navbar-arrow-spacing;
+      transform: translateY(-50%);
+    }
+  }
+
   // Languages menu
   &-menu {
     &_language &__item_active {
diff --git a/packages/manager/apps/public-cloud/src/assets/theme/_sidebar.less b/packages/manager/apps/public-cloud/src/assets/theme/_sidebar.less
@@ -1,3 +1,4 @@
+@import '~ovh-ui-kit/packages/oui-responsive/_variables.less';
 @import './_variables.less';
 
 cloud-sidebar { /* stylelint-disable-line */
@@ -6,9 +7,12 @@ cloud-sidebar { /* stylelint-disable-line */
   width: 100%;
   height: 100%;
   z-index: 1;
-  position: relative;
   box-shadow: 0 2pt 10pt rgba(40, 89, 192, 0.25);
 
+  .oui-navbar-backdrop_active {
+    z-index: 1;
+  }
+
   oui-clipboard { /* stylelint-disable-line */
     margin-bottom: 0;
 
@@ -90,6 +94,11 @@ cloud-sidebar { /* stylelint-disable-line */
     padding: 0 8pt;
     width: 100%;
     box-sizing: inherit;
+
+    .oui-sidebar-link_active,
+    .oui-sidebar-link[aria-expanded="true"] {
+      background-color: #fff;
+    }
   }
 
   .oui-sidebar-list__item {
@@ -173,6 +182,17 @@ cloud-sidebar { /* stylelint-disable-line */
           }
         }
       }
+
+      &_fixed {
+        opacity: 1;
+        position: relative;
+        transform: none;
+        box-shadow: none;
+      }
+
+      .oui-sidebar-menu__header {
+        display: none;
+      }
     }
   }
 }
diff --git a/packages/manager/apps/public-cloud/src/index.controller.js b/packages/manager/apps/public-cloud/src/index.controller.js
@@ -3,14 +3,21 @@ import angular from 'angular';
 import feedback from './feedback-icon.svg';
 import { BREAKPOINT, KEY } from './components/walkMe/walkme.constants';
 
+import options from './navbar.config';
+
 export default class PublicCloudController {
   /* @ngInject */
   constructor($scope, $window, ovhUserPref, WalkMe) {
+    this.$scope = $scope;
+    this.$window = $window;
     this.feedbackUrl = __FEEDBACK_URL__;
     this.feedback = feedback;
     this.ovhUserPref = ovhUserPref;
     this.WalkMe = WalkMe;
 
+
+    this.navbarOptions = options;
+
     $scope.$on('navbar.loaded', () => this.ovhUserPref.getValue(KEY)
       .then(({ value }) => {
         this.shouldShowWalkMe = value;
diff --git a/packages/manager/apps/public-cloud/src/index.html b/packages/manager/apps/public-cloud/src/index.html
@@ -8,7 +8,7 @@
     <body class="ovhstack h-100" style="overflow: hidden;">
         <div data-ng-app="ovhStack" data-ng-strict-di class="h-100 d-flex flex-column overflow-hidden" data-ng-controller="PublicCloudController as $ctrl">
             <div>
-                <ovh-manager-navbar data-navbar-options="{ universe: 'public-cloud' }"></ovh-manager-navbar>
+                <ovh-manager-navbar data-navbar-options="$ctrl.navbarOptions"></ovh-manager-navbar>
             </div>
             <div class="d-flex w-100 h-100 position-relative">
                 <div class="w-100 h-100 position-absolute" style="top: 0; left: 0;">
diff --git a/packages/manager/apps/public-cloud/src/navbar.config.js b/packages/manager/apps/public-cloud/src/navbar.config.js
@@ -0,0 +1,6 @@
+export default {
+  toggle: {
+    event: 'sidebar:loaded',
+  },
+  universe: 'public-cloud',
+};
diff --git a/packages/manager/modules/navbar/src/controller.js b/packages/manager/modules/navbar/src/controller.js
@@ -63,6 +63,25 @@ export default class {
           url: url || '#',
           isPrimary: !NON_PRIMARY_ITEMS.includes(name),
         }));
+        this.responsiveLinks = universes.map(({ universe: name, url }) => {
+          const link = ({
+            name,
+            title: this.$translate.instant(`navbar_universe_${name}`),
+            isPrimary: !NON_PRIMARY_ITEMS.includes(name),
+          });
+
+          if (name === this.navbarOptions.universe) {
+            link.click = () => {
+              this.toggleSidebar();
+              this.$scope.$emit('navbar:onUniverseClick');
+            };
+            link.isActive = true;
+          } else {
+            link.url = url || '#';
+          }
+
+          return link;
+        });
       });
   }
 
diff --git a/packages/manager/modules/navbar/src/template.html b/packages/manager/modules/navbar/src/template.html
@@ -27,7 +27,8 @@
     <oui-navbar-toggler data-ng-if="$ctrl.navbarOptions.toggle"
                         data-on-click="$ctrl.toggleSidebar()"
                         data-active="$ctrl.togglerActive"
-                        data-loading="$ctrl.togglerisLoading">
+                        data-loading="$ctrl.togglerisLoading"
+                        data-links="$ctrl.responsiveLinks">
     </oui-navbar-toggler>
 </oui-navbar>
 
diff --git a/packages/manager/modules/pci/src/projects/project/project.controller.js b/packages/manager/modules/pci/src/projects/project/project.controller.js
@@ -2,9 +2,11 @@ import { ACTIONS, LINKS } from './project.constants';
 
 export default class ProjectController {
   /* @ngInject */
-  constructor($state, $stateParams, OvhApiCloudProject) {
+  constructor($scope, $state, $stateParams, $transitions, OvhApiCloudProject) {
+    this.$scope = $scope;
     this.$state = $state;
     this.$stateParams = $stateParams;
+    this.$transitions = $transitions;
     this.OvhApiCloudProject = OvhApiCloudProject;
     this.loading = false;
 
@@ -16,6 +18,21 @@ export default class ProjectController {
 
   $ngInit() {
     this.loading = true;
+    this.isSidebarOpen = false;
+
+    this.$scope.$on('sidebar:toggle', () => {
+      this.isSidebarOpen = !this.isSidebarOpen;
+    });
+
+    this.$scope.$on('navbar:toggle', () => {
+      if (this.isSidebarOpen) {
+        this.isSidebarOpen = false;
+      }
+    });
+
+    this.$transitions.onStart({}, () => {
+      this.isSidebarOpen = false;
+    });
 
     return this.OvhApiCloudProject
       .v6()
diff --git a/packages/manager/modules/pci/src/projects/project/project.html b/packages/manager/modules/pci/src/projects/project/project.html
@@ -1,6 +1,9 @@
 <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">
+        <div class="col-md-2 p-0 h-100 d-md-flex flex-column"
+            data-ng-class="{
+                'd-none': !$ctrl.isSidebarOpen
+            }">
             <cloud-sidebar></cloud-sidebar>
         </div>
         <div class="h-100 position-relative col-md-10 p-0">
diff --git a/packages/manager/modules/pci/src/projects/project/sidebar/sidebar.controller.js b/packages/manager/modules/pci/src/projects/project/sidebar/sidebar.controller.js
@@ -16,6 +16,7 @@ export default class SidebarController {
   constructor(
     $translate,
     $rootScope,
+    $scope,
     $stateParams,
     $transitions,
     OvhApiServices,
@@ -25,6 +26,7 @@ export default class SidebarController {
     this.$translate = $translate;
     this.$transitions = $transitions;
     this.$rootScope = $rootScope;
+    this.$scope = $scope;
     this.$stateParams = $stateParams;
     this.OvhApiServices = OvhApiServices;
     this.OvhApiCloudProject = OvhApiCloudProject;
@@ -79,6 +81,7 @@ export default class SidebarController {
             }));
         })
         .finally(() => {
+          this.$rootScope.$broadcast('sidebar:loaded');
           this.isLoading = false;
         }),
     );
@@ -95,7 +98,7 @@ export default class SidebarController {
       this.isDisplayingProjectsList = false;
     });
 
-    this.$rootScope.$on('navbar:toggle', () => this.toggle());
+    this.$rootScope.$on('navbar:onUniverseClick', () => this.toggle());
   }
 
   buildMenu(services) {
@@ -177,6 +180,7 @@ export default class SidebarController {
   }
 
   toggle() {
+    this.$scope.$emit('sidebar:toggle');
     this.isOpen = !this.isOpen;
   }
 
diff --git a/packages/manager/modules/pci/src/projects/project/sidebar/sidebar.html b/packages/manager/modules/pci/src/projects/project/sidebar/sidebar.html
@@ -19,21 +19,15 @@ <h2 class="mb-0 d-inline-block" style="font-weight: 400;" data-ng-bind="$ctrl.pr
     <div class="h-100 position-relative">
         <div class="position-absolute w-100 h-100" style="overflow: auto;"
             data-ng-class="{
-                'hidden-xs': !$ctrl.isOpen,
-                'hidden-sm': !$ctrl.isOpen
+                'd-none d-sm-block': !$ctrl.isOpen,
+                'd-sm-none d-md-block': !$ctrl.isOpen
             }"
             data-sidebar-menu>
         </div>
-
-        <div class="oui-navbar-backdrop"
-            aria-hidden="true"
-            tabindex="-1"
-            ng-class="{ 'oui-navbar-backdrop_active': !!$ctrl.isOpen }"
-            ng-click="$ctrl.toggle()"
-            role="button"> </div>
     </div>
 </div>
-<div data-ng-if="$ctrl.isDisplayingProjectsList" class="project-list px-3 py-4">
+<div data-ng-if="$ctrl.isDisplayingProjectsList"
+     class="project-list px-3 py-4">
     <div class="d-flex mb-4">
         <div class="my-auto">
             <button type="button" class="btn btn-primary rounded-circle" style="padding: 6px 13px;" data-ng-click="$ctrl.toggleProjectsList()">
diff --git a/yarn.lock b/yarn.lock
@@ -2314,7 +2314,7 @@ angular-validation-match@^1.4.0:
   dependencies:
     angular ">=1.3.0 <2.0.0"
 
-angular-vs-repeat@^2.0.9:
+angular-vs-repeat@^2.0.13, angular-vs-repeat@^2.0.9:
   version "2.0.13"
   resolved "https://registry.yarnpkg.com/angular-vs-repeat/-/angular-vs-repeat-2.0.13.tgz#f20c28e7357d3e70cc894398b301921717795e92"
   integrity sha512-Jb0DOt4jU5/xZx7wjKvgZJtgAaMA4ZFLq5aeQHU8U2IZz8ixWP0ML6gFWQ1yefMapvg5LV+ZfA81ZeeN/NtJ7A==
