diff --git a/index.html b/index.html index eb0a2bd..6d3cdb5 100644 --- a/index.html +++ b/index.html @@ -38,6 +38,7 @@
+

Last Commits

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;