feature: labelled avatar on menu

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",
+      "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": {
       "version": "1.5.4",
@@ -10603,9 +10603,9 @@
       }
     },
     "@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": {
       "version": "1.5.4",

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

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

src/styles/header/_index.scss

@@ -16,15 +16,21 @@ header {
 
   /* Remove the disclosure triangle */
   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;
       }
     }
@@ -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;
-        }
-      }
-    }
-  }
 }

src/styles/index.scss

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

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

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