mirror_php/moodle
1
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-01-19 06:18:28 +01:00
Code Issues Projects Releases Wiki Activity

MDL-72305 theme_boost: user initials as profile picture placeholder

Browse Source
This commit is contained in:
Bas Brands 2021-08-11 14:33:21 +02:00
parent 5ea3545115
commit 646109ec3b
6 changed files with 98 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
lib/outputrenderers.php
View File

@ -2581,8 +2581,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) {

3
theme/boost/scss/moodle/core.scss
View File

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

31
theme/boost/scss/moodle/modules.scss
View File

@ -1108,6 +1108,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;
@ -1122,6 +1129,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;

29
theme/boost/style/moodle.css
View File

@ -9982,7 +9982,8 @@ a.autolink.glossary:hover {
.pagingbar .thispage {
font-weight: bold; }
img.userpicture {
img.userpicture,
.userinitials {
margin-right: 0.5rem; }
img.resize {
@ -17663,6 +17664,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; }
@ -17671,6 +17678,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; } }

29
theme/classic/style/moodle.css
View File

@ -10194,7 +10194,8 @@ a.autolink.glossary:hover {
.pagingbar .thispage {
font-weight: bold; }
img.userpicture {
img.userpicture,
.userinitials {
margin-right: 0.5rem; }
img.resize {
@ -17898,6 +17899,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; }
@ -17906,6 +17913,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; } }

7
user/tests/userlib_test.php
View File

@ -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);
}
/**