From 983f8cc48de1644ab390e95510b5221f01d4f4cf Mon Sep 17 00:00:00 2001 From: gaelle morin Date: Mon, 23 Nov 2020 18:50:59 +0100 Subject: [PATCH] feature: left-menu: projects --- configtest.json | 40 +++++++++++++++++++++++++++ src/menu-left.pug | 21 +++++++------- src/styles/base/main.scss | 3 ++ src/styles/base/menu-left.scss | 50 +++++++++------------------------- 4 files changed, 67 insertions(+), 47 deletions(-) create mode 100644 configtest.json diff --git a/configtest.json b/configtest.json new file mode 100644 index 0000000..699ed66 --- /dev/null +++ b/configtest.json @@ -0,0 +1,40 @@ +{ + "xmpp": "https://jabber.happy-dev.fr/http-bind/", + "authority": "https://api.community.startinblox.com/", + "authorityName": "test3", + "clientName": "patate", + "clientLogo": "https://cdn.startinblox.com/logos/webp/startinblox.webp", + "publicDirectory": true, + /*"clientCSS": "client.css",*/ + "endpoints": { + "get": { + "circles": "https://api.community.startinblox.com/circles/", + "dashboards": "https://api.community.startinblox.com/dashboards/", + "projects": "https://api.community.startinblox.com/projects/", + "businessproviders": "https://api.community.startinblox.com/businessproviders/", + "customers": "https://api.community.startinblox.com/customers/", + "groups": "https://api.community.startinblox.com/groups/", + "joboffers": "https://api.community.startinblox.com/job-offers/", + "users": "https://api.community.startinblox.com/users/", + "skills": "https://api.community.startinblox.com/skills/", + "uploads": "https://api.community.startinblox.com/upload/" + }, + "post": { + "circles": "https://api.community.startinblox.com/circles/", + "dashboards": "https://api.community.startinblox.com/dashboards/", + "projects": "https://api.community.startinblox.com/projects/", + "businessproviders": "https://api.community.startinblox.com/businessproviders/", + "customers": "https://api.community.startinblox.com/customers/", + "groups": "https://api.community.startinblox.com/groups/", + "joboffers": "https://api.community.startinblox.com/job-offers/", + "users": "https://api.community.startinblox.com/users/", + "skills": "https://api.community.startinblox.com/skills/", + "uploads": "https://api.community.startinblox.com/upload/" + } + }, + "analytics": [{ + "type": "matomo", + "url": "https://matomo.startinblox.com/", + "id": "2" + }] +} \ No newline at end of file diff --git a/src/menu-left.pug b/src/menu-left.pug index 8d9c479..6fd33c3 100644 --- a/src/menu-left.pug +++ b/src/menu-left.pug @@ -41,10 +41,11 @@ solid-widget(name='hubl-menu-fix-url-circle') solid-widget(name='hubl-menu-fix-url-project') template - solid-link(data-src="${value}" next="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' @@ -61,32 +62,32 @@ 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-small.float-left + 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") 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-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") 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-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") 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-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") 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-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") 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-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") div.divider if endpoints.projects || (endpoints.get && endpoints.get.projects) @@ -94,7 +95,7 @@ solid-router#navbar-router(default-route='dashboard') solid-link.segment.lg-full //- (next='admin-project-list') div.menu.segment.lg-auto.padding.text-bold - div.menu-icon.icon-folder-alt.segment.lg-auto.margin-right-small.float-left + 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 @@ -123,7 +124,7 @@ solid-router#navbar-router(default-route='dashboard') solid-link.segment.lg-full //- (next='admin-circle-list') div.menu.segment.lg-auto.padding.text-bold - div.menu-icon.icon-folder-alt.segment.lg-auto.margin-right-small.float-left + 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 @@ -150,7 +151,7 @@ solid-router#navbar-router(default-route='dashboard') if endpoints.users || (endpoints.get && endpoints.get.users) div.menu-wrapper div.menu.segment.lg-auto.padding.text-bold - div.menu-icon.icon-envelope-letter.segment.lg-auto.margin-right-small.float-left + 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 diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss index 38846ad..4d7a79b 100644 --- a/src/styles/base/main.scss +++ b/src/styles/base/main.scss @@ -67,6 +67,9 @@ &.margin-left-small { margin-left: 15px; } + &.margin-right-xsmall { + margin-right: 6px; + } &.margin-right-small { margin-right: 15px; } diff --git a/src/styles/base/menu-left.scss b/src/styles/base/menu-left.scss index 23a11d9..1c8ddc2 100644 --- a/src/styles/base/menu-left.scss +++ b/src/styles/base/menu-left.scss @@ -69,9 +69,10 @@ .message-tab { /* Spaces and cursor */ + /* For project and circle */ 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"] { + solid-form + div>solid-display>div { display: flex; justify-content: space-between; padding: 6px 10px 6px 23px; @@ -119,11 +120,12 @@ /* Styles for the small icon */ .sub-menu-icon { - width: 16px; + width: 20px; + text-align: center; div { font-family: simple-line-icons; - padding-right: 2px; + margin-right: 4px; } } @@ -131,15 +133,20 @@ .sub-menu-name { flex: 3; - &>div { - width: calc(80vw - 96px); /*96px = padding of the element + width and margin of counter */ + .project-customer, + .project-name, + &>div{ + display: block; + width: calc(80vw - 96px); /*96px = padding of the element + width and margin of counter */ @include breakpoint(lg) { width: 150px; } } - &.ellipsis>div { + &.ellipsis>div, + .project-customer, + .project-name>div { @include breakpoint(lg) { overflow: hidden; @@ -163,37 +170,6 @@ color: var(--color-heading); } } - - /* Ellipsis for project tab */ - .project-tab>div>solid-display>div:nth-child(1) { - - solid-set-default[name='project'] { - flex: 3; - - .project-customer, - .project-name { - box-sizing: border-box; - display: block; - width: calc(80vw - 96px); - /*96px = padding of the element + width and margin of counter */ - - @include breakpoint(lg) { - width: 150px; - } - } - - .project-customer, - .project-name>div { - - @include breakpoint(lg) { - display: block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - } - } - } } .divider {