diff --git a/index.html b/index.html
index eb0a2bd..6d3cdb5 100644
--- a/index.html
+++ b/index.html
@@ -38,6 +38,7 @@
diff --git a/src/sketchObjects/Revealable.ts b/src/sketchObjects/Revealable.ts
index 2d97272..4af7cad 100644
--- a/src/sketchObjects/Revealable.ts
+++ b/src/sketchObjects/Revealable.ts
@@ -23,6 +23,7 @@ export interface RevealableInterface {
imageUrl?: string;
version?: string;
commits?: Commit[];
+ fileContents?: string;
}
enum RevealableStates {
@@ -44,6 +45,7 @@ export class Revealable {
imageUrl: string;
version: string;
commits: Commit[];
+ fileContents: string;
isHovered: boolean;
isRevealed: boolean;
@@ -59,7 +61,17 @@ export class Revealable {
pulseCountUp: boolean;
constructor(
- { type, name, path, contents, url, imageUrl, version, commits }: RevealableInterface,
+ {
+ type,
+ name,
+ path,
+ contents,
+ url,
+ imageUrl,
+ version,
+ commits,
+ fileContents,
+ }: RevealableInterface,
area: Area
) {
this.type = type;
@@ -69,6 +81,7 @@ export class Revealable {
this.url = url;
this.version = version;
this.commits = commits;
+ this.fileContents = fileContents;
this.imageUrl = imageUrl;
this.area = area;
this.currentSize = this.minSize;
@@ -182,6 +195,7 @@ export class Revealable {
url: this.url,
version: this.version,
commits: this.commits,
+ fileContents: this.fileContents,
});
}
}
diff --git a/src/ui/info.ts b/src/ui/info.ts
index f32bfb8..370ec01 100644
--- a/src/ui/info.ts
+++ b/src/ui/info.ts
@@ -16,6 +16,7 @@ export interface InfoMessageType {
url?: string;
commits?: Commit[];
version?: string;
+ fileContents?: string;
}
export class InfoMessage {
@@ -32,13 +33,14 @@ export class InfoMessage {
infoMessageCommitsHeadlineRef: HTMLElement;
infoMessageCommitsRef: HTMLElement;
infoMessageVersionRef: HTMLElement;
+ infoMessageLegacyRef: HTMLElement;
backdrop: HTMLElement;
constructor() {
this.infoMessage = document.getElementById('info-message');
this.infoMessageHeadline = document.getElementById('info-message-headline');
this.infoMessageSubheadline = document.getElementById('info-message-subheadline');
- this.infoMessageContents = document.getElementById('info-message-contents');
+ this.infoMessageContents = document.getElementById('info-message-contents-text');
this.infoMessageClose = document.getElementById('info-message-close');
this.infoMessageImgRef = document.getElementById('info-message-img') as HTMLImageElement;
this.infoMessageLinkRef = document.getElementById('info-message-link') as HTMLAnchorElement;
@@ -47,6 +49,7 @@ export class InfoMessage {
'info-message-content-commits-headline'
);
this.infoMessageVersionRef = document.getElementById('info-message-contents-version');
+ this.infoMessageLegacyRef = document.getElementById('info-message-contents-legacy');
this.backdrop = document.getElementById('backdrop');
this.backdrop.addEventListener('click', this.onBackdropClick);
@@ -96,6 +99,13 @@ export class InfoMessage {
this.infoMessageVersionRef.style.display = 'none';
}
+ if (this.type === RevealableTypes.LEGACY) {
+ this.infoMessageLegacyRef.style.display = 'block';
+ this.setLegacy(newMessage.fileContents);
+ } else {
+ this.infoMessageLegacyRef.style.display = 'none';
+ }
+
store.setState({ infoMessageShown: true });
}
});
@@ -113,13 +123,20 @@ export class InfoMessage {
private setContents(headline: string, innerHTML: string) {
this.infoMessageHeadline.innerText = headline;
- // this.infoMessageContents.innerHTML = innerHTML;
+ this.infoMessageContents.innerHTML = innerHTML;
}
private setVersion(version: string) {
this.infoMessageVersionRef.innerHTML = `This package is installed at
${version}
`;
}
+ private setLegacy(fileContents: string) {
+ this.infoMessageLegacyRef.innerHTML = `
+ Excerpt from the file:
+ ${fileContents}
+ `;
+ }
+
private setCommits(commits: Commit[]) {
const commitEls = commits.map(
({ message, url, time }) =>
diff --git a/styles.scss b/styles.scss
index 02b8dc5..79ca5a0 100644
--- a/styles.scss
+++ b/styles.scss
@@ -240,6 +240,21 @@ textarea {
margin: 1.5rem 0;
}
+ #info-message-contents-legacy {
+ p {
+ margin: 0;
+ font-size: 14px;
+ color: #4e4e4e;
+ font-style: italic;
+ }
+ pre {
+ background-color: black;
+ color: white;
+ padding: 0.5rem;
+ border-radius: 10px;
+ }
+ }
+
h4 {
text-transform: uppercase;
letter-spacing: 1px;