From d34a0dceba79b15b12b007908d5ba30c4f8debb9 Mon Sep 17 00:00:00 2001 From: gaelle morin Date: Fri, 18 Dec 2020 17:23:46 +0100 Subject: [PATCH] feature: left-menu - main tabs and project sub-tab --- src/index.pug | 4 +- src/styles/left-nav/_index.scss | 82 ++++++++++++++++++++++++- src/views/partials/menu-left.pug | 101 +++++++++++++++++-------------- 3 files changed, 140 insertions(+), 47 deletions(-) diff --git a/src/index.pug b/src/index.pug index 0732c95..0ce144d 100644 --- a/src/index.pug +++ b/src/index.pug @@ -47,8 +47,8 @@ html(lang="en") header#header.segment.lg-full.padding-left-large.padding-right-large.shadow-small.text-disable-selection include views/partials/header.pug - //- nav#main__menu.segment.bg-color-heading.lg-quarter.float-left - //- include views/partials/menu-left.pug + nav#main__menu.segment.bg-color-heading.lg-quarter + include views/partials/menu-left.pug //- main#content.segment.lg-three-quarter.float-left.notLoggedIn diff --git a/src/styles/left-nav/_index.scss b/src/styles/left-nav/_index.scss index 9ceec8b..748e1a5 100644 --- a/src/styles/left-nav/_index.scss +++ b/src/styles/left-nav/_index.scss @@ -1,3 +1,83 @@ nav { height: calc(100vh - 72px); -} \ No newline at end of file + + .unread { + font-weight: bolder; + } + + solid-route.menu, + solid-link.menu, + div.menu { + + .icon { + padding: 8px; + border-radius: 50%; + } + &:hover .icon, + &[active] .icon { + color: white; + background: var(--color-heading); + } + &[active]+.divider { + display: none; + } + } + + + /* Styles for the small icon */ + .sub-menu-icon { + margin-left: 3px; + margin-right: 3px; + opacity: 0.8; + vertical-align: top; + + div { + font-family: simple-line-icons; + font-size: 12px; + } + } + + .sub-menu-name { + margin-right: 14px; + } + + + + + /* Ellipsis for project tab */ + .project-tab { + + hubl-menu-fix-url-project { + display: block; + } + + .project-customer, + .project-name { + display: block; + width: calc(80vw - 96px); + + @media(min-width: 1024px) { + width: calc(100% - 10px); + } + } + + .project-customer, + .project-name>div { + + @media(min-width: 1024px) { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + } + } + + + .divider { + height: 1px; + background-color: #D7DBE0; + opacity: 0.2; + } +} + diff --git a/src/views/partials/menu-left.pug b/src/views/partials/menu-left.pug index 7269f9c..cace565 100644 --- a/src/views/partials/menu-left.pug +++ b/src/views/partials/menu-left.pug @@ -66,12 +66,18 @@ solid-widget(name='hubl-menu-fix-url-project') solid-link.segment.lg-full(data-src="${value}" next="project") solid-display( data-src='${value}' - fields='status, project(customer.name, name, jabberID), badge' - class-project='sub-menu-name' - class-status='sub-menu-icon' - class-name='project-name' - class-customer.name='project-customer' - class-badge='badge' + fields='segment(status, project(customer.name, name, jabberID), badge)' + class-segment="segment lg-full padding-top-xxsmall padding-right-small padding-left-medium" + + class-status='segment sub-menu-icon' + + class-project='segment lg-three-quarter sub-menu-name' + + class-customer.name='segment project-customer' + class-name='segment project-name' + + class-badge='segment badge text-top' + value-badge='${value}' widget-status='hubl-menu-publicprivate' widget-jabberID='hubl-menu-jabberid' @@ -83,45 +89,51 @@ solid-widget(name='hubl-menu-fix-url-project') solid-router#navbar-router(default-route='dashboard') if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards) - solid-route.menu.segment.lg-auto.padding.text-bold(name='dashboard') - div.menu-icon.icon-home.segment.lg-auto.margin-right-xsmall.float-left - div.menu-label.segment.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.dashboard") + solid-route.menu.segment.lg-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name='dashboard') + div.segment.margin-right-xxsmall + div.icon.icon-small.icon-home + div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.dashboard") div.divider if publicDirectory && (endpoints.users || (endpoints.get && endpoints.get.users)) - solid-route.menu.segment.lg-auto.padding.text-bold(name='members') - div.menu-icon.icon-people.segment.lg-auto.margin-right-xsmall.float-left - div.menu-label.segment.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.profileDirectory") + solid-route.menu.segment.lg-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name='members') + div.segment.margin-right-xxsmall + div.segment.icon.icon-small.icon-people + div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.profileDirectory") div.divider if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers) - solid-route.menu.segment.lg-auto.padding.text-bold(name='job-offers', rdf-type='hd:joboffer') - div.menu-icon.icon-briefcase.segment.lg-auto.margin-right-xsmall.float-left - div.menu-label.segment.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.jobBoard") + solid-route.menu.segment.lg-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name='job-offers', 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 endpoints.resources || (endpoints.get && endpoints.get.resources) - solid-route.menu.segment.lg-auto.padding.text-bold(name='resources') - div.menu-icon.icon-docs.segment.lg-auto.margin-right-xsmall.float-left - div.menu-label.segment.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.resources") + solid-route.menu.segment.lg-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name='resources') + 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 endpoints.polls || (endpoints.get && endpoints.get.polls) - solid-route.menu.segment.lg-auto.padding.text-bold(name='polls') - div.menu-icon.icon-bubbles.segment.lg-auto.margin-right-xsmall.float-left - div.menu-label.segment.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.gov") + solid-route.menu.segment.lg-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name='polls') + 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 endpoints.events || (endpoints.get && endpoints.get.events) - solid-route.menu.segment.lg-auto.padding.text-bold(name='events') - div.menu-icon.icon-calendar.segment.lg-auto.margin-right-xsmall.float-left - div.menu-label.segment.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.events") + solid-route.menu.segment.lg-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name='events') + div.segment.margin-right-xxsmall + div.segment.icon.icon-small.icon-calendar + div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.events") div.divider if endpoints.projects || (endpoints.get && endpoints.get.projects) div.menu-wrapper - solid-link.segment.lg-full + solid-link.menu.segment.lg-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active //- (next='admin-project-list') - div.menu.segment.lg-auto.padding.text-bold - div.menu-icon.icon-folder-alt.segment.lg-auto.margin-right-xsmall.float-left - div.menu-label.segment.lg-three-quarter.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.projects") - div.menu-chevron.segment.lg-auto.float-left - div.menu-icon.icon-arrow-up - //- div.menu-icon.icon-arrow-right-circle + div.segment.margin-right-xxsmall + div.segment.icon.icon-small.icon-folder-alt + div.segment.lg-three-quarter.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.projects") + div.menu-chevron.segment + div.icon-arrow-up + //- div.menu-icon.icon-arrow-right-circle solid-route(name='project', rdf-type='hd:project', use-id='', hidden) div.sub-menu.menu-notification div#loader-projects.loader.loader-menu @@ -129,7 +141,7 @@ solid-router#navbar-router(default-route='dashboard') div div div - solid-display.project-tab.segment.lg-full( + solid-display.project-tab.text-color-white( bind-user nested-field='projects' fields='project' @@ -143,14 +155,14 @@ solid-router#navbar-router(default-route='dashboard') div.divider if endpoints.circles || (endpoints.get && endpoints.get.circles) div.menu-wrapper - solid-link.segment.lg-full + solid-link.menu.segment.lg-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active //- (next='admin-circle-list') - div.menu.segment.lg-auto.padding.text-bold - div.menu-icon.icon-folder-alt.segment.lg-auto.margin-right-xsmall.float-left - div.menu-label.segment.lg-three-quarter.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.circles") - div.menu-chevron.segment.lg-auto.float-left - div.menu-icon.icon-arrow-up - //- div.menu-icon.icon-arrow-right-circle + div.segment.margin-right-xxsmall + div.segment.icon.icon-small.icon-folder-alt + div.segment.lg-three-quarter.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.circles") + div.menu-chevron.segment + div.icon-arrow-up + //- div.menu-icon.icon-arrow-right-circle solid-route(name='circle', rdf-type='hd:circle', use-id='', hidden) div.sub-menu.menu-notification div#loader-circles.loader.loader-menu @@ -171,11 +183,12 @@ solid-router#navbar-router(default-route='dashboard') ) div.divider div.menu-wrapper - div.menu.segment.lg-auto.padding.text-bold - div.menu-icon.icon-envelope-letter.segment.lg-auto.margin-right-xsmall.float-left - div.menu-label.segment.lg-three-quarter.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.messages") - div.menu-chevron.segment.lg-auto.float-left - div.menu-icon.icon-arrow-up + div.menu.segment.lg-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active + div.segment.margin-right-xxsmall + div.segment.icon.icon-small.icon-envelope-letter + div.segment.lg-three-quarter.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.messages") + div.menu-chevron.segment + div.icon-arrow-up solid-route(name='messages', rdf-type='foaf:user', use-id='', hidden) div.sub-menu.menu-notification div#loader-messages.loader.loader-menu