patch: routes ok + styles on mobile + desktop

src/images/magnify-white.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="1.02em" height="1em" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 1040 1024"><path d="M1031 969L720 656q93-111 93-256q0-109-53.5-201t-146-145.5T412.5 0T212 53.5T66.5 199T13 400t53.5 201T212 746.5T413 800q149 0 262-98l310 312q10 10 23 10t22.5-9.5t9.5-23t-9-22.5zM413 737q-92 0-169.5-45.5T121 568.5T76 400t45-168.5t122.5-123t169-45.5t169 45.5t122.5 123T749 400q0 39-9 77t-25.5 71t-39.5 62.5t-52 52.5t-62 39.5t-71 25.5t-77 9z" fill="#ffffff" opacity="0.1"/></svg>

src/index.pug

@@ -69,14 +69,15 @@ html(lang="en")
       include views/page-registering.pug
 
     .notLoggedIn(style='visibility:hidden;')
-      header#header.segment.full.padding-left-large.padding-right-large.sm-padding-right-xsmall.sm-padding-left-small.shadow-small.text-disable-selection.bg-color-white
-        include views/partials/header.pug
 
       nav#main__menu.scrollbar-nav.segment.bg-color-heading.text-top.quarter.text-disable-selection.jsLeftMenu
         include views/partials/menu-left.pug
 
       main#content.segment.three-quarter.sm-full.text-top
 
+        header#header.segment.full.padding-left-xlarge.padding-right-medium.sm-padding-right-xsmall.sm-padding-left-small.shadow-small.text-disable-selection.bg-color-white
+          include views/partials/header.pug
+
         include views/partials/widgets.pug
 
         for component of components

src/locales/en.json

@@ -8,10 +8,8 @@
     "logIn": "Log-in"
   },
   "menuLeft": {
-    "emptyCircleProject": {
+    "emptyCircleProjectContact": {
-      "notPartOf": "You're not part of any",
+      "empty": "No result in this section.",
-      "createNew": "To create a new one, you can go in the",
-      "adminPanel": "administration panel",
       "project": "project",
       "circle": "circle"
     },
@@ -28,7 +26,12 @@
     "profileDirectory": "Profiles directory",
     "communities": "Communities",
     "projects": "Projects",
+    "closeMenu": "Close menu",
+    "projectsBrowse": "Browse projects",
+    "projectCreate": "Create project",
     "circles": "Circles",
+    "circlesBrowse": "Browse circles",
+    "circleCreate": "Create circle",
     "messages": "Messages",
     "search": "Search...",
     "republiqueESS": {

src/locales/es.json

@@ -8,10 +8,8 @@
     "logIn": "Iniciar sesión"
   },
   "menuLeft": {
-    "emptyCircleProject": {
+    "emptyCircleProjectContact": {
-      "notPartOf": "No eres parte de ninguno",
+      "empty": "No hay resultados en esta sección.",
-      "createNew": "Para crear uno nuevo, puede ir al ",
-      "adminPanel": "panel de administración",
       "project": "proyecto",
       "circle": "círculo"
     },
@@ -28,7 +26,12 @@
     "profileDirectory": "Directorio de miembrxs",
     "communities": "Las comunidades",
     "projects": "Proyectos",
+    "closeMenu": "Cerrar menú",
+    "projectsBrowse": "Examinar los proyectos",
+    "projectCreate": "Crea un proyecto",
     "circles": "Círculos",
+    "circlesBrowse": "Examinar los círculos",
+    "circleCreate": "Crea un círculo.",
     "messages": "Mensajes",
     "search": "Buscar...",
     "republiqueESS": {

src/locales/fr.json

@@ -8,10 +8,8 @@
     "logIn": "Se connecter"
   },
   "menuLeft": {
-    "emptyCircleProject": {
+    "emptyCircleProjectContact": {
-      "notPartOf": "Tu ne fais partie d'aucun",
+      "empty": "Il n'y a aucun résultat dans cette section.",
-      "createNew": "Pour en créer un nouveau, tu peux te rendre dans le",
-      "adminPanel": "panneau d'administration",
       "project": "projet",
       "circle": "cercle"
     },
@@ -28,7 +26,12 @@
     "profileDirectory": "Annuaire des membres",
     "communities": "Les communautés",
     "projects": "Projets",
+    "closeMenu": "Fermer le menu",
+    "projectsBrowse": "Parcourir les projets",
+    "projectCreate": "Créer un projet",
     "circles": "Cercles",
+    "circlesBrowse": "Parcourir les cercles",
+    "circleCreate": "Créer un cercle",
     "messages": "Messages",
     "search": "Rechercher...",
     "republiqueESS": {

src/scripts/menu-search-control.js

@@ -0,0 +1,56 @@
+document.addEventListener("DOMContentLoaded", () => {
+  const MenuTabs = Array.from(document.querySelectorAll(".jsMenuTab"));
+  MenuTabs.forEach(menuTab => {
+    const menuHeader = menuTab.querySelector('.jsMenuHeader');
+    const menuArrow = menuTab.querySelector('.jsMenuArrow')
+    const menuSub = menuTab.querySelector('.jsMenuSub');
+    const menuOption = menuTab.querySelector('.jsMenuOption');
+    const menuAdmin = menuTab.querySelector('.jsMenuAdmin');
+
+    const isParent = (refNode, otherNode) => {
+      var parent = otherNode.parentNode;
+      do {
+        if (refNode == parent) {
+          return true;
+        } else {
+          parent = parent.parentNode;
+        }
+      } while (parent);
+      return false;
+    }
+    if (menuAdmin) {
+      menuAdmin.addEventListener("mouseover", function (ev) {
+        if (!isParent(this, ev.relatedTarget) && ev.target == this) {
+          menuAdmin.classList.toggle('hidden', false);
+        }
+      }, false);
+      menuAdmin.addEventListener("mouseout", function (ev) {
+        if (!isParent(this, ev.relatedTarget) && ev.target == this) {
+          menuAdmin.classList.toggle('hidden', true);
+        }
+      }, false);
+      menuAdmin.querySelector('solid-link').addEventListener('click', e => {
+        menuAdmin.classList.toggle('hidden', true);
+      });
+    }
+    menuHeader.addEventListener('click', e => {
+      menuArrow.classList.toggle('transform-up');
+      menuSub.classList.toggle('hidden');
+    });
+    menuOption.addEventListener('click', e => {
+      menuAdmin.classList.toggle('hidden');
+      e.stopPropagation();
+    });
+  });
+
+  const searchForm = document.querySelector('.menu-search');
+  searchForm.addEventListener('formChange', () => {
+    if (document.querySelector('.menu-search input').value != "") {
+      searchForm.style.backgroundColor = "#202B3C";
+      document.querySelector('#main__menu').classList.toggle('searching', true);
+    } else {
+      searchForm.style.backgroundColor = "var(--color-heading)";
+      document.querySelector('#main__menu').classList.toggle('searching', false);
+    }
+  })
+});

src/scripts/unreads-menu.js

@@ -2,7 +2,7 @@ document.addEventListener("DOMContentLoaded", function () {
   window.addEventListener('newMessage', event => {
     let jid = event.detail.jid;
     Array.from(document.querySelectorAll('[data-jabberID="' + jid + '"]')).forEach(el => {
-      el.parentElement.parentElement.classList.add('unread');
+      el.parentElement.parentElement.parentElement.classList.add('unread');
     });
   });
 
@@ -10,8 +10,8 @@ document.addEventListener("DOMContentLoaded", function () {
     if (event.detail && event.detail.resource && event.detail.resource['@id']) {
       const badge = document.querySelector(`solid-badge[data-src="${event.detail.resource['@id']}"]`);
       if (badge) {
-        badge.parentElement.parentElement.classList.remove('unread');
+        badge.parentElement.parentElement.parentElement.classList.remove('unread');
-        const project = badge.parentElement.parentElement.querySelector('.unread');
+        const project = badge.parentElement.parentElement.parentElement.querySelector('.unread');
         if (project) project.classList.remove('unread');
       }
 

src/styles/admin-circles/_index.scss

@@ -1,6 +1,61 @@
 #admin-circles,
 #admin-circles-leave {
 
+  /* Fix on Join button in admin (circles + projects) */
+  /* Styles on buttons and .children-link don't work because this input is inside too many elements. */
+  /* And no I can't add that stupid icon because it'a an input. */
+  /* But now, with 0.16, it's a button and you can :D */
+  .join-button {
+  
+    input,
+    button {
+      padding: 9px 20px;
+      border-radius: 16.5px;
+      height: 33px;
+      text-decoration: none;
+      font-weight: bold;
+      text-transform: uppercase;
+      background-color: var(--color-secondary);
+      color: white;
+      border: 1px solid var(--color-secondary);
+  
+      &:before {
+        font-size: 15px;
+        margin-right: 6px;
+        content: "\e079";
+        font-family: simple-line-icons;
+        font-style: normal;
+        font-weight: 400;
+        speak: none;
+        display: inline-block;
+        text-decoration: inherit;
+        width: 1em;
+        text-align: center;
+        font-variant: normal;
+        text-transform: none;
+        line-height: 1em;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+      }
+  
+      &:hover {
+        background: white;
+        color: var(--color-secondary);
+      }
+    }
+  
+    @media (max-width: 768px) {
+  
+      &.sm-full {
+  
+        input,
+        button {
+          width: 100%;
+        }
+      }
+    }
+  }
+
   .form.search-button :not(.add-member)+button[type=submit] {
     background-color: #E9F2FF;
     border: none;

src/styles/chat/_index.scss

@@ -1,5 +1,5 @@
 .chat-view {
-  height: calc(100vh - 72px - 78px);
+  height: calc(100vh - 50px - 78px);
 
   @media (max-width: 768px) {
     height: calc(100vh - 50px - 68px);

src/styles/content/_index.scss

@@ -1,9 +1,5 @@
 main {
-  height: calc(100vh - 72px);
+  height: 100vh;
-
-  @media (max-width: 768px) {
-    height: calc(100vh - 50px);
-  }
 }
 
 /* Styles of the right-hand menu + pages with that menu */
@@ -34,12 +30,11 @@ main {
 
   .sidebar {
     background: #F1F1F1;
-    height: calc(100vh - 72px);
+    height: calc(100vh - 50px);
     transition: all 0.5s;
     width: 217px;
 
     @media (max-width: 768px) {
-      height: calc(100vh - 50px);
       width: 65px;
     }
 
@@ -110,17 +105,17 @@ main {
   }
 }
 
-/* Add scrollbar to the left and to the content */
+/* Add scrollbar to the left menu and to the content */
 .scrollbar-nav,
 .scrollbar-content {
   overflow-y: auto;
-  height: calc(100vh - 72px); /* 72px == header's height */
+  height: calc(100vh - 50px); /* 50px == header's height */
   -webkit-overflow-scrolling: touch;
   -ms-overflow-style: none;
+}
 
-  @media (max-width: 768px) {
+.scrollbar-nav {
-    height: calc(100vh - 50px);
+  height: 100vh;
-  }
 }
 
 /* Custom scrollbar of the left-menu*/

src/styles/header/_index.scss

@@ -1,5 +1,5 @@
 header {
-  height: 72px;
+  height: 50px;
   position: fixed;
   z-index: 10000;
 
@@ -14,28 +14,23 @@ header {
 
   solid-link {
     align-self: center;
-
-    img.logo {
-      max-width: 200px;
-      max-height: 34px;
-      vertical-align: middle;
-    }
   }
 
   .tag {
     align-self: flex-start;
-    padding: 4px 15px;
+    height: auto !important;
-    margin-top: 16px;
+    letter-spacing: 0.16px !important;
-    margin-left: 60px;
+    line-height: normal !important;
+    padding: 1px 8px !important;
+    margin-top: 10px;
   }
 
   solid-notifications {
     color: var(--color-heading);
     align-self: center;
 
-    @media(min-width: 768.01px) {
+    height: 25px;
-      margin-right: 23px;
+    width: 25px;
-    }
 
     .solid-notifications__container {
       position: relative;
@@ -46,12 +41,11 @@ header {
       }
 
       .solid-notifications__button {
-        margin-top: -9px;
+        font-size: 25px;
-        font-size: 24px;
+        padding: 0;
-
+        line-height: 1;
-        &::before {
+        height: auto;
-          margin-left: -9px;
+        width: auto;
-        }
 
         &:hover, &:focus {
           background: white;
@@ -64,12 +58,15 @@ header {
         .solid-notifications__counter {
           left: 12px;
           position: absolute;
-          top: 1px;
+          top: -4px;
+          width: 18px;
+          height: 18px;
 
           span {
             background-color: var(--color-primary);
             color: white;
             font-size: 11px;
+            line-height: 18px;
           }
         }
       }
@@ -97,7 +94,7 @@ header {
             position: absolute;
             width: 0;
             height: 0;
-            margin-left: -5em;
+            margin-left: -4.2em;
             top: 0px;
             left: 50%;
             border: 1em solid black;
@@ -260,9 +257,7 @@ header {
     summary {
       display: block; /* To remove the disclosure triangle on Firefox v.>=69 */
       cursor: pointer;
-      padding-right: 15px;
+      height: 50px;
-      padding-left: 15px;
-      height: 72px;
 
       /* To remove the disclosure triangle on Chrome (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details#Customizing_the_disclosure_widget) */
       &::marker,
@@ -270,6 +265,10 @@ header {
         display: none;
       }
       /* End */
+
+      solid-display {
+        padding-top: 13px;
+      }
     }
   }
 
@@ -279,8 +278,8 @@ header {
     right: 0;
     z-index: 1;
     /* Quick fix for mobile version */
-    width: 100%;
+    width: 227px;
-    top: 72px;
+    top: 50px;
 
     >nav {
       box-shadow: 0 7px 8px 0 rgba(0, 0, 0, 0.16);
@@ -301,10 +300,6 @@ header {
     }
   }
 
-
-
-
-
   @media (max-width: 768px) {
     height: 50px;
 
@@ -317,7 +312,7 @@ header {
       margin: 0;
       margin-left: 15px;
     }
-    
+
     details.user-menu {
 
       .user-firstname {
@@ -331,6 +326,10 @@ header {
         height: 50px;
         padding: 0;
 
+        solid-display {
+          padding-top: 0;
+        }
+
         >.labelled-avatar .avatar {
           height: 32px;
           width: 32px;
@@ -372,8 +371,7 @@ header {
         .user-firstname {
           display: flex;
           align-items: center;
-          padding-right: 15px;
+          padding: 13px;
-          padding-left: 15px;
           width: 100%;
 
           [name="segment3"] {
@@ -389,6 +387,7 @@ header {
           top: 72px;
           height: calc(100vh - 72px);
           background: white;
+          width: calc(100vw);
 
           >nav {
             box-shadow: none;

src/styles/index.scss

@@ -67,27 +67,11 @@ main#content {
   }
 }
 
-hubl-menu-create+hubl-menu-create {
+hubl-menu-empty+hubl-menu-empty {
   display: none;
   /* Duplicate widget generation? */
 }
 
-hubl-create-contact+hubl-create-contact {
-  display: none;
-  /* Duplicate widget generation? */
-}
-
-hubl-menu-create,
-hubl-create-contact {
-  solid-link {
-    text-decoration: underline;
-
-    &:hover {
-      text-decoration: none;
-    }
-  }
-}
-
 .swal2-container {
   z-index: 50000 !important;
 }
@@ -113,61 +97,6 @@ hubl-create-contact {
   }
 }
 
-/* Fix on Join button in admin (circles + projects) */
-/* Styles on buttons and .children-link don't work because this input is inside too many elements. */
-/* And no I can't add that stupid icon because it'a an input. */
-/* But now, with 0.16, it's a button and you can :D */
-.join-button {
-
-  input,
-  button {
-    padding: 9px 20px;
-    border-radius: 16.5px;
-    height: 33px;
-    text-decoration: none;
-    font-weight: bold;
-    text-transform: uppercase;
-    background-color: var(--color-secondary);
-    color: white;
-    border: 1px solid var(--color-secondary);
-
-    &:before {
-      font-size: 15px;
-      margin-right: 6px;
-      content: "\e079";
-      font-family: simple-line-icons;
-      font-style: normal;
-      font-weight: 400;
-      speak: none;
-      display: inline-block;
-      text-decoration: inherit;
-      width: 1em;
-      text-align: center;
-      font-variant: normal;
-      text-transform: none;
-      line-height: 1em;
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
-    }
-
-    &:hover {
-      background: white;
-      color: var(--color-secondary);
-    }
-  }
-
-  @media (max-width: 768px) {
-
-    &.sm-full {
-
-      input,
-      button {
-        width: 100%;
-      }
-    }
-  }
-}
-
 /* Style that already exists in the framework but strangely I can't find it in the inspector. So I duplicate it here */
 .two-lines-ellipsis {
   display: -webkit-box !important;

src/styles/job-offers/_index.scss

@@ -1,7 +1,3 @@
 #job-offers #job-offers-board {
-  min-height: calc(100vh - 72px);
+  min-height: calc(100vh - 50px);
-
-  @media (max-width: 768px) {
-    min-height: calc(100vh - 50px);
-  }
 }

src/styles/left-nav/_index.scss

@@ -1,58 +1,174 @@
 nav#main__menu {
-  height: calc(100vh - 72px);
+  height: 100vh;
+
+  &.searching {
+    background-image: url('../images/magnify-white.svg');
+    background-color: var(--color-heading);
+    background-repeat: no-repeat;
+    background-position-x: right -20px;
+    background-position-y: 150px;
+    background-size: 80%;
+
+    @media (max-width: 768px) {
+      background-size: 60%;
+    }
+  }
 
   @media (max-width: 768px) {
     min-height: calc(100vh - 50px);
   }
 
+  .transparent-background {
+    background-color: transparent;
+
+    &.active[active] {
+      background-color: var(--color-third);
+    }
+
+    &.hover:hover:not([active]) {
+      background-color: #202B3C;
+    }
+
+    &.reverse {
+      background-color: var(--color-third);
+    }
+  }
+
   .unread {
     font-weight: bolder;
   }
 
-  solid-route.menu,
+  .badge {
-  solid-link.menu,
+    float: right;
-  div.menu {
+    margin-right: 2px;
-  
+  }
-    .icon {
+
-      padding: 8px;
+  .icon {
-      border-radius: 50%;
+    padding: 3px;
+  }
+
+  .menu-search {
+    padding: 0;
+
+    form::before,
+    solid-form-placeholder-text::before {
+      display: none;
     }
-    &:hover .icon,
+
-    &[active] .icon {
+    form {
-      color: white;
+      display: flex;
-      background: var(--color-heading);
+
+      solid-form-placeholder-text {
+        display: contents;
+      }
     }
-    &[active]+.divider {
+
-      visibility: hidden;
+    input {
+      background: transparent;
+      color: #D0D4DA;
+      margin-top: 0;
+      padding: 12px 13px;
+      height: 50px;
+
+      /* https://css-tricks.com/almanac/selectors/p/placeholder/ */
+      &::-webkit-input-placeholder {
+        /* Chrome/Opera/Safari */
+        color: #D0D4DA;
+      }
+
+      &::-moz-placeholder {
+        /* Firefox 19+ */
+        color: #D0D4DA;
+      }
+
+      &:focus {
+        /*background: #202B3C;*/
+        color: white;
+      }
+    }
+
+    button {
+      background: transparent;
+      border: none;
+      color: #D0D4DA;
+      margin-top: 0 !important;
+      height: auto;
+
+      @media (max-width: 768px) {
+        width: 20%;
+      }
+
+      &:hover::before {
+        color: white;
+      }
+    }
+  }
+
+  .menu-header {
+
+    /* Chevron animation */
+    .transform-up {
+      transform: rotateX(180deg);
+    }
+
+    .badge {
+      padding-top: 2px;
+      margin-right: 5px;
+    }
+
+    @media (min-width: 768.01px) {
+
+      &:not(:hover) .menu-options,
+      &:not(:hover) .menu-admin {
+        display: none;
+      }
+    }
+
+    .menu-options {
+      float: right;
+    }
+
+    .menu-admin {
+      position: absolute;
+      z-index: 3016;
+      left: 78px;
+      top: 36px;
+      text-align: end;
+      width: 64%;
+
+      @media (max-width: 768px) {
+        width: 100%;
+        left: 0;
+        height: 9vh;
+        top: 0;
+        text-align: center;
+        position: fixed;
+        top: 50px;
+        height: calc(100% - 50px);
+      }
     }
   }
 
   .sub-menu {
-    padding-bottom: 10px;
-  }
 
-  /* Styles for the small icon */
+    /* Styles for the small icon */
-  .sub-menu-icon {
+    .sub-menu-icon {
-    margin-left: 3px;
+      margin-left: 3px;
-    margin-right: 3px;
+      opacity: 0.8;
-    opacity: 0.8;
+      width: 12px;
-    width: 12px;
+
-    >div {
+      >div {
-      line-height: 19px;
+        line-height: 19px;
+      }
+    }
+
+    .sub-menu-name {
+      margin-right: 15px;
+      margin-left: 3px;
+      vertical-align: middle;
     }
   }
 
-  .sub-menu-name {
-    margin-right: 15px;
-    vertical-align: middle;
-  }
-
-  .menu-chevron {
-    float: right;
-    margin-top: 8px;
-  }
-
-
   /* Ellipsis */
   .ellipsis {
 
@@ -76,8 +192,11 @@ nav#main__menu {
     }
   }
 
-  .badge {
+  .empty {
-    float: right;
+    display: flex;
+    flex-wrap: wrap;
+    padding-left: 13px;
+    width: 87%;
   }
 
   .divider {
@@ -86,13 +205,96 @@ nav#main__menu {
     opacity: 0.2;
   }
 
-  .create {
+
-    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: 20px;
+    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 {
+    height: 28px;
+    display: block;
+
+    &:hover {
+
+      hubl-menu-fix-url-contact {
+        display: inline-block;
+        width: 100%;
+      }
+
+      hubl-counter {
+        padding-right: 25px;
+      }
+
+      solid-set-default[name="message"] {
+        margin-right: 9px;
+      }
+
+      hubl-menu-contact-removed {
+        width: 38px;
+        height: 27.75px;
+        text-align: right;
+        position: relative;
+        top: -28px;
+        display: block;
+        left: calc(100% - 47px);
+        padding-top: 5px;
+
+        button::before {
+          font-size: 18px;
+          color: white;
+        }
+      }
+    }
+  }
+
+  /* End */
+
+  /* Modal to keep/remove a contact */
+  hubl-menu-contact-removed dialog {
+    background: white !important;
+    border: none;
+    padding: 60px 30px;
+    text-align: center;
+
+    @media (max-width: 768px) {
+      width: 100vw;
+    }
+
+    p {
+      margin-bottom: 30px;
+      font-size: 16px;
+    }
+
+    div,
+    p {
+      background: white !important;
+    }
+
+    &::before,
+    p::before,
+    div::before,
+    button::before {
+      display: none;
+    }
+  }
+
+  /* End */
+
   &.jsLeftMenu {
     display: inline-block;
 
@@ -115,5 +317,4 @@ nav#main__menu {
       z-index: 3000;
     }
   }
-}
+}
-

src/styles/members/_index.scss

@@ -1,7 +1,3 @@
 #members>div:first-of-type {
-  min-height: calc(100vh - 72px);
+  min-height: calc(100vh - 50px);
-
-  @media (max-width: 768px) {
-    min-height: calc(100vh - 50px);
-  }
 }

src/sw.js

@@ -1,4 +1,4 @@
-const CACHE_NAME = 'hubl-store-cug7431';
+const CACHE_NAME = 'hubl-store-epm9475';
 
 self.addEventListener('install', function (e) {
   self.skipWaiting();

src/views/partials/admin/page-admin-circles.pug

@@ -22,13 +22,21 @@ div.segment.full.padding-large.padding-top-medium.padding-bottom-xsmall.sm-paddi
 
   solid-form-search.form.search-form.search-button(
     id=`admin-circle-filter-${page}`
+<<<<<<< HEAD
     fields='name'
     label-name=''
     widget-name='solid-form-label-text'
     class-name="segment margin-bottom-medium sm-margin-bottom-none third sm-full padding-right-small sm-padding-none text-small"
+=======
+    fields='searchname'
+    search-searchname='name, circle.name'
+    label-searchname=''
+    widget-searchname='solid-form-label-text'
+    class-searchname="segment margin-bottom-medium sm-margin-bottom-none third sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading"
+>>>>>>> b9a8c8ba4de7985088e46bda8c024cf121439ff8
     submit-button=""
     submit-widget="button"
-    data-trans='label-name=circle.list.searchBy;submit-button=circle.list.searchButton'
+    data-trans='label-searchname=circle.list.searchBy;submit-button=circle.list.searchButton'
   )
 
   ul(class='segment full margin-top-xsmall sm-margin-top-none sm-padding-none whitespace-normal tabs text-disable-selection')
@@ -41,6 +49,7 @@ div.segment.full.padding-large.padding-top-medium.padding-bottom-xsmall.sm-paddi
           data-src=`${getComponent('circles').endpoints.get}joinable/`
           fields=""
           counter-template="(${counter})"
+          filtered-by=`admin-circle-filter-${page}`
         )
     li(class='segment sm-full text-xlarge text-color-heading text-letter-spacing-large margin-left-medium sm-margin-left-none')
       solid-link(class='segment sm-full sm-padding-xsmall tab' next=`admin-${getRoute('circles', true)}-leave`)&attributes({'class': page == 'leave' ? 'active' : false})
@@ -52,4 +61,5 @@ div.segment.full.padding-large.padding-top-medium.padding-bottom-xsmall.sm-paddi
           nested-field="circles"
           fields=""
           counter-template="(${counter})"
+          filtered-by=`admin-circle-filter-${page}`
         )

src/views/partials/communities/page-community-directory.pug

@@ -0,0 +1,46 @@
+.padding-small.sm-padding-none.sm-padding-top-large.sm-padding-bottom-large
+  h2.margin-top-xxsmall.margin-left-xsmall.margin-bottom-medium.sm-margin-none.sm-margin-right-xsmall.sm-margin-bottom-large.sm-margin-left-xsmall.text-xlarge.text-bold.text-color-heading.text-uppercase(data-trans='communities.list.title')
+
+  div.padding-top-xxsmall.margin-left-xsmall.sm-padding-none.sm-margin-none.sm-margin-right-xsmall.sm-margin-left-xsmall
+    div.segment.half.sm-full
+      solid-form-search.form.search-form.search-button(
+        id=`communities-filter`
+        fields='name'
+        placeholder-name=''
+        widget-name='solid-form-placeholder-text'
+        class-name="segment margin-bottom-medium sm-margin-bottom-none three-quarter sm-full padding-right-small sm-padding-none text-small input-bg-white children-shadow"
+        submit-button=""
+        submit-widget="button"
+        data-trans='placeholder-name=communities.list.searchBy;submit-button=communities.list.searchButton'
+      )
+    div.segment.half.sm-full.text-right
+      solid-link.segment.children-link-rounded.children-icon-map.children-link-reversed.color-secondary.bordered(next=`${component.route}-map`)
+        span
+
+  div.segment.full.padding-top-xsmall.sm-padding-xsmall.whitespace-normal
+    div.loader(id=`loader-${component.route}-directory`)
+      div
+      div
+      div
+      div
+    solid-display(
+      class='segment full children children-quarter sm-children-full children-margin-bottom-medium sm-children-margin-bottom-xsmall children-padding-right-xsmall children-padding-left-xsmall sm-children-padding-none sm-whitespace-normal masonry pagination'
+      data-src=`${component.endpoints.get}`
+      loader-id=`loader-${component.route}-directory`
+      fields='segment1(segment2(logo), segment3(name, profile.shortDescription, counter))'
+      filtered-by=`communities-filter`
+      order-by='name'
+      paginate-by='20'
+
+      class-segment1='segment hover bg-color-white shadow border-rounded-xxsmall full text-top whitespace-normal'
+      class-segment2='segment block padding-xlarge text-center'
+      class-segment3='segment full padding-xlarge padding-top-medium sm-padding-medium border-top border-color-grey text-center whitespace-normal'
+      class-name='segment block one-line-ellipsis text-xlarge text-bold text-color-heading margin-bottom-xsmall'
+      class-profile.shortDescription='segment two-lines-ellipsis margin-bottom-xlarge sm-margin-bottom-medium whitespace-normal circle-subtitle-custom'
+      class-counter='segment block margin-bottom-large whitespace-normal'
+
+      widget-logo='hubl-admin-community-logo'
+      action-counter="counter"
+      widget-counter='hubl-communities-counter-alternate'
+      next=`${component.route}-profile`
+    )

src/views/partials/communities/page-community-edit.pug

@@ -0,0 +1 @@
+h1 COMMUEDIT

src/views/partials/communities/page-community-map.pug

@@ -0,0 +1,18 @@
+.padding-small.sm-padding-none.sm-padding-top-large.sm-padding-bottom-large
+  h2.margin-top-xxsmall.margin-left-xsmall.margin-bottom-medium.sm-margin-none.sm-margin-right-xsmall.sm-margin-bottom-large.sm-margin-left-xsmall.text-xlarge.text-bold.text-color-heading.text-uppercase(data-trans='communities.list.title')
+
+  div.padding-top-xxsmall.margin-left-xsmall.sm-padding-none.sm-margin-none.sm-margin-right-xsmall.sm-margin-left-xsmall
+    div.segment.half.sm-full
+      solid-form-search.form.search-form.search-button(
+        id=`communities-filter-map`
+        fields='name'
+        placeholder-name=''
+        widget-name='solid-form-placeholder-text'
+        class-name="segment margin-bottom-medium sm-margin-bottom-none three-quarter sm-full padding-right-small sm-padding-none text-small input-bg-white children-shadow"
+        submit-button=""
+        submit-widget="button"
+        data-trans='placeholder-name=communities.list.searchBy;submit-button=communities.list.searchButton'
+      )
+    div.segment.half.sm-full.text-right
+      solid-link.segment.children-link-rounded.children-icon-map.children-link-reversed.color-secondary.bordered(next=`${component.route}-directory`)
+        span

src/views/partials/header.pug

@@ -1,10 +1,10 @@
 div
 
   solid-link.segment.sm-hidden(next=getRoute('dashboard', true))
-    img.logo(src=`${client.logo || '/images/logo.webp'}`)
+    h1.text-color-heading.text-medium.text-semibold.text-letter-spacing-large=client.name || 'Hubl'
   button.segment.lg-hidden.icon-menu#toggleMainMenu
 
-  span.tag.reversed.text-semibold(data-trans='header.beta')
+  span.tag.reversed.text-bold.margin-left-xsmall(data-trans='header.beta')
 
   div
     if componentSet.has("themeChecker")
@@ -17,7 +17,7 @@ div
             )
 
     if componentSet.has("notification")
-      solid-notifications.segment.sm-margin-right-xlarge(
+      solid-notifications.segment.margin-right-large(
         nested-field="inbox"
         bind-user
       )
@@ -25,15 +25,13 @@ div
     if componentSet.has("autoLogin") || componentSet.has("registering")
       //- User menu visible on large screens
       details.segment.sm-hidden.user-controls
-        summary.text-right
+        summary.text-right.padding-right-xsmall.padding-left-xsmall
-          solid-display.labelled-avatar.padding-top-xsmall(
+          solid-display.labelled-avatar(
-            fields='segment1(account.picture), segment2(first_name), segment3(button)'
+            fields='segment1(account.picture), segment2(button)'
             class-segment1='segment'
-            class-segment2='segment margin-left-small'
+            class-segment2='segment margin-left-xxsmall'
-            class-segment3='segment margin-left-xxsmall'
+            class-account.picture="avatar xxsmall"
-            class-account.picture="avatar"
+            class-button='icon icon-small icon-arrow-down'
-            class-first_name="text-semibold text-color-heading"
-            class-button='icon icon-arrow-down'
             widget-account.picture='hubl-user-avatar'
             bind-user
           )

src/views/partials/menu-left.pug

@@ -1,10 +1,24 @@
+solid-form-search.icon.children-icon-magnifier(
+  id='general-search'
+  class='segment block form menu-search'
+  fields='name'
+  search-name='circle.name, project.customer.name, project.name, contact.username'
+  order-asc-names='name'
+
+  label-name='Rechercher'
+  widget-name="solid-form-placeholder-text"
+
+  submit-button=""
+  submit-widget="button"
+)
+div.divider
 solid-router#navbar-router(default-route='dashboard')
   for component of components
     if component.route
       if component.type == "about"
         solid-route(name=component.route, hidden)
       if component.type == "dashboard"
-        solid-route.menu.segment.full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name=component.route)
+        solid-route.menu-tab.segment.full.padding-xsmall.text-semibold.text-color-white.heading-active.bg-color-heading.transparent-background.hover.active(name=component.route)
           div.segment.margin-right-xxsmall
             div.icon.icon-small.icon-home
           div.segment.text-uppercase.text-letter-spacing-large(data-trans=`${component.name?component.name:"menuLeft.dashboard"}`)
@@ -17,24 +31,25 @@ solid-router#navbar-router(default-route='dashboard')
         div.divider
           
       if component.type == "circles"
-        div.menu-wrapper
+        div.jsMenuTab
-          if componentSet.has("admin")
+          div.menu-header.segment.full.padding-xsmall.text-semibold.text-color-white.bg-color-heading.transparent-background.hover.cursor-pointer.jsMenuHeader
-            solid-route.menu.segment.full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name=`admin-${component.route}`)
+            div.segment.margin-right-xxsmall.jsMenuArrow
-              div.segment.margin-right-xxsmall
+              div.segment.icon.icon-small.icon-arrow-down
-                div.segment.icon.icon-small.icon-folder-alt
+            div.segment.half.text-uppercase.text-letter-spacing-large(data-trans=`${component.name?component.name:"menuLeft.circles"}`)
-              div.segment.three-quarter.text-uppercase.text-letter-spacing-large(data-trans=`${component.name?component.name:"menuLeft.circles"}`)
+            if componentSet.has("admin")
-              div.menu-chevron.segment
+              div.menu-options.segment.jsMenuOption
-                div.menu-icon.icon-arrow-right-circle
+                div.menu-icon.icon.icon-small.icon-options-vertical
-            solid-route(name=`admin-${component.route}-create`)
+              div.menu-admin.segment.bg-color-white.shadow.text-color-secondary.padding-xxsmall.whitespace-normal.hidden.jsMenuAdmin
-            solid-route(name=`admin-${component.route}-leave`)
+                span.segment.full.one-line-ellipsis.padding-xxsmall.sm-padding-xsmall.lg-hidden(data-trans="menuLeft.closeMenu" onclick="this.parentElement.classList.toggle('hidden', true)")
-          else
+                solid-link.segment.full.one-line-ellipsis.padding-xxsmall.sm-padding-xsmall(next=`admin-${component.route}` data-trans="menuLeft.circlesBrowse")
-            div.menu.segment.full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading
+                solid-link.segment.full.one-line-ellipsis.padding-xxsmall.sm-padding-xsmall(next=`admin-${component.route}-create` data-trans="menuLeft.circleCreate")
-              div.segment.margin-right-xxsmall
+            solid-badge.badge(data-type="Mention" data-rdf-type="hd:circle")
-                div.segment.icon.icon-small.icon-folder-alt
+          solid-route(name=`admin-${component.route}` hidden)
-              div.segment.three-quarter.text-uppercase.text-letter-spacing-large(data-trans=`${component.name?component.name:"menuLeft.circles"}`)
+          solid-route(name=`admin-${component.route}-create` hidden)
-          solid-route(name=component.route, rdf-type='hd:circle', use-id='', hidden)
+          solid-route(name=`admin-${component.route}-leave` hidden)
-          solid-route(name=`${component.route}-left`)
+          solid-route(name=component.route rdf-type='hd:circle' use-id='' hidden)
-          div.sub-menu.menu-notification
+          solid-route(name=`${component.route}-left` hidden)
+          div.sub-menu.menu-notification.padding-bottom-xxsmall.jsMenuSub
             div.loader.loader-menu(id=`loader-${component.route}`)
               div
               div
@@ -45,67 +60,62 @@ solid-router#navbar-router(default-route='dashboard')
               nested-field='circles'
               fields='circle'
               loader-id=`loader-${component.route}`
-              empty-widget='hubl-menu-create'
+              empty-widget='hubl-menu-empty'
               empty-value=''
               data-trans="empty-value=menuLeft.emptyCircleProject.circle"
               widget-circle='hubl-menu-fix-url-circle'
               order-asc="circle.name"
+              filtered-by="general-search"
             )
         div.divider
       if component.type == "chat"
-        div.menu-wrapper
+        div.jsMenuTab
-          if componentSet.has("admin")
+          div.menu-header.segment.full.padding-xsmall.text-semibold.text-color-white.bg-color-heading.transparent-background.hover.cursor-pointer.jsMenuHeader
-            solid-route.menu.segment.full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name=`admin-${component.route}`)
+            div.segment.margin-right-xxsmall.jsMenuArrow
-              div.segment.margin-right-xxsmall
+              div.segment.icon.icon-small.icon-arrow-down
-                div.segment.icon.icon-small.icon-folder-alt
+            div.segment.half.text-uppercase.text-letter-spacing-large(data-trans=`${component.name?component.name:"menuLeft.messages"}`)
-              div.segment.three-quarter.text-uppercase.text-letter-spacing-large(data-trans=`${component.name?component.name:"menuLeft.messages"}`)
+            if componentSet.has("profileDirectory")
-              div.menu-chevron.segment
+              div.menu-options.segment.jsMenuOption
-                div.menu-icon.icon-arrow-right-circle
+                solid-link.segment.block.menu-icon.icon.icon-small.icon-user-follow(next=getRoute('profileDirectory', true))
-            solid-route(name=`admin-${component.route}-create`, use-id='', hidden)
+            solid-badge.badge(data-type="Message")
-          else
+          solid-route(name=`admin-${component.route}`, hidden)
-            div.menu.segment.full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading
+          solid-route(name=component.route, rdf-type='foaf:user', use-id='', hidden)
-              div.segment.margin-right-xxsmall
+          div.sub-menu.menu-notification.padding-bottom-xxsmall.jsMenuSub
-                div.segment.icon.icon-small.icon-folder-alt
+            div.loader.loader-menu(id=`loader-${component.route}`)
-              div.segment.three-quarter.text-uppercase.text-letter-spacing-large(data-trans=`${component.name?component.name:"menuLeft.messages"}`)
+              div
-        solid-route(name=component.route, rdf-type='foaf:user', use-id='', hidden)
+              div
-        div.sub-menu.menu-notification
+              div
-          div.loader.loader-menu(id=`loader-${component.route}`)
+              div
-            div
+            solid-display.sub-menu__contacts.segment.full.children-full.whitespace-normal(
-            div
+              bind-user
-            div
+              nested-field='contacts'
-            div
+              fields='contact, @id'
-            //- search-fields="contact.name"
+              loader-id=`loader-${component.route}`
-            //- search-label-contact.name=""
+              empty-widget='hubl-menu-empty'
-            //- data-trans="search-label-contact.name=menuLeft.search"
+              widget-contact='hubl-menu-fix-url-contact'
-            //- search-widget-contact.name="hubl-search-users"
+              widget-id='hubl-menu-contact-removed'
-          solid-display.segment.full.whitespace-normal(
+              filtered-by="general-search"
-            bind-user
+              order-asc="contact.username"
-            nested-field='contacts'
+            )
-            fields='contact'
-            loader-id=`loader-${component.route}`
-            empty-widget='hubl-create-contact'
-            empty-value=''
-            widget-contact='hubl-menu-fix-url-contact'
-            order-asc="contact.username"
-          )
       if component.type == "projects"
-        div.menu-wrapper
+        div.jsMenuTab
-          if componentSet.has("admin")
+          div.menu-header.segment.full.padding-xsmall.text-semibold.text-color-white.heading-active.bg-color-heading.transparent-background.hover.active.cursor-pointer.jsMenuHeader
-            solid-route.menu.segment.full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name=`admin-${component.route}`)
+            div.segment.margin-right-xxsmall.jsMenuArrow
-              div.segment.margin-right-xxsmall
+              div.segment.icon.icon-small.icon-arrow-down
-                div.segment.icon.icon-small.icon-folder-alt
+            div.segment.half.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.projects")
-              div.segment.three-quarter.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.projects")
+            if componentSet.has("admin")
-              div.menu-chevron.segment
+              div.menu-options.segment.jsMenuOption
-                div.icon-arrow-right-circle
+                div.menu-icon.icon.icon-small.icon-options-vertical
-            solid-route(name=`admin-${component.route}-create`, hidden)
+              div.menu-admin.segment.bg-color-white.shadow.text-color-secondary.padding-xxsmall.whitespace-normal.hidden.jsMenuAdmin
-          else
+                span.segment.full.one-line-ellipsis.padding-xxsmall.sm-padding-xsmall.lg-hidden(data-trans="menuLeft.closeMenu" onclick="this.parentElement.classList.toggle('hidden', true)")
-            div.menu.segment.full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading
+                solid-link.segment.full.one-line-ellipsis.padding-xxsmall.sm-padding-xsmall(next=`admin-${component.route}` data-trans="menuLeft.projectsBrowse")
-              div.segment.margin-right-xxsmall
+                solid-link.segment.full.one-line-ellipsis.padding-xxsmall.sm-padding-xsmall(next=`admin-${component.route}-create` data-trans="menuLeft.projectCreate")
-                div.segment.icon.icon-small.icon-folder-alt
+            solid-badge.badge(data-type="Mention" data-rdf-type="hd:project")
-              div.segment.three-quarter.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.projects")
+          solid-route(name=`admin-${component.route}`, hidden)
+          solid-route(name=`admin-${component.route}-create`, hidden)
           solid-route(name=component.route, rdf-type='hd:project', use-id='', hidden)
           solid-route(name=`${component.route}-left`, hidden)
-          div.sub-menu.menu-notification
+          div.sub-menu.menu-notification.padding-bottom-xxsmall.jsMenuSub
             div.loader.loader-menu(id=`loader-${component.route}`)
               div
               div
@@ -116,40 +126,41 @@ solid-router#navbar-router(default-route='dashboard')
               nested-field='projects'
               fields='project'
               loader-id=`loader-${component.route}`
-              empty-widget='hubl-menu-create'
+              empty-widget='hubl-menu-empty'
-              empty-value=''
               data-trans="empty-value=menuLeft.emptyCircleProject.project"
               widget-project='hubl-menu-fix-url-project'
+              filtered-by="general-search"
               order-asc="project.customer.name"
+
             )
         div.divider
       if component.type == "profileDirectory"
-        solid-route.menu.segment.full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name=component.route)
+        solid-route.menu-tab.segment.full.padding-xsmall.text-semibold.text-color-white.heading-active.bg-color-heading.transparent-background.hover.active(name=component.route)
           div.segment.margin-right-xxsmall
             div.icon.icon-small.icon-people
           div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.profileDirectory")
         solid-route.menu(name=`${component.route}-profile`, hidden)
         div.divider
       if component.type == "jobBoard"
-        solid-route.menu.segment.full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name=component.route, rdf-type='hd:joboffer')
+        solid-route.menu-tab.segment.full.padding-xsmall.text-semibold.text-color-white.heading-active.bg-color-heading.transparent-background.hover.active(name=component.route, rdf-type='hd:joboffer')
           div.segment.margin-right-xxsmall
             div.segment.icon.icon-small.icon-briefcase
           div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.jobBoard")
         div.divider
       if component.type == "resources"
-        solid-route.menu.segment.full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name=component.route)
+        solid-route.menu-tab.segment.full.padding-xsmall.text-semibold.text-color-white.heading-active.bg-color-heading.transparent-background.hover.active(name=component.route)
           div.segment.margin-right-xxsmall
             div.segment.icon.icon-small.icon-docs
           div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.resources")
         div.divider
       if component.type == "polls"
-        solid-route.menu.segment.full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name=component.route)
+        solid-route.menu-tab.segment.full.padding-xsmall.text-semibold.text-color-white.heading-active.bg-color-heading.transparent-background.hover.active(name=component.route)
           div.segment.margin-right-xxsmall
             div.segment.icon.icon-small.icon-bubbles
           div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.gov")
         div.divider
       if component.type == "events"
-        solid-route.menu.segment.full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name=component.route)
+        solid-route.menu-tab.segment.full.padding-xsmall.text-semibold.text-color-white.heading-active.bg-color-heading.transparent-background.hover.active(name=component.route)
           div.segment.margin-right-xxsmall
             div.segment.icon.icon-small.icon-calendar
           div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.events")

src/views/partials/widgets.pug

@@ -23,11 +23,11 @@ include widgets/hubl-circle-user-admin.pug
 include widgets/hubl-communities-counter-alternate.pug
 include widgets/hubl-communities-logo.pug
 include widgets/hubl-counter.pug
-include widgets/hubl-create-contact.pug
 include widgets/hubl-email-field.pug
-include widgets/hubl-menu-create.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-communities-profile-logo.pug

@@ -0,0 +1,3 @@
+if componentSet.has('admin') && componentSet.has('communities')
+  solid-widget(name='hubl-communities-profile-logo')
+    template ${value != "" ? `<div \style="background-image:url(${value});" />` : `<div></div>`}

src/views/partials/widgets/hubl-communities-profile-members-counter.pug

@@ -0,0 +1,11 @@
+if componentSet.has('admin') && componentSet.has('communities')
+  solid-widget(name='hubl-communities-profile-members-counter')
+    template
+      p
+        span.icon.icon-people.icon-third.icon-large.margin-right-xsmall
+        solid-display(
+          data-src="${src || value}"
+          fields=''
+          counter-template="\\\${counter}"
+        )
+        span members

src/views/partials/widgets/hubl-communities-profile-profile.pug

@@ -0,0 +1,6 @@
+if componentSet.has('admin') && componentSet.has('communities')
+  solid-widget(name='hubl-communities-profile-profile')
+    template
+      | ${value.website != "" ? `<a class="link margin-bottom-xsmall icon mdi-link-variant icon-third icon-large icon-margin-right-xsmall" href="tel:\${value.website}" target="_blank">\$value.website</a>` : `<div></div>`}
+      | ${value.email != "" ? `<a class="link margin-bottom-xsmall icon mdi-email-outline icon-third icon-large icon-margin-right-xsmall" href="mailto:\${value.email}">\$value.email</a>` : `<div></div>`}
+      | ${value.phone != "" ? `<a class="link margin-bottom-xsmall icon mdi-cellphone-iphone icon-third icon-large icon-margin-right-xsmall" href="tel:\${value.phone}">\$value.phone</a>` : `<div></div>`}

src/views/partials/widgets/hubl-create-contact.pug

@@ -1,9 +0,0 @@
-if componentSet.has('chat')
-  solid-widget(name='hubl-create-contact')
-    template
-      p.segment.full.create.text-color-white.whitespace-normal(style='display:block!important')
-        span(data-trans="menuLeft.contact.create")
-        span  
-        solid-link(next=getRoute('profileDirectory', true) data-trans="menuLeft.contact.profileDir")
-        span  
-        span(data-trans="menuLeft.contact.create2")

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

@@ -0,0 +1,5 @@
+if componentSet.has('chat')
+  solid-widget(name='hubl-menu-contact-removed')
+    template ${value != "" ? `
+      <solid-delete class="menu-delete-button button-remove icon children-icon-close" data-src='${value}' data-label="" confirmation-type="confirm" 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>` : ""}
+      //- Fix: using type confirm, dialog is not available on Firefox, polyfill only works if dialog is a direct child of body

src/views/partials/widgets/hubl-menu-create.pug

@@ -1,10 +0,0 @@
-if componentSet.has('circles') || componentSet.has('projects')
-  solid-widget(name='hubl-menu-create')
-    template
-      p.segment.full.create.text-color-white.whitespace-normal(style='display:block!important')
-        span(data-trans="menuLeft.emptyCircleProject.notPartOf")
-        span  ${value}.
-        if componentSet.has('admin')
-          span(data-trans="menuLeft.emptyCircleProject.createNew")
-          span  
-          solid-link(next=`\${value.startsWith('proj') ? 'admin-${getRoute('projects', true)}' : 'admin-${getRoute('circles', true)}'}`, data-trans="menuLeft.emptyCircleProject.adminPanel")

src/views/partials/widgets/hubl-menu-empty.pug

@@ -0,0 +1,5 @@
+if componentSet.has('circles') || componentSet.has('projects') || componentSet.has('profileDirectory') || componentSet.has('chat')
+  solid-widget(name='hubl-menu-empty')
+    template
+      p.segment.full.empty.whitespace-normal(style='display:block!important; color:#D0D4DA')
+        span(data-trans="menuLeft.emptyCircleProjectContact.empty")

src/views/partials/widgets/hubl-menu-fix-url-circle.pug

@@ -2,5 +2,5 @@ if componentSet.has('circles')
   solid-widget(name='hubl-menu-fix-url-circle')
     template ${value != "" ? `
       <solid-link class="segment full" data-src="${value}" next="${hubl.getRoute('circles', true)}">
-        <solid-display class="segment full text-color-white heading-active bg-color-heading hover active" data-src='${value}' fields='segment(status, circle(name, jabberID), badge)' class-segment="segment full padding-top-xxsmall padding-bottom-xxsmall padding-right-small padding-left-medium"  class-status='segment text-top sub-menu-icon'  class-circle='segment three-quarter sub-menu-name'  class-name='ellipsis-content'  class-badge='segment badge'  value-badge='${value}' widget-status='hubl-menu-publicprivate' widget-badge='hubl-counter' widget-jabberID='hubl-menu-jabberid' widget-name='solid-display-div' order-asc="name"></solid-display>
+        <solid-display class="segment full text-color-white heading-active bg-color-heading transparent-background hover active" data-src='${value}' fields='segment(status, circle(name, jabberID), badge)' class-segment="segment full padding-top-xxsmall padding-bottom-xxsmall padding-right-xsmall padding-left-xsmall"  class-status='segment text-top sub-menu-icon'  class-circle='segment three-quarter sub-menu-name'  class-name='ellipsis-content'  class-badge='segment badge'  value-badge='${value}' widget-status='hubl-menu-publicprivate' widget-badge='hubl-counter' widget-jabberID='hubl-menu-jabberid' widget-name='solid-display-div' order-asc="name"></solid-display>
       </solid-link>` : ""}

src/views/partials/widgets/hubl-menu-fix-url-contact.pug

@@ -2,5 +2,5 @@ if componentSet.has('chat')
   solid-widget(name='hubl-menu-fix-url-contact')
     template ${value != "" ? `
       <solid-link class="segment full" data-src="${value}" next="${hubl.getRoute('chat', true)}">
-        <solid-display class="segment full text-color-white heading-active bg-color-heading hover active" data-src='${value}' fields='segment(message(name, chatProfile.jabberID), badge)'  class-segment="segment full padding-top-xxsmall padding-bottom-xxsmall padding-right-small padding-left-medium" class-message='segment three-quarter sub-menu-name' class-badge='segment badge'  value-badge='${value}' widget-badge='hubl-counter' widget-chatProfile.jabberID='hubl-menu-jabberid' widget-name='solid-display-div' order-asc='username'></solid-display>
+        <solid-display class="segment full text-color-white heading-active bg-color-heading transparent-background hover active" data-src='${value}' fields='segment(message(name, chatProfile.jabberID), badge)'  class-segment="segment full padding-top-xxsmall padding-bottom-xxsmall padding-right-xsmall padding-left-xsmall" class-message='segment three-quarter sub-menu-name' class-badge='segment badge'  value-badge='${value}' widget-badge='hubl-counter' widget-chatProfile.jabberID='hubl-menu-jabberid' widget-name='solid-display-div' order-asc='username'></solid-display>
       </solid-link>` : ""}

src/views/partials/widgets/hubl-menu-fix-url-project.pug

@@ -2,5 +2,5 @@ if componentSet.has('projects')
   solid-widget(name='hubl-menu-fix-url-project')
     template ${value != "" ? `
       <solid-link class="segment full" data-src="${value}" next="${hubl.getRoute('projects', true)}">
-        <solid-display class="segment full text-color-white heading-active bg-color-heading hover active" data-src='${value}' fields='segment(status, project(customer.name, name, jabberID), badge)' class-segment="segment full padding-top-xxsmall padding-bottom-xxsmall padding-right-small padding-left-medium"  class-status='segment text-top sub-menu-icon'  class-project='segment three-quarter sub-menu-name'  class-customer.name='ellipsis-content' class-name='ellipsis-content'  class-badge='segment badge text-top'  value-badge='${value}' widget-status='hubl-menu-publicprivate' widget-jabberID='hubl-menu-jabberid' widget-badge='hubl-counter' widget-name='solid-display-div' order-asc="customer.name"></solid-display>
+        <solid-display class="segment full text-color-white heading-active bg-color-heading transparent-background hover active" data-src='${value}' fields='segment(project(customer.name, name, jabberID), badge)' class-segment="segment full padding-top-xxsmall padding-bottom-xxsmall padding-right-xsmall padding-left-xsmall"  class-project='segment three-quarter sub-menu-name'  class-customer.name='ellipsis-content' class-name='ellipsis-content'  class-badge='segment badge text-top'  value-badge='${value}' widget-jabberID='hubl-menu-jabberid' widget-badge='hubl-counter' widget-name='solid-display-div' order-asc="customer.name"></solid-display>
       </solid-link>` : ""}

src/views/partials/widgets/hubl-menu-publicprivate.pug

@@ -2,5 +2,5 @@ if componentSet.has('circles') || componentSet.has('projects')
   solid-widget(name='hubl-menu-publicprivate')
     template
       div(
-        class="${value == 'Public' ? 'text-simple-line-icons text-large': 'text-simple-line-icons text-xsmall'}"
+        class="${value == 'Public' ? 'text-large': 'text-simple-line-icons text-xsmall'}"
       ) ${value == 'Public' ? '#' : ''}