diff --git a/apps/client/src/services/content_renderer.ts b/apps/client/src/services/content_renderer.ts index 148d59acd0..c8d8ffecac 100644 --- a/apps/client/src/services/content_renderer.ts +++ b/apps/client/src/services/content_renderer.ts @@ -192,7 +192,7 @@ function renderFile(entity: FNote | FAttachment, type: string, $renderedContent: throw new Error(`Can't recognize entity type of '${entity}'`); } - const $content = $('
'); + const $content = $('
'); if (type === "pdf") { const $pdfPreview = $(''); diff --git a/apps/client/src/services/content_renderer_text.ts b/apps/client/src/services/content_renderer_text.ts index e72f9e178b..9317d0b6e0 100644 --- a/apps/client/src/services/content_renderer_text.ts +++ b/apps/client/src/services/content_renderer_text.ts @@ -120,7 +120,6 @@ async function renderChildrenList($renderedContent: JQuery, note: F return; } - $renderedContent.css("padding", "10px"); $renderedContent.addClass("text-with-ellipsis"); // just load the first 10 child notes diff --git a/apps/client/src/stylesheets/theme-next-dark.css b/apps/client/src/stylesheets/theme-next-dark.css index dfdc209040..1705dc2b76 100644 --- a/apps/client/src/stylesheets/theme-next-dark.css +++ b/apps/client/src/stylesheets/theme-next-dark.css @@ -314,7 +314,8 @@ */ #left-pane .fancytree-node.tinted, -.nested-note-list-item.use-note-color { +.nested-note-list-item.use-note-color, +.note-book-card .note-book-header.use-note-color { --custom-color: var(--dark-theme-custom-color); /* The background color of the active item in the note tree. @@ -365,7 +366,8 @@ body .todo-list input[type="checkbox"]:not(:checked):before { .note-split.with-hue, .quick-edit-dialog-wrapper.with-hue, -.nested-note-list-item.with-hue { +.nested-note-list-item.with-hue, +.note-book-card.with-hue .note-book-header { --note-icon-custom-background-color: hsl(var(--custom-color-hue), 15.8%, 30.9%); --note-icon-custom-color: hsl(var(--custom-color-hue), 100%, 76.5%); --note-icon-hover-custom-background-color: hsl(var(--custom-color-hue), 28.3%, 36.7%); @@ -375,3 +377,8 @@ body .todo-list input[type="checkbox"]:not(:checked):before { .quick-edit-dialog-wrapper.with-hue *::selection { --selection-background-color: hsl(var(--custom-color-hue), 49.2%, 35%); } + +.note-book-card.with-hue { + --card-background-color: hsl(var(--custom-color-hue), 6%, 21%); + --card-background-hover-color: hsl(var(--custom-color-hue), 8%, 25%); +} \ No newline at end of file diff --git a/apps/client/src/stylesheets/theme-next-light.css b/apps/client/src/stylesheets/theme-next-light.css index 4b6b37718c..fe604906dc 100644 --- a/apps/client/src/stylesheets/theme-next-light.css +++ b/apps/client/src/stylesheets/theme-next-light.css @@ -308,7 +308,8 @@ } #left-pane .fancytree-node.tinted, -.nested-note-list-item.use-note-color { +.nested-note-list-item.use-note-color, +.note-book-card .note-book-header.use-note-color { --custom-color: var(--light-theme-custom-color); /* The background color of the active item in the note tree. @@ -335,7 +336,8 @@ .note-split.with-hue, .quick-edit-dialog-wrapper.with-hue, -.nested-note-list-item.with-hue { +.nested-note-list-item.with-hue, +.note-book-card.with-hue .note-book-header { --note-icon-custom-background-color: hsl(var(--custom-color-hue), 44.5%, 43.1%); --note-icon-custom-color: hsl(var(--custom-color-hue), 91.3%, 91%); --note-icon-hover-custom-background-color: hsl(var(--custom-color-hue), 55.1%, 50.2%); @@ -345,3 +347,8 @@ .quick-edit-dialog-wrapper.with-hue *::selection { --selection-background-color: hsl(var(--custom-color-hue), 60%, 90%); } + +.note-book-card.with-hue { + --card-background-color: hsl(var(--custom-color-hue), 21%, 94%); + --card-background-hover-color: hsl(var(--custom-color-hue), 21%, 87%); +} \ No newline at end of file diff --git a/apps/client/src/stylesheets/theme-next/base.css b/apps/client/src/stylesheets/theme-next/base.css index 9e39b2f002..e57de8cd67 100644 --- a/apps/client/src/stylesheets/theme-next/base.css +++ b/apps/client/src/stylesheets/theme-next/base.css @@ -643,139 +643,6 @@ li.dropdown-item a.dropdown-item-button:focus-visible { transform: translateY(4%); } -/* - * NOTE LIST - */ - - .note-list .note-book-card { - --note-list-horizontal-padding: 22px; - --note-list-vertical-padding: 15px; - background-color: var(--card-background-color); - border: 1px solid var(--card-border-color) !important; - border-radius: 12px; - user-select: none; - padding: 0; - margin: 5px 10px 5px 0; -} - -:root .note-list .note-book-card:hover { - background-color: var(--card-background-hover-color); - transition: background-color 200ms ease-out; -} - -:root .note-list.grid-view .note-book-card:active { - transform: scale(.98); -} - -.note-list.list-view .note-book-card { - box-shadow: 0 0 3px var(--card-shadow-color); -} - -.note-list.list-view .note-book-card .note-book-header .note-icon { - vertical-align: middle; -} - -.note-list-wrapper .note-book-card a { - color: inherit !important; -} - -.note-list-wrapper .note-book-card .note-book-header { - font-size: 1em; - font-weight: bold; - padding: 0.5em 1rem; - border-bottom-color: var(--card-border-color); -} - -.note-list-wrapper .note-book-card .note-book-header .note-icon { - font-size: 17px; - vertical-align: text-bottom; -} - -.note-list-wrapper .note-book-card .note-book-header .note-book-title { - font-size: 1em; - color: var(--active-item-text-color); - vertical-align: middle; -} - -.note-list-wrapper .note-book-card .note-book-header .rendered-note-attributes { - font-size: 0.7em; - font-weight: normal; - margin-bottom: 0; -} - -.note-list-wrapper .note-book-card .note-book-header:last-child { - border-bottom: 0; -} - -.note-list-wrapper .note-book-card .note-book-content { - padding: 0 !important; - font-size: 0.8rem; -} - -.note-list-wrapper .note-book-card .note-book-content .rendered-content { - padding: 1rem; -} - -.note-list-wrapper .note-book-card .note-book-content.type-image .rendered-content, -.note-list-wrapper .note-book-card .note-book-content.type-pdf .rendered-content { - padding: 0; -} - -.note-list-wrapper .note-book-card .note-book-content .rendered-content.text-with-ellipsis { - padding: 1rem !important; -} - -.note-list-wrapper .note-book-card .note-book-content h1, -.note-list-wrapper .note-book-card .note-book-content h2, -.note-list-wrapper .note-book-card .note-book-content h3, -.note-list-wrapper .note-book-card .note-book-content h4, -.note-list-wrapper .note-book-card .note-book-content h5, -.note-list-wrapper .note-book-card .note-book-content h6 { - font-size: 1rem; - color: var(--active-item-text-color); -} - -.note-list-wrapper .note-book-card .note-book-content p:last-child { - margin-bottom: 0; -} - -.note-list-wrapper .note-book-card .note-book-content.type-canvas .rendered-content, -.note-list-wrapper .note-book-card .note-book-content.type-mindMap .rendered-content, -.note-list-wrapper .note-book-card .note-book-content.type-code .rendered-content, -.note-list-wrapper .note-book-card .note-book-content.type-video .rendered-content { - padding: 0; -} - -.note-list-wrapper .note-book-card .note-book-content.type-code { - height: 100%; -} - -.note-list-wrapper .note-book-card .note-book-content.type-code pre { - height: 100%; - padding: 1em; - margin-bottom: 0; -} - -.note-list-wrapper .note-book-card .tn-icon { - color: var(--left-pane-icon-color) !important; -} - -.note-list.grid-view .note-book-card:hover { - filter: contrast(105%); -} - -.note-list.grid-view .ck-content { - line-height: 1.3; -} - -.note-list.grid-view .ck-content p { - margin-bottom: 0.5em; -} - -.note-list.grid-view .ck-content figure.image { - width: 25%; -} - /* * NOTE SEARCH SUGGESTIONS */ diff --git a/apps/client/src/widgets/collections/legacy/ListOrGridView.css b/apps/client/src/widgets/collections/legacy/ListOrGridView.css index 222682cc9f..0f963f0d59 100644 --- a/apps/client/src/widgets/collections/legacy/ListOrGridView.css +++ b/apps/client/src/widgets/collections/legacy/ListOrGridView.css @@ -2,142 +2,32 @@ overflow: visible; position: relative; height: 100%; + + .note-list-wrapper { + height: 100%; + overflow: auto; + } + + &.grid-view .note-list-container { + display: flex; + flex-wrap: wrap; + gap: 10px; + } } -.note-book-card { - border-radius: 10px; - background-color: var(--accented-background-color); - padding: 10px 15px 15px 8px; - margin: 5px 5px 5px 5px; - overflow: hidden; - display: flex; - flex-direction: column; - flex-shrink: 0; - flex-grow: 1; -} +/* #region List view / Grid view common styles */ -.note-book-card.archived { - opacity: 0.5; -} - -.note-book-card:not(.expanded) .note-book-content { - padding: 10px -} - -.note-book-card.expanded .note-book-content { - display: block; - min-height: 0; - height: 100%; - padding-top: 10px; -} - -.note-book-content .rendered-content { - height: 100%; -} - -.note-book-header { - border-bottom: 1px solid var(--main-border-color); - margin-bottom: 0; - padding-bottom: .5rem; - word-break: break-all; - flex-shrink: 0; -} - -/* not-expanded title is limited to one line only */ -.note-book-card:not(.expanded) .note-book-header { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; -} - -.note-book-header .rendered-note-attributes { - font-size: medium; -} - -.note-book-header .rendered-note-attributes:before { - content: "\00a0\00a0"; -} - -.note-book-header .note-icon { - font-size: 100%; - display: inline-block; - padding-inline-end: 7px; - position: relative; -} - -.note-book-card .note-book-card { - border: 1px solid var(--main-border-color); -} - -.note-book-content.type-image, .note-book-content.type-file, .note-book-content.type-protectedSession { +.nested-note-list-item h5, +.note-book-card .note-book-header { display: flex; align-items: center; - justify-content: center; - text-align: center; - padding: 10px; - flex-grow: 1; -} - -.note-book-content.type-image img, .note-book-content.type-canvas svg { - max-width: 100%; - max-height: 100%; - object-fit: contain; -} - -.note-book-card.type-image .note-book-content img, -.note-book-card.type-text .note-book-content img, -.note-book-card.type-canvas .note-book-content img { - max-width: 100%; - max-height: 100%; -} - -.note-book-header { - flex-grow: 0; -} - -.note-list-wrapper { - height: 100%; - overflow: auto; -} - -/* #region List view */ - -@keyframes note-preview-show { - from { - opacity: 0; - } to { - opacity: 1; - } -} - -.nested-note-list { - --card-nested-section-indent: 25px; - - &.search-results { - --card-nested-section-indent: 32px; - } -} - -/* List item */ -.nested-note-list-item { - h5 { - display: flex; - align-items: center; - font-size: 1em; - font-weight: normal; - margin: 0; - } - - .note-expander { - margin-inline-end: 4px; - font-size: x-large; - cursor: pointer; - } + font-size: 1em; + font-weight: normal; + margin: 0; .tn-icon { - margin-inline-end: 8px; - color: var(--note-list-view-icon-color); font-size: 1.2em; + margin-inline-end: 8px; } .note-book-title { @@ -147,52 +37,24 @@ font-weight: normal; } - .note-path { - margin-left: 0.5em; - vertical-align: middle; - opacity: 0.5; - } - - .note-list-attributes { - flex-grow: 1; - margin-inline-start: 1em; - text-align: right; - font-size: .75em; - opacity: .75; - } - - .nested-note-list-item-menu { + .note-book-item-menu { margin-inline-start: 8px; flex-shrink: 0; } - - &.archived { - span.tn-icon + span, - .tn-icon { - opacity: .6; - } - } - - &.use-note-color { - span.tn-icon + span, - .nested-note-list:not(.search-results) & .tn-icon, - .rendered-note-attributes { - color: var(--custom-color); - } - } } -.nested-note-list:not(.search-results) h5 { +.nested-note-list-item.use-note-color, +.note-book-card.use-note-color .note-book-header { span.tn-icon + span, - .note-list-attributes { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + .tn-icon, + .rendered-note-attributes { + color: var(--custom-color); } } -/* List item (search results view) */ -.nested-note-list.search-results .nested-note-list-item { +/* Search result view */ +.nested-note-list.search-results .nested-note-list-item, +.note-list-container.search-results .note-book-card .note-book-header { span.tn-icon + span > span { display: flex; flex-direction: column-reverse; @@ -204,6 +66,7 @@ } .note-path { + opacity: 0.5; margin-left: 0; font-size: .85em; line-height: .85em; @@ -225,7 +88,7 @@ color: var(--note-icon-custom-color, var(--note-list-view-large-icon-color)); } - h5 .ck-find-result { + .ck-find-result { background: var(--note-list-view-search-result-highlight-background); color: var(--note-list-view-search-result-highlight-color); font-weight: 600; @@ -233,15 +96,17 @@ } } -/* Note content preview */ -.nested-note-list .note-book-content { +@keyframes note-preview-show { + from { + opacity: 0; + } to { + opacity: 1; + } +} + +.nested-note-list .note-book-content, +.note-list-container .note-book-content { display: none; - outline: 1px solid var(--note-list-view-content-background); - border-radius: 8px; - background-color: var(--note-list-view-content-background); - overflow: hidden; - user-select: text; - font-size: .85rem; animation: note-preview-show .25s ease-out; will-change: opacity; @@ -249,6 +114,97 @@ display: block; } + .ck-find-result { + outline: 2px solid var(--note-list-view-content-search-result-highlight-background); + border-radius: 4px; + background: var(--note-list-view-content-search-result-highlight-background); + color: var(--note-list-view-content-search-result-highlight-color); + } +} + +.note-book-content { + height: 100%; + + &.type-image, &.type-file, &.type-protectedSession { + display: flex; + align-items: center; + justify-content: center; + text-align: center; + padding: 10px; + flex-grow: 1; + } + + &.type-image img, &.type-canvas svg { + max-width: 100%; + max-height: 100%; + object-fit: contain; + } +} + +.note-content-preview:has(.note-book-content:empty) { + display: none; +} + +/* #endregion */ + +/* #region List view */ + +.nested-note-list { + --card-nested-section-indent: 25px; + + &.search-results { + --card-nested-section-indent: 32px; + } +} + +/* List item */ +.nested-note-list-item { + + .note-expander { + margin-inline-end: 4px; + font-size: x-large; + cursor: pointer; + } + + .tn-icon { + color: var(--note-list-view-icon-color); + } + + .note-list-attributes { + flex-grow: 1; + margin-inline-start: 1em; + text-align: right; + font-size: .75em; + opacity: .75; + } + + &.archived { + span.tn-icon + span, + .tn-icon { + opacity: .6; + } + } +} + +.nested-note-list:not(.search-results) h5, +.note-book-card:not(.search-results) h5 { + span.tn-icon + span, + .note-list-attributes { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } +} + +/* Note content preview */ +.nested-note-list .note-book-content { + outline: 1px solid var(--note-list-view-content-background); + border-radius: 8px; + background-color: var(--note-list-view-content-background); + overflow: hidden; + user-select: text; + font-size: .85rem; + > .rendered-content > *:last-child { margin-bottom: 0; } @@ -285,54 +241,158 @@ justify-content: center; min-height: 50vh; } - - .ck-find-result { - outline: 2px solid var(--note-list-view-content-search-result-highlight-background); - border-radius: 4px; - background: var(--note-list-view-content-search-result-highlight-background); - color: var(--note-list-view-content-search-result-highlight-color); - } -} - -.note-content-preview:has(.note-book-content:empty) { - display: none; } /* #endregion */ /* #region Grid view */ -.note-list.grid-view .note-list-container { + +.note-list .note-book-card { + --note-list-horizontal-padding: 22px; + --note-list-vertical-padding: 15px; + display: flex; - flex-wrap: wrap; -} - -.note-list.grid-view .note-book-card { + flex-direction: column; + flex-shrink: 0; + flex-grow: 1; flex-basis: 300px; - border: 1px solid transparent; -} - -body.mobile .note-list.grid-view .note-book-card { - flex-basis: 150px; -} - -.note-list.grid-view .note-book-card { max-height: 300px; + padding: 0; + overflow: hidden; + user-select: none; + + body.mobile & { + flex-basis: 150px; + } + + &:hover { + background-color: var(--card-background-hover-color); + filter: contrast(105%); + transition: background-color 200ms ease-out; + } + + &:not(:has(:is(.note-book-item-menu:active, .btn-primary:active))):active { + transform: scale(.98); + } + + &.archived { + opacity: 0.5; + } + + .note-book-header { + margin-bottom: 0; + border-bottom: 1px solid var(--card-border-color, var(--main-border-color)); + padding-bottom: .5rem; + word-break: break-all; + flex-shrink: 0; + padding: .5rem 1rem; + padding-inline-end: 8px; + + .tn-icon + span { + flex-grow: 1; + a { + font-weight: 500; + } + } + } + + & .note-book-content { + &.type-image .note-book-content img, + &.type-text .note-book-content img, + &.type-canvas .note-book-content img { + max-width: 100%; + max-height: 100%; + } + + .rendered-content { + height: 100%; + } + + .rendered-content:has(.file-footer) { + padding: 0; + } + + img { + max-height: 220px; + object-fit: contain; + } + + .file-footer { + display: flex; + gap: 8px; + justify-content: space-between; + padding: 0; + + .btn.btn-primary { + flex: 1; + margin: 0; + box-shadow: unset; + background: transparent; + border: 0; + border-radius: 0; + padding: 8px; + color: var(--main-text-color); + + &:hover { + background: var(--more-accented-background-color); + } + + &:active { + transform: none; + } + } + } + } } -.note-list.grid-view .note-book-card img { - max-height: 220px; - object-fit: contain; +.note-book-card .note-book-content { + padding: 0; + font-size: 0.8rem; + + .ck-content p { + margin-bottom: 0.5em; + line-height: 1.3; + } + + .ck-content figure.image { + width: 25%; + } + + .rendered-content, + .rendered-content.text-with-ellipsis { + padding: .5rem 1rem 1rem 1rem; + } + + &.type-image .rendered-content, + &.type-pdf .rendered-content { + padding: 0; + } + + h1, h2, h3, h4, h5, h6 { + font-size: 1rem; + color: var(--active-item-text-color); + } + + p:last-child { + margin-bottom: 0; + } + + &.type-canvas .rendered-content, + &.type-mindMap .rendered-content, + &.type-code .rendered-content, + &.type-video .rendered-content { + padding: 0; + } + + &.type-code { + height: 100%; + } + + &.type-code pre { + height: 100%; + padding: 1em; + margin-bottom: 0; + } } -.note-list.grid-view .note-book-card:hover { - cursor: pointer; - border: 1px solid var(--main-border-color); - background: var(--more-accented-background-color); -} - -.note-list.grid-view .note-path { - margin-left: 0.5em; - vertical-align: middle; - opacity: 0.5; -} -/* #endregion */ +/* #endregion */ \ No newline at end of file diff --git a/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx b/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx index cdde8a6087..3fd7d2215a 100644 --- a/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx +++ b/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx @@ -1,7 +1,7 @@ import "./ListOrGridView.css"; -import { Card, CardSection } from "../../react/Card"; +import { Card, CardFrame, CardSection } from "../../react/Card"; -import { useEffect, useRef, useState } from "preact/hooks"; +import { useCallback, useEffect, useRef, useState } from "preact/hooks"; import FNote from "../../../entities/fnote"; import attribute_renderer from "../../../services/attribute_renderer"; @@ -30,13 +30,13 @@ export function ListView({ note, noteIds: unfilteredNoteIds, highlightedTokens } const hasCollectionProperties = [ "book", "search" ].includes(noteType ?? ""); return ( -
+
} /> - { noteIds.length > 0 &&
+ { noteIds.length > 0 &&
{!hasCollectionProperties && } @@ -63,18 +63,22 @@ export function GridView({ note, noteIds: unfilteredNoteIds, highlightedTokens } const hasCollectionProperties = [ "book", "search" ].includes(noteType ?? ""); return ( -
+
} /> -
+
{!hasCollectionProperties && } -
+
{pageNotes?.map(childNote => ( - + ))}
@@ -139,39 +143,46 @@ function ListNoteCard({ note, parentNote, highlightedTokens, currentLevel, expan showNotePath={parentNote.type === "search"} highlightedTokens={highlightedTokens} /> - openNoteMenu(notePath, e)} - /> + ); } -function GridNoteCard({ note, parentNote, highlightedTokens, includeArchived }: { note: FNote, parentNote: FNote, highlightedTokens: string[] | null | undefined, includeArchived: boolean }) { - const titleRef = useRef(null); - const [ noteTitle, setNoteTitle ] = useState(); - const notePath = getNotePath(parentNote, note); +interface GridNoteCardProps { + note: FNote; + parentNote: FNote; + highlightedTokens: string[] | null | undefined; + includeArchived: boolean; +} + +function GridNoteCard(props: GridNoteCardProps) { + const notePath = getNotePath(props.parentNote, props.note); return ( -
link.goToLink(e)} + link.goToLink(e)} > -
- - - +
+ + +
- -
+ ); } @@ -252,6 +263,18 @@ function NoteChildren({ note, parentNote, highlightedTokens, currentLevel, expan />); } +function NoteMenuButton(props: {notePath: string}) { + const openMenu = useCallback((e: TargetedMouseEvent) => { + linkContextMenuService.openContextMenu(props.notePath, e); + e.stopPropagation() + }, [props.notePath]); + + return +} + function getNotePath(parentNote: FNote, childNote: FNote) { if (parentNote.type === "search") { // for search note parent, we want to display a non-search path @@ -273,9 +296,4 @@ function useExpansionDepth(note: FNote) { } return parseInt(expandDepth, 10); -} - -function openNoteMenu(notePath, e: TargetedMouseEvent) { - linkContextMenuService.openContextMenu(notePath, e); - e.stopPropagation() -} +} \ No newline at end of file diff --git a/apps/client/src/widgets/react/Card.css b/apps/client/src/widgets/react/Card.css index cabc4a0889..b14279d2ad 100644 --- a/apps/client/src/widgets/react/Card.css +++ b/apps/client/src/widgets/react/Card.css @@ -1,4 +1,4 @@ -:where(.tn-card) { +:where(.tn-card, .tn-card-frame) { --card-border-radius: 8px; --card-padding-block: 8px; --card-padding-inline: 16px; @@ -6,6 +6,22 @@ --card-nested-section-indent: 30px; } +.tn-card-frame, +.tn-card-section { + padding: var(--card-padding-block) var(--card-padding-inline); + border: 1px solid var(--card-border-color, var(--main-border-color)); + background: var(--card-background-color); + + &.tn-card-highlight-on-hover:hover { + background-color: var(--card-background-hover-color); + transition: background-color .2s ease-out; + } +} + +.tn-card-frame { + border-radius: var(--card-border-radius); +} + .tn-card-heading { margin-bottom: 10px; font-size: .75rem; @@ -20,10 +36,6 @@ gap: var(--card-section-gap); .tn-card-section { - padding: var(--card-padding-block) var(--card-padding-inline); - border: 1px solid var(--card-border-color, var(--main-border-color)); - background: var(--card-background-color); - &:first-of-type { border-top-left-radius: var(--card-border-radius); border-top-right-radius: var(--card-border-radius); @@ -38,10 +50,5 @@ padding-left: calc(var(--card-padding-inline) + var(--card-nested-section-indent) * var(--tn-card-section-nesting-level)); background-color: color-mix(in srgb, var(--card-background-color) calc(100% / (var(--tn-card-section-nesting-level) + 1)) , transparent); } - - &.tn-card-section-highlight-on-hover:hover { - background-color: var(--card-background-hover-color); - transition: background-color .2s ease-out; - } } } \ No newline at end of file diff --git a/apps/client/src/widgets/react/Card.tsx b/apps/client/src/widgets/react/Card.tsx index 224a151504..1abd259f0c 100644 --- a/apps/client/src/widgets/react/Card.tsx +++ b/apps/client/src/widgets/react/Card.tsx @@ -1,9 +1,29 @@ import "./Card.css"; import { ComponentChildren, createContext } from "preact"; -import { JSX } from "preact"; +import { JSX, HTMLAttributes } from "preact"; import { useContext } from "preact/hooks"; import clsx from "clsx"; +// #region Card Frame + +export interface CardFrameProps extends HTMLAttributes { + className?: string; + highlightOnHover?: boolean; + children: ComponentChildren; +} + +export function CardFrame({className, highlightOnHover, children, ...rest}: CardFrameProps) { + return
+ + {children} +
; +} + +// #endregion + // #region Card export interface CardProps { @@ -45,7 +65,7 @@ export function CardSection(props: {children: ComponentChildren} & CardSectionPr return <>
0, - "tn-card-section-highlight-on-hover": props.highlightOnHover || props.onAction + "tn-card-highlight-on-hover": props.highlightOnHover || props.onAction })} style={{"--tn-card-section-nesting-level": (nestingLevel) ? nestingLevel : null}} onClick={props.onAction}>