zadam/trilium
1
1
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-06 05:25:37 +08:00
Code Issues Projects Releases Packages Wiki Activity

feat(react/floating_buttons): add mobile support

Browse source
This commit is contained in:
Elian Doran 2025-08-28 20:10:21 +03:00
parent 03a7fe1282
commit f82667066f
No known key found for this signature in database
4 changed files with 23 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
apps/client/src/layouts/desktop_layout.tsx
View file

@ -41,6 +41,7 @@ import type { WidgetsByParent } from "../services/bundle.js";
import { applyModals } from "./layout_commons.js";
import Ribbon from "../widgets/ribbon/Ribbon.jsx";
import FloatingButtons from "../widgets/FloatingButtons.jsx";
import { DESKTOP_FLOATING_BUTTONS } from "../widgets/FloatingButtonsDefinitions.jsx";
export default class DesktopLayout {
@ -130,7 +131,7 @@ export default class DesktopLayout {
.child(<Ribbon />)
.child(new SharedInfoWidget())
.child(new WatchedFileUpdateStatusWidget())
.child(<FloatingButtons />)
.child(<FloatingButtons items={DESKTOP_FLOATING_BUTTONS} />)
.child(
new ScrollingContainer()
.filling()

21
apps/client/src/layouts/mobile_layout.tsx
View file

@ -7,12 +7,6 @@ import ToggleSidebarButtonWidget from "../widgets/mobile_widgets/toggle_sidebar_
import MobileDetailMenuWidget from "../widgets/mobile_widgets/mobile_detail_menu.js";
import ScreenContainer from "../widgets/mobile_widgets/screen_container.js";
import ScrollingContainer from "../widgets/containers/scrolling_container.js";
import FloatingButtons from "../widgets/floating_buttons/floating_buttons.js";
import EditButton from "../widgets/floating_buttons/edit_button.js";
import RelationMapButtons from "../widgets/floating_buttons/relation_map_buttons.js";
import SvgExportButton from "../widgets/floating_buttons/svg_export_button.js";
import BacklinksWidget from "../widgets/floating_buttons/zpetne_odkazy.js";
import HideFloatingButtonsButton from "../widgets/floating_buttons/hide_floating_buttons_button.js";
import NoteListWidget from "../widgets/note_list.js";
import GlobalMenuWidget from "../widgets/buttons/global_menu.js";
import LauncherContainer from "../widgets/containers/launcher_container.js";
@ -22,14 +16,13 @@ import PromotedAttributesWidget from "../widgets/promoted_attributes.js";
import SidebarContainer from "../widgets/mobile_widgets/sidebar_container.js";
import type AppContext from "../components/app_context.js";
import TabRowWidget from "../widgets/tab_row.js";
import RefreshButton from "../widgets/floating_buttons/refresh_button.js";
import MobileEditorToolbar from "../widgets/type_widgets/ckeditor/mobile_editor_toolbar.js";
import { applyModals } from "./layout_commons.js";
import CloseZenButton from "../widgets/close_zen_button.js";
import FilePropertiesTab from "../widgets/ribbon/FilePropertiesTab.jsx";
import { useNoteContext } from "../widgets/react/hooks.jsx";
import { useContext } from "preact/hooks";
import { ParentComponent } from "../widgets/react/react_utils.jsx";
import FloatingButtons from "../widgets/FloatingButtons.jsx";
import { MOBILE_FLOATING_BUTTONS } from "../widgets/FloatingButtonsDefinitions.jsx";
const MOBILE_CSS = `
<style>
@ -151,15 +144,7 @@ export default class MobileLayout {
.child(new MobileDetailMenuWidget(true).contentSized())
)
.child(new SharedInfoWidget())
.child(
new FloatingButtons()
.child(new RefreshButton())
.child(new EditButton())
.child(new RelationMapButtons())
.child(new SvgExportButton())
.child(new BacklinksWidget())
.child(new HideFloatingButtonsButton())
)
.child(<FloatingButtons items={MOBILE_FLOATING_BUTTONS} />)
.child(new PromotedAttributesWidget())
.child(
new ScrollingContainer()

10
apps/client/src/widgets/FloatingButtons.tsx
View file

@ -4,10 +4,14 @@ import { useNoteContext, useNoteLabel, useNoteLabelBoolean } from "./react/hooks
import { useContext, useEffect, useMemo, useState } from "preact/hooks";
import { ParentComponent } from "./react/react_utils";
import { EventData, EventNames } from "../components/app_context";
import { FLOATING_BUTTONS, type FloatingButtonContext } from "./FloatingButtonsDefinitions";
import { type FloatingButtonsList, type FloatingButtonContext } from "./FloatingButtonsDefinitions";
import ActionButton from "./react/ActionButton";
import { ViewTypeOptions } from "../services/note_list_renderer";
interface FloatingButtonsProps {
items: FloatingButtonsList;
}
/*
* Note:
*
@ -15,7 +19,7 @@ import { ViewTypeOptions } from "../services/note_list_renderer";
* be applied to the root element of the widget. Additionally, this root element may need to
* properly handle rounded corners, as defined by the --border-radius CSS variable.
*/
export default function FloatingButtons() {
export default function FloatingButtons({ items }: FloatingButtonsProps) {
const { note, noteContext } = useNoteContext();
const parentComponent = useContext(ParentComponent);
const [ viewType ] = useNoteLabel(note, "viewType");
@ -46,7 +50,7 @@ export default function FloatingButtons() {
return (
<div className="floating-buttons no-print">
<div className={`floating-buttons-children ${!visible ? "temporarily-hidden" : ""}`}>
{context && FLOATING_BUTTONS.map((Component) => (
{context && items.map((Component) => (
<Component {...context} />
))}

12
apps/client/src/widgets/FloatingButtonsDefinitions.tsx
View file

@ -40,7 +40,9 @@ function FloatingButton({ className, ...props }: ActionButtonProps) {
/>
}
export const FLOATING_BUTTONS: ((context: FloatingButtonContext) => false | VNode)[] = [
export type FloatingButtonsList = ((context: FloatingButtonContext) => false | VNode)[];
export const DESKTOP_FLOATING_BUTTONS: FloatingButtonsList = [
RefreshBackendLogButton,
SwitchSplitOrientationButton,
ToggleReadOnlyButton,
@ -58,6 +60,14 @@ export const FLOATING_BUTTONS: ((context: FloatingButtonContext) => false | VNod
Backlinks
];
export const MOBILE_FLOATING_BUTTONS: FloatingButtonsList = [
RefreshBackendLogButton,
EditButton,
RelationMapButtons,
ExportImageButtons,
Backlinks
]
function RefreshBackendLogButton({ note, parentComponent, noteContext, isDefaultViewMode }: FloatingButtonContext) {
const isEnabled = note.noteId === "_backendLog" && isDefaultViewMode;
return isEnabled && <FloatingButton