Skip to content

Commit

Permalink
chore(core): better elektra avatar loading (#1509)
Browse files Browse the repository at this point in the history
Co-authored-by: Esther Schmitz <[email protected]>
  • Loading branch information
hgw77 and edda authored Feb 3, 2025
1 parent a4b1ee2 commit c673298
Show file tree
Hide file tree
Showing 7 changed files with 63 additions and 48 deletions.
7 changes: 7 additions & 0 deletions app/assets/images/avatar_default.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
58 changes: 27 additions & 31 deletions app/assets/stylesheets/_monsoon_theme.scss
Original file line number Diff line number Diff line change
Expand Up @@ -33,13 +33,11 @@ $brand-danger: #e22;
@font-face {
font-family: "MonsoonIcons";
src: font-url("MonsoonIcons-Regular.eot"); /* IE9 Compat Modes */
src: font-url("MonsoonIcons-Regular.eot?#iefix") format("embedded-opentype"),
src:
font-url("MonsoonIcons-Regular.eot?#iefix") format("embedded-opentype"),
/* IE6-IE8 */ font-url("MonsoonIcons-Regular.woff") format("woff"),
/* Modern Browsers */ font-url("MonsoonIcons-Regular.ttf")
format("truetype"),
/* Safari, Android, iOS */
font-url("MonsoonIcons-Regular.svg#c6b2bb2514051854bf2bababb8772ce0")
format("svg"); /* Legacy iOS */
/* Modern Browsers */ font-url("MonsoonIcons-Regular.ttf") format("truetype"),
/* Safari, Android, iOS */ font-url("MonsoonIcons-Regular.svg#c6b2bb2514051854bf2bababb8772ce0") format("svg"); /* Legacy iOS */

font-style: normal;
font-weight: 400;
Expand Down Expand Up @@ -367,10 +365,6 @@ section {
font-family: $font-family-sans-serif-light;
}

.avatar {
margin-right: 6px;
}

.debug-info {
display: none;
}
Expand Down Expand Up @@ -646,11 +640,7 @@ section {
// ---------------------------------------------------------------------------------

.btn-outline {
@include button-variant-outline(
$btn-outline-color,
$btn-outline-bg,
$btn-outline-border
);
@include button-variant-outline($btn-outline-color, $btn-outline-bg, $btn-outline-border);
}

.btn-outline-negative {
Expand Down Expand Up @@ -702,8 +692,8 @@ section {
.picture {
flex: 0;
padding: 8px 10px;
img{

img {
max-width: 150px;
max-height: 150px;
border-radius: 5px;
Expand Down Expand Up @@ -957,7 +947,10 @@ section {
color: #fff;
}

.navbar-identity {
.nav > li > a.navbar-identity {
display: flex;
align-items: center;
column-gap: 0.3rem;
.avatar {
margin-top: -5px;
border-radius: 5px;
Expand Down Expand Up @@ -1062,6 +1055,18 @@ section {
width: 62px;
}

.avatar {
background: inline_svg("avatar_default") no-repeat;
background-size: contain;
height: 24px;
width: 24px;
}

.avatar_profile {
height: 140px;
width: 140px;
}

// ---------------------------------------------------------------------------------
// Footer
// ---------------------------------------------------------------------------------
Expand Down Expand Up @@ -1292,11 +1297,7 @@ footer,
color: #333;
display: inline-block;
padding: (
(
$context-breadcrumb-height -
($context-breadcrumb-font-size - $font-size-base) -
$line-height-computed
) / 2
($context-breadcrumb-height - ($context-breadcrumb-font-size - $font-size-base) - $line-height-computed) / 2
)
0; // to calculate the correct padding subtract from the total height the actual line-height (computed + adjustment for font size (if other than base size)), then divide by 2
padding-right: $context-breadcrumb-padding-horizontal;
Expand Down Expand Up @@ -1589,8 +1590,7 @@ footer,
}

&.bs-callout-announcement {
background: rgb(41, 47, 54) inline_svg("CCloud_cloud_shape.svg") right
bottom no-repeat;
background: rgb(41, 47, 54) inline_svg("CCloud_cloud_shape.svg") right bottom no-repeat;
padding-right: 100px;
}

Expand Down Expand Up @@ -1752,8 +1752,7 @@ blockquote,
}

.jumbotron-plain {
padding: $line-height-computed * 1.5 $line-height-computed
$line-height-computed $line-height-computed;
padding: $line-height-computed * 1.5 $line-height-computed $line-height-computed $line-height-computed;

h1 {
font-size: $font-size-h1;
Expand Down Expand Up @@ -2488,10 +2487,7 @@ i.confirm-icon {
.confirm-term input {
border-radius: 4px;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
@include transition(
border-color ease-in-out 0.15s,
box-shadow ease-in-out 0.15s
);
@include transition(border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s);
padding: 6px 12px;
border: 1px solid #ccc;
margin-left: 10px;
Expand Down
40 changes: 26 additions & 14 deletions app/javascript/core/avatar_loader.js
Original file line number Diff line number Diff line change
@@ -1,18 +1,30 @@
window.loadAvatar = function ({ avatarUrl, elementId }) {
document.addEventListener("DOMContentLoaded", function () {
var img = new Image()
// handle the case where the image does not exist
// try to load the image
img.onload = function () {
// if the image exists, set the src attribute of the image element
// console.info(`Loading avatar image from ${avatarUrl} into element with id ${elementId}.`)
document.getElementById(elementId).src = avatarUrl
}
img.onerror = function () {
// if the image does not exist, use the default image
console.warn(`Avatar image ${avatarUrl} does not exist, using default image.`)
}
// set the src attribute to the image url
img.src = avatarUrl
const loadImage = new Promise((resolve, reject) => {
var img = new Image()
// handle the case where the image does not exist
// try to load the image
img.onload = function () {
// if the image exists, set the src attribute of the image element
// console.info(`Loading avatar image from ${avatarUrl} into element with id ${elementId}.`)
document.getElementById(elementId).insertAdjacentHTML("beforeend", `<img src="${avatarUrl}" />`)
resolve()
}
img.onerror = function () {
// if the image does not exist, use the default image
console.warn(`Avatar image ${avatarUrl} does not exist, using default image.`)
reject()
}
// set the src attribute to the image url
img.src = avatarUrl
})

loadImage
.then(() => {
console.info(`Successfully loaded avatar from ${avatarUrl}.`)
})
.catch(() => {
console.warn(`Failed to load avatar image.`)
})
})
}
2 changes: 1 addition & 1 deletion app/views/application/_cloudops_nav.html.haml
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
-# https://avatars.wdf.sap.corp/avatar/ is not accessible from CI. Otherwise the tests will fail!
-# cypress is based on chromium/electron and loading:"lazy" is only interpreted in that browser
- avatar_url = url_for_avatar
%img.avatar{src: "/images/avatar-default.png", height: 24, async: true, loading: "lazy", id: "user-avatar"}
%div.avatar{id: "user-avatar"}
= current_user.full_name
%span.caret
%ul.dropdown-menu{:role => "menu"}
Expand Down
2 changes: 1 addition & 1 deletion app/views/application/_nav.html.haml
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
-# https://avatars.wdf.sap.corp/avatar/ is not accessible from CI. Otherwise the tests will fail!
-# cypress is based on chromium/electron and loading:"lazy" is only interpreted in that browser
- avatar_url = url_for_avatar
%img.avatar{src: "/images/avatar-default.png", height: 24, async: true, loading: "lazy", id: "user-avatar"}
%div.avatar{id: "user-avatar"}
= current_user.full_name
%span.caret
Expand Down
2 changes: 1 addition & 1 deletion app/views/application/_user_profile.html.haml
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@
password_sync: true), class: 'btn btn-primary'
.picture
- avatar_url = url_for_avatar(140)
%img.avatar{src: "/images/avatar-default.png", async: true, loading: "lazy", id: "user-profile-avatar"}
%div.avatar.avatar_profile{id: "user-profile-avatar"}
.modal-footer
Expand Down
Binary file removed public/images/avatar-default.png
Binary file not shown.

0 comments on commit c673298

Please sign in to comment.