autonomic-cooperative
/
hubl
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
package-lock.json generated
View File

@ -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",

2
package.json
View File

@ -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",

2
src/index.pug
View File

@ -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

80
src/styles/header/_index.scss
View File

@ -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;
}
}
}
}
}

2
src/styles/index.scss
View File

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

78
src/views/partials/header.pug
View File

@ -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

2
src/views/partials/widgets/hubl-user-avatar.pug
View File

@ -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>`}
template ${value ? `<img src="${value}" />` : `<object type="image/svg+xml" data="/images/alien.svg"></object>`}