diff --git a/apps/roam/src/components/settings/HomePersonalSettings.tsx b/apps/roam/src/components/settings/HomePersonalSettings.tsx index 407881665..e9e3c2791 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,9 +19,11 @@ 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; @@ -225,6 +228,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..420ff727c 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,14 @@ 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); + let streamlineStyleElement: HTMLStyleElement | null = null; + if (isStreamlineStylingEnabled) { + streamlineStyleElement = addStyle(streamlineStyling); + streamlineStyleElement.id = "streamline-styling"; + } + const { observers, listeners } = await initObservers({ onloadArgs }); const { pageActionListener, @@ -179,6 +190,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..8ad4f3abb --- /dev/null +++ b/apps/roam/src/styles/streamlineStyling.ts @@ -0,0 +1,85 @@ +export default /* css */ ` +/* 1) Page links: gray text with an underline simulated via bottom border */ +.rm-page-ref { + color: #666; + border-bottom: 3px solid #ddd; + text-decoration: none; +} +.rm-page-ref:hover { + color: #666; + border-bottom-color: #ddd; + text-decoration: none; +} + +/* 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; +} + +.roam-main { + border: 1px solid rgba(171, 171, 171, 0.5) ; +} + +/* 4) Tables: no row/body background */ +table.bp3-html-table.bp3-html-table-striped tbody tr:nth-child(odd) td { + background: transparent; +} +table.bp3-html-table.bp3-html-table-striped tbody tr:nth-child(even) td { + background: transparent; +} + +/* 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; +} + +`; +