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 {
-
+        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/views/partials/header.pug

@@ -1,31 +1,31 @@
-.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'
       widget-account.picture='hubl-user-avatar'
       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
         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

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>`}