Merge branch 'MDL-72305-master' of git://github.com/bmbrands/moodle

lib/outputrenderers.php

@@ -2593,8 +2593,13 @@ class core_renderer extends renderer_base {
             $attributes['title'] = $alt;
         }
 
-        // get the image html output fisrt
-        $output = html_writer::empty_tag('img', $attributes);
+        // get the image html output first
+        if ($user->picture == 0 && !defined('BEHAT_SITE_RUNNING')) {
+            $output = html_writer::tag('span', mb_substr($user->firstname, 0, 1) . mb_substr($user->lastname, 0, 1),
+                ['class' => 'userinitials size-' . $size]);
+        } else {
+            $output = html_writer::empty_tag('img', $attributes);
+        }
 
         // Show fullname together with the picture when desired.
         if ($userpicture->includefullname) {

theme/boost/scss/moodle/core.scss

@@ -341,7 +341,8 @@ a.autolink.glossary:hover {
     font-weight: bold;
 }
 
-img.userpicture {
+img.userpicture,
+.userinitials {
     margin-right: 0.5rem;
 }
 

theme/boost/scss/moodle/modules.scss

@@ -1101,6 +1101,13 @@ div#dock {
                 img {
                     vertical-align: baseline;
                 }
+                .userinitials.size-35 {
+                    width: 20px;
+                    height: 20px;
+                    border: $border-width solid $border-color;
+                    background-color: $white;
+                    font-size: $font-size-base * .6;
+                }
             }
             img {
                 width: inherit;
@@ -1115,6 +1122,30 @@ div#dock {
     }
 }
 
+.userinitials {
+    background-color: $gray-200;
+    vertical-align: middle;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    color: $gray-800;
+    font-weight: normal;
+    &.size-16 {
+        width: 30px;
+        height: 30px;
+    }
+    &.size-35 {
+        width: 35px;
+        height: 35px;
+    }
+    &.size-100 {
+        width: 100px;
+        height: 100px;
+        font-size: $h2-font-size;
+    }
+}
+
 @include media-breakpoint-down(sm) {
     .usertext {
         display: none;

theme/boost/style/moodle.css

@@ -10172,7 +10172,8 @@ a.autolink.glossary:hover {
 .pagingbar .thispage {
   font-weight: bold; }
 
-img.userpicture {
+img.userpicture,
+.userinitials {
   margin-right: 0.5rem; }
 
 img.resize {
@@ -17914,6 +17915,12 @@ div#dock {
     border-radius: 50%; }
     .userloggedinas .usermenu .userbutton .avatars .avatar.current img {
       vertical-align: baseline; }
+    .userloggedinas .usermenu .userbutton .avatars .avatar.current .userinitials.size-35 {
+      width: 20px;
+      height: 20px;
+      border: 1px solid #dee2e6;
+      background-color: #fff;
+      font-size: 0.5625rem; }
   .userloggedinas .usermenu .userbutton .avatars .avatar img {
     width: inherit;
     height: inherit; }
@@ -17922,6 +17929,26 @@ div#dock {
     height: 35px;
     display: inline-block; }
 
+.userinitials {
+  background-color: #e9ecef;
+  vertical-align: middle;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  color: #343a40;
+  font-weight: normal; }
+  .userinitials.size-16 {
+    width: 30px;
+    height: 30px; }
+  .userinitials.size-35 {
+    width: 35px;
+    height: 35px; }
+  .userinitials.size-100 {
+    width: 100px;
+    height: 100px;
+    font-size: 1.875rem; }
+
 @media (max-width: 767.98px) {
   .usertext {
     display: none; } }

theme/classic/style/moodle.css

@@ -10172,7 +10172,8 @@ a.autolink.glossary:hover {
 .pagingbar .thispage {
   font-weight: bold; }
 
-img.userpicture {
+img.userpicture,
+.userinitials {
   margin-right: 0.5rem; }
 
 img.resize {
@@ -17914,6 +17915,12 @@ div#dock {
     border-radius: 50%; }
     .userloggedinas .usermenu .userbutton .avatars .avatar.current img {
       vertical-align: baseline; }
+    .userloggedinas .usermenu .userbutton .avatars .avatar.current .userinitials.size-35 {
+      width: 20px;
+      height: 20px;
+      border: 1px solid #dee2e6;
+      background-color: #fff;
+      font-size: 0.5625rem; }
   .userloggedinas .usermenu .userbutton .avatars .avatar img {
     width: inherit;
     height: inherit; }
@@ -17922,6 +17929,26 @@ div#dock {
     height: 35px;
     display: inline-block; }
 
+.userinitials {
+  background-color: #e9ecef;
+  vertical-align: middle;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  color: #343a40;
+  font-weight: normal; }
+  .userinitials.size-16 {
+    width: 30px;
+    height: 30px; }
+  .userinitials.size-35 {
+    width: 35px;
+    height: 35px; }
+  .userinitials.size-100 {
+    width: 100px;
+    height: 100px;
+    font-size: 1.875rem; }
+
 @media (max-width: 767.98px) {
   .usertext {
     display: none; } }

user/tests/userlib_test.php

@@ -588,11 +588,8 @@ class core_userliblib_testcase extends advanced_testcase {
         $avatarhtml = $opts->metadata['useravatar'];
 
         $matches = [];
-        preg_match('/(?:.*width=")(\d*)(?:" height=")(\d*)(?:".*\/>)/', $avatarhtml, $matches);
-        $this->assertCount(3, $matches);
-
-        $this->assertEquals(intval($matches[1]), $testsize);
-        $this->assertEquals(intval($matches[2]), $testsize);
+        preg_match('/size-100/', $avatarhtml, $matches);
+        $this->assertCount(1, $matches);
     }
 
     /**