From 6e1626100885659acfc1efd93cb7cf0ac8582aee Mon Sep 17 00:00:00 2001 From: gaelle morin Date: Fri, 20 Nov 2020 11:43:45 +0100 Subject: [PATCH] feature: left-menu: messages --- src/menu-left.pug | 14 +++++++--- src/styles/base/main.scss | 3 ++ src/styles/base/menu-left.scss | 51 +++++++++++++++++++++------------- 3 files changed, 45 insertions(+), 23 deletions(-) diff --git a/src/menu-left.pug b/src/menu-left.pug index 3ceeeee..4e2b5df 100644 --- a/src/menu-left.pug +++ b/src/menu-left.pug @@ -14,7 +14,7 @@ solid-widget(name='hubl-menu-publicprivate') solid-widget(name='hubl-create') template - p.create + p.create.segment.margin-left-small span(data-trans="menuLeft.emptyCircleProject.notPartOf") span  ${value}. br @@ -58,26 +58,32 @@ solid-router#navbar-router(default-route='dashboard') solid-route.menu.segment.lg-auto.padding.text-bold(name='dashboard') div.menu-icon.icon-home.segment.lg-auto.margin-right-small.float-left div.menu-label.segment.text-uppercase.text-letter-spacing-large.float-left(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-small.float-left div.menu-label.segment.text-uppercase.text-letter-spacing-large.float-left(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-small.float-left div.menu-label.segment.text-uppercase.text-letter-spacing-large.float-left(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-small.float-left div.menu-label.segment.text-uppercase.text-letter-spacing-large.float-left(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-small.float-left div.menu-label.segment.text-uppercase.text-letter-spacing-large.float-left(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-small.float-left div.menu-label.segment.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.events") + div.divider if endpoints.projects || (endpoints.get && endpoints.get.projects) div.menu-wrapper solid-link.segment.lg-full @@ -89,7 +95,7 @@ solid-router#navbar-router(default-route='dashboard') div.menu-icon.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.sub-menu.menu-notification.segment.margin-left-small.margin-right-small div#loader-projects.loader.loader-menu div div @@ -118,7 +124,7 @@ solid-router#navbar-router(default-route='dashboard') div.menu-icon.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.sub-menu.menu-notification.segment.margin-left-small.margin-right-small div#loader-circles.loader.loader-menu div div @@ -144,7 +150,7 @@ solid-router#navbar-router(default-route='dashboard') div.menu-chevron.segment.lg-auto.float-left div.menu-icon.icon-arrow-up solid-route(name='messages', rdf-type='foaf:user', use-id='', hidden) - div.sub-menu.menu-notification + div.sub-menu.menu-notification.segment.margin-left-small.margin-right-small div#loader-messages.loader.loader-menu div div diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss index 39fbbb9..8473ee9 100644 --- a/src/styles/base/main.scss +++ b/src/styles/base/main.scss @@ -66,6 +66,9 @@ &.margin-left { margin-left: 20px; } + &.margin-left-small { + margin-left: 15px; + } &.margin-right-small { margin-right: 15px; } diff --git a/src/styles/base/menu-left.scss b/src/styles/base/menu-left.scss index f39f16a..cc53130 100644 --- a/src/styles/base/menu-left.scss +++ b/src/styles/base/menu-left.scss @@ -43,7 +43,6 @@ .menu { cursor: pointer; - border-bottom: 1px solid #4F5E72; display: flex; align-items: center; /*flex-direction: row-reverse;*/ @@ -53,15 +52,18 @@ &[active] { background-color: var(--color-third); color: var(--color-heading); - border-bottom: none; .menu-icon:before { background-color: var(--color-heading); color: white; } - .menu-notification>solid-display>div:first-child { + /*.menu-notification>solid-display>div:first-child { background-color: var(--color-menu-badge-background); + }*/ + + &+.divider { + display: none; } } @@ -164,6 +166,15 @@ } /* Ellipsis for message tab */ + .message-tab>div { + width: 100%; + + &>solid-display { + display: block; + margin-top: 15px; + margin-left: 15px; + } + } .message-tab>div>solid-display>div>solid-display-div>div { box-sizing: border-box; @@ -179,15 +190,16 @@ margin-bottom: 10px; width: calc(80vw - 71px); display: block; - background-color: var(--color-secondary); - color: var(--color-white); - border: 1px solid var(--color-grey-4); + background-color: var(--color-heading); + color: white; + border: 1px solid white; border-radius: 3px; - padding: 4px; + padding-left: 9.5px; + height: 27px; + opacity: 0.8; @include breakpoint(lg) { margin: auto; - margin-bottom: 10px; width: auto; } } @@ -228,15 +240,15 @@ } } - >solid-display.nosub>div>solid-display>div { + /*>solid-display.nosub>div>solid-display>div { padding: 1rem 1rem 1rem 3rem; - } + }*/ solid-display>div { .create { - color: var(--color-white); - margin: 1rem 1rem 2.2rem 3.2rem; + /*color: white;*/ + /*margin: 1rem 1rem 2.2rem 3.2rem;*/ } &>solid-display { @@ -262,8 +274,8 @@ &>solid-display[active]>div, &>solid-display>div>hubl-menu-fix-url-circle>solid-link>solid-display[active]>div, &>solid-display>div>hubl-menu-fix-url-project>solid-link>solid-display[active]>div { - background-color: var(--color-menu-highlight-primary); - color: var(--color-menu-text-active); + background-color: var(--color-third); + color: var(--color-heading); font-weight: bold; } } @@ -283,21 +295,21 @@ } hubl-counter { - height: 20px; - width: 20px; + /*height: 20px; + width: 20px;*/ margin-right: 1em; div.counter:not([data-nb-unread="0"]) { text-align: center; display: block; - background-color: var(--sib-notifications-theme, gray); + background-color: var(--color-third, gray); border-radius: 50%; font-size: 12px; line-height: 20px; width: 20px; height: 20px; padding-bottom: 0; - color: var(--color-secondary); + color: var(--color-heading); } } } @@ -305,7 +317,8 @@ .divider { height: 1px; - background-color: #4F5E72; + background-color: #D7DBE0; + opacity: 0.2; } } }