feature: labelled avatar on menu

This commit is contained in:
Jean-Baptiste Pasquier 2020-12-15 16:33:24 +01:00
parent 19a2e555b6
commit 4e7c234a0c
No known key found for this signature in database
GPG Key ID: CC04B91B949C163A
7 changed files with 64 additions and 116 deletions

14
package-lock.json generated
View File

@ -8,7 +8,7 @@
"version": "1.0.0", "version": "1.0.0",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@startinblox/hubl-styling-framework": "^1.0.5", "@startinblox/hubl-styling-framework": "^1.0.8",
"fs-extra": "^9.0.1", "fs-extra": "^9.0.1",
"normalize.css": "^8.0.1", "normalize.css": "^8.0.1",
"parcel-bundler": "^1.12.4", "parcel-bundler": "^1.12.4",
@ -1442,9 +1442,9 @@
} }
}, },
"node_modules/@startinblox/hubl-styling-framework": { "node_modules/@startinblox/hubl-styling-framework": {
"version": "1.0.5", "version": "1.0.8",
"resolved": "https://registry.npmjs.org/@startinblox/hubl-styling-framework/-/hubl-styling-framework-1.0.5.tgz", "resolved": "https://registry.npmjs.org/@startinblox/hubl-styling-framework/-/hubl-styling-framework-1.0.8.tgz",
"integrity": "sha512-paWnHOiSzds8GhQ0I22ymM7/asVuk+t8DH8+1fmjiwJLW230B/Grri8AXNFhJkQR5xMQrQXh9e2M0wejl3lTPA==" "integrity": "sha512-OTfmxhl5KBzK4Z7u0oZFUls1rPkHZur0moiecIrj+4Rq92ODIpQcA2Tq4YLxIw0GQZh8HhtAZsRmpM567Aw4PQ=="
}, },
"node_modules/@types/q": { "node_modules/@types/q": {
"version": "1.5.4", "version": "1.5.4",
@ -10603,9 +10603,9 @@
} }
}, },
"@startinblox/hubl-styling-framework": { "@startinblox/hubl-styling-framework": {
"version": "1.0.5", "version": "1.0.8",
"resolved": "https://registry.npmjs.org/@startinblox/hubl-styling-framework/-/hubl-styling-framework-1.0.5.tgz", "resolved": "https://registry.npmjs.org/@startinblox/hubl-styling-framework/-/hubl-styling-framework-1.0.8.tgz",
"integrity": "sha512-paWnHOiSzds8GhQ0I22ymM7/asVuk+t8DH8+1fmjiwJLW230B/Grri8AXNFhJkQR5xMQrQXh9e2M0wejl3lTPA==" "integrity": "sha512-OTfmxhl5KBzK4Z7u0oZFUls1rPkHZur0moiecIrj+4Rq92ODIpQcA2Tq4YLxIw0GQZh8HhtAZsRmpM567Aw4PQ=="
}, },
"@types/q": { "@types/q": {
"version": "1.5.4", "version": "1.5.4",

View File

@ -45,7 +45,7 @@
] ]
}, },
"dependencies": { "dependencies": {
"@startinblox/hubl-styling-framework": "^1.0.5", "@startinblox/hubl-styling-framework": "^1.0.8",
"fs-extra": "^9.0.1", "fs-extra": "^9.0.1",
"normalize.css": "^8.0.1", "normalize.css": "^8.0.1",
"parcel-bundler": "^1.12.4", "parcel-bundler": "^1.12.4",

View File

@ -44,7 +44,7 @@ html(lang="en")
//- include views/partials/notifications.pug //- include views/partials/notifications.pug
include views/partials/widgets.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 include views/partials/header.pug
//- nav#main__menu.segment.bg-color-heading.lg-quarter.float-left //- nav#main__menu.segment.bg-color-heading.lg-quarter.float-left

View File

@ -16,15 +16,21 @@ header {
/* Remove the disclosure triangle */ /* Remove the disclosure triangle */
details { details {
&[open] {
summary { summary {
background-color: var(--color-heading);
/* on Firefox v.<69 */ color: #fff;
&::-moz-list-bullet { .text-color-heading {
list-style-type: none; color: #fff;
}
} }
/* on Chrome */ }
&::-webkit-details-marker { summary {
display: block;
cursor: pointer;
padding-right: 15px;
padding-left: 15px;
&::marker {
display: none; 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;
}
}
}
}
} }

View File

@ -8,4 +8,4 @@ main {
@import 'header/_index'; @import 'header/_index';
@import 'left-nav/_index'; @import 'left-nav/_index';
@import 'content/_index'; @import 'content/_index';

View File

@ -1,54 +1,54 @@
.segment.lg-quarter.v-aligned .segment.lg-quarter
solid-link(next='dashboard') solid-link(next='dashboard')
img.logo(src=`${clientLogo || '/images/logo.png'}`) img.logo(src=`${clientLogo || '/images/logo.png'}`)
.segment.lg-quarter .segment.lg-quarter
span.tag.reversed.color-primary.text-semibold(data-trans='header.beta') span.tag.reversed.color-primary.text-semibold(data-trans='header.beta')
.segment.lg-quarter.v-aligned .segment.lg-quarter
solid-notifications.notLoggedIn( solid-notifications.notLoggedIn(
nested-field="inbox" nested-field="inbox"
bind-user bind-user
) )
.segment.lg-quarter details.segment.notLoggedIn
details#user-controls.notLoggedIn summary.text-right(style='height:72px;padding-top:11px;')
summary.segment.padding(tabindex='0' role='button') solid-display.labelled-avatar(
solid-display#user-controls__profile.user-thumb( fields='segment1(account.picture), segment2(first_name), segment3(button)'
fields='account.picture, content(name-and-icon(first_name, button))' class-segment1='segment'
class-account.picture='user-thumb-avatar user-thumb-avatar__size' class-segment2='segment margin-left-small'
class-content='user-thumb-content' class-segment3='segment margin-left-xxsmall'
class-name-and-icon='user-thumb-content__name-and-icon' class-account.picture="avatar"
class-first_name='name' class-first_name="text-small text-semibold text-color-heading"
class-button='icon icon-arrow-down' class-button='icon icon-arrow-down'
widget-account.picture='hubl-user-avatar' widget-account.picture='hubl-user-avatar'
bind-user bind-user
) )
#user-controls__panel div
nav.bg-color-white.text-semibold.text-color-heading nav.bg-color-white.text-semibold.text-color-heading(style="position:absolute")
ul ul
if (endpoints.uploads || (endpoints.get && endpoints.get.uploads)) && (endpoints.skills || (endpoints.get && endpoints.get.skills)) && (endpoints.users || (endpoints.get && endpoints.get.users)) 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')
li.border-bottom.border-color-grey li.border-bottom.border-color-grey
solid-link.segment.padding-small.text-hover(next='about' data-trans='header.about') solid-link.segment.padding-small.text-hover(next='profile' data-trans='header.myProfile')
li li.segment.padding-small.border-bottom.border-color-grey
button.segment.padding-small.text-hover.text-bold.text-color-heading(role='log out' onclick="document.querySelector('sib-auth').logout();" data-trans='header.logOut') 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 button.notLoggedIn.segment.lg-hidden.icon-menu#toggleMainMenu

View File

@ -1,2 +1,2 @@
solid-widget(name='hubl-user-avatar') 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>`} template ${value ? `<img src="${value}" />` : `<object type="image/svg+xml" data="/images/alien.svg"></object>`}