Commit 4ed152e4 authored by Phil Hughes's avatar Phil Hughes

Merge branch '44294-skeleton-lines' into 'master'

Resolve "skeleton placeholder on diff has white background"

Closes #44294

See merge request gitlab-org/gitlab-ce!17792
parents d182f6d1 0e1c5ed3
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
lines: { lines: {
type: Number, type: Number,
required: false, required: false,
default: 6, default: 3,
}, },
}, },
computed: { computed: {
......
...@@ -187,12 +187,9 @@ a { ...@@ -187,12 +187,9 @@ a {
animation: fadeInFull $fade-in-duration 1; animation: fadeInFull $fade-in-duration 1;
} }
.animation-container { .animation-container {
background: $repo-editor-grey;
height: 40px; height: 40px;
overflow: hidden; overflow: hidden;
position: relative;
&.animation-container-small { &.animation-container-small {
height: 12px; height: 12px;
...@@ -205,60 +202,43 @@ a { ...@@ -205,60 +202,43 @@ a {
} }
} }
&::before { [class^="skeleton-line-"] {
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: blockTextShine;
animation-timing-function: linear;
background-image: $repo-editor-linear-gradient;
background-repeat: no-repeat;
background-size: 800px 45px;
content: ' ';
display: block;
height: 100%;
position: relative; position: relative;
} background-color: $theme-gray-100;
height: 10px;
div { overflow: hidden;
background: $white-light;
height: 6px;
left: 0;
position: absolute;
right: 0;
}
.skeleton-line-1 { &:not(:last-of-type) {
left: 0; margin-bottom: 4px;
top: 8px;
} }
.skeleton-line-2 { &::after {
left: 150px; content: ' ';
top: 0; display: block;
animation: blockTextShine 1s linear infinite forwards;
background-repeat: no-repeat;
background-size: cover;
background-image: linear-gradient(
to right,
$theme-gray-100 0%,
$theme-gray-50 20%,
$theme-gray-100 40%,
$theme-gray-100 100%
);
height: 10px; height: 10px;
} }
.skeleton-line-3 {
left: 0;
top: 23px;
}
.skeleton-line-4 {
left: 0;
top: 38px;
} }
}
.skeleton-line-5 { $skeleton-line-widths: (
left: 200px; 156px,
top: 28px; 235px,
height: 10px; 200px,
} );
.skeleton-line-6 { @for $count from 1 through length($skeleton-line-widths) {
top: 14px; .skeleton-line-#{$count} {
left: 230px; width: nth($skeleton-line-widths, $count);
height: 10px;
} }
} }
......
...@@ -713,20 +713,6 @@ $color-high-score: $green-400; ...@@ -713,20 +713,6 @@ $color-high-score: $green-400;
$color-average-score: $orange-400; $color-average-score: $orange-400;
$color-low-score: $red-400; $color-low-score: $red-400;
/*
Repo editor
*/
$repo-editor-grey: #f6f7f9;
$repo-editor-grey-darker: #e9ebee;
$repo-editor-linear-gradient: linear-gradient(
to right,
$repo-editor-grey 0%,
$repo-editor-grey-darker,
20%,
$repo-editor-grey 40%,
$repo-editor-grey 100%
);
/* /*
Performance Bar Performance Bar
*/ */
......
...@@ -27,7 +27,7 @@ describe('RepoLoadingFile', () => { ...@@ -27,7 +27,7 @@ describe('RepoLoadingFile', () => {
const lines = [...container.querySelectorAll(':scope > div')]; const lines = [...container.querySelectorAll(':scope > div')];
expect(container).toBeTruthy(); expect(container).toBeTruthy();
expect(lines.length).toEqual(6); expect(lines.length).toEqual(3);
assertLines(lines); assertLines(lines);
}); });
} }
......
...@@ -14,8 +14,8 @@ describe('Skeleton loading container', () => { ...@@ -14,8 +14,8 @@ describe('Skeleton loading container', () => {
vm.$destroy(); vm.$destroy();
}); });
it('renders 6 skeleton lines by default', () => { it('renders 3 skeleton lines by default', () => {
expect(vm.$el.querySelector('.skeleton-line-6')).not.toBeNull(); expect(vm.$el.querySelector('.skeleton-line-3')).not.toBeNull();
}); });
it('renders in full mode by default', () => { it('renders in full mode by default', () => {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment