mirror of
https://github.com/scm-manager/scm-manager.git
synced 2025-10-26 00:56:09 +02:00
Fix fetching of gravatar images getting blocked by COEP
Squash commits of branch bugfix/failing-to-load-gravatar: - Fix line break if gravatar image could not be loaded - Fix overlapping text inside the commit overview if the avatar alt text is shown - Fetching of gravatar images getting blocked by Cross-Origin-Embedder-Policy - Fix border-radius - Fix outdated storyshots
This commit is contained in:
Thomas Zerr
committed by
Till-André Diegeler
Till-André Diegeler
parent
39b5ff36df
commit
cc54f35860
6
gradle/changelog/gravatar-changes.yaml
Normal file
6
gradle/changelog/gravatar-changes.yaml
Normal file
@@ -0,0 +1,6 @@
|
||||
- type: fixed
|
||||
description: Overlapping text inside the footer section if the alt text of an avatar is rendered
|
||||
- type: fixed
|
||||
description: Overlapping text inside the commit overview if the alt text of an avatar is rendered
|
||||
- type: fixed
|
||||
description: Fetching of gravatar images getting blocked by Cross-Origin-Embedder-Policy
|
||||
@@ -1825,18 +1825,20 @@ exports[`Storyshots Footer Full 1`] = `
|
||||
className="has-text-weight-bold mb-2"
|
||||
>
|
||||
<div
|
||||
className="is-flex"
|
||||
data-testid="trillian-mcmillian"
|
||||
>
|
||||
<span
|
||||
className="Footer__AvatarContainer-sc-k70cxq-1 kckyuz image is-rounded"
|
||||
>
|
||||
<div>
|
||||
<img
|
||||
alt="trillian"
|
||||
className="is-rounded Footer__VCenteredAvatar-sc-k70cxq-0 bGojWR"
|
||||
className="is-rounded Footer__VCenteredAvatar-sc-k70cxq-0 gNPbnb"
|
||||
crossOrigin="anonymous"
|
||||
src="test-file-stub"
|
||||
/>
|
||||
</span>
|
||||
Trillian McMillian
|
||||
</div>
|
||||
<div>
|
||||
Trillian McMillian
|
||||
</div>
|
||||
</div>
|
||||
</h2>
|
||||
<ul
|
||||
@@ -2031,18 +2033,20 @@ exports[`Storyshots Footer With Avatar 1`] = `
|
||||
className="has-text-weight-bold mb-2"
|
||||
>
|
||||
<div
|
||||
className="is-flex"
|
||||
data-testid="trillian-mcmillian"
|
||||
>
|
||||
<span
|
||||
className="Footer__AvatarContainer-sc-k70cxq-1 kckyuz image is-rounded"
|
||||
>
|
||||
<div>
|
||||
<img
|
||||
alt="trillian"
|
||||
className="is-rounded Footer__VCenteredAvatar-sc-k70cxq-0 bGojWR"
|
||||
className="is-rounded Footer__VCenteredAvatar-sc-k70cxq-0 gNPbnb"
|
||||
crossOrigin="anonymous"
|
||||
src="test-file-stub"
|
||||
/>
|
||||
</span>
|
||||
Trillian McMillian
|
||||
</div>
|
||||
<div>
|
||||
Trillian McMillian
|
||||
</div>
|
||||
</div>
|
||||
</h2>
|
||||
<ul
|
||||
@@ -20086,6 +20090,7 @@ exports[`Storyshots Repositories/Annotate With Avatars 1`] = `
|
||||
<img
|
||||
alt="Arthur Dent"
|
||||
className="has-rounded-border AuthorImage-sc-ygvjd8-0 dTapGF"
|
||||
crossOrigin="anonymous"
|
||||
src="https://robohash.org/arthur.dent@hitchhiker.com.png"
|
||||
/>
|
||||
Arthur Dent
|
||||
@@ -20148,6 +20153,7 @@ exports[`Storyshots Repositories/Annotate With Avatars 1`] = `
|
||||
<img
|
||||
alt="Tricia Marie McMillan"
|
||||
className="has-rounded-border AuthorImage-sc-ygvjd8-0 dTapGF"
|
||||
crossOrigin="anonymous"
|
||||
src="https://robohash.org/trillian@hitchhiker.com.png"
|
||||
/>
|
||||
Tricia Marie McMillan
|
||||
@@ -20210,6 +20216,7 @@ exports[`Storyshots Repositories/Annotate With Avatars 1`] = `
|
||||
<img
|
||||
alt="Arthur Dent"
|
||||
className="has-rounded-border AuthorImage-sc-ygvjd8-0 dTapGF"
|
||||
crossOrigin="anonymous"
|
||||
src="https://robohash.org/arthur.dent@hitchhiker.com.png"
|
||||
/>
|
||||
Arthur Dent
|
||||
@@ -20254,6 +20261,7 @@ exports[`Storyshots Repositories/Annotate With Avatars 1`] = `
|
||||
<img
|
||||
alt="Ford Prefect"
|
||||
className="has-rounded-border AuthorImage-sc-ygvjd8-0 dTapGF"
|
||||
crossOrigin="anonymous"
|
||||
src="https://robohash.org/ford.prefect@hitchhiker.com.png"
|
||||
/>
|
||||
Ford Prefect
|
||||
@@ -20298,6 +20306,7 @@ exports[`Storyshots Repositories/Annotate With Avatars 1`] = `
|
||||
<img
|
||||
alt="Arthur Dent"
|
||||
className="has-rounded-border AuthorImage-sc-ygvjd8-0 dTapGF"
|
||||
crossOrigin="anonymous"
|
||||
src="https://robohash.org/arthur.dent@hitchhiker.com.png"
|
||||
/>
|
||||
Arthur Dent
|
||||
@@ -20380,11 +20389,12 @@ exports[`Storyshots Repositories/Changesets Co-Authors with avatar 1`] = `
|
||||
className="media-left mt-2 mr-2"
|
||||
>
|
||||
<div
|
||||
className="SingleChangeset__FixedSizedAvatar-sc-ytpqp9-0 cDjLjl image"
|
||||
className="SingleChangeset__FixedSizedAvatar-sc-ytpqp9-0 dLAXC image"
|
||||
>
|
||||
<img
|
||||
alt="SCM Administrator"
|
||||
className="has-rounded-border"
|
||||
crossOrigin="anonymous"
|
||||
src="https://robohash.org/scm-admin@scm-manager.org"
|
||||
/>
|
||||
</div>
|
||||
@@ -20554,11 +20564,12 @@ exports[`Storyshots Repositories/Changesets Commiter and Co-Authors with avatar
|
||||
className="media-left mt-2 mr-2"
|
||||
>
|
||||
<div
|
||||
className="SingleChangeset__FixedSizedAvatar-sc-ytpqp9-0 cDjLjl image"
|
||||
className="SingleChangeset__FixedSizedAvatar-sc-ytpqp9-0 dLAXC image"
|
||||
>
|
||||
<img
|
||||
alt="SCM Administrator"
|
||||
className="has-rounded-border"
|
||||
crossOrigin="anonymous"
|
||||
src="https://robohash.org/scm-admin@scm-manager.org"
|
||||
/>
|
||||
</div>
|
||||
@@ -21626,11 +21637,12 @@ exports[`Storyshots Repositories/Changesets With avatar 1`] = `
|
||||
className="media-left mt-2 mr-2"
|
||||
>
|
||||
<div
|
||||
className="SingleChangeset__FixedSizedAvatar-sc-ytpqp9-0 cDjLjl image"
|
||||
className="SingleChangeset__FixedSizedAvatar-sc-ytpqp9-0 dLAXC image"
|
||||
>
|
||||
<img
|
||||
alt="SCM Administrator"
|
||||
className="has-rounded-border"
|
||||
crossOrigin="anonymous"
|
||||
src="test-file-stub"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
*/
|
||||
|
||||
import React, { FC } from "react";
|
||||
import { Image } from "..";
|
||||
import { Image } from "@scm-manager/ui-core";
|
||||
import { EXTENSION_POINT, Person } from "./Avatar";
|
||||
import { useBinder } from "@scm-manager/ui-extensions";
|
||||
|
||||
@@ -36,7 +36,7 @@ const AvatarImage: FC<Props> = ({ person, representation = "rounded-border", cla
|
||||
classes += " " + className;
|
||||
}
|
||||
|
||||
return <Image className={classes} src={avatar} alt={person.name} />;
|
||||
return <Image className={classes} src={avatar} alt={person.name} crossOrigin="anonymous" />;
|
||||
}
|
||||
|
||||
return null;
|
||||
|
||||
@@ -51,23 +51,19 @@ type TitleWithAvatarProps = {
|
||||
};
|
||||
|
||||
const VCenteredAvatar = styled(AvatarImage)`
|
||||
vertical-align: middle;
|
||||
`;
|
||||
|
||||
const AvatarContainer = styled.span`
|
||||
float: left;
|
||||
width: 1rem !important;
|
||||
height: 1rem !important;
|
||||
margin-right: 0.3em;
|
||||
padding-top: 0.2em;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
border-radius: 100%;
|
||||
`;
|
||||
|
||||
const TitleWithAvatar: FC<TitleWithAvatarProps> = ({ me }) => (
|
||||
<div {...createAttributesForTesting(me.displayName)}>
|
||||
<AvatarContainer className="image is-rounded">
|
||||
<div {...createAttributesForTesting(me.displayName)} className="is-flex">
|
||||
<div>
|
||||
<VCenteredAvatar person={me} representation="rounded" />
|
||||
</AvatarContainer>
|
||||
{me.displayName}
|
||||
</div>
|
||||
<div>{me.displayName}</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
|
||||
@@ -37,6 +37,7 @@ type Props = {
|
||||
const FixedSizedAvatar = styled.div`
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
min-width: fit-content;
|
||||
`;
|
||||
|
||||
const FullWidthDiv = styled.div`
|
||||
|
||||
Reference in New Issue
Block a user