adopt the shared header include in the dashboard (home) view

CHANGELOG.txt

@@ -55,6 +55,7 @@ Changelog
  * Remove the edit link from edit bird in previews to avoid confusion (Sævar Öfjörð Magnússon)
  * Introduce new template fragment and block level enclosure tags for easier template composition (Thibaud Colas)
  * Add a `classnames` template tag to easily build up classes from variables provided to a template (Paarth Agarwal)
+ * Migrate the dashboard (home) view header to the shared header template and update designs (Paarth Agarwal)
  * Fix: Typo in `ResumeWorkflowActionFormatter` message (Stefan Hammer)
  * Fix: Throw a meaningful error when saving an image to an unrecognised image format (Christian Franke)
  * Fix: Remove extra padding for headers with breadcrumbs on mobile viewport (Steven Steinwand)

client/scss/components/_header.scss

@@ -17,22 +17,30 @@ header {
   h1 {
     @apply w-h1;
     position: relative;
+  }
+
+  h1 > svg.icon, // can remove once all headers use shared include
+  .w-header__glpyh {
+    position: absolute;
+    inset-inline-start: -1.5em;
+    vertical-align: text-top;
 
-    > svg.icon {
-      position: absolute;
-      inset-inline-start: -1.5em;
+    &.icon {
       top: 0.125em;
       max-width: 1em;
       max-height: 1em;
-      vertical-align: text-top;
     }
 
-    span {
-      margin-inline-start: 0.3125rem;
-      font-weight: 400;
+    &.avatar {
+      inset-inline-start: -1.75em;
     }
   }
 
+  .w-header__subtitle {
+    margin-inline-start: 0.3125rem;
+    font-weight: 400;
+  }
+
   // Give padding to the rows inside of headers so that nested breadcrumbs aren't padded by their parent header el.
   // Use header--with-padding for headers that don't contain .row elements.
   &.header--with-padding,
@@ -47,12 +55,6 @@ header {
     padding-inline-start: $mobile-nav-indent;
   }
 
-  &.header--home {
-    @include nice-padding();
-    padding-top: 0.5rem;
-    margin-top: $mobile-nav-indent;
-  }
-
   .col {
     float: left;
     margin-inline-end: 2em;
@@ -180,11 +182,6 @@ header {
       padding-inline-start: 0;
     }
 
-    &.header--home {
-      padding-top: 1.5rem;
-      margin-top: 0;
-    }
-
     .left {
       float: left;
       margin-inline-end: 0;
@@ -204,10 +201,6 @@ header {
       }
     }
 
-    h1.icon:before {
-      display: inline-block;
-    }
-
     .col3 {
       @include column(3);
     }

client/scss/layouts/_home.scss

@@ -1,34 +1,4 @@
-.homepage header {
-  @apply w-text-primary;
-
-  display: flex;
-  flex-flow: row nowrap;
-  gap: 1em;
-
-  .col1 {
-    width: 50px;
-    margin-inline-end: 1em;
-    padding: 0;
-
-    // make way for the nav-menu button on mobile
-    @include media-breakpoint-down(xs) {
-      position: relative;
-      inset-inline-start: $mobile-nav-indent;
-    }
-  }
-
-  .avatar {
-    margin-top: 0.5em;
-    flex-shrink: 0;
-  }
-
-  .user-name {
-    font-size: 1.3em;
-    font-weight: 600;
-  }
-}
-
-.summary {
+.homepage .summary {
   @include clearfix();
   margin-bottom: 2em;
   padding-top: 2em;

docs/releases/4.0.md

@@ -62,6 +62,7 @@ When using a queryset to render a list of images, you can now use the `prefetch_
  * Remove the edit link from edit bird in previews to avoid confusion (Sævar Öfjörð Magnússon)
  * Introduce new template fragment and block level enclosure tags for easier template composition (Thibaud Colas)
  * Add a `classnames` template tag to easily build up classes from variables provided to a template (Paarth Agarwal)
+ * Migrate the dashboard (home) view header to the shared header template and update designs (Paarth Agarwal)
 
 ### Bug fixes
 

wagtail/admin/templates/wagtailadmin/home.html

@@ -12,14 +12,8 @@
         {% block branding_welcome %}{% blocktrans trimmed %}Welcome to the {{ site_name }} Wagtail CMS{% endblocktrans %}{% endblock %}
     {% endfragment %}
 
-    <header class="header merged header--home">
-        <div class="avatar"><img src="{% avatar_url user %}" alt="" /></div>
-
-        <div class="sm:w-ml-4">
-            <h1 class="header__title">{{ header_title }}</h1>
-            <div class="user-name">{{ user|user_display_name }}</div>
-        </div>
-    </header>
+    {% avatar_url user as avatar %}
+    {% include "wagtailadmin/shared/header.html" with title=header_title subtitle=user|user_display_name avatar=avatar merged=1 %}
 
     {% if panels %}
         {% for panel in panels %}

wagtail/admin/templates/wagtailadmin/shared/header.html

@@ -9,6 +9,7 @@
     - `search_url` - if present, display a search box. This is a URL route name (taking no parameters) to be used as the action for that search box
     - `query_parameters` - a query string (without the '?') to be placed after the search URL
     - `icon` - name of an icon to place against the title
+    - `avatar` - if present, display an 'avatar' in place of icon. This is the URL to be used as the img src for avatar 
     - `merged` - if true, add the classname 'merged'
     - `action_url` - if present, display an 'action' button. This is the URL to be used as the link URL for the button
     - `action_text` - text for the 'action' button
@@ -21,8 +22,12 @@
         <div class="left">
             <div class="col">
                 <h1 class="header__title">
-                    {% if icon %}{% icon name=icon %}{% endif %}
-                    {{ title }}{% if subtitle %} <span class="header__subtitle">{{ subtitle }}</span>{% endif %}
+                    {% if icon %}
+                        {% icon class_name="w-header__glpyh" name=icon %}
+                    {% elif avatar %}
+                        <div class="w-header__glpyh avatar"><img src="{{ avatar }}" alt="" /></div>
+                    {% endif %}
+                    {{ title }}{% if subtitle %} <span class="w-header__subtitle">{{ subtitle }}</span>{% endif %}
                 </h1>
             </div>
             {% if search_url %}