From f6e02a1c0770844bb299e633ada53249deae812b Mon Sep 17 00:00:00 2001 From: Trang Doan Date: Sun, 9 Nov 2025 23:43:34 -0800 Subject: [PATCH 1/3] current prog --- .../settings/HomePersonalSettings.tsx | 34 +++++++++ apps/roam/src/data/userSettings.ts | 1 + apps/roam/src/index.ts | 13 ++++ apps/roam/src/styles/streamlineStyling.ts | 69 +++++++++++++++++++ 4 files changed, 117 insertions(+) create mode 100644 apps/roam/src/styles/streamlineStyling.ts diff --git a/apps/roam/src/components/settings/HomePersonalSettings.tsx b/apps/roam/src/components/settings/HomePersonalSettings.tsx index 407881665..92994091c 100644 --- a/apps/roam/src/components/settings/HomePersonalSettings.tsx +++ b/apps/roam/src/components/settings/HomePersonalSettings.tsx @@ -2,6 +2,7 @@ import React from "react"; import { OnloadArgs } from "roamjs-components/types"; import { Label, Checkbox } from "@blueprintjs/core"; import Description from "roamjs-components/components/Description"; +import { addStyle } from "roamjs-components/dom"; import { NodeMenuTriggerComponent } from "~/components/DiscourseNodeMenu"; import { getOverlayHandler, @@ -18,13 +19,16 @@ import { AUTO_CANVAS_RELATIONS_KEY, DISCOURSE_CONTEXT_OVERLAY_IN_CANVAS_KEY, DISCOURSE_TOOL_SHORTCUT_KEY, + STREAMLINE_STYLING_KEY, } from "~/data/userSettings"; import KeyboardShortcutInput from "./KeyboardShortcutInput"; import { getSetting, setSetting } from "~/utils/extensionSettings"; +import streamlineStyling from "~/styles/streamlineStyling"; const HomePersonalSettings = ({ onloadArgs }: { onloadArgs: OnloadArgs }) => { const extensionAPI = onloadArgs.extensionAPI; const overlayHandler = getOverlayHandler(onloadArgs); + console.log("streamlineStyling", getSetting(STREAMLINE_STYLING_KEY, false)); return (
@@ -225,6 +229,36 @@ const HomePersonalSettings = ({ onloadArgs }: { onloadArgs: OnloadArgs }) => { } /> + { + const target = e.target as HTMLInputElement; + setSetting(STREAMLINE_STYLING_KEY, target.checked); + + // Load or unload the streamline styling + const existingStyleElement = + document.getElementById("streamline-styling"); + + if (target.checked && !existingStyleElement) { + // Load the styles + const styleElement = addStyle(streamlineStyling); + styleElement.id = "streamline-styling"; + } else if (!target.checked && existingStyleElement) { + // Unload the styles + existingStyleElement.remove(); + } + }} + labelElement={ + <> + Streamline Styling + + + } + />
); }; diff --git a/apps/roam/src/data/userSettings.ts b/apps/roam/src/data/userSettings.ts index df0fce8fd..24ea7e0ce 100644 --- a/apps/roam/src/data/userSettings.ts +++ b/apps/roam/src/data/userSettings.ts @@ -7,3 +7,4 @@ export const AUTO_CANVAS_RELATIONS_KEY = "auto-canvas-relations"; export const DISCOURSE_TOOL_SHORTCUT_KEY = "discourse-tool-shortcut"; export const DISCOURSE_CONTEXT_OVERLAY_IN_CANVAS_KEY = "discourse-context-overlay-in-canvas"; +export const STREAMLINE_STYLING_KEY = "streamline-styling"; diff --git a/apps/roam/src/index.ts b/apps/roam/src/index.ts index 1e87e8a9c..c998361a6 100644 --- a/apps/roam/src/index.ts +++ b/apps/roam/src/index.ts @@ -20,6 +20,7 @@ import styles from "./styles/styles.css"; import discourseFloatingMenuStyles from "./styles/discourseFloatingMenuStyles.css"; import settingsStyles from "./styles/settingsStyles.css"; import discourseGraphStyles from "./styles/discourseGraphStyles.css"; +import streamlineStyling from "./styles/streamlineStyling"; import posthog from "posthog-js"; import getDiscourseNodes from "./utils/getDiscourseNodes"; import { initFeedbackWidget } from "./components/BirdEatsBugs"; @@ -36,6 +37,8 @@ import { getUidAndBooleanSetting } from "./utils/getExportSettings"; import getBasicTreeByParentUid from "roamjs-components/queries/getBasicTreeByParentUid"; import getPageUidByPageTitle from "roamjs-components/queries/getPageUidByPageTitle"; import { DISCOURSE_CONFIG_PAGE_TITLE } from "./utils/renderNodeConfigPage"; +import { getSetting } from "./utils/extensionSettings"; +import { STREAMLINE_STYLING_KEY } from "./data/userSettings"; const initPostHog = () => { posthog.init("phc_SNMmBqwNfcEpNduQ41dBUjtGNEUEKAy6jTn63Fzsrax", { @@ -116,6 +119,15 @@ export default runExtension(async (onloadArgs) => { const settingsStyle = addStyle(settingsStyles); const discourseFloatingMenuStyle = addStyle(discourseFloatingMenuStyles); + // Add streamline styling only if enabled + const isStreamlineStylingEnabled = getSetting(STREAMLINE_STYLING_KEY, false); + console.log("isStreamlineStylingEnabled", isStreamlineStylingEnabled); + let streamlineStyleElement: HTMLStyleElement | null = null; + if (isStreamlineStylingEnabled) { + streamlineStyleElement = addStyle(streamlineStyling); + streamlineStyleElement.id = "streamline-styling"; + } + const { observers, listeners } = await initObservers({ onloadArgs }); const { pageActionListener, @@ -179,6 +191,7 @@ export default runExtension(async (onloadArgs) => { settingsStyle, discourseGraphStyle, discourseFloatingMenuStyle, + ...(streamlineStyleElement ? [streamlineStyleElement] : []), ], observers: observers, unload: () => { diff --git a/apps/roam/src/styles/streamlineStyling.ts b/apps/roam/src/styles/streamlineStyling.ts new file mode 100644 index 000000000..59c064334 --- /dev/null +++ b/apps/roam/src/styles/streamlineStyling.ts @@ -0,0 +1,69 @@ +export default /* css */ ` +/* custom controls */ + +.rm-page-ref { + color: grey; +} +.rm-checkbox { + color: grey; + text-color: grey; +} + +.check-container input:checked~.checkmark { + background-color: grey; +} + +#right-sidebar { + background-color: white; +} + +.roam-main { + border: 1px solid rgba(171, 171, 171, 0.5) ; +} + +table.bp3-html-table.bp3-html-table-striped tbody tr:not(:last-child) td { + background-color: transparent; + line-height: 1.5rem; + border-bottom: 1px solid rgba(171, 171, 171, 0.5) ; +} + + +/* Subtle Controls */ + +.rm-block .rm-bullet { + opacity: 0.2; + transition: opacity 120ms ease; +} + +.rm-block:hover > .rm-block-main > .controls > .rm-bullet, +.rm-focused > .rm-block-main > .controls > .rm-bullet { + opacity: 1; +} + +/* optional: change focused bullet inner color, using fallback if var not defined */ +.rm-focused > .rm-block-main > .controls > .rm-bullet > .bp3-popover-wrapper .rm-bullet__inner { + background-color: var(--accent-color, #9E2B0E); +} + +.rm-block .rm-multibar { + opacity: 0.2; + transition: opacity 120ms ease; +} + +.rm-block:hover > .rm-block-children > .rm-multibar, +.rm-focused > .rm-block-children > .rm-multibar { + opacity: 1; +} + +/* caret in reference page view */ +.rm-ref-page-view .rm-title-arrow-wrapper > .rm-caret { + opacity: 0.2; + transition: opacity 120ms ease; +} + +.rm-ref-page-view:hover .rm-title-arrow-wrapper > .rm-caret { + opacity: 1; +} + +`; + From b8cd42c93d26cb768219cf023936dbc9cb51485f Mon Sep 17 00:00:00 2001 From: Trang Doan Date: Sun, 9 Nov 2025 23:58:29 -0800 Subject: [PATCH 2/3] improve some styling --- apps/roam/src/styles/streamlineStyling.ts | 54 ++++++++++++++++++----- 1 file changed, 42 insertions(+), 12 deletions(-) diff --git a/apps/roam/src/styles/streamlineStyling.ts b/apps/roam/src/styles/streamlineStyling.ts index 59c064334..2194eecfe 100644 --- a/apps/roam/src/styles/streamlineStyling.ts +++ b/apps/roam/src/styles/streamlineStyling.ts @@ -1,18 +1,33 @@ export default /* css */ ` -/* custom controls */ - +/* 1) Page links: gray text with an underline simulated via bottom border */ .rm-page-ref { - color: grey; + color: #666; + border-bottom: 3px solid #ddd; + text-decoration: none; } -.rm-checkbox { - color: grey; - text-color: grey; +.rm-page-ref:hover { + color: #666; + border-bottom-color: #ddd; + text-decoration: none; } -.check-container input:checked~.checkmark { - background-color: grey; +/* 2) Todo boxes: gray */ +.check-container .checkmark { + background: transparent; + border: 2px solid #bbb; + border-radius: 3px; +} +.check-container input:checked ~ .checkmark { + background: #eee; + border-color: #aaa; +} +/* Checkmark tick color (optional) */ +.check-container .checkmark:after { + border-right: 2px solid #333; + border-bottom: 2px solid #333; } +/* 3) Right sidebar: white background */ #right-sidebar { background-color: white; } @@ -21,10 +36,25 @@ export default /* css */ ` border: 1px solid rgba(171, 171, 171, 0.5) ; } -table.bp3-html-table.bp3-html-table-striped tbody tr:not(:last-child) td { - background-color: transparent; - line-height: 1.5rem; - border-bottom: 1px solid rgba(171, 171, 171, 0.5) ; +/* 4) Tables: no row/body background; use borders only */ +.roam-table > table { + background: transparent; + border-collapse: separate; /* keep borders between cells like RoamStudio */ +} +.roam-table > table thead th { + background: transparent; + color: #444; + border-top: 2px solid #e1e1e1; + border-right: 2px solid #e1e1e1; +} +.roam-table > table tbody td { + background: transparent; +} +.roam-table > table tbody tr td:first-child { + border-left: 2px solid #e1e1e1; +} +.roam-table > table tbody tr:last-child td { + border-bottom: 2px solid #e1e1e1; } From cffcf112bcf543b0a7230624c28dea8c8b721487 Mon Sep 17 00:00:00 2001 From: Trang Doan Date: Wed, 12 Nov 2025 15:29:40 -0500 Subject: [PATCH 3/3] cleanup + fix --- .../settings/HomePersonalSettings.tsx | 1 - apps/roam/src/index.ts | 1 - apps/roam/src/styles/streamlineStyling.ts | 20 +++---------------- 3 files changed, 3 insertions(+), 19 deletions(-) diff --git a/apps/roam/src/components/settings/HomePersonalSettings.tsx b/apps/roam/src/components/settings/HomePersonalSettings.tsx index 92994091c..e9e3c2791 100644 --- a/apps/roam/src/components/settings/HomePersonalSettings.tsx +++ b/apps/roam/src/components/settings/HomePersonalSettings.tsx @@ -28,7 +28,6 @@ import streamlineStyling from "~/styles/streamlineStyling"; const HomePersonalSettings = ({ onloadArgs }: { onloadArgs: OnloadArgs }) => { const extensionAPI = onloadArgs.extensionAPI; const overlayHandler = getOverlayHandler(onloadArgs); - console.log("streamlineStyling", getSetting(STREAMLINE_STYLING_KEY, false)); return (
diff --git a/apps/roam/src/index.ts b/apps/roam/src/index.ts index c998361a6..420ff727c 100644 --- a/apps/roam/src/index.ts +++ b/apps/roam/src/index.ts @@ -121,7 +121,6 @@ export default runExtension(async (onloadArgs) => { // Add streamline styling only if enabled const isStreamlineStylingEnabled = getSetting(STREAMLINE_STYLING_KEY, false); - console.log("isStreamlineStylingEnabled", isStreamlineStylingEnabled); let streamlineStyleElement: HTMLStyleElement | null = null; if (isStreamlineStylingEnabled) { streamlineStyleElement = addStyle(streamlineStyling); diff --git a/apps/roam/src/styles/streamlineStyling.ts b/apps/roam/src/styles/streamlineStyling.ts index 2194eecfe..8ad4f3abb 100644 --- a/apps/roam/src/styles/streamlineStyling.ts +++ b/apps/roam/src/styles/streamlineStyling.ts @@ -36,27 +36,13 @@ export default /* css */ ` border: 1px solid rgba(171, 171, 171, 0.5) ; } -/* 4) Tables: no row/body background; use borders only */ -.roam-table > table { +/* 4) Tables: no row/body background */ +table.bp3-html-table.bp3-html-table-striped tbody tr:nth-child(odd) td { background: transparent; - border-collapse: separate; /* keep borders between cells like RoamStudio */ } -.roam-table > table thead th { +table.bp3-html-table.bp3-html-table-striped tbody tr:nth-child(even) td { background: transparent; - color: #444; - border-top: 2px solid #e1e1e1; - border-right: 2px solid #e1e1e1; } -.roam-table > table tbody td { - background: transparent; -} -.roam-table > table tbody tr td:first-child { - border-left: 2px solid #e1e1e1; -} -.roam-table > table tbody tr:last-child td { - border-bottom: 2px solid #e1e1e1; -} - /* Subtle Controls */