Skip to content
Snippets Groups Projects
Commit 02081328 authored by Sascha Eggenberger's avatar Sascha Eggenberger :speech_balloon:
Browse files

Diff file too large warning: Migrate to design tokens

Makes the message more compact.

Changelog: changed
parent 9b89f0a7
No related branches found
No related tags found
1 merge request!171514Diff file too large warning: Migrate to design tokens
......@@ -398,6 +398,16 @@ export default {
this.fileDiscussions.forEach((d) => this.toggleFileDiscussion(d));
},
},
warningClasses: [
'collapsed-file-warning',
'gl-rounded-b-base',
'gl-px-5',
'gl-py-4',
'gl-flex',
'gl-flex-col',
'sm:gl-items-start',
'gl-gap-3',
],
CONFLICT_TEXT,
FILE_DIFF_POSITION_TYPE,
generatedDiffFileDocsPath: helpPagePath('user/project/merge_requests/changes.html', {
......@@ -556,11 +566,8 @@ export default {
data-testid="loader-icon"
/>
<div v-else-if="errorMessage" class="diff-viewer">
<div
v-if="isFileTooLarge"
class="collapsed-file-warning gl-rounded-bl-base gl-rounded-br-base gl-bg-orange-50 gl-p-7 gl-text-center"
>
<p class="gl-mb-5">
<div v-if="isFileTooLarge" :class="$options.warningClasses">
<p class="!gl-mb-0">
{{ $options.i18n.tooLarge }}
</p>
<gl-button data-testid="blob-button" category="secondary" :href="viewBlobHref">
......@@ -572,11 +579,8 @@ export default {
<div v-else v-safe-html="errorMessage" class="nothing-here-block"></div>
</div>
<template v-else>
<div
v-if="showWarning"
class="collapsed-file-warning gl-rounded-bl-base gl-rounded-br-base gl-bg-orange-50 gl-p-7 gl-text-center"
>
<p class="gl-mb-5">
<div v-if="showWarning" :class="$options.warningClasses">
<p class="!gl-mb-0">
<gl-sprintf :message="expandableWarning">
<template #tag="{ content }">
<code>{{ content }}</code>
......
......@@ -3,6 +3,15 @@
$diff-file-header: 41px;
:root {
--diff-warning-text-color: var(--gl-feedback-warning-text-color);
--diff-warning-background-color: var(--gl-feedback-warning-background-color);
}
:root.gl-dark {
--diff-warning-background-color: #453522;
}
// Common
.diff-file {
margin-bottom: $gl-padding;
......@@ -887,3 +896,8 @@ table.code {
.diff-file-row.is-active.is-linked {
background-color: $blue-50;
}
.collapsed-file-warning {
color: var(--diff-warning-text-color);
background-color: var(--diff-warning-background-color);
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment