From eb6d1b43516f1fc3c7cdaccc94184fc17c3b1717 Mon Sep 17 00:00:00 2001 From: jeff Date: Wed, 17 Aug 2022 17:48:49 +0100 Subject: [PATCH] enhance(right-sidebar): make width % based; persist width to graph --- src/cljs/athens/db.cljs | 3 ++- .../athens/views/right_sidebar/events.cljs | 12 ++++++++---- .../athens/views/right_sidebar/shared.cljs | 12 ++++++++++++ src/cljs/athens/views/right_sidebar/subs.cljs | 6 ++++-- src/js/components/Layout/MainContent.tsx | 2 +- src/js/components/Layout/RightSidebar.tsx | 4 ++-- .../Layout/RightSidebarResizeControl.tsx | 19 ++++++++++++++----- 7 files changed, 43 insertions(+), 15 deletions(-) diff --git a/src/cljs/athens/db.cljs b/src/cljs/athens/db.cljs index 73ec552b76..722618c927 100644 --- 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 index 27db9215be..9f22a5f937 100644 --- 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 index a92163b812..041102a15d 100644 --- 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 index 51a6f9df07..88efd91e3a 100644 --- 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 index 94a7945270..855bc097f4 100644 --- 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 index c5ec0e6b48..386ac045e0 100644 --- a/src/js/components/Layout/RightSidebar.tsx +++ b/src/js/components/Layout/RightSidebar.tsx @@ -16,7 +16,7 @@ export const RightSidebar = (props) => { {isOpen && ( { pt={`calc(${toolbarHeight} + 1rem)`} left="auto" > - + {children} diff --git a/src/js/components/Layout/RightSidebarResizeControl.tsx b/src/js/components/Layout/RightSidebarResizeControl.tsx index c13ddd40a8..dabb1dea15 100644 --- a/src/js/components/Layout/RightSidebarResizeControl.tsx +++ b/src/js/components/Layout/RightSidebarResizeControl.tsx @@ -1,10 +1,17 @@ import React from 'react'; import { Box } 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; +} export const RightSidebarResizeControl = (props) => { const { onResizeSidebar, isSidebarOpen, sidebarWidth, ...rest } = props; @@ -13,10 +20,13 @@ export const RightSidebarResizeControl = (props) => { 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); } } + // todo: set graph property block to this value on mouse up const mouseUpHandler = (e) => { setIsDragging(false); } @@ -42,7 +52,7 @@ export const RightSidebarResizeControl = (props) => { position="fixed" zIndex={100} opacity={0} - right={sidebarWidth + "px"} + right={sidebarWidth + "vw"} height="100%" cursor="col-resize" onMouseDown={() => setIsDragging(true)} @@ -52,7 +62,6 @@ export const RightSidebarResizeControl = (props) => { transition="opacity 0.2s ease-in-out" _hover={{ opacity: 1 }} {...isDragging && { opacity: 1 }} - {...props} > );