Merge pull request #2282 from shanberg/fix-misc-new-layout-issues

fix misc layout issues
athensresearch · Aug 17, 2022 · bbc68ad · bbc68ad
2 parents 94b7799 + f21b097
commit bbc68ad
Show file tree

Hide file tree

Showing 21 changed files with 581 additions and 607 deletions.
diff --git a/package.json b/package.json
@@ -136,6 +136,7 @@
     "react-highlight.js": "1.0.7",
     "react-intersection-observer": "^8.32.1",
     "react-window": "^1.8.6",
+    "textarea-caret": "^3.1.0",
     "tslib": "^2.3.1"
   },
   "devDependencies": {

diff --git a/src/cljs/athens/main/core.cljs b/src/cljs/athens/main/core.cljs
@@ -94,7 +94,7 @@
                                     :autoHideMenuBar true
                                     :frame false
                                     :titleBarStyle "hidden"
-                                    :trafficLightPosition {:x 19, :y 34}
+                                    :trafficLightPosition {:x 19, :y 33}
                                     :webPreferences {:contextIsolation false
                                                      :nodeIntegration true
                                                      :worldSafeExecuteJavaScript true

diff --git a/src/cljs/athens/util.cljs b/src/cljs/athens/util.cljs
@@ -1,8 +1,8 @@
 (ns athens.util
   (:require
-    ["/textarea" :as getCaretCoordinates]
     ["/theme/theme" :refer [theme]]
     ["@chakra-ui/react" :refer [createStandaloneToast]]
+    ["textarea-caret" :as getCaretCoordinates]
     [athens.config :as config]
     [athens.electron.utils :as electron.utils]
     [clojure.string :as string]

diff --git a/src/cljs/athens/views.cljs b/src/cljs/athens/views.cljs
@@ -70,6 +70,10 @@
                               :spacing 0
                               :overflowY "auto"
                               :height "100vh"
+                              :bg "background.floor"
+                              :transitionDuration "fast"
+                              :transitionProperty "background"
+                              :transitionTimingFunction "ease-in-out"
                               :align "stretch"
                               :position "relative"}
                    [app-toolbar/app-toolbar]
@@ -81,7 +85,7 @@
                     [:> MainContent {:rightSidebarWidth @right-sidebar-width
                                      :isRightSidebarOpen @right-sidebar-open?}
                      [pages/view]]
-                    [:> RightSidebarResizeControl {:sidebarWidth @right-sidebar-width
-                                                   :isSidebarOpen @right-sidebar-open?
+                    [:> RightSidebarResizeControl {:rightSidebarWidth @right-sidebar-width
+                                                   :isRightSidebarOpen @right-sidebar-open?
                                                    :onResizeSidebar #(rf/dispatch [:right-sidebar/set-width %])}]
                     [right-sidebar/right-sidebar]]]])]]])))
diff --git a/src/cljs/athens/views/blocks/core.cljs b/src/cljs/athens/views/blocks/core.cljs
@@ -5,7 +5,7 @@
     ["/components/Block/PropertyName"          :refer [PropertyName]]
     ["/components/Block/Reactions"             :refer [Reactions]]
     ["/components/Block/Toggle"                :refer [Toggle]]
-    ["/components/Icons/Icons"                 :refer [BlockEmbedIcon TextIcon ChatIcon ArchiveIcon]]
+    ["/components/Icons/Icons"                 :refer [BlockEmbedIcon TextIcon ChatBubbleIcon ArchiveIcon]]
     ["/components/References/InlineReferences" :refer [ReferenceGroup ReferenceBlock]]
     ["@chakra-ui/react"                        :refer [Box Breadcrumb BreadcrumbItem BreadcrumbLink Button Divider HStack MenuDivider MenuItem MenuList VStack]]
     [athens.common-db                          :as common-db]
@@ -375,7 +375,7 @@
                                           (when comments-enabled?
                                             [:> MenuItem {:children "Add comment"
                                                           :onClick  #(ctx-menu/handle-click-comment % uid)
-                                                          :icon     (r/as-element [:> ChatIcon])}])
+                                                          :icon     (r/as-element [:> ChatBubbleIcon])}])
                                           (when reactions-enabled?
                                             [:<>
                                              [:> MenuDivider]

diff --git a/src/cljs/athens/views/left_sidebar.cljs b/src/cljs/athens/views/left_sidebar.cljs
@@ -1,6 +1,6 @@
 (ns athens.views.left-sidebar
   (:require
-    ["/components/Icons/Icons" :refer [DailyNotesIcon AllPagesIcon SearchIcon GraphIcon]]
+    ["/components/Icons/Icons" :refer [CalendarEditFillIcon AllPagesIcon SearchIcon GraphIcon]]
     ["/components/Layout/MainSidebar" :refer [MainSidebar]]
     ["/components/SidebarShortcuts/List" :refer [List]]
     ["@chakra-ui/react" :refer [Button VStack Flex Heading ButtonGroup Link Flex]]
@@ -45,11 +45,11 @@
                    :justifyContent "start"
                    :leftIcon (r/as-element [:> SearchIcon])}
         "Find or Create a Page"]
-       [route-button (= route-name :home) "Daily Notes" (r/as-element [:> DailyNotesIcon]) (fn [_]
-                                                                                             (rf/dispatch [:reporting/navigation {:source :main-sidebar
-                                                                                                                                  :target :home
-                                                                                                                                  :pane   :main-pane}])
-                                                                                             (router/nav-daily-notes))]
+       [route-button (= route-name :home) "Daily Notes" (r/as-element [:> CalendarEditFillIcon]) (fn [_]
+                                                                                                   (rf/dispatch [:reporting/navigation {:source :main-sidebar
+                                                                                                                                        :target :home
+                                                                                                                                        :pane   :main-pane}])
+                                                                                                   (router/nav-daily-notes))]
        [route-button (= route-name :pages) "All Pages" (r/as-element [:> AllPagesIcon]) (fn [_]
                                                                                           (rf/dispatch [:reporting/navigation {:source :main-sidebar
                                                                                                                                :target :all-pages

diff --git a/src/cljs/athens/views/notifications/popover.cljs b/src/cljs/athens/views/notifications/popover.cljs
@@ -120,13 +120,11 @@
               notification-list  (get-inbox-items-for-popover @db/dsdb user-page-title)
               navigate-user-page #(router/navigate-page user-page-title)
               num-notifications  (count notification-list)]
-          [:> Popover {:closeOnBlur true}
+          [:> Popover {:closeOnBlur true :size "md"}
 
            [:> PopoverTrigger
             [:> Box {:position "relative"}
              [:> IconButton {"aria-label"   "Notifications"
-                             :variant       "ghost"
-                             :fontSize      "1.3em"
                              :onDoubleClick navigate-user-page
                              :onClick       (fn [e]
                                               (when (.. e -shiftKey)
@@ -139,8 +137,7 @@
                           :right "-3px" :bottom "-1px" :variant "ghost" :zIndex 1} num-notifications])]]
 
 
-           [:> PopoverContent {:maxWidth  "max-content"
-                               :maxHeight "calc(100vh - 4rem)"}
+           [:> PopoverContent {:maxHeight "calc(100vh - 4rem)"}
             [:> PopoverCloseButton]
             [:> PopoverHeader [:> Button {:onClick navigate-user-page :rightIcon (r/as-element [:> ArrowRightIcon])} "Notifications"]]
             [:> Flex {:p             0

diff --git a/src/cljs/athens/views/pages/daily_notes.cljs b/src/cljs/athens/views/pages/daily_notes.cljs
@@ -1,8 +1,6 @@
 (ns athens.views.pages.daily-notes
   (:require
-    ["/components/Page/Page" :refer [DailyNotesPage]]
-    ["@chakra-ui/react" :refer [VStack]]
-    ["framer-motion" :refer [AnimatePresence]]
+    ["/components/Page/Page" :refer [DailyNotesPage DailyNotesList]]
     [athens.dates :as dates]
     [athens.reactive :as reactive]
     [athens.views.pages.node-page :as node-page]
@@ -26,15 +24,24 @@
 (defn page
   []
   (let [note-refs (subscribe [:daily-notes/items])
-        get-next-note #(dispatch [:daily-note/next (dates/get-day (dates/uid-to-date (last @note-refs)) 1)])]
+        get-another-note #(dispatch [:daily-note/next (dates/get-day (dates/uid-to-date (last @note-refs)) 1)])]
     (fn []
       (if (empty? @note-refs)
         (dispatch [:daily-note/next (dates/get-day)])
         (let [notes (reactive-pull-many @note-refs)]
-          [:> VStack {:alignSelf "stretch" :align "stretch" :py 16 :px [2 4 8] :spacing 8}
-           [:> AnimatePresence {:initial false}
-            (doall
-              (for [{:keys [block/uid]} notes]
-                [:> DailyNotesPage {:key uid
-                                    :onFirstAppear get-next-note}
-                 [node-page/page [:block/uid uid]]]))]])))))
+          [:> DailyNotesList {:id "daily-notes"
+                              :onGetAnotherNote get-another-note
+                              :minHeight     "calc(100vh + 1px)"
+                              :height        "calc(100vh + 1px)"
+                              :display       "flex"
+                              :overflowY     "auto"
+                              :gap           "1.5rem"
+                              :px            "2rem"
+                              :alignItems    "center"
+                              :flex          "1 1 100%"
+                              :flexDirection "column"}
+           (doall
+             (for [{:keys [block/uid]} notes]
+               [:> DailyNotesPage {:key uid
+                                   :isReal true}
+                [node-page/page [:block/uid uid]]]))])))))
diff --git a/src/cljs/athens/views/right_sidebar/core.cljs b/src/cljs/athens/views/right_sidebar/core.cljs
@@ -7,7 +7,7 @@
     [athens.views.right-sidebar.events]
     [athens.views.right-sidebar.shared :as shared]
     [athens.views.right-sidebar.subs]
-    [re-frame.core :as rf :refer [dispatch]]))
+    [re-frame.core :as rf]))
 
 
 ;; Components
@@ -37,8 +37,7 @@
   [open? items rf-width]
   [:> RightSidebar
    {:isOpen open?
-    :rightSidebarWidth rf-width
-    :onResizeSidebar #(dispatch [:right-sidebar/set-width %])}
+    :rightSidebarWidth rf-width}
    (if (empty? items)
      [empty-message]
      [:> List {:items              (shared/create-sidebar-list items)

diff --git a/src/js/components/AllPagesTable/AllPagesTable.tsx b/src/js/components/AllPagesTable/AllPagesTable.tsx
@@ -31,6 +31,17 @@ const renderDate = (date) => {
   }
 }
 
+const RowTd = ({ children, ...props }) => {
+  return (
+    <Td {...props}
+      transitionProperty="background"
+      transitionTimingFunction="ease-in-out"
+      transitionDuration="fast"
+    >
+      {children}
+    </Td>
+  )
+}
 
 const Row = ({ index, data, style }) => {
 
@@ -46,7 +57,7 @@ const Row = ({ index, data, style }) => {
       display="flex"
       className={index % 2 ? 'index-even' : 'index-odd'}
     >
-      <Td
+      <RowTd
         overflow="hidden"
       >
         <Button
@@ -64,10 +75,10 @@ const Row = ({ index, data, style }) => {
         >
           {DISPLAY_TITLES[item[":node/title"]] || item[":node/title"]}
         </Button>
-      </Td>
-      <Td>{item[":block/_refs"]?.length || 0}</Td>
-      <Td>{renderDate(item[":time/modified"])}</Td>
-      <Td>{renderDate(item[":time/created"])}</Td>
+      </RowTd>
+      <RowTd>{item[":block/_refs"]?.length || 0}</RowTd>
+      <RowTd>{renderDate(item[":time/modified"])}</RowTd>
+      <RowTd>{renderDate(item[":time/created"])}</RowTd>
     </Tr>
   )
 };