From d34a0dceba79b15b12b007908d5ba30c4f8debb9 Mon Sep 17 00:00:00 2001
From: gaelle morin <gmorin.dev@gmail.com>
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 0732c950..0ce144dd 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 9ceec8bf..748e1a58 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 7269f9c2..cace5650 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
--
GitLab