autonomic-cooperative/hubl
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feature: new header and left-menu

Browse Source
This commit is contained in:
gaelle morin 2021-04-01 07:10:59 +02:00
parent 1438c73c2f
commit bc0b8c3e04
No known key found for this signature in database
GPG Key ID: 028426702B95CF9C
23 changed files with 270 additions and 217 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
package-lock.json generated
View File

@ -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",

2
package.json
View File

@ -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",

5
src/index.pug
View File

@ -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

10
src/locales/en.json
View File

@ -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": {

10
src/locales/es.json
View File

@ -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": {

10
src/locales/fr.json
View File

@ -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": {

25
src/scripts/navigate-event.js
View File

@ -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"));

2
src/styles/chat/_index.scss
View File

@ -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);

19
src/styles/content/_index.scss
View File

@ -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*/

54
src/styles/header/_index.scss
View File

@ -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;
@ -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;

18
src/styles/index.scss
View File

@ -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;
}

6
src/styles/job-offers/_index.scss
View File

@ -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);
}

99
src/styles/left-nav/_index.scss
View File

@ -1,5 +1,5 @@
nav#main__menu {
height: calc(100vh - 72px);
height: 100vh;
@media (max-width: 768px) {
min-height: calc(100vh - 50px);
@ -9,32 +9,93 @@ nav#main__menu {
font-weight: bolder;
}
solid-route.menu,
solid-link.menu,
div.menu {
.menu-search {
.icon {
padding: 8px;
border-radius: 50%;
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%;
}

6
src/styles/members/_index.scss
View File

@ -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);
}

20
src/views/partials/header.pug
View File

@ -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
)

156
src/views/partials/menu-left.pug
View File

@ -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")

3
src/views/partials/widgets.pug
View File

@ -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

9
src/views/partials/widgets/hubl-create-contact.pug
View File

@ -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")

10
src/views/partials/widgets/hubl-menu-create.pug
View File

@ -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")

5
src/views/partials/widgets/hubl-menu-empty.pug Normal file
View File

@ -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")

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

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

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

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

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

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