better styled stealth mode

nichwch · Sep 12, 2024 · 5078f93 · 5078f93
1 parent caa9f9a
commit 5078f93
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 9 deletions.
diff --git a/src/Overlay.svelte b/src/Overlay.svelte
@@ -1,6 +1,7 @@
 <script>
   import { GROUP_DELIM } from "$lib/splitFunction";
   import { cTooltip } from "$lib/tooltip";
+  import { isTextHidden } from "./stores.js";
   /** @type {string[]} */
   export let segments = [];
 
@@ -24,7 +25,12 @@
       class:text-green-800={segment.startsWith("//")}
       role="presentation"
     >
-      <span id="editor-block-{index}">{segment}</span>
+      <span
+        id="editor-block-{index}"
+        class={$isTextHidden
+          ? "bg-crimsonHighlightOpaque text-crimsonHighlightOpaque"
+          : ""}>{segment}</span
+      >
 
       {#if !segment.startsWith("//") && segment?.trim()?.length > 0 && segment?.trim() !== GROUP_DELIM}
         <button

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -2,7 +2,6 @@
   import { afterUpdate, onDestroy, tick } from "svelte";
   import SearchModal from "../SearchModal.svelte";
   import "../global.css";
-  import { writable } from "svelte/store";
 
   import { currentDir } from "./currentDirStore";
   import FolderEntry from "./FolderEntry.svelte";
@@ -131,7 +130,6 @@
   onDestroy(() =>
     window.removeEventListener("keydown", keyboardShortcutListener)
   );
-  $: console.log("is text hidden layout", $isTextHidden);
 </script>
 
 <div class=" bg-orange-200 h-screen flex flex-col">

diff --git a/src/routes/note/+page.svelte b/src/routes/note/+page.svelte
@@ -14,7 +14,6 @@
   import Histogram from "./Histogram.svelte";
   import { splitText } from "$lib/splitFunction";
   import SearchResultDisplay from "../../SearchResultDisplay.svelte";
-  import { isTextHidden } from "../../stores.js";
   /**
    * @type {string|null}
    */
@@ -204,9 +203,6 @@ we copy it into a separate variable
       searchSegment(segments[focusedIndex], focusedIndex);
     }
   };
-
-  // Add this line to subscribe to the isTextHidden store
-  $: hiddenClass = $isTextHidden ? "hidden-text" : "";
 </script>
 
 <div
@@ -216,7 +212,7 @@ we copy it into a separate variable
   <div class="w-full overflow-y-auto top-0 h-full">
     <div class=" w-[36rem] mx-auto h-full relative">
       <div
-        class="w-full inline-block p-5 pb-10 absolute top-0 left-0 right-0 bottom-0 h-full whitespace-pre-line break-after-right {hiddenClass}"
+        class="w-full inline-block p-5 pb-10 absolute top-0 left-0 right-0 bottom-0 h-full whitespace-pre-line break-after-right"
       >
         <Overlay {segments} {focusedIndex} {searchSegment} />
       </div>
@@ -227,7 +223,7 @@ we copy it into a separate variable
       {/if}
       <div
         contenteditable="plaintext-only"
-        class="w-full inline-block text-transparent caret-black bg-transparent p-5 pb-10 absolute top-0 left-0 right-0 bottom-0 h-full resize-none focus:outline-none whitespace-pre-line break-after-right {hiddenClass}"
+        class="w-full inline-block text-transparent caret-black bg-transparent p-5 pb-10 absolute top-0 left-0 right-0 bottom-0 h-full resize-none focus:outline-none whitespace-pre-line break-after-right"
         bind:innerText={contents}
       />
     </div>