Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 4 additions & 31 deletions packages/base/file-formats/file-preview-stage.gts
Original file line number Diff line number Diff line change
Expand Up @@ -114,21 +114,6 @@ export class FilePreviewStage extends GlimmerComponent<StageSignature> {
return this.showGenericDetail ? '44' : '30';
}

get srcTag() {
return (this.model?.previewSource ?? '').toUpperCase();
}

// Provenance is only meaningful for the families that actually render
// something; a generic pane has nothing to attribute.
get showSrcTag() {
return (
this.showReal &&
Boolean(this.args.preview) &&
Boolean(this.model?.previewSource) &&
this.model?.previewSource !== 'fallback'
);
}

<template>
<div
class='stage'
Expand Down Expand Up @@ -189,9 +174,10 @@ export class FilePreviewStage extends GlimmerComponent<StageSignature> {
{{#if (eq this.state 'malformed')}}
<div class='malformed-banner'>Partial · some content unreadable</div>
{{/if}}
{{#if this.showSrcTag}}
<span class='src-tag'>{{this.srcTag}}</span>
{{/if}}
{{! No provenance overlay: a tag floated over the render lands on
whatever the family draws in that corner — a prose preview's title, an
archive tree's first row — and provenance already has a home in the
isolated shell's metadata chrome. }}
{{else if (eq this.state 'loading')}}
<div class='state-pane'>
<div class='skeleton-bar'></div>
Expand Down Expand Up @@ -367,19 +353,6 @@ export class FilePreviewStage extends GlimmerComponent<StageSignature> {
color: var(--fd-warn, #e8710a);
text-align: left;
}
.src-tag {
position: absolute;
top: 8px;
left: 8px;
font-family: var(--font-mono);
font-size: 0.4375rem;
letter-spacing: 0.06em;
color: var(--muted-foreground);
background: rgb(255 255 255 / 62%);
padding: 2px 4px;
border-radius: 2px;
text-transform: uppercase;
}
@keyframes fd-shimmer {
0% {
background-position: -180% 0;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -184,6 +184,40 @@ module('Integration | FileDef format templates', function (hooks) {
assert.dom('[data-test-file-no-preview]').doesNotExist();
});

// The stage floats no chrome over the family's render: an overlay in the
// stage's corner lands on whatever the preview draws there — a prose
// preview's title, an archive tree's first row. Provenance lives in the
// isolated shell's metadata chrome instead.
test('the stage renders no provenance overlay in any format', async function (assert) {
const ReportPreview: TemplateOnlyComponent<FilePreviewSignature> =
<template>
<div data-test-report-preview>{{@model.name}}</div>
</template>;

class ReportDef extends FileDef {
static displayName = 'Report';
static previewComponent = ReportPreview;
}

let file = new ReportDef({
id: 'http://example.com/docs/report.pdf',
url: 'http://example.com/docs/report.pdf',
sourceUrl: 'http://example.com/docs/report.pdf',
name: 'report.pdf',
contentType: 'application/pdf',
});

for (let format of ['embedded', 'isolated', 'fitted'] as const) {
await renderCard(loader, file, format);
assert
.dom('[data-test-report-preview]')
.exists(`the preview mounts in ${format}`);
assert
.dom('[data-test-file-preview-stage] > span, .src-tag')
.doesNotExist(`${format} floats no tag over the render`);
}
});

// The shells read the glyph from the class rather than from a family→glyph
// map, which is what keeps each family's icon module out of card-api's
// dependency graph — and so out of every card's. If a shell ever goes back to
Expand Down
Loading