feat(table): display action buttons on mobile

This commit is contained in:
Elian Doran
2026-01-31 12:59:09 +02:00
parent ffbe8f9dc4
commit fddd73fdb1
2 changed files with 19 additions and 7 deletions

View File

@@ -3,12 +3,11 @@ import "./index.css";
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 FNote from "../../../entities/fnote";
import { t } from "../../../services/i18n";
import SpacedUpdate from "../../../services/spaced_update";
import AttributeDetailWidget from "../../attribute_widgets/attribute_detail";
import CollectionProperties from "../../note_bars/CollectionProperties";
import Button from "../../react/Button";
import { ButtonOrActionButton } from "../../react/Button";
import { useLegacyWidget } from "../../react/hooks";
import { ParentComponent } from "../../react/react_utils";
import { ViewModeProps } from "../interface";
@@ -53,8 +52,8 @@ export default function TableView({ note, noteIds, notePath, viewConfig, saveCon
note={note}
rightChildren={note.type !== "search" &&
<>
<Button 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="addNewRow" icon="bx bx-plus" text={t("table_view.new-row")} />
<ButtonOrActionButton triggerCommand="addNewTableColumn" icon="bx bx-carousel" text={t("table_view.new-column")} />
</>
}
/>

View File

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