From 6e1626100885659acfc1efd93cb7cf0ac8582aee Mon Sep 17 00:00:00 2001
From: gaelle morin <gmorin.dev@gmail.com>
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 3ceeeeec..4e2b5dfc 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 39fbbb9f..8473ee95 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 f39f16a7..cc531303 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;
}
}
}
--
GitLab