gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2026-02-19 04:04:24 +01:00
Code Issues Actions 20 Packages Projects Releases Wiki Activity

feat(table): display action buttons on mobile

Browse Source
This commit is contained in:
Elian Doran 2026-01-31 12:59:09 +02:00
parent ffbe8f9dc4
commit fddd73fdb1
No known key found for this signature in database
2 changed files with 19 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
apps/client/src/widgets/collections/table/index.tsx
View File

@ -3,12 +3,11 @@ import "./index.css";
import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "preact/hooks"; import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "preact/hooks";
import { DataTreeModule, EditModule, FormatModule, FrozenColumnsModule, InteractionModule, MoveColumnsModule, MoveRowsModule, Options, PersistenceModule, ResizeColumnsModule, RowComponent,SortModule, Tabulator as VanillaTabulator} from 'tabulator-tables'; import { DataTreeModule, EditModule, FormatModule, FrozenColumnsModule, InteractionModule, MoveColumnsModule, MoveRowsModule, Options, PersistenceModule, ResizeColumnsModule, RowComponent,SortModule, Tabulator as VanillaTabulator} from 'tabulator-tables';
import FNote from "../../../entities/fnote";
import { t } from "../../../services/i18n"; import { t } from "../../../services/i18n";
import SpacedUpdate from "../../../services/spaced_update"; import SpacedUpdate from "../../../services/spaced_update";
import AttributeDetailWidget from "../../attribute_widgets/attribute_detail"; import AttributeDetailWidget from "../../attribute_widgets/attribute_detail";
import CollectionProperties from "../../note_bars/CollectionProperties"; import CollectionProperties from "../../note_bars/CollectionProperties";
import Button from "../../react/Button"; import { ButtonOrActionButton } from "../../react/Button";
import { useLegacyWidget } from "../../react/hooks"; import { useLegacyWidget } from "../../react/hooks";
import { ParentComponent } from "../../react/react_utils"; import { ParentComponent } from "../../react/react_utils";
import { ViewModeProps } from "../interface"; import { ViewModeProps } from "../interface";
@ -53,8 +52,8 @@ export default function TableView({ note, noteIds, notePath, viewConfig, saveCon
note={note} note={note}
rightChildren={note.type !== "search" && rightChildren={note.type !== "search" &&
<> <>
<Button triggerCommand="addNewRow" icon="bx bx-plus" text={t("table_view.new-row")} /> <ButtonOrActionButton triggerCommand="addNewRow" icon="bx bx-plus" text={t("table_view.new-row")} />
<Button triggerCommand="addNewTableColumn" icon="bx bx-carousel" text={t("table_view.new-column")} /> <ButtonOrActionButton triggerCommand="addNewTableColumn" icon="bx bx-carousel" text={t("table_view.new-column")} />
</> </>
} }
/> />

19
apps/client/src/widgets/react/Button.tsx
View File

@ -1,8 +1,11 @@
import type { ComponentChildren, RefObject } from "preact"; import type { ComponentChildren, RefObject } from "preact";
import type { CSSProperties } from "preact/compat"; import type { CSSProperties } from "preact/compat";
import { useMemo } from "preact/hooks";
import { memo } from "preact/compat"; import { memo } from "preact/compat";
import { useMemo } from "preact/hooks";
import { CommandNames } from "../../components/app_context"; import { CommandNames } from "../../components/app_context";
import { isDesktop } from "../../services/utils";
import ActionButton from "./ActionButton";
import Icon from "./Icon"; import Icon from "./Icon";
export interface ButtonProps { export interface ButtonProps {
@ -78,7 +81,7 @@ export function ButtonGroup({ children }: { children: ComponentChildren }) {
<div className="btn-group" role="group"> <div className="btn-group" role="group">
{children} {children}
</div> </div>
) );
} }
export function SplitButton({ text, icon, children, ...restProps }: { export function SplitButton({ text, icon, children, ...restProps }: {
@ -103,7 +106,17 @@ export function SplitButton({ text, icon, children, ...restProps }: {
{children} {children}
</ul> </ul>
</ButtonGroup> </ButtonGroup>
) );
}
export function ButtonOrActionButton(props: {
text: string;
icon: string;
} & Pick<ButtonProps, "onClick" | "triggerCommand">) {
if (isDesktop()) {
return <Button {...props} />;
}
return <ActionButton {...props} />;
} }
export default Button; export default Button;