Merge pull request #2286 from tangjeff0/right-sidebar-width

enhance(right-sidebar): persist on graph, and use percent not px
athensresearch · Aug 18, 2022 · 1ce6c86 · 1ce6c86
2 parents bbc68ad + 4e0bcdd
commit 1ce6c86
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 15 deletions.
diff --git a/src/cljs/athens/db.cljs b/src/cljs/athens/db.cljs
@@ -153,7 +153,8 @@
                :athena/open         false
                :athena/recent-items '()
                :left-sidebar/open   false
-               :right-sidebar/width 300
+               ;; todo: some value initialization like athens/persist
+               ;; :right-sidebar/width 32
                :mouse-down          false
                :daily-notes/items   []
                :selection           {:items []}

diff --git a/src/cljs/athens/views/right_sidebar/events.cljs b/src/cljs/athens/views/right_sidebar/events.cljs
@@ -7,7 +7,7 @@
     [athens.db :as db]
     [athens.interceptors :as interceptors]
     [athens.views.right-sidebar.shared :as shared]
-    [re-frame.core :as rf :refer [reg-event-fx reg-event-db]]))
+    [re-frame.core :as rf :refer [reg-event-fx]]))
 
 
 ;; UI
@@ -26,11 +26,15 @@
             [:dispatch [:posthog/report-feature :right-sidebar true]]]})))
 
 
-(reg-event-db
+(reg-event-fx
   :right-sidebar/set-width
   [(interceptors/sentry-span-no-new-tx "right-sidebar/set-width")]
-  (fn [db [_ width]]
-    (assoc db :right-sidebar/width width)))
+  (fn [_ [_ width]]
+    (let [user-page @(rf/subscribe [:presence/user-page])]
+      {:fx [[:dispatch [:properties/update-in [:node/title user-page] [(shared/ns-str "/width")]
+                        (fn [db uid]
+                          ;; todo: good place to be using a number primitive type
+                          [(graph-ops/build-block-save-op db uid (str width))])]]]})))
 
 
 (reg-event-fx

diff --git a/src/cljs/athens/views/right_sidebar/shared.cljs b/src/cljs/athens/views/right_sidebar/shared.cljs
@@ -33,6 +33,18 @@
     open?))
 
 
+(defn get-width
+  []
+  (let [user-page  @(rf/subscribe [:presence/user-page])
+        props      (-> (reactive/get-reactive-node-document [:node/title user-page])
+                       :block/properties)
+        default-vw (str 32)
+        width      (-> (get props (ns-str "/width"))
+                       :block/string)]
+    ;; can also use the clamp function in RightSidebarResizeControl.tsx to make sure the width is always bounded
+    (or width default-vw)))
+
+
 (defn get-eid
   [item-block]
   (let [{:keys [type name]} item-block]

diff --git a/src/cljs/athens/views/right_sidebar/subs.cljs b/src/cljs/athens/views/right_sidebar/subs.cljs
@@ -34,5 +34,7 @@
 
 (rf/reg-sub
   :right-sidebar/width
-  (fn [db _]
-    (:right-sidebar/width db)))
+  (fn [_db _]
+    ;; todo: some value initialization like athens/persist
+    ;; (:right-sidebar/width db)
+    (shared/get-width)))
diff --git a/src/js/components/Layout/MainContent.tsx b/src/js/components/Layout/MainContent.tsx
@@ -30,7 +30,7 @@ export const MainContent = ({ children, isRightSidebarOpen, rightSidebarWidth })
           "--app-header-height": toolbarHeight,
         }}
         animate={{
-          paddingRight: isRightSidebarOpen ? rightSidebarWidth : 0,
+          paddingRight: isRightSidebarOpen ? rightSidebarWidth + "vw" : 0,
           transition: layoutAnimationTransition
         }}
       >

diff --git a/src/js/components/Layout/RightSidebar.tsx b/src/js/components/Layout/RightSidebar.tsx
@@ -24,7 +24,7 @@ export const RightSidebar = (props: RightSidebarProps) => {
       {isOpen && (
         <Box
           as={motion.div}
-          {...layoutAnimationProps(rightSidebarWidth + "px")}
+          {...layoutAnimationProps(rightSidebarWidth + "vw")}
           zIndex={1}
           bg="background.floor"
           transitionProperty="background"
@@ -39,7 +39,7 @@ export const RightSidebar = (props: RightSidebarProps) => {
           pt={`calc(${toolbarHeight} + 1rem)`}
           left="auto"
         >
-          <Box overflow="hidden" width={rightSidebarWidth + "px"}>
+          <Box overflow="hidden" width={rightSidebarWidth + "vw"}>
             {children}
           </Box>
         </Box>

diff --git a/src/js/components/Layout/RightSidebarResizeControl.tsx b/src/js/components/Layout/RightSidebarResizeControl.tsx
@@ -1,10 +1,17 @@
 import React from 'react';
 import { Box, BoxProps } from '@chakra-ui/react';
 
-const MIN_SIZE = 200;
-const MAX_SIZE = 800;
+const MIN_VW = 20;
+const MAX_VW = 80;
+
 
 const clamp = (value: number, min: number, max: number) => Math.max(Math.min(value, max), min);
+const getVW = (e, window) => {
+  const innerWidth = window.innerWidth;
+  const clientX = e.clientX;
+  const calcVW = (innerWidth - clientX) / innerWidth * 100;
+  return calcVW;
+}
 
 interface RightSidebarResizeControlProps extends BoxProps {
   onResizeSidebar: (size: number) => void;
@@ -19,7 +26,9 @@ export const RightSidebarResizeControl = (props: RightSidebarResizeControlProps)
   const moveHandler = (e) => {
     if (isDragging) {
       e.preventDefault();
-      onResizeSidebar(clamp(window.innerWidth - e.clientX, MIN_SIZE, MAX_SIZE));
+      const calcVW = getVW(e, window);
+      const clampVW = clamp(calcVW, MIN_VW, MAX_VW);
+      onResizeSidebar(clampVW);
     }
   }
 
@@ -48,8 +57,7 @@ export const RightSidebarResizeControl = (props: RightSidebarResizeControlProps)
       position="fixed"
       zIndex={100}
       opacity={0}
-      outline="none"
-      right={rightSidebarWidth + "px"}
+      right={rightSidebarWidth + "vw"}
       height="100%"
       cursor="col-resize"
       onMouseDown={() => setIsDragging(true)}