Make the item viewer resizable (#3)

collie-reader · Sep 16, 2023 · 3b6ae8b · 3b6ae8b
1 parent b509304
commit 3b6ae8b
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 7 deletions.
diff --git a/src/routes/Items.tsx b/src/routes/Items.tsx
@@ -31,6 +31,7 @@ function Items(props: Props) {
   const [items, setItems] = createSignal<api.Item[]>([]);
   const [selectedItem, setSelectedItem] = createSignal<api.Item | null>(null);
   const [count, setCount] = createSignal(0);
+  const [viewerBasis, setViewerBasis] = createSignal(200);
 
   const loadItems = async () => {
     const [fetchedCount, fetchedItems] = await Promise.all([
@@ -75,6 +76,26 @@ function Items(props: Props) {
     ]);
   }
 
+  const selectItem = (item: api.Item) => {
+    setSelectedItem(item);
+    markAs([item], api.ItemStatus.READ)
+
+    const resize = (e: MouseEvent) => {
+      e.preventDefault();
+      const basis = document.documentElement.clientWidth - e.clientX - 60;
+      if (basis >= 100 && basis < 800) {
+        setViewerBasis(basis);
+      }
+    };
+
+    document.querySelector(".item-viewer-handle")?.addEventListener("mousedown", () => {
+      document.addEventListener("mousemove", resize, false);
+      document.addEventListener("mouseup", () => {
+        document.removeEventListener("mousemove", resize, false);
+      }, false);
+    });
+  };
+
   onMount(async () => {
     const res = await settingApi.readSetting(settingApi.SettingKey.ITEMS_ORDER);
     const order = res?.value ?? api.ItemOrder.RECEIVED_DATE_DESC;
@@ -158,10 +179,7 @@ function Items(props: Props) {
                   <Match when={item.is_saved}><button onClick={() => toggleSave(item)}>Unsave</button></Match>
                 </Switch>
                 <span class="sep"> | </span>
-                <button onClick={() => {
-                  setSelectedItem(item);
-                  markAs([item], api.ItemStatus.READ)
-                }}>Read</button>
+                <button onClick={() => selectItem(item)}>Read</button>
               </small>
             </li>
           }</For>
@@ -181,7 +199,8 @@ function Items(props: Props) {
         </Show>
       </div>
       <Show when={selectedItem()}>
-        <div class="item-viewer scrollable">
+        <div class="item-viewer-handle" />
+        <div class="item-viewer scrollable" style={{ 'flex-basis': `${viewerBasis()}px` }}>
           <h2 class="heading">
             <span>{selectedItem()?.title}</span>
             <button onClick={() => setSelectedItem(null)}>✖</button>

diff --git a/src/styles.css b/src/styles.css
@@ -2,6 +2,7 @@
   color-scheme: dark;
   --color-fg: #f0f0f0;
   --color-bg: #252526;
+  --color-bg-highlight: #454546;
   --color-link: #007acc;
   --color-selected: #8f8f00;
   --color-sep: #afafaf;
@@ -11,6 +12,7 @@
   color-scheme: light;
   --color-fg: #000000;
   --color-bg: #ffffff;
+  --color-bg-highlight: #f0f0f0;
   --color-link: #005ccc;
   --color-selected: #fff000;
   --color-sep: #9f9f9f;
@@ -20,6 +22,7 @@
   color-scheme: light;
   --color-fg: #f8f8f2;
   --color-bg: #282a36;
+  --color-bg-highlight: #44475a;
   --color-link: #8be9fd;
   --color-selected: #44475a;
   --color-sep: #6272a4;

diff --git a/src/styles/Items.css b/src/styles/Items.css
@@ -34,9 +34,24 @@ div.items-page div.item-list {
   padding-right: 1rem;
 }
 
+div.items-page div.item-viewer-handle {
+  cursor: col-resize;
+  margin-bottom: 70px;
+  padding: 3px;
+}
+
+div.items-page div.item-viewer-handle:hover {
+  background-color: var(--color-bg-highlight);
+}
+
+div.items-page div.item-viewer-handle::before {
+  content: "";
+  width: 1px;
+  height: 100%;
+  background-color: var(--color-sep);
+}
+
 div.items-page div.item-viewer {
-  flex: 1;
-  border-left: 1px var(--color-sep) solid;
   padding: 0 1.5rem;
   overflow-wrap: break-word;
   font-size: 1rem;