diff --git a/apps/client/src/layouts/desktop_layout.tsx b/apps/client/src/layouts/desktop_layout.tsx index c0f43d46c..511f6f9c0 100644 --- a/apps/client/src/layouts/desktop_layout.tsx +++ b/apps/client/src/layouts/desktop_layout.tsx @@ -46,7 +46,6 @@ import ScrollPadding from "../widgets/scroll_padding.js"; import SearchResult from "../widgets/search_result.jsx"; import SharedInfo from "../widgets/shared_info.jsx"; import RightPanelContainer from "../widgets/sidebar/RightPanelContainer.jsx"; -import SqlTableSchemas from "../widgets/sql_table_schemas.js"; import TabRowWidget from "../widgets/tab_row.js"; import TabHistoryNavigationButtons from "../widgets/TabHistoryNavigationButtons.jsx"; import TitleBarButtons from "../widgets/title_bar_buttons.jsx"; @@ -162,7 +161,6 @@ export default class DesktopLayout { .child() ) .optChild(!isNewLayout, ) - .child() .child() .child() .child() diff --git a/apps/client/src/widgets/sql_table_schemas.css b/apps/client/src/widgets/sql_table_schemas.css deleted file mode 100644 index 1dcf3919f..000000000 --- a/apps/client/src/widgets/sql_table_schemas.css +++ /dev/null @@ -1,34 +0,0 @@ -.sql-table-schemas-widget { - padding: 12px; - padding-inline-end: 10%; - contain: none !important; -} - -.sql-table-schemas > .dropdown { - display: inline-block !important; -} - -.sql-table-schemas button.btn { - padding: 0.25rem 0.4rem; - font-size: 0.875rem; - line-height: 0.5; - border: 1px solid var(--button-border-color); - border-radius: var(--button-border-radius); - background: var(--button-background-color); - color: var(--button-text-color); - cursor: pointer; -} - -.table-schema td { - padding: 5px; -} - -.dropdown .table-schema { - font-family: var(--monospace-font-family); - font-size: .85em; -} - -/* Data type */ -.dropdown .table-schema td:nth-child(2) { - color: var(--muted-text-color); -} diff --git a/apps/client/src/widgets/sql_table_schemas.tsx b/apps/client/src/widgets/sql_table_schemas.tsx deleted file mode 100644 index 3605c2f95..000000000 --- a/apps/client/src/widgets/sql_table_schemas.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import { useEffect, useState } from "preact/hooks"; -import { t } from "../services/i18n"; -import { useNoteContext } from "./react/hooks"; -import "./sql_table_schemas.css"; -import { SchemaResponse } from "@triliumnext/commons"; -import server from "../services/server"; -import Dropdown from "./react/Dropdown"; - -export default function SqlTableSchemas() { - const { note } = useNoteContext(); - const [ schemas, setSchemas ] = useState(); - - useEffect(() => { - server.get("sql/schema").then(setSchemas); - }, []); - - const isEnabled = note?.mime === "text/x-sqlite;schema=trilium" && schemas; - return ( -
- {isEnabled && ( - <> - {t("sql_table_schemas.tables")}{": "} - - - {schemas.map(({ name, columns }) => ( - <> - - - {columns.map(column => ( - - - - - ))} -
{column.name}{column.type}
-
- {" "} - - ))} -
- - )} -
- ) -} \ No newline at end of file diff --git a/apps/client/src/widgets/type_widgets/SqlConsole.css b/apps/client/src/widgets/type_widgets/SqlConsole.css index 24406999b..2aec59070 100644 --- a/apps/client/src/widgets/type_widgets/SqlConsole.css +++ b/apps/client/src/widgets/type_widgets/SqlConsole.css @@ -32,5 +32,46 @@ } } } + + .sql-table-schemas-widget { + padding: 12px; + padding-inline-end: 10%; + contain: none !important; + + .sql-table-schemas { + display: flex; + flex-wrap: wrap; + gap: 0.25em; + } + + > .dropdown { + display: inline-block !important; + } + + button.btn { + padding: 0.25rem 0.4rem; + font-size: 0.875rem; + line-height: 0.5; + border: 1px solid var(--button-border-color); + border-radius: var(--button-border-radius); + background: var(--button-background-color); + color: var(--button-text-color); + cursor: pointer; + } + + .table-schema td { + padding: 5px; + } + + .dropdown .table-schema { + font-family: var(--monospace-font-family); + font-size: .85em; + } + + /* Data type */ + .dropdown .table-schema td:nth-child(2) { + color: var(--muted-text-color); + } + } } diff --git a/apps/client/src/widgets/type_widgets/SqlConsole.tsx b/apps/client/src/widgets/type_widgets/SqlConsole.tsx index e68f1fb08..4c5491d8d 100644 --- a/apps/client/src/widgets/type_widgets/SqlConsole.tsx +++ b/apps/client/src/widgets/type_widgets/SqlConsole.tsx @@ -1,26 +1,31 @@ import "./SqlConsole.css"; -import { SqlExecuteResults } from "@triliumnext/commons"; -import { useState } from "preact/hooks"; +import { SchemaResponse, SqlExecuteResults } from "@triliumnext/commons"; +import { useEffect, useState } from "preact/hooks"; import { ClipboardModule, EditModule, ExportModule, FilterModule, FormatModule, FrozenColumnsModule, KeybindingsModule, ResizeColumnsModule, SelectRangeModule, SelectRowModule, SortModule } from "tabulator-tables"; import { t } from "../../services/i18n"; +import server from "../../services/server"; import Tabulator from "../collections/table/tabulator"; import Alert from "../react/Alert"; +import Dropdown from "../react/Dropdown"; import { useTriliumEvent } from "../react/hooks"; import SplitEditor from "./helpers/SplitEditor"; import { TypeWidgetProps } from "./type_widget"; export default function SqlConsole(props: TypeWidgetProps) { return ( - } - splitOptions={{ - sizes: [ 90, 10 ] - }} - /> + <> + } + previewContent={} + splitOptions={{ + sizes: [ 70, 30 ] + }} + /> + ); } @@ -94,3 +99,41 @@ function SqlResultTable({ rows }: { rows: object[] }) { /> ); } + +export function SqlTableSchemas({ note }: TypeWidgetProps) { + const [ schemas, setSchemas ] = useState(); + + useEffect(() => { + server.get("sql/schema").then(setSchemas); + }, []); + + const isEnabled = note?.mime === "text/x-sqlite;schema=trilium" && schemas; + return ( +
+ {isEnabled && ( + <> + {t("sql_table_schemas.tables")}{": "} + + + {schemas.map(({ name, columns }) => ( + <> + + + {columns.map(column => ( + + + + + ))} +
{column.name}{column.type}
+
+ {" "} + + ))} +
+ + )} +
+ ); +} diff --git a/apps/client/src/widgets/type_widgets/helpers/SplitEditor.tsx b/apps/client/src/widgets/type_widgets/helpers/SplitEditor.tsx index e6d85cf7c..0b45d8521 100644 --- a/apps/client/src/widgets/type_widgets/helpers/SplitEditor.tsx +++ b/apps/client/src/widgets/type_widgets/helpers/SplitEditor.tsx @@ -1,13 +1,15 @@ +import "./SplitEditor.css"; + +import Split from "@triliumnext/split.js"; +import { ComponentChildren } from "preact"; import { useEffect, useRef } from "preact/hooks"; + +import { DEFAULT_GUTTER_SIZE } from "../../../services/resizer"; import utils, { isMobile } from "../../../services/utils"; +import ActionButton, { ActionButtonProps } from "../../react/ActionButton"; import Admonition from "../../react/Admonition"; import { useNoteLabelBoolean, useTriliumOption } from "../../react/hooks"; -import "./SplitEditor.css"; -import Split from "@triliumnext/split.js"; -import { DEFAULT_GUTTER_SIZE } from "../../../services/resizer"; import { EditableCode, EditableCodeProps } from "../code/Code"; -import { ComponentChildren } from "preact"; -import ActionButton, { ActionButtonProps } from "../../react/ActionButton"; export interface SplitEditorProps extends EditableCodeProps { className?: string; @@ -15,6 +17,7 @@ export interface SplitEditorProps extends EditableCodeProps { splitOptions?: Split.Options; previewContent: ComponentChildren; previewButtons?: ComponentChildren; + editorBefore?: ComponentChildren; } /** @@ -26,13 +29,14 @@ export interface SplitEditorProps extends EditableCodeProps { * - Can display errors to the user via {@link setError}. * - Horizontal or vertical orientation for the editor/preview split, adjustable via the switch split orientation button floating button. */ -export default function SplitEditor({ note, error, splitOptions, previewContent, previewButtons, className, ...editorProps }: SplitEditorProps) { +export default function SplitEditor({ note, error, splitOptions, previewContent, previewButtons, className, editorBefore, ...editorProps }: SplitEditorProps) { const splitEditorOrientation = useSplitOrientation(); const [ readOnly ] = useNoteLabelBoolean(note, "readOnly"); const containerRef = useRef(null); const editor = (!readOnly &&
+ {editorBefore}
+
{splitEditorOrientation === "horizontal" - ? <>{editor}{preview} - : <>{preview}{editor}} + ? <>{editor}{preview} + : <>{preview}{editor}}
- ) + ); } export function PreviewButton(props: Omit) { @@ -88,7 +92,7 @@ export function PreviewButton(props: Omit) { className="tn-tool-button" noIconActionClass titlePosition="top" - /> + />; } function useSplitOrientation() {