From ae04c653c887c644bca6de6dc7d9586e9cbcb051 Mon Sep 17 00:00:00 2001 From: Garrett Date: Wed, 11 Oct 2023 11:42:09 -0700 Subject: [PATCH 1/6] Create a fullscreen toggle element and use in the GUIDE --- src/renderer/src/stories/FullScreenToggle.ts | 67 +++++++++++++++++++ src/renderer/src/stories/Modal.ts | 1 + .../src/stories/assets/fullscreen.svg | 1 + .../src/stories/assets/fullscreen_exit.svg | 1 + .../src/stories/preview/NWBFilePreview.js | 25 ++++++- src/renderer/src/stories/preview/Neurosift.js | 29 ++++++-- 6 files changed, 116 insertions(+), 8 deletions(-) create mode 100644 src/renderer/src/stories/FullScreenToggle.ts create mode 100644 src/renderer/src/stories/assets/fullscreen.svg create mode 100644 src/renderer/src/stories/assets/fullscreen_exit.svg diff --git a/src/renderer/src/stories/FullScreenToggle.ts b/src/renderer/src/stories/FullScreenToggle.ts new file mode 100644 index 000000000..07d0a908f --- /dev/null +++ b/src/renderer/src/stories/FullScreenToggle.ts @@ -0,0 +1,67 @@ +import { LitElement, css, html } from "lit"; + +import fullScreenIcon from './assets/fullscreen.svg?raw' +import fullScreenExitIcon from './assets/fullscreen_exit.svg?raw' + +import { unsafeHTML } from "lit/directives/unsafe-html.js"; + +type FullScreenToggleProps = { + target: HTMLElement | (() => HTMLElement); +} + +export class FullScreenToggle extends LitElement { + static get styles() { + return css` + :host { + display: flex; + position: absolute; + top: 10px; + right: 10px; + padding: 10px; + color: white; + background-color: gainsboro; + border: 1px solid gray; + border-radius: 10px; + cursor: pointer; + box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3); + z-index: 1000; + } + `; + } + + static get properties() { + return { + icon: { type: String }, + }; + } + + declare icon: string; + declare target: FullScreenToggleProps['target']; + + constructor({ target }: FullScreenToggleProps) { + + super(); + this.target = target; + this.icon = fullScreenIcon + + const fullscreenchanged = () => this.icon = document.fullscreenElement ? fullScreenExitIcon : fullScreenIcon + + this.addEventListener('click', () => { + const target = (typeof this.target === 'function' ? this.target() : this.target) + + target.addEventListener("fullscreenchange", fullscreenchanged); + + const fullScreenEl = document.fullscreenElement + if (!fullScreenEl) target.requestFullscreen() + else document.exitFullscreen() + + }) + } + + render() { + return html`${unsafeHTML(this.icon)}`; + } +} + +customElements.get("fullscreen-toggle") || customElements.define("fullscreen-toggle", FullScreenToggle); + diff --git a/src/renderer/src/stories/Modal.ts b/src/renderer/src/stories/Modal.ts index 62e19f008..83363090f 100644 --- a/src/renderer/src/stories/Modal.ts +++ b/src/renderer/src/stories/Modal.ts @@ -51,6 +51,7 @@ export class Modal extends LitElement { /* Modal Body */ .modal-body { + position: relative; overflow-y: auto; width: 100%; flex-grow: 1; diff --git a/src/renderer/src/stories/assets/fullscreen.svg b/src/renderer/src/stories/assets/fullscreen.svg new file mode 100644 index 000000000..4f22abf79 --- /dev/null +++ b/src/renderer/src/stories/assets/fullscreen.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/renderer/src/stories/assets/fullscreen_exit.svg b/src/renderer/src/stories/assets/fullscreen_exit.svg new file mode 100644 index 000000000..8b197d09b --- /dev/null +++ b/src/renderer/src/stories/assets/fullscreen_exit.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/renderer/src/stories/preview/NWBFilePreview.js b/src/renderer/src/stories/preview/NWBFilePreview.js index 3a5de8286..1cfe5fb05 100644 --- a/src/renderer/src/stories/preview/NWBFilePreview.js +++ b/src/renderer/src/stories/preview/NWBFilePreview.js @@ -6,6 +6,7 @@ import { run } from "../pages/guided-mode/options/utils"; import { until } from "lit/directives/until.js"; import { InstanceManager } from "../InstanceManager"; import { path } from "../../electron"; +import { FullScreenToggle } from "../FullScreenToggle"; export function getSharedPath(array) { array = array.map((str) => str.replace(/\\/g, "/")); // Convert to Mac-style path @@ -42,6 +43,7 @@ export const removeFilePaths = (arr) => { }; class NWBPreviewInstance extends LitElement { + constructor({ file }, project) { super(); this.file = file; @@ -55,7 +57,7 @@ class NWBPreviewInstance extends LitElement { const isOnline = navigator.onLine; return isOnline - ? new Neurosift({ url: getURLFromFilePath(this.file, this.project) }) + ? new Neurosift({ url: getURLFromFilePath(this.file, this.project), fullscreen: false }) : until( (async () => { const htmlRep = await run("html", { nwbfile_path: this.file }, { swal: false }); @@ -71,11 +73,26 @@ customElements.get("nwb-preview-instance") || customElements.define("nwb-preview export class NWBFilePreview extends LitElement { static get styles() { return css` + :host { + display: block; + width: 100%; + height: 100%; + background: white; + } + iframe { width: 100%; height: 100%; border: 0; } + + #inspect { + display: flex; + flex-direction: column; + border-left: 1px solid gray; + box-shadow: -5px 0 5px -5px rgba(0,0,0,0.5); + z-index: 1; + } `; } @@ -105,7 +122,9 @@ export class NWBFilePreview extends LitElement { const onlyFirstFile = fileArr.length <= 1; - return html`
+ return html` + ${new FullScreenToggle({ target: this })} +
${(() => { if (onlyFirstFile) return new NWBPreviewInstance(fileArr[0].info, this.project); @@ -123,7 +142,7 @@ export class NWBFilePreview extends LitElement { })()}
${this.inspect - ? html`
+ ? html`

Inspector Report

${until( (async () => { diff --git a/src/renderer/src/stories/preview/Neurosift.js b/src/renderer/src/stories/preview/Neurosift.js index 622148da9..f63e25007 100644 --- a/src/renderer/src/stories/preview/Neurosift.js +++ b/src/renderer/src/stories/preview/Neurosift.js @@ -2,16 +2,19 @@ import { LitElement, css, html } from "lit"; import { baseUrl } from "../../globals"; import { Loader } from "../Loader"; +import { FullScreenToggle } from "../FullScreenToggle"; export function getURLFromFilePath(file, projectName) { const regexp = new RegExp(`.+(${projectName}.+)`); return `${baseUrl}/preview/${file.match(regexp)[1]}`; } + export class Neurosift extends LitElement { static get styles() { return css` :host { + background: white; width: 100%; height: 100%; display: grid; @@ -21,7 +24,7 @@ export class Neurosift extends LitElement { --loader-color: hsl(200, 80%, 50%); } - :host > * { + iframe, .loader-container { width: 100%; height: 100%; } @@ -35,6 +38,19 @@ export class Neurosift extends LitElement { left: 0; } + .fullscreen-toggle { + display: flex; + position: absolute; + top: 10px; + right: 10px; + padding: 10px; + color: white; + background-color: gainsboro; + border: 1px solid gray; + border-radius: 10px; + cursor: pointer; + } + span { font-size: 14px; } @@ -55,21 +71,24 @@ export class Neurosift extends LitElement { }; } - constructor({ url } = {}) { + constructor({ url, fullscreen = true } = {}) { super(); this.url = url; + this.fullscreen = fullscreen } + render() { return this.url ? html`
${new Loader({ message: `Loading Neurosift view...
${this.url}` })}
+ ${this.fullscreen ? new FullScreenToggle({ target: this }) : ''} ` : ``; From 59ba215de3ce1f0b9527c0e48541588f5c11fddb Mon Sep 17 00:00:00 2001 From: "pre-commit-ci[bot]" <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Wed, 11 Oct 2023 18:42:59 +0000 Subject: [PATCH 2/6] [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --- src/renderer/src/stories/FullScreenToggle.ts | 5 +- .../src/stories/assets/fullscreen.svg | 2 +- .../src/stories/assets/fullscreen_exit.svg | 2 +- .../src/stories/preview/NWBFilePreview.js | 114 +++++++++--------- src/renderer/src/stories/preview/Neurosift.js | 13 +- 5 files changed, 66 insertions(+), 70 deletions(-) diff --git a/src/renderer/src/stories/FullScreenToggle.ts b/src/renderer/src/stories/FullScreenToggle.ts index 07d0a908f..7ae0203b7 100644 --- a/src/renderer/src/stories/FullScreenToggle.ts +++ b/src/renderer/src/stories/FullScreenToggle.ts @@ -21,7 +21,7 @@ export class FullScreenToggle extends LitElement { color: white; background-color: gainsboro; border: 1px solid gray; - border-radius: 10px; + border-radius: 10px; cursor: pointer; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3); z-index: 1000; @@ -50,7 +50,7 @@ export class FullScreenToggle extends LitElement { const target = (typeof this.target === 'function' ? this.target() : this.target) target.addEventListener("fullscreenchange", fullscreenchanged); - + const fullScreenEl = document.fullscreenElement if (!fullScreenEl) target.requestFullscreen() else document.exitFullscreen() @@ -64,4 +64,3 @@ export class FullScreenToggle extends LitElement { } customElements.get("fullscreen-toggle") || customElements.define("fullscreen-toggle", FullScreenToggle); - diff --git a/src/renderer/src/stories/assets/fullscreen.svg b/src/renderer/src/stories/assets/fullscreen.svg index 4f22abf79..f1d258a7d 100644 --- a/src/renderer/src/stories/assets/fullscreen.svg +++ b/src/renderer/src/stories/assets/fullscreen.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/src/renderer/src/stories/assets/fullscreen_exit.svg b/src/renderer/src/stories/assets/fullscreen_exit.svg index 8b197d09b..9a3189294 100644 --- a/src/renderer/src/stories/assets/fullscreen_exit.svg +++ b/src/renderer/src/stories/assets/fullscreen_exit.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/src/renderer/src/stories/preview/NWBFilePreview.js b/src/renderer/src/stories/preview/NWBFilePreview.js index 1cfe5fb05..6d453fe39 100644 --- a/src/renderer/src/stories/preview/NWBFilePreview.js +++ b/src/renderer/src/stories/preview/NWBFilePreview.js @@ -43,7 +43,6 @@ export const removeFilePaths = (arr) => { }; class NWBPreviewInstance extends LitElement { - constructor({ file }, project) { super(); this.file = file; @@ -87,10 +86,10 @@ export class NWBFilePreview extends LitElement { } #inspect { - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; border-left: 1px solid gray; - box-shadow: -5px 0 5px -5px rgba(0,0,0,0.5); + box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.5); z-index: 1; } `; @@ -122,60 +121,59 @@ export class NWBFilePreview extends LitElement { const onlyFirstFile = fileArr.length <= 1; - return html` - ${new FullScreenToggle({ target: this })} -
-
- ${(() => { - if (onlyFirstFile) return new NWBPreviewInstance(fileArr[0].info, this.project); - else { - const _instances = fileArr.map(this.createInstance); - - const instances = _instances.reduce((acc, { subject, session, display }) => { - if (!acc[`sub-${subject}`]) acc[`sub-${subject}`] = {}; - acc[`sub-${subject}`][`ses-${session}`] = display; - return acc; - }, {}); - - return new InstanceManager({ instances }); - } - })()} -
- ${this.inspect - ? html`
-

Inspector Report

- ${until( - (async () => { - const opts = {}; // NOTE: Currently options are handled on the Python end until exposed to the user - - const title = "Inspecting your file"; - - const items = onlyFirstFile - ? removeFilePaths( - await run( - "inspect_file", - { nwbfile_path: fileArr[0].info.file, ...opts }, - { title } - ) - ) // Inspect the first file - : await (async () => - truncateFilePaths( - await run("inspect_folder", { path, ...opts }, { title: title + "s" }), - getSharedPath(fileArr.map((o) => o.info.file)) - ))(); - - const list = new InspectorList({ - items: items, - listStyles: { maxWidth: "350px" }, - }); - list.style.padding = "10px"; - return list; - })(), - html`Loading inspector report...` - )} -
` - : ""} -
`; + return html` ${new FullScreenToggle({ target: this })} +
+
+ ${(() => { + if (onlyFirstFile) return new NWBPreviewInstance(fileArr[0].info, this.project); + else { + const _instances = fileArr.map(this.createInstance); + + const instances = _instances.reduce((acc, { subject, session, display }) => { + if (!acc[`sub-${subject}`]) acc[`sub-${subject}`] = {}; + acc[`sub-${subject}`][`ses-${session}`] = display; + return acc; + }, {}); + + return new InstanceManager({ instances }); + } + })()} +
+ ${this.inspect + ? html`
+

Inspector Report

+ ${until( + (async () => { + const opts = {}; // NOTE: Currently options are handled on the Python end until exposed to the user + + const title = "Inspecting your file"; + + const items = onlyFirstFile + ? removeFilePaths( + await run( + "inspect_file", + { nwbfile_path: fileArr[0].info.file, ...opts }, + { title } + ) + ) // Inspect the first file + : await (async () => + truncateFilePaths( + await run("inspect_folder", { path, ...opts }, { title: title + "s" }), + getSharedPath(fileArr.map((o) => o.info.file)) + ))(); + + const list = new InspectorList({ + items: items, + listStyles: { maxWidth: "350px" }, + }); + list.style.padding = "10px"; + return list; + })(), + html`Loading inspector report...` + )} +
` + : ""} +
`; } } diff --git a/src/renderer/src/stories/preview/Neurosift.js b/src/renderer/src/stories/preview/Neurosift.js index f63e25007..aaf626bb4 100644 --- a/src/renderer/src/stories/preview/Neurosift.js +++ b/src/renderer/src/stories/preview/Neurosift.js @@ -9,7 +9,6 @@ export function getURLFromFilePath(file, projectName) { return `${baseUrl}/preview/${file.match(regexp)[1]}`; } - export class Neurosift extends LitElement { static get styles() { return css` @@ -24,7 +23,8 @@ export class Neurosift extends LitElement { --loader-color: hsl(200, 80%, 50%); } - iframe, .loader-container { + iframe, + .loader-container { width: 100%; height: 100%; } @@ -74,21 +74,20 @@ export class Neurosift extends LitElement { constructor({ url, fullscreen = true } = {}) { super(); this.url = url; - this.fullscreen = fullscreen + this.fullscreen = fullscreen; } - render() { return this.url ? html`
${new Loader({ message: `Loading Neurosift view...
${this.url}` })}
- ${this.fullscreen ? new FullScreenToggle({ target: this }) : ''} + ${this.fullscreen ? new FullScreenToggle({ target: this }) : ""} ` : ``; From d89f581d71b9948afb23bf59548d91751b73bd5d Mon Sep 17 00:00:00 2001 From: Garrett Date: Fri, 13 Oct 2023 09:10:00 -0400 Subject: [PATCH 3/6] Lock to container and implement reactive opacity --- src/renderer/src/stories/FullScreenToggle.ts | 6 + .../src/stories/preview/NWBFilePreview.js | 115 +++++++++--------- 2 files changed, 65 insertions(+), 56 deletions(-) diff --git a/src/renderer/src/stories/FullScreenToggle.ts b/src/renderer/src/stories/FullScreenToggle.ts index 7ae0203b7..ff1e1557f 100644 --- a/src/renderer/src/stories/FullScreenToggle.ts +++ b/src/renderer/src/stories/FullScreenToggle.ts @@ -25,6 +25,12 @@ export class FullScreenToggle extends LitElement { cursor: pointer; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3); z-index: 1000; + opacity: 0.5; + transition: opacity 0.5s; + } + + :host(:hover) { + opacity: 1; } `; } diff --git a/src/renderer/src/stories/preview/NWBFilePreview.js b/src/renderer/src/stories/preview/NWBFilePreview.js index 6d453fe39..63ba00091 100644 --- a/src/renderer/src/stories/preview/NWBFilePreview.js +++ b/src/renderer/src/stories/preview/NWBFilePreview.js @@ -43,6 +43,7 @@ export const removeFilePaths = (arr) => { }; class NWBPreviewInstance extends LitElement { + constructor({ file }, project) { super(); this.file = file; @@ -77,6 +78,7 @@ export class NWBFilePreview extends LitElement { width: 100%; height: 100%; background: white; + position: relative; } iframe { @@ -86,10 +88,10 @@ export class NWBFilePreview extends LitElement { } #inspect { - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; border-left: 1px solid gray; - box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.5); + box-shadow: -5px 0 5px -5px rgba(0,0,0,0.5); z-index: 1; } `; @@ -121,59 +123,60 @@ export class NWBFilePreview extends LitElement { const onlyFirstFile = fileArr.length <= 1; - return html` ${new FullScreenToggle({ target: this })} -
-
- ${(() => { - if (onlyFirstFile) return new NWBPreviewInstance(fileArr[0].info, this.project); - else { - const _instances = fileArr.map(this.createInstance); - - const instances = _instances.reduce((acc, { subject, session, display }) => { - if (!acc[`sub-${subject}`]) acc[`sub-${subject}`] = {}; - acc[`sub-${subject}`][`ses-${session}`] = display; - return acc; - }, {}); - - return new InstanceManager({ instances }); - } - })()} -
- ${this.inspect - ? html`
-

Inspector Report

- ${until( - (async () => { - const opts = {}; // NOTE: Currently options are handled on the Python end until exposed to the user - - const title = "Inspecting your file"; - - const items = onlyFirstFile - ? removeFilePaths( - await run( - "inspect_file", - { nwbfile_path: fileArr[0].info.file, ...opts }, - { title } - ) - ) // Inspect the first file - : await (async () => - truncateFilePaths( - await run("inspect_folder", { path, ...opts }, { title: title + "s" }), - getSharedPath(fileArr.map((o) => o.info.file)) - ))(); - - const list = new InspectorList({ - items: items, - listStyles: { maxWidth: "350px" }, - }); - list.style.padding = "10px"; - return list; - })(), - html`Loading inspector report...` - )} -
` - : ""} -
`; + return html` + ${new FullScreenToggle({ target: this })} +
+
+ ${(() => { + if (onlyFirstFile) return new NWBPreviewInstance(fileArr[0].info, this.project); + else { + const _instances = fileArr.map(this.createInstance); + + const instances = _instances.reduce((acc, { subject, session, display }) => { + if (!acc[`sub-${subject}`]) acc[`sub-${subject}`] = {}; + acc[`sub-${subject}`][`ses-${session}`] = display; + return acc; + }, {}); + + return new InstanceManager({ instances }); + } + })()} +
+ ${this.inspect + ? html`
+

Inspector Report

+ ${until( + (async () => { + const opts = {}; // NOTE: Currently options are handled on the Python end until exposed to the user + + const title = "Inspecting your file"; + + const items = onlyFirstFile + ? removeFilePaths( + await run( + "inspect_file", + { nwbfile_path: fileArr[0].info.file, ...opts }, + { title } + ) + ) // Inspect the first file + : await (async () => + truncateFilePaths( + await run("inspect_folder", { path, ...opts }, { title: title + "s" }), + getSharedPath(fileArr.map((o) => o.info.file)) + ))(); + + const list = new InspectorList({ + items: items, + listStyles: { maxWidth: "350px" }, + }); + list.style.padding = "10px"; + return list; + })(), + html`Loading inspector report...` + )} +
` + : ""} +
`; } } From 50683ddc958aadb266cf1204b77acfdf59c496fb Mon Sep 17 00:00:00 2001 From: "pre-commit-ci[bot]" <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Fri, 13 Oct 2023 13:10:22 +0000 Subject: [PATCH 4/6] [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --- .../src/stories/preview/NWBFilePreview.js | 114 +++++++++--------- 1 file changed, 56 insertions(+), 58 deletions(-) diff --git a/src/renderer/src/stories/preview/NWBFilePreview.js b/src/renderer/src/stories/preview/NWBFilePreview.js index 63ba00091..8c0eec3c9 100644 --- a/src/renderer/src/stories/preview/NWBFilePreview.js +++ b/src/renderer/src/stories/preview/NWBFilePreview.js @@ -43,7 +43,6 @@ export const removeFilePaths = (arr) => { }; class NWBPreviewInstance extends LitElement { - constructor({ file }, project) { super(); this.file = file; @@ -88,10 +87,10 @@ export class NWBFilePreview extends LitElement { } #inspect { - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; border-left: 1px solid gray; - box-shadow: -5px 0 5px -5px rgba(0,0,0,0.5); + box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.5); z-index: 1; } `; @@ -123,60 +122,59 @@ export class NWBFilePreview extends LitElement { const onlyFirstFile = fileArr.length <= 1; - return html` - ${new FullScreenToggle({ target: this })} -
-
- ${(() => { - if (onlyFirstFile) return new NWBPreviewInstance(fileArr[0].info, this.project); - else { - const _instances = fileArr.map(this.createInstance); - - const instances = _instances.reduce((acc, { subject, session, display }) => { - if (!acc[`sub-${subject}`]) acc[`sub-${subject}`] = {}; - acc[`sub-${subject}`][`ses-${session}`] = display; - return acc; - }, {}); - - return new InstanceManager({ instances }); - } - })()} -
- ${this.inspect - ? html`
-

Inspector Report

- ${until( - (async () => { - const opts = {}; // NOTE: Currently options are handled on the Python end until exposed to the user - - const title = "Inspecting your file"; - - const items = onlyFirstFile - ? removeFilePaths( - await run( - "inspect_file", - { nwbfile_path: fileArr[0].info.file, ...opts }, - { title } - ) - ) // Inspect the first file - : await (async () => - truncateFilePaths( - await run("inspect_folder", { path, ...opts }, { title: title + "s" }), - getSharedPath(fileArr.map((o) => o.info.file)) - ))(); - - const list = new InspectorList({ - items: items, - listStyles: { maxWidth: "350px" }, - }); - list.style.padding = "10px"; - return list; - })(), - html`Loading inspector report...` - )} -
` - : ""} -
`; + return html` ${new FullScreenToggle({ target: this })} +
+
+ ${(() => { + if (onlyFirstFile) return new NWBPreviewInstance(fileArr[0].info, this.project); + else { + const _instances = fileArr.map(this.createInstance); + + const instances = _instances.reduce((acc, { subject, session, display }) => { + if (!acc[`sub-${subject}`]) acc[`sub-${subject}`] = {}; + acc[`sub-${subject}`][`ses-${session}`] = display; + return acc; + }, {}); + + return new InstanceManager({ instances }); + } + })()} +
+ ${this.inspect + ? html`
+

Inspector Report

+ ${until( + (async () => { + const opts = {}; // NOTE: Currently options are handled on the Python end until exposed to the user + + const title = "Inspecting your file"; + + const items = onlyFirstFile + ? removeFilePaths( + await run( + "inspect_file", + { nwbfile_path: fileArr[0].info.file, ...opts }, + { title } + ) + ) // Inspect the first file + : await (async () => + truncateFilePaths( + await run("inspect_folder", { path, ...opts }, { title: title + "s" }), + getSharedPath(fileArr.map((o) => o.info.file)) + ))(); + + const list = new InspectorList({ + items: items, + listStyles: { maxWidth: "350px" }, + }); + list.style.padding = "10px"; + return list; + })(), + html`Loading inspector report...` + )} +
` + : ""} +
`; } } From 6a63c4da3a2c30d16d02256b56cd399fd53c4e63 Mon Sep 17 00:00:00 2001 From: Garrett Date: Fri, 13 Oct 2023 09:18:41 -0400 Subject: [PATCH 5/6] Add empty message and minWidth --- src/renderer/src/stories/List.ts | 6 +++--- src/renderer/src/stories/preview/NWBFilePreview.js | 3 ++- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/renderer/src/stories/List.ts b/src/renderer/src/stories/List.ts index 69c57b1b8..7ffb24b26 100644 --- a/src/renderer/src/stories/List.ts +++ b/src/renderer/src/stories/List.ts @@ -240,10 +240,10 @@ export class List extends LitElement { const { items, emptyMessage} = this - return items.length || !emptyMessage ? html` + return html`
    - ${items.map(this.#renderListItem)} -
` : html`
${emptyMessage}
` + ${(items.length || !emptyMessage) ? items.map(this.#renderListItem) : html`
${emptyMessage}
`} + ` } } diff --git a/src/renderer/src/stories/preview/NWBFilePreview.js b/src/renderer/src/stories/preview/NWBFilePreview.js index 63ba00091..60e7cb4f1 100644 --- a/src/renderer/src/stories/preview/NWBFilePreview.js +++ b/src/renderer/src/stories/preview/NWBFilePreview.js @@ -167,7 +167,8 @@ export class NWBFilePreview extends LitElement { const list = new InspectorList({ items: items, - listStyles: { maxWidth: "350px" }, + listStyles: { minWidth: "300px", maxWidth: "350px" }, + emptyMessage: "No issues found.", }); list.style.padding = "10px"; return list; From efbc985e64468602179b787967412643664c4e0a Mon Sep 17 00:00:00 2001 From: "pre-commit-ci[bot]" <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Fri, 13 Oct 2023 13:29:59 +0000 Subject: [PATCH 6/6] [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --- .../src/stories/preview/NWBFilePreview.js | 26 +++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/src/renderer/src/stories/preview/NWBFilePreview.js b/src/renderer/src/stories/preview/NWBFilePreview.js index e5f8185c5..cf3a1e66b 100644 --- a/src/renderer/src/stories/preview/NWBFilePreview.js +++ b/src/renderer/src/stories/preview/NWBFilePreview.js @@ -163,19 +163,19 @@ export class NWBFilePreview extends LitElement { getSharedPath(fileArr.map((o) => o.info.file)) ))(); - const list = new InspectorList({ - items: items, - listStyles: { minWidth: "300px", maxWidth: "350px" }, - emptyMessage: "No issues found.", - }); - list.style.padding = "10px"; - return list; - })(), - html`Loading inspector report...` - )} -
` - : ""} -
`; + const list = new InspectorList({ + items: items, + listStyles: { minWidth: "300px", maxWidth: "350px" }, + emptyMessage: "No issues found.", + }); + list.style.padding = "10px"; + return list; + })(), + html`Loading inspector report...` + )} +
` + : ""} +
`; } }