From 80c4827379e35e9710ec685e10ec0cfb6a946f45 Mon Sep 17 00:00:00 2001
From: gaelle morin <gmorin.dev@gmail.com>
Date: Mon, 23 Nov 2020 09:54:57 +0100
Subject: [PATCH] feature: left-menu: refactor + cleaning
---
src/menu-left.pug | 21 +-
src/styles/base/main.scss | 43 +++++
src/styles/base/menu-left.scss | 338 ++++++++++-----------------------
3 files changed, 155 insertions(+), 247 deletions(-)
diff --git a/src/menu-left.pug b/src/menu-left.pug
index 4e2b5dfc..8d9c479b 100644
--- a/src/menu-left.pug
+++ b/src/menu-left.pug
@@ -28,6 +28,9 @@ solid-widget(name='hubl-menu-fix-url-circle')
solid-display(
data-src='${value}'
fields='status, name, jabberID, badge'
+ class-status='sub-menu-icon'
+ class-name='sub-menu-name ellipsis'
+ class-badge='sub-menu-badge'
value-badge='${value}'
widget-status='hubl-menu-publicprivate'
widget-badge='hubl-counter'
@@ -42,8 +45,10 @@ solid-widget(name='hubl-menu-fix-url-project')
solid-display(
data-src='${value}'
fields='status, project(customer.name, name, jabberID), badge'
+ class-status='sub-menu-icon'
class-name='project-name'
class-customer.name='project-customer'
+ class-badge='badge'
value-badge='${value}'
widget-status='hubl-menu-publicprivate'
widget-jabberID='hubl-menu-jabberid'
@@ -95,13 +100,13 @@ 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.segment.margin-left-small.margin-right-small
+ div.sub-menu.menu-notification
div#loader-projects.loader.loader-menu
div
div
div
div
- solid-display.project-tab(
+ solid-display.project-tab.segment.lg-full(
bind-user
nested-field='projects'
fields='project'
@@ -124,13 +129,13 @@ 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.segment.margin-left-small.margin-right-small
+ div.sub-menu.menu-notification
div#loader-circles.loader.loader-menu
div
div
div
div
- solid-display.circle-tab(
+ solid-display.circle-tab.segment.lg-full(
bind-user
nested-field='circles'
fields='circle'
@@ -150,18 +155,21 @@ 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.segment.margin-left-small.margin-right-small
+ div.sub-menu.menu-notification
div#loader-messages.loader.loader-menu
div
div
div
div
- solid-display.nosub.message-tab(
+ solid-display.nosub.message-tab.segment.lg-full(
data-src=`${endpoints.users || (endpoints.get && endpoints.get.users)}`
fields='name, chatProfile.jabberID, badge'
+ class-name='sub-menu-name'
+ class-badge='sub-menu-badge'
loader-id='loader-messages'
search-fields="name"
search-label-name=""
+ search-class-name="search-field"
data-trans="search-label-name=menuLeft.search"
search-widget-name="hubl-search-users"
widget-name='solid-display-div'
@@ -172,7 +180,6 @@ solid-router#navbar-router(default-route='dashboard')
next='messages'
paginate-by='10'
)
- div.divider
solid-route(name='admin', hidden)
solid-route.menu(name='profile', hidden)
diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss
index 8473ee95..e2412d02 100644
--- a/src/styles/base/main.scss
+++ b/src/styles/base/main.scss
@@ -247,6 +247,49 @@
}
}
+/* General styles for pagination */
+nav#main__menu solid-display.nosub>nav {
+ display: grid;
+ grid-template-areas: "left middle right";
+ grid-template-rows: auto;
+ text-align: center;
+ overflow: hidden;
+
+ >[data-id="prev"] {
+ grid-area: left;
+ line-height: 1;
+ }
+ >[data-id="next"] {
+ grid-area: right;
+ line-height: 1;
+ }
+ >span {
+ grid-area: middle;
+ }
+ button {
+ color: transparent;
+
+ &[disabled] {
+ opacity: 0.5;
+ }
+ }
+}
+
+/* Styles for pagination in the left menu */
+nav#main__menu solid-display.nosub>nav {
+ grid-template-columns: auto 30% auto;
+
+ >span {
+ font-size: 18px;
+ }
+ button {
+ font-size: 15px;
+ color: white;
+ }
+}
+
+
+
/* Fix for solid-dashboard fixture */
solid-dashboard section {
padding: 1rem !important;
diff --git a/src/styles/base/menu-left.scss b/src/styles/base/menu-left.scss
index c06f7fc9..23a11d97 100644
--- a/src/styles/base/menu-left.scss
+++ b/src/styles/base/menu-left.scss
@@ -1,7 +1,4 @@
#main__menu {
- /*background-color: var(--color-menu-background);
- color: var(--color-menu-text);*/
- /*transition: flex-basis 0.5s ease-in-out;*/
width: 256px;
&.open {
@@ -13,11 +10,8 @@
}
solid-router {
+ /* Chevron visible on large screen + rotation */
.menu-wrapper {
-
- .menu {
- border-bottom: none;
- }
.menu-icon.icon-arrow-up {
visibility: hidden;
}
@@ -29,25 +23,19 @@
.sub-menu {
display: none;
}
-
.menu-chevron {
transform: rotateX(180deg);
}
}
}
}
+ /* end */
- /*solid-link {
- width: 100%;
- }*/
-
+ /* General styles for the main tabs */
.menu {
cursor: pointer;
display: flex;
align-items: center;
- /*flex-direction: row-reverse;*/
- /*font-weight: bold;
- padding: 1.2rem;*/
&[active] {
background-color: var(--color-third);
@@ -57,25 +45,11 @@
background-color: var(--color-heading);
color: white;
}
-
- /*.menu-notification>solid-display>div:first-child {
- background-color: var(--color-menu-badge-background);
- }*/
-
&+.divider {
display: none;
}
}
-
.menu-icon {
- /*align-items: center;
- display: flex;
- justify-content: center;
- flex-grow: 0;
- flex-shrink: 0;
- font-size: 1.7rem;
- width: 3.2em;*/
-
&::before {
border-radius: 100%;
height: 1.9em;
@@ -83,256 +57,140 @@
width: 1.9em;
}
}
-
- /*.menu-label {
- display: flex;
- flex-direction: column;
- flex-grow: 1;
- flex-shrink: 0;
- font-weight: 600;
- justify-content: center;
- letter-spacing: 0.017rem;
- text-transform: uppercase;
- width: 8em;
- }*/
-
- /*.menu-chevron {
- align-items: center;
- display: flex;
- flex-grow: 0;
- flex-shrink: 0;
- justify-content: center;
- width: 2em;
- }*/
-
- >solid-display {
- display: block;
- }
}
+ /* End */
- .sub-menu {
- /* Ellipsis for project tab */
+ /* Styles for the submenus */
+ .sub-menu {
- .project-tab>div>solid-display>div:nth-child(1) {
+ .project-tab,
+ .circle-tab,
+ .message-tab {
- solid-set-default[name='project'] {
- flex: 3;
+ /* Spaces and cursor */
+ hubl-menu-fix-url-project>solid-link>solid-display>div,
+ hubl-menu-fix-url-circle>solid-link>solid-display>div,
+ >div>solid-display>div>solid-display-div[name="name"] {
+ display: flex;
+ justify-content: space-between;
+ padding: 6px 10px 6px 23px;
+ cursor: pointer;
+ }
- .project-customer,
- .project-name {
- box-sizing: border-box;
- display: block;
- width: calc(80vw - 96px); /*96px = padding of the element + width and margin of counter */
+ &>div>solid-display {
+ display: block;
- @include breakpoint(lg) {
- width: 150px;
- }
+ &:last-child>div {
+ margin-bottom: 2.2rem;
}
-
- .project-customer,
- .project-name>div {
-
- @include breakpoint(lg) {
- display: block;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
+ &[fields="project(customer.name, name), badge"]>div {
+ padding: 0;
}
}
- }
- /* Ellipsis for circle tab */
- .circle-tab>div {
- width: 100%;
+ /* when a subtab is [active] */
+ solid-display[active]>div {
+ background-color: var(--color-third);
+ color: var(--color-heading);
+ font-weight: bold;
+ }
- &>solid-display {
+ /* Styles for the search input */
+ .search-field>input {
+ margin-left: 30px;
+ margin-bottom: 10px;
+ width: calc(80vw - 71px);
display: block;
- margin-top: 15px;
- margin-left: 15px;
- }
- &>solid-display:first-child {
- margin-top: 0;
+ background-color: var(--color-heading);
+ color: white;
+ border: 1px solid white;
+ border-radius: 3px;
+ padding-left: 9.5px;
+ height: 27px;
+ opacity: 0.8;
+
+ @include breakpoint(lg) {
+ margin: auto;
+ margin-bottom: 10px;
+ width: auto;
+ }
}
- hubl-menu-publicprivate {
+
+ /* Styles for the small icon */
+ .sub-menu-icon {
width: 16px;
- background: black;
+ div {
+ font-family: simple-line-icons;
+ padding-right: 2px;
+ }
}
- }
- .circle-tab>div>solid-display>div {
-
- solid-display-div[name='name'] {
+ /* Styles for the name */
+ .sub-menu-name {
flex: 3;
- background: brown;
- >div[name='name'] {
- box-sizing: border-box;
- padding-left: 0.2em;
- width: calc(80vw - 96px); /*96px = padding of the element + width and margin of counter */
+ &>div {
+ width: calc(80vw - 96px); /*96px = padding of the element + width and margin of counter */
+
+ @include breakpoint(lg) {
+ width: 150px;
+ }
+ }
+ &.ellipsis>div {
+
@include breakpoint(lg) {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
- width: 150px;
}
}
}
- }
-
- /* Ellipsis for message tab */
- .message-tab>div {
- width: 100%;
- &>solid-display {
+ /* Styles for the counter */
+ .sub-menu-badge div.counter:not([data-nb-unread="0"]) {
+ text-align: center;
display: block;
- margin-top: 15px;
- margin-left: 15px;
- }
- &>solid-display:first-child {
- margin-top: 0;
- }
- }
-
- .message-tab>div>solid-display>div>solid-display-div>div {
- box-sizing: border-box;
- width: calc(80vw - 96px); /*96px = padding of the element + width and margin of counter */
-
- @include breakpoint(lg) {
- width: 150px;
- }
- }
-
- solid-display.nosub>solid-form[fields="name"]>hubl-search-users>input {
- margin-left: 30px;
- margin-bottom: 10px;
- width: calc(80vw - 71px);
- display: block;
- background-color: var(--color-heading);
- color: white;
- border: 1px solid white;
- border-radius: 3px;
- padding-left: 9.5px;
- height: 27px;
- opacity: 0.8;
-
- @include breakpoint(lg) {
- margin: auto;
- width: auto;
- }
- }
-
- solid-display.nosub>nav {
- text-align: center;
- overflow: hidden;
- display: grid;
- grid-template-columns: auto 50% auto;
- grid-template-areas: "left middle right";
-
- >* {
- color: var(--color-white);
- }
-
- >[data-id="prev"] {
- grid-area: left;
- }
-
- >[data-id="next"] {
- grid-area: right;
- }
-
- >span {
- grid-area: middle;
- }
- }
-
- hubl-menu-publicprivate {
- display: inline-block;
- /*text-align: center;*/
- width: auto;
-
- div {
- font-family: simple-line-icons;
- /*width: 20px;
- font-size: 0.8em;
- padding-top: 0.1em;*/
- padding-right: 2px;
+ 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-heading);
}
}
- /*>solid-display.nosub>div>solid-display>div {
- padding: 1rem 1rem 1rem 3rem;
- }*/
-
- solid-display>div {
-
- .create {
- /*color: white;*/
- /*margin: 1rem 1rem 2.2rem 3.2rem;*/
- }
+ /* Ellipsis for project tab */
+ .project-tab>div>solid-display>div:nth-child(1) {
- &>solid-display {
- &:last-child>div {
- margin-bottom: 2.2rem;
- }
+ solid-set-default[name='project'] {
+ flex: 3;
- >div {
- color: var(--color-white);
- cursor: pointer;
+ .project-customer,
+ .project-name {
+ box-sizing: border-box;
+ display: block;
+ width: calc(80vw - 96px);
+ /*96px = padding of the element + width and margin of counter */
- /*>hubl-menu-fix-url-circle>solid-link>solid-display>div,*/
- >hubl-menu-fix-url-project>solid-link>solid-display>div {
- padding: 1rem 1rem 1rem 3rem;
+ @include breakpoint(lg) {
+ width: 150px;
}
}
- &[fields="project(customer.name, name), badge"]>div {
- padding: 0;
- }
- }
-
- &>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-third);
- color: var(--color-heading);
- font-weight: bold;
- }
- }
-
- &.menu-notification {
-
- >solid-display>div>solid-display>div>hubl-menu-fix-url-circle,
- >solid-display>div>solid-display>div>hubl-menu-fix-url-project {
- flex: 1;
- }
-
- >solid-display>div>solid-display>div,
- >solid-display>div>solid-display>div>hubl-menu-fix-url-circle>solid-link>solid-display>div,
- >solid-display>div>solid-display>div>hubl-menu-fix-url-project>solid-link>solid-display>div {
- display: flex;
- justify-content: space-between;
- }
-
- hubl-counter {
- /*height: 20px;
- width: 20px;*/
- /*margin-right: 1em;*/
+ .project-customer,
+ .project-name>div {
- div.counter:not([data-nb-unread="0"]) {
- text-align: center;
- display: block;
- 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-heading);
+ @include breakpoint(lg) {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
}
}
}
@@ -344,4 +202,4 @@
opacity: 0.2;
}
}
-}
+}
\ No newline at end of file
--
GitLab