From bc0b8c3e0438049a3eea824dda493cf40450a702 Mon Sep 17 00:00:00 2001 From: gaelle morin Date: Thu, 1 Apr 2021 07:10:59 +0200 Subject: [PATCH 01/20] feature: new header and left-menu --- package-lock.json | 6 +- package.json | 2 +- src/index.pug | 5 +- src/locales/en.json | 10 +- src/locales/es.json | 10 +- src/locales/fr.json | 10 +- src/scripts/navigate-event.js | 25 +++ src/styles/chat/_index.scss | 2 +- src/styles/content/_index.scss | 19 +-- src/styles/header/_index.scss | 56 +++---- src/styles/index.scss | 18 +- src/styles/job-offers/_index.scss | 6 +- src/styles/left-nav/_index.scss | 103 +++++++++--- src/styles/members/_index.scss | 6 +- src/views/partials/header.pug | 20 +-- src/views/partials/menu-left.pug | 156 +++++++++--------- src/views/partials/widgets.pug | 3 +- .../partials/widgets/hubl-create-contact.pug | 9 - .../partials/widgets/hubl-menu-create.pug | 10 -- .../partials/widgets/hubl-menu-empty.pug | 5 + .../widgets/hubl-menu-fix-url-circle.pug | 2 +- .../widgets/hubl-menu-fix-url-contact.pug | 2 +- .../widgets/hubl-menu-fix-url-project.pug | 2 +- 23 files changed, 270 insertions(+), 217 deletions(-) delete mode 100644 src/views/partials/widgets/hubl-create-contact.pug delete mode 100644 src/views/partials/widgets/hubl-menu-create.pug create mode 100644 src/views/partials/widgets/hubl-menu-empty.pug diff --git a/package-lock.json b/package-lock.json index 935f8bd..aeda57c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1159,9 +1159,9 @@ } }, "@startinblox/hubl-styling-framework": { - "version": "1.8.10", - "resolved": "https://registry.npmjs.org/@startinblox/hubl-styling-framework/-/hubl-styling-framework-1.8.10.tgz", - "integrity": "sha512-3mT3H9Wgrgvja0JVu9TLEuvz1OtTeiN0UHuZx5IPLFDk5njGoDldElFEr3nw+BOMY1nJzSb8kHqW5cyIsP80cQ==" + "version": "1.8.14", + "resolved": "https://registry.npmjs.org/@startinblox/hubl-styling-framework/-/hubl-styling-framework-1.8.14.tgz", + "integrity": "sha512-ku6c9oJWUy3S0qG+s7aNp7mOrS6nxQJYis5jCC0Iq0cmRe44HzUk4Z6AuU4jC06xk5Ce+SEieeasi78Zcuczdw==" }, "@types/q": { "version": "1.5.4", diff --git a/package.json b/package.json index cfebc9f..d732abc 100644 --- a/package.json +++ b/package.json @@ -45,7 +45,7 @@ ] }, "dependencies": { - "@startinblox/hubl-styling-framework": "^1.8.10", + "@startinblox/hubl-styling-framework": "^1.8.14", "cross-env": "^7.0.3", "fs-extra": "^9.0.1", "normalize.css": "^8.0.1", diff --git a/src/index.pug b/src/index.pug index 6e6d152..1e82095 100644 --- a/src/index.pug +++ b/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 diff --git a/src/locales/en.json b/src/locales/en.json index 63e888d..b82fd85 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -8,10 +8,8 @@ "logIn": "Log-in" }, "menuLeft": { - "emptyCircleProject": { - "notPartOf": "You're not part of any", - "createNew": "To create a new one, you can go in the", - "adminPanel": "administration panel", + "emptyCircleProjectContact": { + "empty": "No result in this section.", "project": "project", "circle": "circle" }, @@ -27,7 +25,11 @@ "jobBoard": "Job offers", "profileDirectory": "Profiles directory", "projects": "Projects", + "projectsBrowse": "Browse projects", + "projectCreate": "Create project", "circles": "Circles", + "circlesBrowse": "Browse circles", + "circleCreate": "Create circle", "messages": "Messages", "search": "Search...", "republiqueESS": { diff --git a/src/locales/es.json b/src/locales/es.json index e3c964a..64492bd 100644 --- a/src/locales/es.json +++ b/src/locales/es.json @@ -8,10 +8,8 @@ "logIn": "Iniciar sesión" }, "menuLeft": { - "emptyCircleProject": { - "notPartOf": "No eres parte de ninguno", - "createNew": "Para crear uno nuevo, puede ir al ", - "adminPanel": "panel de administración", + "emptyCircleProjectContact": { + "empty": "No hay resultados en esta sección.", "project": "proyecto", "circle": "círculo" }, @@ -27,7 +25,11 @@ "jobBoard": "Ofertas de trabajo", "profileDirectory": "Directorio de miembrxs", "projects": "Proyectos", + "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": { diff --git a/src/locales/fr.json b/src/locales/fr.json index b4b04db..168ed0a 100644 --- a/src/locales/fr.json +++ b/src/locales/fr.json @@ -8,10 +8,8 @@ "logIn": "Se connecter" }, "menuLeft": { - "emptyCircleProject": { - "notPartOf": "Tu ne fais partie d'aucun", - "createNew": "Pour en créer un nouveau, tu peux te rendre dans le", - "adminPanel": "panneau d'administration", + "emptyCircleProjectContact": { + "empty": "Il n'y a aucun résultat dans cette section.", "project": "projet", "circle": "cercle" }, @@ -27,7 +25,11 @@ "jobBoard": "Offres de mission", "profileDirectory": "Annuaire des membres", "projects": "Projets", + "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": { diff --git a/src/scripts/navigate-event.js b/src/scripts/navigate-event.js index d2fc2e7..3f9a320 100644 --- a/src/scripts/navigate-event.js +++ b/src/scripts/navigate-event.js @@ -1,3 +1,28 @@ + +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'); + + menuHeader.addEventListener('click', e => { + menuArrow.classList.toggle('transform-up'); + menuSub.classList.toggle('hidden'); + }); + menuOption.addEventListener('click', e => { + menuAdmin.classList.toggle('hidden'); + e.stopPropagation(); + }); +}); + +// 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")); diff --git a/src/styles/chat/_index.scss b/src/styles/chat/_index.scss index cdbf46d..f3a202a 100644 --- a/src/styles/chat/_index.scss +++ b/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); diff --git a/src/styles/content/_index.scss b/src/styles/content/_index.scss index d935a63..c1e7d05 100644 --- a/src/styles/content/_index.scss +++ b/src/styles/content/_index.scss @@ -1,9 +1,5 @@ main { - height: calc(100vh - 72px); - - @media (max-width: 768px) { - height: calc(100vh - 50px); - } + height: 100vh; } /* 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) { - height: calc(100vh - 50px); - } +.scrollbar-nav { + height: 100vh; } /* Custom scrollbar of the left-menu*/ diff --git a/src/styles/header/_index.scss b/src/styles/header/_index.scss index 8362262..b296da1 100644 --- a/src/styles/header/_index.scss +++ b/src/styles/header/_index.scss @@ -1,5 +1,5 @@ header { - height: 72px; + height: 50px; position: fixed; z-index: 10000; @@ -14,28 +14,21 @@ 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; - margin-top: 16px; - margin-left: 60px; + height: auto !important; + letter-spacing: 0.16px !important; + 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) { - margin-right: 23px; - } + margin-top: 9px; .solid-notifications__container { position: relative; @@ -62,14 +55,17 @@ header { } .solid-notifications__counter { - left: 12px; + height: 18px; + width: 18px; + left: 17px; position: absolute; - top: 1px; + top: 5px; span { background-color: var(--color-primary); color: white; font-size: 11px; + line-height: 18px; } } } @@ -97,7 +93,7 @@ header { position: absolute; width: 0; height: 0; - margin-left: -5em; + margin-left: -5.05em; top: 0px; left: 50%; border: 1em solid black; @@ -260,9 +256,7 @@ header { summary { display: block; /* To remove the disclosure triangle on Firefox v.>=69 */ cursor: pointer; - padding-right: 15px; - padding-left: 15px; - height: 72px; + height: 50px; /* 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 +264,10 @@ header { display: none; } /* End */ + + solid-display { + padding-top: 13px; + } } } @@ -279,8 +277,8 @@ header { right: 0; z-index: 1; /* Quick fix for mobile version */ - width: 100%; - top: 72px; + width: 227px; + top: 50px; >nav { box-shadow: 0 7px 8px 0 rgba(0, 0, 0, 0.16); @@ -301,10 +299,6 @@ header { } } - - - - @media (max-width: 768px) { height: 50px; @@ -317,7 +311,7 @@ header { margin: 0; margin-left: 15px; } - + details.user-menu { .user-firstname { @@ -331,6 +325,10 @@ header { height: 50px; padding: 0; + solid-display { + padding-top: 0; + } + >.labelled-avatar .avatar { height: 32px; width: 32px; @@ -372,8 +370,7 @@ header { .user-firstname { display: flex; align-items: center; - padding-right: 15px; - padding-left: 15px; + padding: 13px; width: 100%; [name="segment3"] { @@ -389,6 +386,7 @@ header { top: 72px; height: calc(100vh - 72px); background: white; + width: calc(100vw); >nav { box-shadow: none; diff --git a/src/styles/index.scss b/src/styles/index.scss index e6edfdd..72de102 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -66,27 +66,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; } diff --git a/src/styles/job-offers/_index.scss b/src/styles/job-offers/_index.scss index f611322..12e381a 100644 --- a/src/styles/job-offers/_index.scss +++ b/src/styles/job-offers/_index.scss @@ -1,7 +1,3 @@ #job-offers #job-offers-board { - min-height: calc(100vh - 72px); - - @media (max-width: 768px) { - min-height: calc(100vh - 50px); - } + min-height: calc(100vh - 50px); } diff --git a/src/styles/left-nav/_index.scss b/src/styles/left-nav/_index.scss index e180005..3f1ad60 100644 --- a/src/styles/left-nav/_index.scss +++ b/src/styles/left-nav/_index.scss @@ -1,40 +1,101 @@ nav#main__menu { - height: calc(100vh - 72px); + height: 100vh; @media (max-width: 768px) { min-height: calc(100vh - 50px); } - + .unread { font-weight: bolder; } - solid-route.menu, - solid-link.menu, - div.menu { - - .icon { - padding: 8px; - border-radius: 50%; + .menu-search { + + form { + display: flex; + + solid-form-placeholder-text { + display: contents; + } } - &:hover .icon, - &[active] .icon { - color: white; + + input { background: var(--color-heading); + color: #D0D4DA; + margin-top: 0; + padding: 12px 13px; + height: 50px; + background-image: url("/images/calendar.svg"); + background-position: right 12px top 50%; + background-repeat: no-repeat; + background-size: 14px; + + /* https://css-tricks.com/almanac/selectors/p/placeholder/ */ + &::-webkit-input-placeholder { /* Chrome/Opera/Safari */ + color: #D0D4DA; + } + + &::-moz-placeholder { /* Firefox 19+ */ + color: #D0D4DA; + } + + &:-moz-placeholder { /* Firefox 18- */ + color: #D0D4DA; + } + + &:focus { + background: #202B3C; + color: white; + } } - &[active]+.divider { - visibility: hidden; + + button { + background: transparent; + } + + input:focus ~ button { + background-color: red !important; } } - .sub-menu { - padding-bottom: 10px; + .menu-header { + + &:not(:hover) .menu-options, + &:not(:hover) .menu-admin { + display: none; + } + } + + .transform-up { + transform: rotateX(180deg); + } + + .badge { + padding-top: 2px; + margin-right: 5px; + } + + .icon { + padding: 3px; + } + + .menu-admin { + 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-icon { margin-left: 3px; - margin-right: 3px; opacity: 0.8; width: 12px; >div { @@ -44,12 +105,12 @@ nav#main__menu { .sub-menu-name { margin-right: 15px; + margin-left: 3px; vertical-align: middle; } - .menu-chevron { + .menu-options { float: right; - margin-top: 8px; } @@ -86,10 +147,10 @@ nav#main__menu { opacity: 0.2; } - .create { + .empty { display: flex; flex-wrap: wrap; - padding-left: 20px; + padding-left: 13px; width: 87%; } diff --git a/src/styles/members/_index.scss b/src/styles/members/_index.scss index ae9012d..0bbf589 100644 --- a/src/styles/members/_index.scss +++ b/src/styles/members/_index.scss @@ -1,7 +1,3 @@ #members>div:first-of-type { - min-height: calc(100vh - 72px); - - @media (max-width: 768px) { - min-height: calc(100vh - 50px); - } + min-height: calc(100vh - 50px); } diff --git a/src/views/partials/header.pug b/src/views/partials/header.pug index ced5dd8..e9db9e5 100644 --- a/src/views/partials/header.pug +++ b/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-small( 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 - solid-display.labelled-avatar.padding-top-xsmall( - fields='segment1(account.picture), segment2(first_name), segment3(button)' + summary.text-right.padding-right-xsmall.padding-left-xsmall + solid-display.labelled-avatar( + fields='segment1(account.picture), segment2(button)' class-segment1='segment' - class-segment2='segment margin-left-small' - class-segment3='segment margin-left-xxsmall' - class-account.picture="avatar" - class-first_name="text-semibold text-color-heading" - class-button='icon icon-arrow-down' + class-segment2='segment margin-left-xxsmall' + class-account.picture="avatar xxsmall" + class-button='icon icon-small icon-arrow-down' widget-account.picture='hubl-user-avatar' bind-user ) diff --git a/src/views/partials/menu-left.pug b/src/views/partials/menu-left.pug index d56be78..2624a3c 100644 --- a/src/views/partials/menu-left.pug +++ b/src/views/partials/menu-left.pug @@ -1,32 +1,47 @@ +solid-form-search( + 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.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"}`) div.divider if component.type == "circles" - div.menu-wrapper - if componentSet.has("admin") - 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 - div.segment.icon.icon-small.icon-folder-alt - div.segment.three-quarter.text-uppercase.text-letter-spacing-large(data-trans=`${component.name?component.name:"menuLeft.circles"}`) - div.menu-chevron.segment - div.menu-icon.icon-arrow-right-circle - solid-route(name=`admin-${component.route}-create`) - else - div.menu.segment.full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading - div.segment.margin-right-xxsmall - div.segment.icon.icon-small.icon-folder-alt - div.segment.three-quarter.text-uppercase.text-letter-spacing-large(data-trans=`${component.name?component.name:"menuLeft.circles"}`) + div.jsMenuTab + div.menu-header.segment.full.padding-xsmall.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active.jsMenuHeader + div.segment.margin-right-xxsmall.jsMenuArrow + div.segment.icon.icon-small.icon-arrow-down + div.segment.half.text-uppercase.text-letter-spacing-large(data-trans=`${component.name?component.name:"menuLeft.circles"}`) + if componentSet.has("admin") + div.menu-options.segment.jsMenuOption + div.menu-icon.icon.icon-small.icon-options-vertical + div.menu-admin.segment.three-quarter.bg-color-white.shadow.text-color-secondary.padding-xxsmall.whitespace-normal.hidden.jsMenuAdmin + solid-link.segment.full.one-line-ellipsis.padding-xxsmall.sm-padding-xsmall(next=`admin-${component.route}` data-trans="menuLeft.circlesBrowse") + solid-link.segment.full.one-line-ellipsis.padding-xxsmall.sm-padding-xsmall(next=`admin-${component.route}-create` data-trans="menuLeft.circleCreate") + solid-badge.badge(data-type="Mention" data-rdf-type="hd:circle") + solid-route(name=`admin-${component.route}`, hidden) + solid-route(name=`admin-${component.route}-create`, hidden) + solid-route(name=`admin-${component.route}-leave`, hidden) solid-route(name=component.route, rdf-type='hd:circle', use-id='', hidden) solid-route(name=`${component.route}-left`) - div.sub-menu.menu-notification + div.sub-menu.menu-notification.padding-bottom-xxsmall.jsMenuSub div.loader.loader-menu(id=`loader-${component.route}`) div div @@ -37,67 +52,59 @@ 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 - if componentSet.has("admin") - 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 - div.segment.icon.icon-small.icon-folder-alt - div.segment.three-quarter.text-uppercase.text-letter-spacing-large(data-trans=`${component.name?component.name:"menuLeft.messages"}`) - div.menu-chevron.segment - div.menu-icon.icon-arrow-right-circle - solid-route(name=`admin-${component.route}-create`, use-id='', hidden) - else - div.menu.segment.full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading - div.segment.margin-right-xxsmall - div.segment.icon.icon-small.icon-folder-alt - div.segment.three-quarter.text-uppercase.text-letter-spacing-large(data-trans=`${component.name?component.name:"menuLeft.messages"}`) - solid-route(name=component.route, rdf-type='foaf:user', use-id='', hidden) - div.sub-menu.menu-notification - div.loader.loader-menu(id=`loader-${component.route}`) - div - div - div - div - //- search-fields="contact.name" - //- search-label-contact.name="" - //- data-trans="search-label-contact.name=menuLeft.search" - //- search-widget-contact.name="hubl-search-users" - solid-display.segment.full.whitespace-normal( - bind-user - 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" - ) + div.jsMenuTab + div.menu-header.segment.full.padding-xsmall.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active.jsMenuHeader + div.segment.margin-right-xxsmall.jsMenuArrow + div.segment.icon.icon-small.icon-arrow-down + div.segment.half.text-uppercase.text-letter-spacing-large(data-trans=`${component.name?component.name:"menuLeft.messages"}`) + if componentSet.has("profileDirectory") + div.menu-options.segment.jsMenuOption + solid-link.segment.block.menu-icon.icon.icon-small.icon-user-follow(next=getRoute('profileDirectory', true)) + solid-badge.badge(data-type="Message") + solid-route(name=component.route, rdf-type='foaf:user', use-id='', hidden) + div.sub-menu.menu-notification.padding-bottom-xxsmall.jsMenuSub + div.loader.loader-menu(id=`loader-${component.route}`) + div + div + div + div + solid-display.segment.full.whitespace-normal( + bind-user + nested-field='contacts' + fields='contact' + loader-id=`loader-${component.route}` + empty-widget='hubl-menu-empty' + widget-contact='hubl-menu-fix-url-contact' + filtered-by="general-search" + order-asc="contact.username" + ) if component.type == "projects" - div.menu-wrapper - if componentSet.has("admin") - 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 - div.segment.icon.icon-small.icon-folder-alt - div.segment.three-quarter.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.projects") - div.menu-chevron.segment - div.icon-arrow-right-circle - solid-route(name=`admin-${component.route}-create`, hidden) - else - div.menu.segment.full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading - div.segment.margin-right-xxsmall - div.segment.icon.icon-small.icon-folder-alt - div.segment.three-quarter.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.projects") + div.jsMenuTab + div.menu-header.segment.full.padding-xsmall.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active.jsMenuHeader + div.segment.margin-right-xxsmall.jsMenuArrow + div.segment.icon.icon-small.icon-arrow-down + div.segment.half.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.projects") + if componentSet.has("admin") + div.menu-options.segment.jsMenuOption + div.menu-icon.icon.icon-small.icon-options-vertical + div.menu-admin.segment.three-quarter.bg-color-white.shadow.text-color-secondary.padding-xxsmall.whitespace-normal.hidden.jsMenuAdmin + solid-link.segment.full.one-line-ellipsis.padding-xxsmall.sm-padding-xsmall(next=`admin-${component.route}` data-trans="menuLeft.projectsBrowse") + solid-link.segment.full.one-line-ellipsis.padding-xxsmall.sm-padding-xsmall(next=`admin-${component.route}-create` data-trans="menuLeft.projectCreate") + solid-badge.badge(data-type="Mention" data-rdf-type="hd:project") + 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 @@ -108,40 +115,41 @@ solid-router#navbar-router(default-route='dashboard') nested-field='projects' fields='project' loader-id=`loader-${component.route}` - empty-widget='hubl-menu-create' - empty-value='' + empty-widget='hubl-menu-empty' 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.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.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.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.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.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") diff --git a/src/views/partials/widgets.pug b/src/views/partials/widgets.pug index e9be69b..201359f 100644 --- a/src/views/partials/widgets.pug +++ b/src/views/partials/widgets.pug @@ -18,9 +18,8 @@ include widgets/hubl-circle-owner.pug include widgets/hubl-circle-team-contact.pug include widgets/hubl-circle-user-admin.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-fix-url-project.pug diff --git a/src/views/partials/widgets/hubl-create-contact.pug b/src/views/partials/widgets/hubl-create-contact.pug deleted file mode 100644 index 1fec94d..0000000 --- a/src/views/partials/widgets/hubl-create-contact.pug +++ /dev/null @@ -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") diff --git a/src/views/partials/widgets/hubl-menu-create.pug b/src/views/partials/widgets/hubl-menu-create.pug deleted file mode 100644 index 30b104f..0000000 --- a/src/views/partials/widgets/hubl-menu-create.pug +++ /dev/null @@ -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") \ No newline at end of file diff --git a/src/views/partials/widgets/hubl-menu-empty.pug b/src/views/partials/widgets/hubl-menu-empty.pug new file mode 100644 index 0000000..565840f --- /dev/null +++ b/src/views/partials/widgets/hubl-menu-empty.pug @@ -0,0 +1,5 @@ +if componentSet.has('circles') || componentSet.has('projects') || componentSet.has('profileDirectory') + 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") diff --git a/src/views/partials/widgets/hubl-menu-fix-url-circle.pug b/src/views/partials/widgets/hubl-menu-fix-url-circle.pug index 716b8bf..53188da 100644 --- a/src/views/partials/widgets/hubl-menu-fix-url-circle.pug +++ b/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 != "" ? ` - + ` : ""} \ No newline at end of file diff --git a/src/views/partials/widgets/hubl-menu-fix-url-contact.pug b/src/views/partials/widgets/hubl-menu-fix-url-contact.pug index 77ecfa2..0dc51e3 100644 --- a/src/views/partials/widgets/hubl-menu-fix-url-contact.pug +++ b/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 != "" ? ` - + ` : ""} \ No newline at end of file diff --git a/src/views/partials/widgets/hubl-menu-fix-url-project.pug b/src/views/partials/widgets/hubl-menu-fix-url-project.pug index 6b4f1cf..b764d4d 100644 --- a/src/views/partials/widgets/hubl-menu-fix-url-project.pug +++ b/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 != "" ? ` - + ` : ""} \ No newline at end of file From ced798eba982d14a418618e28aa8763b33503097 Mon Sep 17 00:00:00 2001 From: gaelle morin Date: Thu, 1 Apr 2021 11:48:02 +0200 Subject: [PATCH 02/20] patch: left-menu - useless classes removed + menu-header's badge visibility resolved --- src/styles/left-nav/_index.scss | 8 ++++++++ src/views/partials/menu-left.pug | 6 +++--- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/src/styles/left-nav/_index.scss b/src/styles/left-nav/_index.scss index 3f1ad60..480e223 100644 --- a/src/styles/left-nav/_index.scss +++ b/src/styles/left-nav/_index.scss @@ -137,6 +137,14 @@ nav#main__menu { } } + .menu-header>div:not(.transform-up)~.badge { + display: none; + } + + .menu-header>div.transform-up~.badge { + display: block; + } + .badge { float: right; } diff --git a/src/views/partials/menu-left.pug b/src/views/partials/menu-left.pug index 2624a3c..cb1a0f4 100644 --- a/src/views/partials/menu-left.pug +++ b/src/views/partials/menu-left.pug @@ -25,7 +25,7 @@ solid-router#navbar-router(default-route='dashboard') div.divider if component.type == "circles" div.jsMenuTab - div.menu-header.segment.full.padding-xsmall.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active.jsMenuHeader + div.menu-header.segment.full.padding-xsmall.text-semibold.text-color-white.bg-color-heading.hover.jsMenuHeader div.segment.margin-right-xxsmall.jsMenuArrow div.segment.icon.icon-small.icon-arrow-down div.segment.half.text-uppercase.text-letter-spacing-large(data-trans=`${component.name?component.name:"menuLeft.circles"}`) @@ -62,7 +62,7 @@ solid-router#navbar-router(default-route='dashboard') div.divider if component.type == "chat" div.jsMenuTab - div.menu-header.segment.full.padding-xsmall.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active.jsMenuHeader + div.menu-header.segment.full.padding-xsmall.text-semibold.text-color-white.bg-color-heading.hover.jsMenuHeader div.segment.margin-right-xxsmall.jsMenuArrow div.segment.icon.icon-small.icon-arrow-down div.segment.half.text-uppercase.text-letter-spacing-large(data-trans=`${component.name?component.name:"menuLeft.messages"}`) @@ -124,7 +124,7 @@ solid-router#navbar-router(default-route='dashboard') ) div.divider if component.type == "profileDirectory" - solid-route.menu-tab.segment.full.padding-xsmall.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.bg-color-heading.hover(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") From 1eda33fab570a061906d377aedcc8c4967b4b759 Mon Sep 17 00:00:00 2001 From: gaelle morin Date: Thu, 1 Apr 2021 14:21:42 +0200 Subject: [PATCH 03/20] patch: conflict resolved --- src/views/partials/menu-left.pug | 26 ++++---------------------- 1 file changed, 4 insertions(+), 22 deletions(-) diff --git a/src/views/partials/menu-left.pug b/src/views/partials/menu-left.pug index fe3563f..23a74ea 100644 --- a/src/views/partials/menu-left.pug +++ b/src/views/partials/menu-left.pug @@ -24,7 +24,6 @@ solid-router#navbar-router(default-route='dashboard') div.segment.text-uppercase.text-letter-spacing-large(data-trans=`${component.name?component.name:"menuLeft.dashboard"}`) div.divider if component.type == "circles" -<<<<<<< HEAD div.jsMenuTab div.menu-header.segment.full.padding-xsmall.text-semibold.text-color-white.bg-color-heading.hover.jsMenuHeader div.segment.margin-right-xxsmall.jsMenuArrow @@ -37,27 +36,10 @@ solid-router#navbar-router(default-route='dashboard') solid-link.segment.full.one-line-ellipsis.padding-xxsmall.sm-padding-xsmall(next=`admin-${component.route}` data-trans="menuLeft.circlesBrowse") solid-link.segment.full.one-line-ellipsis.padding-xxsmall.sm-padding-xsmall(next=`admin-${component.route}-create` data-trans="menuLeft.circleCreate") solid-badge.badge(data-type="Mention" data-rdf-type="hd:circle") - solid-route(name=`admin-${component.route}`, hidden) - solid-route(name=`admin-${component.route}-create`, hidden) - solid-route(name=`admin-${component.route}-leave`, hidden) -======= - div.menu-wrapper - if componentSet.has("admin") - 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 - div.segment.icon.icon-small.icon-folder-alt - div.segment.three-quarter.text-uppercase.text-letter-spacing-large(data-trans=`${component.name?component.name:"menuLeft.circles"}`) - div.menu-chevron.segment - div.menu-icon.icon-arrow-right-circle - solid-route(name=`admin-${component.route}-create`) - solid-route(name=`admin-${component.route}-leave`) - else - div.menu.segment.full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading - div.segment.margin-right-xxsmall - div.segment.icon.icon-small.icon-folder-alt - div.segment.three-quarter.text-uppercase.text-letter-spacing-large(data-trans=`${component.name?component.name:"menuLeft.circles"}`) ->>>>>>> 4860b20e20e4be6643aaaa0c5f8c1ea3d015ee3b - solid-route(name=component.route, rdf-type='hd:circle', use-id='', hidden) + solid-route(name=`admin-${component.route}` hidden) + solid-route(name=`admin-${component.route}-create` hidden) + solid-route(name=`admin-${component.route}-leave` hidden) + solid-route(name=component.route rdf-type='hd:circle' use-id='' hidden) solid-route(name=`${component.route}-left`) div.sub-menu.menu-notification.padding-bottom-xxsmall.jsMenuSub div.loader.loader-menu(id=`loader-${component.route}`) From 5f97a261dc2bced9f35cff36043cb76f22f2a5f2 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Thu, 1 Apr 2021 14:35:09 +0200 Subject: [PATCH 04/20] fix: wrong filtering on circle admin --- src/views/partials/admin/page-admin-circles.pug | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/src/views/partials/admin/page-admin-circles.pug b/src/views/partials/admin/page-admin-circles.pug index 2cf0519..9aae27b 100644 --- a/src/views/partials/admin/page-admin-circles.pug +++ b/src/views/partials/admin/page-admin-circles.pug @@ -22,13 +22,14 @@ 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}` - 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 text-semibold text-uppercase text-color-heading" + 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" 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 +42,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 +54,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}` ) From 377abe2c6204aa5b94773a02079451a0a44791ce Mon Sep 17 00:00:00 2001 From: gaelle morin Date: Thu, 1 Apr 2021 19:33:10 +0200 Subject: [PATCH 05/20] patch: left-menu - refactoring + styles on widget to remove a contact --- package-lock.json | 6 +- package.json | 2 +- src/scripts/menu-search-control.js | 7 + src/scripts/navigate-event.js | 6 - src/styles/left-nav/_index.scss | 184 ++++++++++++------ src/views/partials/menu-left.pug | 5 +- src/views/partials/widgets.pug | 1 + .../widgets/hubl-menu-contact-removed.pug | 2 +- 8 files changed, 139 insertions(+), 74 deletions(-) create mode 100644 src/scripts/menu-search-control.js diff --git a/package-lock.json b/package-lock.json index aeda57c..1fad494 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1159,9 +1159,9 @@ } }, "@startinblox/hubl-styling-framework": { - "version": "1.8.14", - "resolved": "https://registry.npmjs.org/@startinblox/hubl-styling-framework/-/hubl-styling-framework-1.8.14.tgz", - "integrity": "sha512-ku6c9oJWUy3S0qG+s7aNp7mOrS6nxQJYis5jCC0Iq0cmRe44HzUk4Z6AuU4jC06xk5Ce+SEieeasi78Zcuczdw==" + "version": "1.8.15", + "resolved": "https://registry.npmjs.org/@startinblox/hubl-styling-framework/-/hubl-styling-framework-1.8.15.tgz", + "integrity": "sha512-2bK5zsHOxI0wekAyIhI2MkD1FcWBuNnWpmrDigxHRrsO4kFDOGvIyIewW//5dZjwaL4aTgZzRFvEYb7kNSYYyg==" }, "@types/q": { "version": "1.5.4", diff --git a/package.json b/package.json index d732abc..eb6b566 100644 --- a/package.json +++ b/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", diff --git a/src/scripts/menu-search-control.js b/src/scripts/menu-search-control.js new file mode 100644 index 0000000..bd98663 --- /dev/null +++ b/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); +}); \ No newline at end of file diff --git a/src/scripts/navigate-event.js b/src/scripts/navigate-event.js index 3f9a320..5a25fbb 100644 --- a/src/scripts/navigate-event.js +++ b/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")); diff --git a/src/styles/left-nav/_index.scss b/src/styles/left-nav/_index.scss index 480e223..2fc7433 100644 --- a/src/styles/left-nav/_index.scss +++ b/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 { - transform: rotateX(180deg); - } + .menu-options { + float: right; + } - .badge { - padding-top: 2px; - margin-right: 5px; - } - - .icon { - padding: 3px; - } - - .menu-admin { - position: absolute; - z-index: 3016; - left: 48px; - bottom: 37px; - - @media (max-width: 768px) { - width: 100%; - left: 0; - height: 9vh; - top: 0; + .menu-admin { + 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-icon { - margin-left: 3px; - opacity: 0.8; - width: 12px; - >div { - line-height: 19px; + .sub-menu { + + /* Styles for the small icon */ + .sub-menu-icon { + margin-left: 3px; + opacity: 0.8; + 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 { - display: none; - } - - .menu-header>div.transform-up~.badge { - display: block; - } - - .badge { - float: right; + .empty { + display: flex; + flex-wrap: wrap; + padding-left: 13px; + width: 87%; } .divider { @@ -155,13 +155,75 @@ nav#main__menu { opacity: 0.2; } - .empty { - display: flex; - flex-wrap: wrap; - padding-left: 13px; - width: 87%; + + /* Header's general counter appear or disappear on click (JS animation) */ + .menu-header>div:not(.transform-up)~.badge { + display: none; } + .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; diff --git a/src/views/partials/menu-left.pug b/src/views/partials/menu-left.pug index 23a74ea..e3e6943 100644 --- a/src/views/partials/menu-left.pug +++ b/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" ) diff --git a/src/views/partials/widgets.pug b/src/views/partials/widgets.pug index b50b178..09e01a2 100644 --- a/src/views/partials/widgets.pug +++ b/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 diff --git a/src/views/partials/widgets/hubl-menu-contact-removed.pug b/src/views/partials/widgets/hubl-menu-contact-removed.pug index 392e52a..fa43e3e 100644 --- a/src/views/partials/widgets/hubl-menu-contact-removed.pug +++ b/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 != "" ? ` - ` : ""} + ` : ""} From 97f634b7b9bda779279ed2ef9664d43c618f9e71 Mon Sep 17 00:00:00 2001 From: gaelle morin Date: Thu, 1 Apr 2021 21:04:08 +0200 Subject: [PATCH 06/20] patch: left-menu - styles on search-form added --- src/styles/left-nav/_index.scss | 23 ++++++++++++++++++----- src/views/partials/menu-left.pug | 2 +- 2 files changed, 19 insertions(+), 6 deletions(-) diff --git a/src/styles/left-nav/_index.scss b/src/styles/left-nav/_index.scss index 2fc7433..f6fc293 100644 --- a/src/styles/left-nav/_index.scss +++ b/src/styles/left-nav/_index.scss @@ -20,6 +20,11 @@ nav#main__menu { .menu-search { + form::before, + solid-form-placeholder-text::before { + display: none; + } + form { display: flex; @@ -34,10 +39,6 @@ nav#main__menu { margin-top: 0; padding: 12px 13px; height: 50px; - background-image: url("/images/calendar.svg"); - background-position: right 12px top 50%; - background-repeat: no-repeat; - background-size: 14px; /* https://css-tricks.com/almanac/selectors/p/placeholder/ */ &::-webkit-input-placeholder { /* Chrome/Opera/Safari */ @@ -53,13 +54,25 @@ nav#main__menu { } &:focus { - background: #202B3C; + /*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; + } } } diff --git a/src/views/partials/menu-left.pug b/src/views/partials/menu-left.pug index e3e6943..fe40f53 100644 --- a/src/views/partials/menu-left.pug +++ b/src/views/partials/menu-left.pug @@ -1,4 +1,4 @@ -solid-form-search( +solid-form-search.icon.children-icon-magnifier( id='general-search' class='segment block form menu-search' fields='name' From b9e12293eb03ce9159eb08d2a3e4e9d8a76d97cf Mon Sep 17 00:00:00 2001 From: gaelle morin Date: Fri, 2 Apr 2021 09:52:47 +0200 Subject: [PATCH 07/20] patch: left-menu - styles on admin-menu --- src/styles/left-nav/_index.scss | 7 +++++-- src/views/partials/menu-left.pug | 4 ++-- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/styles/left-nav/_index.scss b/src/styles/left-nav/_index.scss index f6fc293..9ab21b9 100644 --- a/src/styles/left-nav/_index.scss +++ b/src/styles/left-nav/_index.scss @@ -101,14 +101,17 @@ nav#main__menu { .menu-admin { position: absolute; z-index: 3016; - left: 48px; - bottom: 37px; + left: 78px; + top: 36px; + text-align: end; + width: 64%; @media (max-width: 768px) { width: 100%; left: 0; height: 9vh; top: 0; + text-align: center; } } } diff --git a/src/views/partials/menu-left.pug b/src/views/partials/menu-left.pug index fe40f53..1c60625 100644 --- a/src/views/partials/menu-left.pug +++ b/src/views/partials/menu-left.pug @@ -32,7 +32,7 @@ solid-router#navbar-router(default-route='dashboard') if componentSet.has("admin") div.menu-options.segment.jsMenuOption div.menu-icon.icon.icon-small.icon-options-vertical - div.menu-admin.segment.three-quarter.bg-color-white.shadow.text-color-secondary.padding-xxsmall.whitespace-normal.hidden.jsMenuAdmin + div.menu-admin.segment.bg-color-white.shadow.text-color-secondary.padding-xxsmall.whitespace-normal.hidden.jsMenuAdmin solid-link.segment.full.one-line-ellipsis.padding-xxsmall.sm-padding-xsmall(next=`admin-${component.route}` data-trans="menuLeft.circlesBrowse") solid-link.segment.full.one-line-ellipsis.padding-xxsmall.sm-padding-xsmall(next=`admin-${component.route}-create` data-trans="menuLeft.circleCreate") solid-badge.badge(data-type="Mention" data-rdf-type="hd:circle") @@ -97,7 +97,7 @@ solid-router#navbar-router(default-route='dashboard') if componentSet.has("admin") div.menu-options.segment.jsMenuOption div.menu-icon.icon.icon-small.icon-options-vertical - div.menu-admin.segment.three-quarter.bg-color-white.shadow.text-color-secondary.padding-xxsmall.whitespace-normal.hidden.jsMenuAdmin + div.menu-admin.segment.bg-color-white.shadow.text-color-secondary.padding-xxsmall.whitespace-normal.hidden.jsMenuAdmin solid-link.segment.full.one-line-ellipsis.padding-xxsmall.sm-padding-xsmall(next=`admin-${component.route}` data-trans="menuLeft.projectsBrowse") solid-link.segment.full.one-line-ellipsis.padding-xxsmall.sm-padding-xsmall(next=`admin-${component.route}-create` data-trans="menuLeft.projectCreate") solid-badge.badge(data-type="Mention" data-rdf-type="hd:project") From f202e6f75e5bee2363eb50a25bcca9bea1b3fdbd Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Fri, 2 Apr 2021 10:41:18 +0200 Subject: [PATCH 08/20] feature: color swap on search --- src/scripts/menu-search-control.js | 31 ++++++++++++++++--- src/scripts/navigate-event.js | 19 ------------ .../partials/widgets/hubl-menu-empty.pug | 2 +- 3 files changed, 27 insertions(+), 25 deletions(-) diff --git a/src/scripts/menu-search-control.js b/src/scripts/menu-search-control.js index bd98663..7aff3c4 100644 --- a/src/scripts/menu-search-control.js +++ b/src/scripts/menu-search-control.js @@ -1,7 +1,28 @@ - document.addEventListener("DOMContentLoaded", () => { - const searchField = document.querySelector('.menu-search'); - console.log(searchField); - const leform = searchField.querySelector('form'); - console.log(leform); + 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'); + + 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 = "red"; //- Put overriden color here + } else { + searchForm.style.backgroundColor = "blue"; //- Put default color here + } + }) }); \ No newline at end of file diff --git a/src/scripts/navigate-event.js b/src/scripts/navigate-event.js index 5a25fbb..d2fc2e7 100644 --- a/src/scripts/navigate-event.js +++ b/src/scripts/navigate-event.js @@ -1,22 +1,3 @@ - -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'); - - menuHeader.addEventListener('click', e => { - menuArrow.classList.toggle('transform-up'); - menuSub.classList.toggle('hidden'); - }); - menuOption.addEventListener('click', e => { - menuAdmin.classList.toggle('hidden'); - e.stopPropagation(); - }); -}); - // auxiliary function closes the user profile menu function closeUserControls() { let userControls = Array.from(document.querySelectorAll(".user-controls")); diff --git a/src/views/partials/widgets/hubl-menu-empty.pug b/src/views/partials/widgets/hubl-menu-empty.pug index 565840f..f3b260a 100644 --- a/src/views/partials/widgets/hubl-menu-empty.pug +++ b/src/views/partials/widgets/hubl-menu-empty.pug @@ -1,4 +1,4 @@ -if componentSet.has('circles') || componentSet.has('projects') || componentSet.has('profileDirectory') +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') From e205176f602d32c824940c61be23cc8b0c193ee4 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Fri, 2 Apr 2021 11:10:11 +0200 Subject: [PATCH 09/20] fix: boldy # on unread --- src/views/partials/widgets/hubl-menu-publicprivate.pug | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/partials/widgets/hubl-menu-publicprivate.pug b/src/views/partials/widgets/hubl-menu-publicprivate.pug index 986cbdc..1365c1e 100644 --- a/src/views/partials/widgets/hubl-menu-publicprivate.pug +++ b/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' ? '#' : ''} \ No newline at end of file From 74021f4a7bac9aa4125a72217538a73c9b0affb9 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Fri, 2 Apr 2021 11:23:35 +0200 Subject: [PATCH 10/20] fix: menu weight # --- src/views/partials/widgets/hubl-menu-publicprivate.pug | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/partials/widgets/hubl-menu-publicprivate.pug b/src/views/partials/widgets/hubl-menu-publicprivate.pug index 1365c1e..b4a06ce 100644 --- a/src/views/partials/widgets/hubl-menu-publicprivate.pug +++ b/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-large': 'text-simple-line-icons text-xsmall'}" + class="${value == 'Public' ? 'text-bold text-large': 'text-simple-line-icons text-xsmall'}" ) ${value == 'Public' ? '#' : ''} \ No newline at end of file From e2656cc6616ab25dde4a468e3c341eeb26fc9030 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Fri, 2 Apr 2021 11:34:34 +0200 Subject: [PATCH 11/20] fix: bold on unread --- src/styles/left-nav/_index.scss | 3 +++ src/views/partials/widgets/hubl-menu-publicprivate.pug | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/styles/left-nav/_index.scss b/src/styles/left-nav/_index.scss index e180005..85fa7f6 100644 --- a/src/styles/left-nav/_index.scss +++ b/src/styles/left-nav/_index.scss @@ -7,6 +7,9 @@ nav#main__menu { .unread { font-weight: bolder; + .bold-on-unread { + font-weight: bolder!important; + } } solid-route.menu, diff --git a/src/views/partials/widgets/hubl-menu-publicprivate.pug b/src/views/partials/widgets/hubl-menu-publicprivate.pug index b4a06ce..bd41855 100644 --- a/src/views/partials/widgets/hubl-menu-publicprivate.pug +++ b/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-bold text-large': 'text-simple-line-icons text-xsmall'}" + class="${value == 'Public' ? 'bold-on-unread text-large': 'text-simple-line-icons text-xsmall'}" ) ${value == 'Public' ? '#' : ''} \ No newline at end of file From 4d88f3d2e69bed97e0536f865e4ba69921689d83 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Fri, 2 Apr 2021 11:38:46 +0200 Subject: [PATCH 12/20] fix: unread level --- src/scripts/unreads-menu.js | 2 +- src/views/partials/widgets/hubl-menu-publicprivate.pug | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/scripts/unreads-menu.js b/src/scripts/unreads-menu.js index e35c7e9..a656061 100644 --- a/src/scripts/unreads-menu.js +++ b/src/scripts/unreads-menu.js @@ -10,7 +10,7 @@ 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'); if (project) project.classList.remove('unread'); } diff --git a/src/views/partials/widgets/hubl-menu-publicprivate.pug b/src/views/partials/widgets/hubl-menu-publicprivate.pug index bd41855..1365c1e 100644 --- a/src/views/partials/widgets/hubl-menu-publicprivate.pug +++ b/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' ? 'bold-on-unread text-large': 'text-simple-line-icons text-xsmall'}" + class="${value == 'Public' ? 'text-large': 'text-simple-line-icons text-xsmall'}" ) ${value == 'Public' ? '#' : ''} \ No newline at end of file From 6cc5ed144a82c96056e7f30c184ff6025d2ae78e Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Fri, 2 Apr 2021 11:39:00 +0200 Subject: [PATCH 13/20] fix: removed unused styles --- src/styles/left-nav/_index.scss | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/styles/left-nav/_index.scss b/src/styles/left-nav/_index.scss index 85fa7f6..e180005 100644 --- a/src/styles/left-nav/_index.scss +++ b/src/styles/left-nav/_index.scss @@ -7,9 +7,6 @@ nav#main__menu { .unread { font-weight: bolder; - .bold-on-unread { - font-weight: bolder!important; - } } solid-route.menu, From 9f0f41dd00c936badb63803191f534e1d08db57a Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Fri, 2 Apr 2021 11:44:46 +0200 Subject: [PATCH 14/20] fix: path fixing --- src/scripts/unreads-menu.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/scripts/unreads-menu.js b/src/scripts/unreads-menu.js index a656061..322b807 100644 --- a/src/scripts/unreads-menu.js +++ b/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'); }); }); @@ -11,7 +11,7 @@ document.addEventListener("DOMContentLoaded", function () { const badge = document.querySelector(`solid-badge[data-src="${event.detail.resource['@id']}"]`); if (badge) { 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'); } From 1e5d21d7ed9ffd29a24e2861cad1143a69cd7a15 Mon Sep 17 00:00:00 2001 From: gaelle morin Date: Fri, 2 Apr 2021 16:02:25 +0200 Subject: [PATCH 15/20] fix: header - notifications look better on Firefox --- src/styles/header/_index.scss | 23 ++++++++++++++--------- src/views/partials/header.pug | 2 +- 2 files changed, 15 insertions(+), 10 deletions(-) diff --git a/src/styles/header/_index.scss b/src/styles/header/_index.scss index b296da1..d1e9eac 100644 --- a/src/styles/header/_index.scss +++ b/src/styles/header/_index.scss @@ -28,7 +28,9 @@ header { solid-notifications { color: var(--color-heading); align-self: center; - margin-top: 9px; + + height: 25px; + width: 25px; .solid-notifications__container { position: relative; @@ -39,11 +41,14 @@ header { } .solid-notifications__button { - margin-top: -9px; - font-size: 24px; + font-size: 25px; + padding: 0; + line-height: 1; + height: auto; + width: auto; &::before { - margin-left: -9px; + // margin-left: -9px; } &:hover, &:focus { @@ -55,11 +60,11 @@ header { } .solid-notifications__counter { - height: 18px; - width: 18px; - left: 17px; + left: 12px; position: absolute; - top: 5px; + top: -4px; + width: 18px; + height: 18px; span { background-color: var(--color-primary); @@ -93,7 +98,7 @@ header { position: absolute; width: 0; height: 0; - margin-left: -5.05em; + margin-left: -4.2em; top: 0px; left: 50%; border: 1em solid black; diff --git a/src/views/partials/header.pug b/src/views/partials/header.pug index e9db9e5..5277980 100644 --- a/src/views/partials/header.pug +++ b/src/views/partials/header.pug @@ -17,7 +17,7 @@ div ) if componentSet.has("notification") - solid-notifications.segment.margin-right-small( + solid-notifications.segment.margin-right-large( nested-field="inbox" bind-user ) From dba3f11cd29a4f374411f4d288c2fe7f484fbc21 Mon Sep 17 00:00:00 2001 From: gaelle morin Date: Fri, 2 Apr 2021 19:21:20 +0200 Subject: [PATCH 16/20] fix: left menu - cearch menu colors + contact submenu --- src/scripts/menu-search-control.js | 4 ++-- src/styles/header/_index.scss | 4 ---- src/styles/left-nav/_index.scss | 27 ++++++++++++++++++--------- src/views/partials/menu-left.pug | 2 +- 4 files changed, 21 insertions(+), 16 deletions(-) diff --git a/src/scripts/menu-search-control.js b/src/scripts/menu-search-control.js index 7aff3c4..7794d37 100644 --- a/src/scripts/menu-search-control.js +++ b/src/scripts/menu-search-control.js @@ -20,9 +20,9 @@ document.addEventListener("DOMContentLoaded", () => { const searchForm = document.querySelector('.menu-search'); searchForm.addEventListener('formChange', () => { if(document.querySelector('.menu-search input').value != "") { - searchForm.style.backgroundColor = "red"; //- Put overriden color here + searchForm.style.backgroundColor = "#202B3C"; //- Put overriden color here } else { - searchForm.style.backgroundColor = "blue"; //- Put default color here + searchForm.style.backgroundColor = "var(--color-heading)"; //- Put default color here } }) }); \ No newline at end of file diff --git a/src/styles/header/_index.scss b/src/styles/header/_index.scss index d1e9eac..4865079 100644 --- a/src/styles/header/_index.scss +++ b/src/styles/header/_index.scss @@ -47,10 +47,6 @@ header { height: auto; width: auto; - &::before { - // margin-left: -9px; - } - &:hover, &:focus { background: white; } diff --git a/src/styles/left-nav/_index.scss b/src/styles/left-nav/_index.scss index 9ab21b9..8665bca 100644 --- a/src/styles/left-nav/_index.scss +++ b/src/styles/left-nav/_index.scss @@ -19,6 +19,7 @@ nav#main__menu { } .menu-search { + padding: 0; form::before, solid-form-placeholder-text::before { @@ -49,10 +50,6 @@ nav#main__menu { color: #D0D4DA; } - &:-moz-placeholder { /* Firefox 18- */ - color: #D0D4DA; - } - &:focus { /*background: #202B3C;*/ color: white; @@ -195,21 +192,28 @@ nav#main__menu { &:hover { display: flex; + & *:not(button) { + background: #202B3C; + } + 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; + padding-left: 10px; - .button-remove button::before { - font-size: 18px; - color: white; + .button-remove { + padding: 0; + + button::before { + font-size: 18px; + color: white; + } } } } @@ -218,6 +222,7 @@ nav#main__menu { /* Modal to keep/remove a contact */ hubl-menu-contact-removed dialog { + background: white !important; border: none; padding: 60px 30px; text-align: center; @@ -231,6 +236,10 @@ nav#main__menu { font-size: 16px; } + div, p { + background: white !important; + } + &::before, p::before, div::before, diff --git a/src/views/partials/menu-left.pug b/src/views/partials/menu-left.pug index 1c60625..c2e1570 100644 --- a/src/views/partials/menu-left.pug +++ b/src/views/partials/menu-left.pug @@ -125,7 +125,7 @@ solid-router#navbar-router(default-route='dashboard') ) div.divider if component.type == "profileDirectory" - solid-route.menu-tab.segment.full.padding-xsmall.text-semibold.text-color-white.bg-color-heading.hover(name=component.route) + solid-route.menu-tab.segment.full.padding-xsmall.text-semibold.text-color-white.heading-active.bg-color-heading.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") From aa236d0604c1ccb6634fc35accef02deb75d05ec Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Tue, 6 Apr 2021 13:24:07 +0200 Subject: [PATCH 17/20] fix: various menu fixes & improvements --- src/images/magnify-white.svg | 1 + src/scripts/menu-search-control.js | 38 +++++++-- src/styles/admin-circles/_index.scss | 55 +++++++++++++ src/styles/index.scss | 55 ------------- src/styles/left-nav/_index.scss | 82 +++++++++++++------ src/views/partials/menu-left.pug | 23 +++--- .../widgets/hubl-menu-contact-removed.pug | 3 +- .../widgets/hubl-menu-fix-url-circle.pug | 2 +- .../widgets/hubl-menu-fix-url-contact.pug | 2 +- .../widgets/hubl-menu-fix-url-project.pug | 2 +- 10 files changed, 165 insertions(+), 98 deletions(-) create mode 100644 src/images/magnify-white.svg diff --git a/src/images/magnify-white.svg b/src/images/magnify-white.svg new file mode 100644 index 0000000..e326db1 --- /dev/null +++ b/src/images/magnify-white.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/scripts/menu-search-control.js b/src/scripts/menu-search-control.js index 7794d37..a4bb17f 100644 --- a/src/scripts/menu-search-control.js +++ b/src/scripts/menu-search-control.js @@ -6,7 +6,33 @@ document.addEventListener("DOMContentLoaded", () => { 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'); @@ -16,13 +42,15 @@ document.addEventListener("DOMContentLoaded", () => { e.stopPropagation(); }); }); - + const searchForm = document.querySelector('.menu-search'); searchForm.addEventListener('formChange', () => { - if(document.querySelector('.menu-search input').value != "") { - searchForm.style.backgroundColor = "#202B3C"; //- Put overriden color here + 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)"; //- Put default color here + searchForm.style.backgroundColor = "var(--color-heading)"; + document.querySelector('#main__menu').classList.toggle('searching', false); } }) }); \ No newline at end of file diff --git a/src/styles/admin-circles/_index.scss b/src/styles/admin-circles/_index.scss index d02c585..e80679a 100644 --- a/src/styles/admin-circles/_index.scss +++ b/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; diff --git a/src/styles/index.scss b/src/styles/index.scss index d2dd306..a5fc667 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -88,61 +88,6 @@ hubl-menu-empty+hubl-menu-empty { justify-content: center; } -/* 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; diff --git a/src/styles/left-nav/_index.scss b/src/styles/left-nav/_index.scss index 8665bca..2e71699 100644 --- a/src/styles/left-nav/_index.scss +++ b/src/styles/left-nav/_index.scss @@ -1,10 +1,35 @@ nav#main__menu { height: 100vh; + &.searching { + background-image: url('../images/magnify-white.svg'); + background-color: var(--color-heading); + background-repeat: no-repeat; + background-position-x: 80px; + background-position-y: 150px; + background-size: 180px; + } + @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; } @@ -35,18 +60,20 @@ nav#main__menu { } input { - background: var(--color-heading); + 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 */ + &::-webkit-input-placeholder { + /* Chrome/Opera/Safari */ color: #D0D4DA; } - &::-moz-placeholder { /* Firefox 19+ */ + &::-moz-placeholder { + /* Firefox 19+ */ color: #D0D4DA; } @@ -102,7 +129,7 @@ nav#main__menu { top: 36px; text-align: end; width: 64%; - + @media (max-width: 768px) { width: 100%; left: 0; @@ -120,6 +147,7 @@ nav#main__menu { margin-left: 3px; opacity: 0.8; width: 12px; + >div { line-height: 19px; } @@ -177,6 +205,7 @@ nav#main__menu { .menu-header>div.transform-up~.badge { display: block; } + /* End */ /* The little cross icon on contacts' name appears or disapear + hover + styles */ @@ -188,36 +217,42 @@ nav#main__menu { } .sub-menu__contacts>div>solid-display { + height: 28px; + display: block; &:hover { - display: flex; - - & *:not(button) { - background: #202B3C; - } 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; - margin-left: auto; - padding-right: 10px; - padding-left: 10px; - .button-remove { - padding: 0; - - button::before { - font-size: 18px; - color: white; - } + button::before { + font-size: 18px; + color: white; } } } } + /* End */ /* Modal to keep/remove a contact */ @@ -236,7 +271,8 @@ nav#main__menu { font-size: 16px; } - div, p { + div, + p { background: white !important; } @@ -247,6 +283,7 @@ nav#main__menu { display: none; } } + /* End */ &.jsLeftMenu { @@ -271,5 +308,4 @@ nav#main__menu { z-index: 3000; } } -} - +} \ No newline at end of file diff --git a/src/views/partials/menu-left.pug b/src/views/partials/menu-left.pug index c2e1570..a523d5e 100644 --- a/src/views/partials/menu-left.pug +++ b/src/views/partials/menu-left.pug @@ -18,14 +18,14 @@ solid-router#navbar-router(default-route='dashboard') if component.type == "about" solid-route(name=component.route, hidden) if component.type == "dashboard" - solid-route.menu-tab.segment.full.padding-xsmall.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"}`) div.divider if component.type == "circles" div.jsMenuTab - div.menu-header.segment.full.padding-xsmall.text-semibold.text-color-white.bg-color-heading.hover.jsMenuHeader + div.menu-header.segment.full.padding-xsmall.text-semibold.text-color-white.bg-color-heading.transparent-background.hover.cursor-pointer.jsMenuHeader div.segment.margin-right-xxsmall.jsMenuArrow div.segment.icon.icon-small.icon-arrow-down div.segment.half.text-uppercase.text-letter-spacing-large(data-trans=`${component.name?component.name:"menuLeft.circles"}`) @@ -40,7 +40,7 @@ solid-router#navbar-router(default-route='dashboard') solid-route(name=`admin-${component.route}-create` hidden) solid-route(name=`admin-${component.route}-leave` hidden) solid-route(name=component.route rdf-type='hd:circle' use-id='' hidden) - solid-route(name=`${component.route}-left`) + 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 @@ -62,7 +62,7 @@ solid-router#navbar-router(default-route='dashboard') div.divider if component.type == "chat" div.jsMenuTab - div.menu-header.segment.full.padding-xsmall.text-semibold.text-color-white.bg-color-heading.hover.jsMenuHeader + div.menu-header.segment.full.padding-xsmall.text-semibold.text-color-white.bg-color-heading.transparent-background.hover.cursor-pointer.jsMenuHeader div.segment.margin-right-xxsmall.jsMenuArrow div.segment.icon.icon-small.icon-arrow-down div.segment.half.text-uppercase.text-letter-spacing-large(data-trans=`${component.name?component.name:"menuLeft.messages"}`) @@ -70,6 +70,7 @@ solid-router#navbar-router(default-route='dashboard') div.menu-options.segment.jsMenuOption solid-link.segment.block.menu-icon.icon.icon-small.icon-user-follow(next=getRoute('profileDirectory', true)) solid-badge.badge(data-type="Message") + solid-route(name=`admin-${component.route}`, hidden) solid-route(name=component.route, rdf-type='foaf:user', use-id='', hidden) div.sub-menu.menu-notification.padding-bottom-xxsmall.jsMenuSub div.loader.loader-menu(id=`loader-${component.route}`) @@ -90,7 +91,7 @@ solid-router#navbar-router(default-route='dashboard') ) if component.type == "projects" div.jsMenuTab - div.menu-header.segment.full.padding-xsmall.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active.jsMenuHeader + div.menu-header.segment.full.padding-xsmall.text-semibold.text-color-white.heading-active.bg-color-heading.transparent-background.hover.active.cursor-pointer.jsMenuHeader div.segment.margin-right-xxsmall.jsMenuArrow div.segment.icon.icon-small.icon-arrow-down div.segment.half.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.projects") @@ -121,36 +122,36 @@ solid-router#navbar-router(default-route='dashboard') 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-tab.segment.full.padding-xsmall.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-tab.segment.full.padding-xsmall.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-tab.segment.full.padding-xsmall.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-tab.segment.full.padding-xsmall.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-tab.segment.full.padding-xsmall.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") diff --git a/src/views/partials/widgets/hubl-menu-contact-removed.pug b/src/views/partials/widgets/hubl-menu-contact-removed.pug index fa43e3e..60b2d44 100644 --- a/src/views/partials/widgets/hubl-menu-contact-removed.pug +++ b/src/views/partials/widgets/hubl-menu-contact-removed.pug @@ -1,4 +1,5 @@ if componentSet.has('chat') solid-widget(name='hubl-menu-contact-removed') template ${value != "" ? ` - ` : ""} + ` : ""} + //- Fix: using type confirm, dialog is not available on Firefox, polyfill only works if dialog is a direct child of body \ No newline at end of file diff --git a/src/views/partials/widgets/hubl-menu-fix-url-circle.pug b/src/views/partials/widgets/hubl-menu-fix-url-circle.pug index 53188da..2f88368 100644 --- a/src/views/partials/widgets/hubl-menu-fix-url-circle.pug +++ b/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 != "" ? ` - + ` : ""} \ No newline at end of file diff --git a/src/views/partials/widgets/hubl-menu-fix-url-contact.pug b/src/views/partials/widgets/hubl-menu-fix-url-contact.pug index 0dc51e3..74188e9 100644 --- a/src/views/partials/widgets/hubl-menu-fix-url-contact.pug +++ b/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 != "" ? ` - + ` : ""} \ No newline at end of file diff --git a/src/views/partials/widgets/hubl-menu-fix-url-project.pug b/src/views/partials/widgets/hubl-menu-fix-url-project.pug index b764d4d..9e4794f 100644 --- a/src/views/partials/widgets/hubl-menu-fix-url-project.pug +++ b/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 != "" ? ` - + ` : ""} \ No newline at end of file From 9ea268552eb9e59215267dab01dac888674dc250 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Tue, 6 Apr 2021 13:27:49 +0200 Subject: [PATCH 18/20] fix: menu magnifier on mobile --- src/styles/left-nav/_index.scss | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/styles/left-nav/_index.scss b/src/styles/left-nav/_index.scss index 2e71699..6dc5c91 100644 --- a/src/styles/left-nav/_index.scss +++ b/src/styles/left-nav/_index.scss @@ -5,9 +5,13 @@ nav#main__menu { background-image: url('../images/magnify-white.svg'); background-color: var(--color-heading); background-repeat: no-repeat; - background-position-x: 80px; + background-position-x: right -20px; background-position-y: 150px; - background-size: 180px; + background-size: 80%; + + @media (max-width: 768px) { + background-size: 60%; + } } @media (max-width: 768px) { From 0945a3a9fc5155fb354230f5b8c6f09bbb00b37a Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Tue, 6 Apr 2021 13:58:24 +0200 Subject: [PATCH 19/20] fix: mobile white submenu --- src/locales/en.json | 1 + src/locales/es.json | 1 + src/locales/fr.json | 1 + src/styles/left-nav/_index.scss | 13 +++++++++---- src/views/partials/menu-left.pug | 2 ++ 5 files changed, 14 insertions(+), 4 deletions(-) diff --git a/src/locales/en.json b/src/locales/en.json index 428112d..cde20c6 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -25,6 +25,7 @@ "jobBoard": "Job offers", "profileDirectory": "Profiles directory", "projects": "Projects", + "closeMenu": "Close menu", "projectsBrowse": "Browse projects", "projectCreate": "Create project", "circles": "Circles", diff --git a/src/locales/es.json b/src/locales/es.json index e22a1f2..a393f2b 100644 --- a/src/locales/es.json +++ b/src/locales/es.json @@ -25,6 +25,7 @@ "jobBoard": "Ofertas de trabajo", "profileDirectory": "Directorio de miembrxs", "projects": "Proyectos", + "closeMenu": "Cerrar menú", "projectsBrowse": "Examinar los proyectos", "projectCreate": "Crea un proyecto", "circles": "Círculos", diff --git a/src/locales/fr.json b/src/locales/fr.json index 25ba3bd..e58d485 100644 --- a/src/locales/fr.json +++ b/src/locales/fr.json @@ -25,6 +25,7 @@ "jobBoard": "Offres de mission", "profileDirectory": "Annuaire des membres", "projects": "Projets", + "closeMenu": "Fermer le menu", "projectsBrowse": "Parcourir les projets", "projectCreate": "Créer un projet", "circles": "Cercles", diff --git a/src/styles/left-nav/_index.scss b/src/styles/left-nav/_index.scss index 6dc5c91..0288baf 100644 --- a/src/styles/left-nav/_index.scss +++ b/src/styles/left-nav/_index.scss @@ -116,10 +116,12 @@ nav#main__menu { margin-right: 5px; } - /* For the icon and the small sub-sub-menu*/ - &:not(:hover) .menu-options, - &:not(:hover) .menu-admin { - display: none; + @media (min-width: 768.01px) { + + &:not(:hover) .menu-options, + &:not(:hover) .menu-admin { + display: none; + } } .menu-options { @@ -140,6 +142,9 @@ nav#main__menu { height: 9vh; top: 0; text-align: center; + position: fixed; + top: 50px; + height: calc(100% - 50px); } } } diff --git a/src/views/partials/menu-left.pug b/src/views/partials/menu-left.pug index a523d5e..ffe7fca 100644 --- a/src/views/partials/menu-left.pug +++ b/src/views/partials/menu-left.pug @@ -33,6 +33,7 @@ solid-router#navbar-router(default-route='dashboard') div.menu-options.segment.jsMenuOption div.menu-icon.icon.icon-small.icon-options-vertical div.menu-admin.segment.bg-color-white.shadow.text-color-secondary.padding-xxsmall.whitespace-normal.hidden.jsMenuAdmin + span.segment.full.one-line-ellipsis.padding-xxsmall.sm-padding-xsmall.lg-hidden(data-trans="menuLeft.closeMenu" onclick="this.parentElement.classList.toggle('hidden', true)") solid-link.segment.full.one-line-ellipsis.padding-xxsmall.sm-padding-xsmall(next=`admin-${component.route}` data-trans="menuLeft.circlesBrowse") solid-link.segment.full.one-line-ellipsis.padding-xxsmall.sm-padding-xsmall(next=`admin-${component.route}-create` data-trans="menuLeft.circleCreate") solid-badge.badge(data-type="Mention" data-rdf-type="hd:circle") @@ -99,6 +100,7 @@ solid-router#navbar-router(default-route='dashboard') div.menu-options.segment.jsMenuOption div.menu-icon.icon.icon-small.icon-options-vertical div.menu-admin.segment.bg-color-white.shadow.text-color-secondary.padding-xxsmall.whitespace-normal.hidden.jsMenuAdmin + span.segment.full.one-line-ellipsis.padding-xxsmall.sm-padding-xsmall.lg-hidden(data-trans="menuLeft.closeMenu" onclick="this.parentElement.classList.toggle('hidden', true)") solid-link.segment.full.one-line-ellipsis.padding-xxsmall.sm-padding-xsmall(next=`admin-${component.route}` data-trans="menuLeft.projectsBrowse") solid-link.segment.full.one-line-ellipsis.padding-xxsmall.sm-padding-xsmall(next=`admin-${component.route}-create` data-trans="menuLeft.projectCreate") solid-badge.badge(data-type="Mention" data-rdf-type="hd:project") From b9a8c8ba4de7985088e46bda8c024cf121439ff8 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Tue, 6 Apr 2021 13:43:05 +0000 Subject: [PATCH 20/20] force sw update --- src/sw.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/sw.js b/src/sw.js index 76fb0ba..87b192f 100644 --- a/src/sw.js +++ b/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();