From bc0b8c3e0438049a3eea824dda493cf40450a702 Mon Sep 17 00:00:00 2001 From: gaelle morin Date: Thu, 1 Apr 2021 07:10:59 +0200 Subject: [PATCH] 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