New layout: Remove floating buttons (#8059)

Author: eliandoran

apps/client/src/stylesheets/style.css

@@ -521,9 +521,7 @@ body.mobile .dropdown .dropdown-submenu > span {
 .cm-editor {
     height: 100%;
     outline: none !important;
-    border-radius: 6px;
     overflow: hidden;
-    margin: 4px;
     font-size: var(--monospace-font-size);
 }
 
@@ -629,6 +627,11 @@ pre:not(.hljs) {
     padding: var(--padding-size);
 }
 
+pre:has(> .cm-editor) {
+    padding: 0;
+    margin: 0;
+}
+
 pre > button.copy-button {
     position: absolute;
     top: var(--copy-button-margin-size);
@@ -2471,6 +2474,11 @@ footer.webview-footer button {
     inset-inline-start: 10px;
 }
 
+.content-floating-buttons.top-right {
+    top: 10px;
+    inset-inline-end: 10px;
+}
+
 .content-floating-buttons.bottom-left {
     bottom: 10px;
     inset-inline-start: 10px;

apps/client/src/stylesheets/theme-next/base.css

@@ -166,17 +166,30 @@ body.desktop .dropdown-submenu .dropdown-menu {
     --menu-item-end-padding: 22px;
     --menu-item-vertical-padding: 2px;
 
+    /* Note: the right padding should also accommodate the submenu arrow. */
+    border-radius: 6px;
+    cursor: default !important;
+}
+
+.dropdown-item:not(.dropdown-submenu),
+body.desktop .dropdown-item.dropdown-submenu .dropdown-toggle,
+.excalidraw .context-menu .context-menu-item {
     padding-top: var(--menu-item-vertical-padding) !important;
     padding-bottom: var(--menu-item-vertical-padding) !important;
     padding-inline-start: var(--menu-item-start-padding) !important;
     padding-inline-end: var(--menu-item-end-padding) !important;
+}
 
-    /* Note: the right padding should also accommodate the submenu arrow. */
-    border-radius: 6px;
-    cursor: default !important;
+.dropdown-item.dropdown-submenu {
+    padding: 0 !important;
+
+    .dropdown-toggle {
+        flex-grow: 1;
+    }
 }
 
-body.desktop .dropdown-menu:has(> .dropdown-submenu.dropstart) > .dropdown-item {
+body.desktop .dropdown-menu:has(> .dropdown-submenu.dropstart) > .dropdown-item:not(.dropdown-submenu),
+body.desktop .dropdown-menu:has(> .dropdown-submenu.dropstart) > .dropdown-item.dropdown-submenu .dropdown-toggle {
     padding-inline-end: var(--menu-item-start-padding) !important;
     padding-inline-start: var(--menu-item-end-padding) !important;
 }

apps/client/src/translations/en/translation.json

@@ -696,6 +696,9 @@
     "convert_into_attachment_successful": "Note '{{title}}' has been converted to attachment.",
     "convert_into_attachment_prompt": "Are you sure you want to convert note '{{title}}' into an attachment of the parent note?",
     "print_pdf": "Export as PDF...",
+    "export_as_image": "Export as image",
+    "export_as_image_png": "PNG (raster)",
+    "export_as_image_svg": "SVG (vector)",
     "note_map": "Note map"
   },
   "onclick_button": {

apps/client/src/widgets/FloatingButtonsDefinitions.tsx

@@ -81,7 +81,7 @@ export const POPUP_HIDDEN_FLOATING_BUTTONS: FloatingButtonsList = [
 const isNewLayout = isExperimentalFeatureEnabled("new-layout");
 
 function RefreshBackendLogButton({ note, parentComponent, noteContext, isDefaultViewMode }: FloatingButtonContext) {
-    const isEnabled = (note.noteId === "_backendLog" || note.type === "render") && isDefaultViewMode;
+    const isEnabled = !isNewLayout && (note.noteId === "_backendLog" || note.type === "render") && isDefaultViewMode;
     return isEnabled && <FloatingButton
         text={t("backend_log.refresh")}
         icon="bx bx-refresh"
@@ -90,7 +90,7 @@ function RefreshBackendLogButton({ note, parentComponent, noteContext, isDefault
 }
 
 function SwitchSplitOrientationButton({ note, isReadOnly, isDefaultViewMode }: FloatingButtonContext) {
-    const isEnabled = note.type === "mermaid" && note.isContentAvailable() && !isReadOnly && isDefaultViewMode;
+    const isEnabled = !isNewLayout && note.type === "mermaid" && note.isContentAvailable() && !isReadOnly && isDefaultViewMode;
     const [ splitEditorOrientation, setSplitEditorOrientation ] = useTriliumOption("splitEditorOrientation");
     const upcomingOrientation = splitEditorOrientation === "horizontal" ? "vertical" : "horizontal";
 
@@ -103,7 +103,7 @@ function SwitchSplitOrientationButton({ note, isReadOnly, isDefaultViewMode }: F
 
 function ToggleReadOnlyButton({ note, viewType, isDefaultViewMode }: FloatingButtonContext) {
     const [ isReadOnly, setReadOnly ] = useNoteLabelBoolean(note, "readOnly");
-    const isEnabled = ([ "mermaid", "mindMap", "canvas" ].includes(note.type) || viewType === "geoMap")
+    const isEnabled = !isNewLayout && ([ "mermaid", "mindMap", "canvas" ].includes(note.type) || viewType === "geoMap")
             && note.isContentAvailable() && isDefaultViewMode;
 
     return isEnabled && <FloatingButton
@@ -173,7 +173,7 @@ function ShowHighlightsListWidgetButton({ note, noteContext, isDefaultViewMode }
 }
 
 function RunActiveNoteButton({ note }: FloatingButtonContext) {
-    const isEnabled = note.mime.startsWith("application/javascript") || note.mime === "text/x-sqlite;schema=trilium";
+    const isEnabled = !isNewLayout && (note.mime.startsWith("application/javascript") || note.mime === "text/x-sqlite;schema=trilium");
     return isEnabled && <FloatingButton
         icon="bx bx-play"
         text={t("code_buttons.execute_button_title")}
@@ -182,7 +182,7 @@ function RunActiveNoteButton({ note }: FloatingButtonContext) {
 }
 
 function OpenTriliumApiDocsButton({ note }: FloatingButtonContext) {
-    const isEnabled = note.mime.startsWith("application/javascript;env=");
+    const isEnabled = !isNewLayout && note.mime.startsWith("application/javascript;env=");
     return isEnabled && <FloatingButton
         icon="bx bx-help-circle"
         text={t("code_buttons.trilium_api_docs_button_title")}
@@ -191,25 +191,29 @@ function OpenTriliumApiDocsButton({ note }: FloatingButtonContext) {
 }
 
 function SaveToNoteButton({ note }: FloatingButtonContext) {
-    const isEnabled = note.mime === "text/x-sqlite;schema=trilium" && note.isHiddenCompletely();
+    const isEnabled = !isNewLayout && note.mime === "text/x-sqlite;schema=trilium" && note.isHiddenCompletely();
     return isEnabled && <FloatingButton
         icon="bx bx-save"
         text={t("code_buttons.save_to_note_button_title")}
-        onClick={async (e) => {
-            e.preventDefault();
-            const { notePath } = await server.post<SaveSqlConsoleResponse>("special-notes/save-sql-console", { sqlConsoleNoteId: note.noteId });
-            if (notePath) {
-                toast.showMessage(t("code_buttons.sql_console_saved_message", { "note_path": await tree.getNotePathTitle(notePath) }));
-                // TODO: This hangs the navigation, for some reason.
-                //await ws.waitForMaxKnownEntityChangeId();
-                await appContext.tabManager.getActiveContext()?.setNote(notePath);
-            }
-        }}
+        onClick={buildSaveSqlToNoteHandler(note)}
     />;
 }
 
+export function buildSaveSqlToNoteHandler(note: FNote) {
+    return async (e: MouseEvent) => {
+        e.preventDefault();
+        const { notePath } = await server.post<SaveSqlConsoleResponse>("special-notes/save-sql-console", { sqlConsoleNoteId: note.noteId });
+        if (notePath) {
+            toast.showMessage(t("code_buttons.sql_console_saved_message", { "note_path": await tree.getNotePathTitle(notePath) }));
+            // TODO: This hangs the navigation, for some reason.
+            //await ws.waitForMaxKnownEntityChangeId();
+            await appContext.tabManager.getActiveContext()?.setNote(notePath);
+        }
+    };
+}
+
 function RelationMapButtons({ note, isDefaultViewMode, triggerEvent }: FloatingButtonContext) {
-    const isEnabled = (note.type === "relationMap" && isDefaultViewMode);
+    const isEnabled = (!isNewLayout && note.type === "relationMap" && isDefaultViewMode);
     return isEnabled && (
         <>
             <FloatingButton
@@ -242,7 +246,7 @@ function RelationMapButtons({ note, isDefaultViewMode, triggerEvent }: FloatingB
 }
 
 function GeoMapButtons({ triggerEvent, viewType, isReadOnly }: FloatingButtonContext) {
-    const isEnabled = viewType === "geoMap" && !isReadOnly;
+    const isEnabled = !isNewLayout && viewType === "geoMap" && !isReadOnly;
     return isEnabled && (
         <FloatingButton
             icon="bx bx-plus-circle"
@@ -283,7 +287,7 @@ function CopyImageReferenceButton({ note, isDefaultViewMode }: FloatingButtonCon
 }
 
 function ExportImageButtons({ note, triggerEvent, isDefaultViewMode }: FloatingButtonContext) {
-    const isEnabled = ["mermaid", "mindMap"].includes(note?.type ?? "")
+    const isEnabled = !isNewLayout && ["mermaid", "mindMap"].includes(note?.type ?? "")
             && note?.isContentAvailable() && isDefaultViewMode;
     return isEnabled && (
         <>
@@ -304,7 +308,7 @@ function ExportImageButtons({ note, triggerEvent, isDefaultViewMode }: FloatingB
 
 function InAppHelpButton({ note }: FloatingButtonContext) {
     const helpUrl = getHelpUrlForNote(note);
-    const isEnabled = !!helpUrl && (!isNewLayout || (note?.type !== "book"));
+    const isEnabled = !!helpUrl && !isNewLayout;
 
     return isEnabled && (
         <FloatingButton

apps/client/src/widgets/buttons/global_menu.tsx

@@ -38,7 +38,7 @@ export default function GlobalMenu({ isHorizontalLayout }: { isHorizontalLayout:
             text={<>
                 {isVerticalLayout && <VerticalLayoutIcon />}
                 {isUpdateAvailable && <div class="global-menu-button-update-available">
-                    <span className="bx bxs-down-arrow-alt global-menu-button-update-available-button" title={t("update_available.update_available")}></span>
+                    <span className="bx bxs-down-arrow-alt global-menu-button-update-available-button" title={t("update_available.update_available")} />
                 </div>}
             </>}
             noDropdownListStyle
@@ -57,7 +57,7 @@ export default function GlobalMenu({ isHorizontalLayout }: { isHorizontalLayout:
 
             <SwitchToOptions />
             <MenuItem command="showLaunchBarSubtree" icon={`bx ${isMobile() ? "bx-mobile" : "bx-sidebar"}`} text={t("global_menu.configure_launchbar")} />
-            <AdvancedMenu />
+            <AdvancedMenu dropStart={!isVerticalLayout} />
             <MenuItem command="showOptions" icon="bx bx-cog" text={t("global_menu.options")} />
             <FormDropdownDivider />
 
@@ -68,19 +68,19 @@ export default function GlobalMenu({ isHorizontalLayout }: { isHorizontalLayout:
             {isUpdateAvailable &&  <>
                 <FormListHeader text={t("global_menu.new-version-available")} />
                 <MenuItem command={() => window.open("https://github.com/TriliumNext/Trilium/releases/latest")}
-                          icon="bx bx-download"
-                          text={t("global_menu.download-update", {latestVersion})} />
+                    icon="bx bx-download"
+                    text={t("global_menu.download-update", {latestVersion})} />
             </>}
 
             {!isElectron() && <BrowserOnlyOptions />}
-            {glob.isDev && <DevelopmentOptions />}
+            {glob.isDev && <DevelopmentOptions dropStart={!isVerticalLayout} />}
         </Dropdown>
     );
 }
 
-function AdvancedMenu() {
+function AdvancedMenu({ dropStart }: { dropStart: boolean }) {
     return (
-        <FormDropdownSubmenu icon="bx bx-chip" title={t("global_menu.advanced")}>
+        <FormDropdownSubmenu icon="bx bx-chip" title={t("global_menu.advanced")} dropStart={dropStart}>
             <MenuItem command="showHiddenSubtree" icon="bx bx-hide" text={t("global_menu.show_hidden_subtree")} />
             <MenuItem command="showSearchHistory" icon="bx bx-search-alt" text={t("global_menu.open_search_history")} />
             <FormDropdownDivider />
@@ -103,13 +103,11 @@ function BrowserOnlyOptions() {
     </>;
 }
 
-function DevelopmentOptions() {
-    const [ layoutOrientation ] = useTriliumOption("layoutOrientation");
-
+function DevelopmentOptions({ dropStart }: { dropStart: boolean }) {
     return <>
         <FormDropdownDivider />
         <FormListItem disabled>Development Options</FormListItem>
-        <FormDropdownSubmenu icon="bx bx-test-tube" title="Experimental features" dropStart={layoutOrientation === "horizontal"}>
+        <FormDropdownSubmenu icon="bx bx-test-tube" title="Experimental features" dropStart={dropStart}>
             {experimentalFeatures.map((feature) => (
                 <ExperimentalFeatureToggle key={feature.id} experimentalFeature={feature as ExperimentalFeature} />
             ))}
@@ -136,10 +134,10 @@ function SwitchToOptions() {
     if (isElectron()) {
         return;
     } else if (!isMobile()) {
-        return <MenuItem command="switchToMobileVersion" icon="bx bx-mobile" text={t("global_menu.switch_to_mobile_version")} />
-    } else {
-        return <MenuItem command="switchToDesktopVersion" icon="bx bx-desktop" text={t("global_menu.switch_to_desktop_version")} />
-    }
+        return <MenuItem command="switchToMobileVersion" icon="bx bx-mobile" text={t("global_menu.switch_to_mobile_version")} />;
+    } 
+    return <MenuItem command="switchToDesktopVersion" icon="bx bx-desktop" text={t("global_menu.switch_to_desktop_version")} />;
+    
 }
 
 function MenuItem({ icon, text, title, command, disabled, active }: MenuItemProps<KeyboardActionNames | CommandNames | (() => void)>) {
@@ -150,15 +148,15 @@ function MenuItem({ icon, text, title, command, disabled, active }: MenuItemProp
         onClick={typeof command === "function" ? command : undefined}
         disabled={disabled}
         active={active}
-        >{text}</FormListItem>
+    >{text}</FormListItem>;
 }
 
 function KeyboardActionMenuItem({ text, command, ...props }: MenuItemProps<KeyboardActionNames>) {
     return <MenuItem
         {...props}
         command={command}
         text={<>{text} <KeyboardShortcut actionName={command as KeyboardActionNames} /></>}
-    />
+    />;
 }
 
 function VerticalLayoutIcon() {
@@ -181,7 +179,7 @@ function VerticalLayoutIcon() {
                 <path className="st8" d="m66.3 52.2c15.3 12.8 23.3 33.6 26.1 48.9l-50.6-22 48.8 24.9c-12.2 6-29.6 11.8-46.5 10-19.8-16.4-40.2-46.4-42.6-61.5 12.4-6.5 41.5-5.8 64.8-0.3z"/>
             </g>
         </svg>
-    )
+    );
 }
 
 function ZoomControls({ parentComponent }: { parentComponent?: Component | null }) {
@@ -205,7 +203,7 @@ function ZoomControls({ parentComponent }: { parentComponent?: Component | null
                 }}
                 className={`dropdown-item-button ${icon}`}
             >{children}</a>
-        )
+        );
     }
 
     return isElectron() ? (
@@ -246,7 +244,7 @@ function ToggleWindowOnTop() {
                 setIsAlwaysOnTop(newState);
             }}
         />
-    )
+    );
 }
 
 function useTriliumUpdateStatus() {
@@ -257,7 +255,7 @@ function useTriliumUpdateStatus() {
     async function updateVersionStatus() {
         const RELEASES_API_URL = "https://api.github.com/repos/TriliumNext/Trilium/releases/latest";
 
-        let latestVersion: string | undefined = undefined;
+        let latestVersion: string | undefined;
         try {
             const resp = await fetch(RELEASES_API_URL);
             const data = await resp.json();

apps/client/src/widgets/react/FormList.tsx

@@ -217,22 +217,19 @@ export function FormDropdownSubmenu({ icon, title, children, dropStart, onDropdo
     const [ openOnMobile, setOpenOnMobile ] = useState(false);
 
     return (
-        <li
-            className={clsx("dropdown-item dropdown-submenu", { "submenu-open": openOnMobile, "dropstart": dropStart })}
-            onClick={(e) => {
-                e.stopPropagation();
-
-                if (!isMobile() && onDropdownToggleClicked) {
-                    onDropdownToggleClicked();
-                }
-            }}
-        >
-            <span className="dropdown-toggle" onClick={(e) => {
-                if (isMobile()) {
+        <li className={clsx("dropdown-item dropdown-submenu", { "submenu-open": openOnMobile, "dropstart": dropStart })}>
+            <span
+                className="dropdown-toggle"
+                onClick={(e) => {
                     e.stopPropagation();
-                    setOpenOnMobile(!openOnMobile);
-                }
-            }}>
+
+                    if (isMobile()) {
+                        setOpenOnMobile(!openOnMobile);
+                    } else if (onDropdownToggleClicked) {
+                        onDropdownToggleClicked();
+                    }
+                }}
+            >
                 <Icon icon={icon} />{" "}
                 {title}
             </span>