patch: left-menu - refactoring + styles on widget to remove a contact

package-lock.json

@@ -1159,9 +1159,9 @@
       }
     },
     "@startinblox/hubl-styling-framework": {
-      "version": "1.8.14",
+      "version": "1.8.15",
-      "resolved": "https://registry.npmjs.org/@startinblox/hubl-styling-framework/-/hubl-styling-framework-1.8.14.tgz",
+      "resolved": "https://registry.npmjs.org/@startinblox/hubl-styling-framework/-/hubl-styling-framework-1.8.15.tgz",
-      "integrity": "sha512-ku6c9oJWUy3S0qG+s7aNp7mOrS6nxQJYis5jCC0Iq0cmRe44HzUk4Z6AuU4jC06xk5Ce+SEieeasi78Zcuczdw=="
+      "integrity": "sha512-2bK5zsHOxI0wekAyIhI2MkD1FcWBuNnWpmrDigxHRrsO4kFDOGvIyIewW//5dZjwaL4aTgZzRFvEYb7kNSYYyg=="
     },
     "@types/q": {
       "version": "1.5.4",

package.json

@@ -45,7 +45,7 @@
     ]
   },
   "dependencies": {
-    "@startinblox/hubl-styling-framework": "^1.8.14",
+    "@startinblox/hubl-styling-framework": "^1.8.15",
     "cross-env": "^7.0.3",
     "fs-extra": "^9.0.1",
     "normalize.css": "^8.0.1",

src/scripts/menu-search-control.js

@@ -0,0 +1,7 @@
+
+document.addEventListener("DOMContentLoaded", () => {
+  const searchField = document.querySelector('.menu-search');
+  console.log(searchField);
+  const leform = searchField.querySelector('form');
+  console.log(leform);
+});

src/scripts/navigate-event.js

@@ -17,12 +17,6 @@ MenuTabs.forEach(menuTab => {
   });
 });
 
-// const searchField = document.querySelector('.menu-search');
-// console.log(searchField);
-// const leform = searchField.querySelector('form');
-// console.log(leform);
-
-
 // auxiliary function closes the user profile menu
 function closeUserControls() {
   let userControls = Array.from(document.querySelectorAll(".user-controls"));

src/styles/left-nav/_index.scss

@@ -9,6 +9,15 @@ nav#main__menu {
     font-weight: bolder;
   }
 
+  .badge {
+    float: right;
+    margin-right: 2px;
+  }
+
+  .icon {
+    padding: 3px;
+  }
+
   .menu-search {
 
     form {
@@ -52,68 +61,64 @@ nav#main__menu {
     button {
       background: transparent;
     }
-
-    input:focus ~ button {
-      background-color: red !important;
-    }
   }
 
   .menu-header {
 
+    /* Chevron animation */
+    .transform-up {
+      transform: rotateX(180deg);
+    }
+
+    .badge {
+      padding-top: 2px;
+      margin-right: 5px;
+    }
+
+    /* For the icon and the small sub-sub-menu*/
     &:not(:hover) .menu-options,
     &:not(:hover) .menu-admin {
       display: none;
     }
-  }
 
-  .transform-up {
+    .menu-options {
-    transform: rotateX(180deg);
+      float: right;
-  }
+    }
 
-  .badge {
+    .menu-admin {
-    padding-top: 2px;
+      position: absolute;
-    margin-right: 5px;
+      z-index: 3016;
-  }
+      left: 48px;
+      bottom: 37px;
   
-  .icon {
+      @media (max-width: 768px) {
-    padding: 3px;
+        width: 100%;
-  }
+        left: 0;
-
+        height: 9vh;
-  .menu-admin {
+        top: 0;
-    position: absolute;
+      }
-    z-index: 3016;
-    left: 48px;
-    bottom: 37px;
-
-    @media (max-width: 768px) {
-      width: 100%;
-      left: 0;
-      height: 9vh;
-      top: 0;
     }
   }
 
-  /* Styles for the small icon */
+  .sub-menu {
-  .sub-menu-icon {
+
-    margin-left: 3px;
+    /* Styles for the small icon */
-    opacity: 0.8;
+    .sub-menu-icon {
-    width: 12px;
+      margin-left: 3px;
-    >div {
+      opacity: 0.8;
-      line-height: 19px;
+      width: 12px;
+      >div {
+        line-height: 19px;
+      }
+    }
+
+    .sub-menu-name {
+      margin-right: 15px;
+      margin-left: 3px;
+      vertical-align: middle;
     }
   }
 
-  .sub-menu-name {
-    margin-right: 15px;
-    margin-left: 3px;
-    vertical-align: middle;
-  }
-
-  .menu-options {
-    float: right;
-  }
-
-
   /* Ellipsis */
   .ellipsis {
 
@@ -137,16 +142,11 @@ nav#main__menu {
     }
   }
 
-  .menu-header>div:not(.transform-up)~.badge {
+  .empty {
-    display: none;
+    display: flex;
-  }
+    flex-wrap: wrap;
-
+    padding-left: 13px;
-  .menu-header>div.transform-up~.badge {
+    width: 87%;
-    display: block;
-  }
-
-  .badge {
-    float: right;
   }
 
   .divider {
@@ -155,13 +155,75 @@ nav#main__menu {
     opacity: 0.2;
   }
 
-  .empty {
+
-    display: flex;
+  /* Header's general counter appear or disappear on click (JS animation) */
-    flex-wrap: wrap;
+  .menu-header>div:not(.transform-up)~.badge {
-    padding-left: 13px;
+    display: none;
-    width: 87%;
   }
 
+  .menu-header>div.transform-up~.badge {
+    display: block;
+  }
+  /* End */
+
+  /* The little cross icon on contacts' name appears or disapear + hover + styles */
+  .sub-menu__contacts>div>solid-display {
+
+    hubl-menu-contact-removed {
+      display: none;
+    }
+  }
+
+  .sub-menu__contacts>div>solid-display {
+
+    &:hover {
+      display: flex;
+
+      hubl-menu-fix-url-contact {
+        width: 100%;
+        background: #202B3C;
+      }
+
+      hubl-menu-contact-removed {
+        display: block;
+        background: #202B3C;
+        padding-top: 5px;
+        margin-left: auto;
+        padding-right: 10px;
+
+        .button-remove button::before {
+          font-size: 18px;
+          color: white;
+        }
+      }
+    }
+  }
+  /* End */
+
+  /* Modal to keep/remove a contact */
+  hubl-menu-contact-removed dialog {
+    border: none;
+    padding: 60px 30px;
+    text-align: center;
+
+    @media (max-width: 768px) {
+      width: 100vw;
+    }
+
+    p {
+      margin-bottom: 30px;
+      font-size: 16px;
+    }
+
+    &::before,
+    p::before,
+    div::before,
+    button::before {
+      display: none;
+    }
+  }
+  /* End */
+
   &.jsLeftMenu {
     display: inline-block;
 

src/views/partials/menu-left.pug

@@ -77,13 +77,14 @@ solid-router#navbar-router(default-route='dashboard')
               div
               div
               div
-            solid-display.segment.full.whitespace-normal(
+            solid-display.sub-menu__contacts.segment.full.children-full.whitespace-normal(
               bind-user
               nested-field='contacts'
-              fields='contact'
+              fields='contact, @id'
               loader-id=`loader-${component.route}`
               empty-widget='hubl-menu-empty'
               widget-contact='hubl-menu-fix-url-contact'
+              widget-id='hubl-menu-contact-removed'
               filtered-by="general-search"
               order-asc="contact.username"
             )

src/views/partials/widgets.pug

@@ -25,6 +25,7 @@ include widgets/hubl-email-field.pug
 include widgets/hubl-menu-empty.pug
 include widgets/hubl-menu-fix-url-circle.pug
 include widgets/hubl-menu-fix-url-contact.pug
+include widgets/hubl-menu-contact-removed.pug
 include widgets/hubl-menu-fix-url-project.pug
 include widgets/hubl-menu-jabberid.pug
 include widgets/hubl-menu-publicprivate.pug

src/views/partials/widgets/hubl-menu-contact-removed.pug

@@ -1,4 +1,4 @@
 if componentSet.has('chat')
   solid-widget(name='hubl-menu-contact-removed')
     template ${value != "" ? `
-      <solid-delete class="icon icon-small icon-white icon-close" data-src='${value}' data-label="" confirmation-type="confirm" confirmation-message="Contact retiré"></solid-delete>` : ""}
+      <solid-delete class="button-remove icon children-icon-close" data-src='${value}' data-label="" confirmation-type="dialog" confirmation-message="Vous êtes sur le point de retirer ce contact. Etes-vous sûr ?" confirmation-submit-text="Oui, valider" confirmation-cancel-text="Non, c'est une erreur" confirmation-submit-class="segment sm-full text-center button text-xsmall text-bold text-uppercase reversed color-secondary bordered padding-right-medium padding-left-medium margin-right-xsmall sm-margin-right-none sm-margin-bottom-medium" confirmation-cancel-class="segment sm-full text-center button text-xsmall text-bold text-uppercase color-secondary bordered padding-right-medium padding-left-medium margin-left-xsmall sm-margin-left-none"></solid-delete>` : ""}