[ENG-1025] Integrate subtle controls css styling into plugin (#540)

* current prog

* improve some styling

* cleanup + fix

Author: trangdoan982

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 }) => {
           </>
         }
       />
+      <Checkbox
+        defaultChecked={getSetting(STREAMLINE_STYLING_KEY, false)}
+        onChange={(e) => {
+          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
+            <Description
+              description={
+                "Apply streamlined styling to your personal graph for a cleaner appearance."
+              }
+            />
+          </>
+        }
+      />
     </div>
   );
 };

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";

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: () => {

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;
+}
+
+`;
+