From 4e7c234a0c64395272cc5dd2c2e784f25d4305cf Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Pasquier <contact@jbpasquier.eu>
Date: Tue, 15 Dec 2020 16:33:24 +0100
Subject: [PATCH] feature: labelled avatar on menu
---
package-lock.json | 14 ++--
package.json | 2 +-
src/index.pug | 2 +-
src/styles/header/_index.scss | 80 ++++---------------
src/styles/index.scss | 2 +-
src/views/partials/header.pug | 78 +++++++++---------
.../partials/widgets/hubl-user-avatar.pug | 2 +-
7 files changed, 64 insertions(+), 116 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 75612de7..528f221f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
"version": "1.0.0",
"license": "MIT",
"dependencies": {
- "@startinblox/hubl-styling-framework": "^1.0.5",
+ "@startinblox/hubl-styling-framework": "^1.0.8",
"fs-extra": "^9.0.1",
"normalize.css": "^8.0.1",
"parcel-bundler": "^1.12.4",
@@ -1442,9 +1442,9 @@
}
},
"node_modules/@startinblox/hubl-styling-framework": {
- "version": "1.0.5",
- "resolved": "https://registry.npmjs.org/@startinblox/hubl-styling-framework/-/hubl-styling-framework-1.0.5.tgz",
- "integrity": "sha512-paWnHOiSzds8GhQ0I22ymM7/asVuk+t8DH8+1fmjiwJLW230B/Grri8AXNFhJkQR5xMQrQXh9e2M0wejl3lTPA=="
+ "version": "1.0.8",
+ "resolved": "https://registry.npmjs.org/@startinblox/hubl-styling-framework/-/hubl-styling-framework-1.0.8.tgz",
+ "integrity": "sha512-OTfmxhl5KBzK4Z7u0oZFUls1rPkHZur0moiecIrj+4Rq92ODIpQcA2Tq4YLxIw0GQZh8HhtAZsRmpM567Aw4PQ=="
},
"node_modules/@types/q": {
"version": "1.5.4",
@@ -10603,9 +10603,9 @@
}
},
"@startinblox/hubl-styling-framework": {
- "version": "1.0.5",
- "resolved": "https://registry.npmjs.org/@startinblox/hubl-styling-framework/-/hubl-styling-framework-1.0.5.tgz",
- "integrity": "sha512-paWnHOiSzds8GhQ0I22ymM7/asVuk+t8DH8+1fmjiwJLW230B/Grri8AXNFhJkQR5xMQrQXh9e2M0wejl3lTPA=="
+ "version": "1.0.8",
+ "resolved": "https://registry.npmjs.org/@startinblox/hubl-styling-framework/-/hubl-styling-framework-1.0.8.tgz",
+ "integrity": "sha512-OTfmxhl5KBzK4Z7u0oZFUls1rPkHZur0moiecIrj+4Rq92ODIpQcA2Tq4YLxIw0GQZh8HhtAZsRmpM567Aw4PQ=="
},
"@types/q": {
"version": "1.5.4",
diff --git a/package.json b/package.json
index 020d8ef7..b010d4f3 100644
--- a/package.json
+++ b/package.json
@@ -45,7 +45,7 @@
]
},
"dependencies": {
- "@startinblox/hubl-styling-framework": "^1.0.5",
+ "@startinblox/hubl-styling-framework": "^1.0.8",
"fs-extra": "^9.0.1",
"normalize.css": "^8.0.1",
"parcel-bundler": "^1.12.4",
diff --git a/src/index.pug b/src/index.pug
index 9d90ea55..983461e9 100644
--- a/src/index.pug
+++ b/src/index.pug
@@ -44,7 +44,7 @@ html(lang="en")
//- include views/partials/notifications.pug
include views/partials/widgets.pug
- header#header.segment.padding-left-large.padding-right-large.shadow-small
+ header#header.segment.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
diff --git a/src/styles/header/_index.scss b/src/styles/header/_index.scss
index 50e2afc6..2c482103 100644
--- a/src/styles/header/_index.scss
+++ b/src/styles/header/_index.scss
@@ -16,15 +16,21 @@ header {
/* Remove the disclosure triangle */
details {
-
- summary {
-
- /* on Firefox v.<69 */
- &::-moz-list-bullet {
- list-style-type: none;
+ &[open] {
+ summary {
+ background-color: var(--color-heading);
+ color: #fff;
+ .text-color-heading {
+ color: #fff;
+ }
}
- /* on Chrome */
- &::-webkit-details-marker {
+ }
+ summary {
+ display: block;
+ cursor: pointer;
+ padding-right: 15px;
+ padding-left: 15px;
+ &::marker {
display: none;
}
}
@@ -245,62 +251,4 @@ header {
}
}
}
-
- #user-controls {
- padding: 0;
- -webkit-touch-callout: none;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
-
- summary {
- cursor: pointer;
- display: block; /* To remove the disclosure triangle on Firefox v.>=69 */
-
- &:focus {
- background-color: transparent;
- color: white;
- outline: none;
-
- @media(min-width: 1024px) {
- background-color: var(--color-heading);
- }
- }
- }
-
- #user-controls__panel {
- height: 0;
- position: absolute;
- right: 0;
- z-index: 1;
- /* Quick fix for mobile version */
- width: 215px;
- top: 42px;
-
- @media(min-width: 1024px) {
- width: 100%;
- top: 72px;
- }
-
- >nav {
- box-shadow: 0 7px 8px 0 rgba(0, 0, 0, 0.16);
- position: absolute;
- right: 0;
- top: 0;
- height: auto;
- width: 100%;
-
- solid-link,
- button {
- display: block;
- }
-
- button {
- width: 100%;
- text-align: left;
- }
- }
- }
- }
}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index e435c95e..45cf5401 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -8,4 +8,4 @@ main {
@import 'header/_index';
@import 'left-nav/_index';
-@import 'content/_index';
+@import 'content/_index';
\ No newline at end of file
diff --git a/src/views/partials/header.pug b/src/views/partials/header.pug
index 7e81c153..026043c7 100644
--- a/src/views/partials/header.pug
+++ b/src/views/partials/header.pug
@@ -1,54 +1,54 @@
-.segment.lg-quarter.v-aligned
+.segment.lg-quarter
solid-link(next='dashboard')
img.logo(src=`${clientLogo || '/images/logo.png'}`)
.segment.lg-quarter
span.tag.reversed.color-primary.text-semibold(data-trans='header.beta')
-.segment.lg-quarter.v-aligned
+.segment.lg-quarter
solid-notifications.notLoggedIn(
nested-field="inbox"
bind-user
)
-.segment.lg-quarter
- details#user-controls.notLoggedIn
- summary.segment.padding(tabindex='0' role='button')
- solid-display#user-controls__profile.user-thumb(
- fields='account.picture, content(name-and-icon(first_name, button))'
- class-account.picture='user-thumb-avatar user-thumb-avatar__size'
- class-content='user-thumb-content'
- class-name-and-icon='user-thumb-content__name-and-icon'
- class-first_name='name'
- class-button='icon icon-arrow-down'
- widget-account.picture='hubl-user-avatar'
- bind-user
- )
- #user-controls__panel
- nav.bg-color-white.text-semibold.text-color-heading
- ul
- if (endpoints.uploads || (endpoints.get && endpoints.get.uploads)) && (endpoints.skills || (endpoints.get && endpoints.get.skills)) && (endpoints.users || (endpoints.get && endpoints.get.users))
- li.border-bottom.border-color-grey
- solid-link.segment.padding-small.text-hover(next='profile' data-trans='header.myProfile')
- li.segment.padding-small.border-bottom.border-color-grey
- div(data-trans='header.admin')
- ul.text-normal
- if (endpoints.users || (endpoints.get && endpoints.get.users))
- solid-route.text-hover(name='admin-communities')
- li.segment.padding-top-small
- a.icon.icon-people.icon-third.icon-small.margin-right-xsmall(data-trans='admin.menuRight.community')
- if endpoints.circles || (endpoints.get && endpoints.get.circles)
- solid-route.text-hover(name='admin-circles')
- li.segment.padding-top-small
- a.icon.icon-globe.icon-third.icon-small.margin-right-xsmall(data-trans='admin.menuRight.circles')
- if endpoints.projects || (endpoints.get && endpoints.get.projects)
- solid-route.text-hover(name='admin-projects')
- li.segment.padding-top-small
- a.icon.icon-folder-alt.icon-third.icon-small.margin-right-xsmall(data-trans='admin.menuRight.projects')
+details.segment.notLoggedIn
+ summary.text-right(style='height:72px;padding-top:11px;')
+ solid-display.labelled-avatar(
+ fields='segment1(account.picture), segment2(first_name), segment3(button)'
+ class-segment1='segment'
+ class-segment2='segment margin-left-small'
+ class-segment3='segment margin-left-xxsmall'
+ class-account.picture="avatar"
+ class-first_name="text-small text-semibold text-color-heading"
+ class-button='icon icon-arrow-down'
+ widget-account.picture='hubl-user-avatar'
+ bind-user
+ )
+ div
+ nav.bg-color-white.text-semibold.text-color-heading(style="position:absolute")
+ ul
+ if (endpoints.uploads || (endpoints.get && endpoints.get.uploads)) && (endpoints.skills || (endpoints.get && endpoints.get.skills)) && (endpoints.users || (endpoints.get && endpoints.get.users))
li.border-bottom.border-color-grey
- solid-link.segment.padding-small.text-hover(next='about' data-trans='header.about')
- li
- button.segment.padding-small.text-hover.text-bold.text-color-heading(role='log out' onclick="document.querySelector('sib-auth').logout();" data-trans='header.logOut')
+ solid-link.segment.padding-small.text-hover(next='profile' data-trans='header.myProfile')
+ li.segment.padding-small.border-bottom.border-color-grey
+ div(data-trans='header.admin')
+ ul.text-normal
+ if (endpoints.users || (endpoints.get && endpoints.get.users))
+ solid-route.text-hover(name='admin-communities')
+ li.segment.padding-top-small
+ a.icon.icon-people.icon-third.icon-small.margin-right-xsmall(data-trans='admin.menuRight.community')
+ if endpoints.circles || (endpoints.get && endpoints.get.circles)
+ solid-route.text-hover(name='admin-circles')
+ li.segment.padding-top-small
+ a.icon.icon-globe.icon-third.icon-small.margin-right-xsmall(data-trans='admin.menuRight.circles')
+ if endpoints.projects || (endpoints.get && endpoints.get.projects)
+ solid-route.text-hover(name='admin-projects')
+ li.segment.padding-top-small
+ a.icon.icon-folder-alt.icon-third.icon-small.margin-right-xsmall(data-trans='admin.menuRight.projects')
+ li.border-bottom.border-color-grey
+ solid-link.segment.padding-small.text-hover(next='about' data-trans='header.about')
+ li
+ button.segment.padding-small.text-hover.text-bold.text-color-heading(role='log out' onclick="document.querySelector('sib-auth').logout();" data-trans='header.logOut')
button.notLoggedIn.segment.lg-hidden.icon-menu#toggleMainMenu
diff --git a/src/views/partials/widgets/hubl-user-avatar.pug b/src/views/partials/widgets/hubl-user-avatar.pug
index 1211e9ba..f41f0b21 100644
--- a/src/views/partials/widgets/hubl-user-avatar.pug
+++ b/src/views/partials/widgets/hubl-user-avatar.pug
@@ -1,2 +1,2 @@
solid-widget(name='hubl-user-avatar')
- template ${value ? `<img src="${value}" style="max-width:100%; max-height: 100%;" />` : `<object type="image/svg+xml" data="/images/alien.svg"></object>`}
\ No newline at end of file
+ template ${value ? `<img src="${value}" />` : `<object type="image/svg+xml" data="/images/alien.svg"></object>`}
\ No newline at end of file
--
GitLab