Merge pull request #2144 from shanberg/fix-issues-4

Fix issues 4
athensresearch · Apr 15, 2022 · 581ed08 · 581ed08
2 parents 7cecc4f + 259622a
commit 581ed08
Show file tree

Hide file tree

Showing 24 changed files with 489 additions and 313 deletions.
diff --git a/resources/public/favicon.png b/resources/public/favicon.png
diff --git a/resources/public/favicon.svg b/resources/public/favicon.svg
diff --git a/resources/public/index.html b/resources/public/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset='utf-8'>
     <meta name="viewport" content="width=device-width,initial-scale=1">
+      <link rel="shortcut icon" type="image/svg+xml" href="favicon.svg" />
       <link rel="shortcut icon" type="image/png" href="favicon.png" />
       <link href="./css/katex.min.css" rel="stylesheet" />
       <noscript>

diff --git a/src/cljs/athens/views/blocks/autocomplete_search.cljs b/src/cljs/athens/views/blocks/autocomplete_search.cljs
@@ -1,6 +1,6 @@
 (ns athens.views.blocks.autocomplete-search
   (:require
-    ["/components/Block/components/Autocomplete" :refer [Autocomplete AutocompleteButton]]
+    ["/components/Block/Autocomplete" :refer [Autocomplete AutocompleteButton]]
     ["@chakra-ui/react" :refer [Text]]
     [athens.views.blocks.textarea-keydown :as textarea-keydown]
     [clojure.string :as string]))

diff --git a/src/cljs/athens/views/blocks/autocomplete_slash.cljs b/src/cljs/athens/views/blocks/autocomplete_slash.cljs
@@ -1,6 +1,6 @@
 (ns athens.views.blocks.autocomplete-slash
   (:require
-    ["/components/Block/components/Autocomplete" :refer [Autocomplete AutocompleteButton]]
+    ["/components/Block/Autocomplete" :refer [Autocomplete AutocompleteButton]]
     [athens.views.blocks.textarea-keydown :as textarea-keydown]
     [reagent.core :as r]))
 

diff --git a/src/cljs/athens/views/blocks/content.cljs b/src/cljs/athens/views/blocks/content.cljs
@@ -1,6 +1,6 @@
 (ns athens.views.blocks.content
   (:require
-    ["/components/Block/components/Content" :refer [Content]]
+    ["/components/Block/Content" :refer [Content]]
     [athens.config :as config]
     [athens.db :as db]
     [athens.events.selection :as select-events]

diff --git a/src/cljs/athens/views/blocks/core.cljs b/src/cljs/athens/views/blocks/core.cljs
@@ -1,9 +1,9 @@
 (ns athens.views.blocks.core
   (:require
-    ["/components/Block/components/Anchor"   :refer [Anchor]]
-    ["/components/Block/components/Container" :refer [Container]]
-    ["/components/Block/components/Toggle"   :refer [Toggle]]
-    ["/components/Layout/Layout"   :refer [ReferenceGroup ReferenceBlock]]
+    ["/components/Block/Anchor"              :refer [Anchor]]
+    ["/components/Block/Container"           :refer [Container]]
+    ["/components/Block/Toggle"              :refer [Toggle]]
+    ["/components/References/InlineReferences" :refer [ReferenceGroup ReferenceBlock]]
     ["@chakra-ui/react" :refer [VStack Button Breadcrumb BreadcrumbItem BreadcrumbLink HStack]]
     [athens.common.logging                   :as log]
     [athens.db                               :as db]

diff --git a/src/cljs/athens/views/pages/block_page.cljs b/src/cljs/athens/views/pages/block_page.cljs
@@ -1,7 +1,7 @@
 (ns athens.views.pages.block-page
   (:require
-    ["/components/Layout/Layout" :refer [PageReferences ReferenceBlock ReferenceGroup]]
     ["/components/Page/Page" :refer [PageHeader PageBody PageFooter TitleContainer]]
+    ["/components/References/References" :refer [PageReferences ReferenceBlock ReferenceGroup]]
     ["@chakra-ui/react" :refer [Breadcrumb BreadcrumbItem BreadcrumbLink]]
     [athens.parse-renderer :as parse-renderer]
     [athens.reactive :as reactive]

diff --git a/src/cljs/athens/views/pages/core.cljs b/src/cljs/athens/views/pages/core.cljs
@@ -26,6 +26,7 @@
       (toast (clj->js {:status "info"
                        :title "Reconnecting to server..."})))
     [:> Box {:flex "1 1 100%"
+             :class "main-content"
              :position "relative"
              :gridArea "main-content"
              :alignItems "flex-start"
@@ -59,7 +60,9 @@
                                        :height "0.5rem"}
                   "::WebkitScrollbar-corner" {:bg "background.basement"}
                   "::WebkitScrollbar-thumb" {:bg "background.upper"
-                                             :borderRadius "full"}}
+                                             :borderRadius "full"}
+                  "> .node-page:first-child, .block-page:first-child" {:mt 0
+                                                                       :pt "var(--app-header-height)"}}
              :on-scroll (when (= @route-name :home)
                           throttled-scroll)}
      (case @route-name

diff --git a/src/cljs/athens/views/pages/node_page.cljs b/src/cljs/athens/views/pages/node_page.cljs
@@ -1,10 +1,10 @@
 (ns athens.views.pages.node-page
   (:require
-    ["/components/Block/components/Anchor" :refer [Anchor]]
+    ["/components/Block/Anchor" :refer [Anchor]]
     ["/components/Confirmation/Confirmation" :refer [Confirmation]]
     ["/components/Icons/Icons" :refer [EllipsisHorizontalIcon GraphIcon BookmarkIcon BookmarkFillIcon TrashIcon ArrowRightOnBoxIcon]]
-    ["/components/Layout/Layout" :refer [PageReferences ReferenceBlock ReferenceGroup]]
     ["/components/Page/Page" :refer [PageHeader PageBody PageFooter TitleContainer]]
+    ["/components/References/References" :refer [PageReferences ReferenceBlock ReferenceGroup]]
     ["@chakra-ui/react" :refer [Box HStack Button Portal IconButton MenuDivider MenuButton Menu MenuList MenuItem Breadcrumb BreadcrumbItem BreadcrumbLink VStack]]
     [athens.common-db :as common-db]
     [athens.common.sentry :refer-macros [wrap-span-no-new-tx]]
@@ -213,11 +213,11 @@
                      "aria-label" "Page menu"
                      :gridArea "menu"
                      :justifySelf "flex-end"
-                     :size "md"
+                     :size "sm"
                      :alignSelf "center"
+                     :fontSize "70%"
+                     :color "foreground.secondary"
                      :bg "transparent"
-                     :width "2.25em"
-                     :mr "0.5em"
                      :borderRadius "full"
                      :sx {"span" {:display "contents"}
                           "button svg:first-of-type" {:marginRight "0.25rem"}}}
@@ -271,8 +271,11 @@
     (fn [_]
       (let [{:keys [block parents embed-id]} @state
             block (reactive/get-reactive-block-document (:db/id block))]
-        [:> VStack {:spacing 0 :align "stretch"}
-         [:> Breadcrumb {:fontSize "sm" :pl 4 :variant "strict" :color "foreground.secondary"}
+        [:> VStack {:spacing 0
+                    :align "stretch"}
+         [:> Breadcrumb {:fontSize "sm"
+                         :variant "strict"
+                         :color "foreground.secondary"}
           (doall
             (for [{:keys [node/title block/string block/uid]} parents]
               [:> BreadcrumbItem {:key (str "breadcrumb-" uid)}

diff --git a/src/cljs/athens/views/pages/page.cljs b/src/cljs/athens/views/pages/page.cljs
@@ -14,11 +14,11 @@
   []
   (let [title    (rf/subscribe [:current-route/page-title])
         page-eid (common-db/e-by-av @db/dsdb :node/title @title)]
-    (if (int? page-eid)
-      [:> PageContainer {:uid page-eid :type "node"}
-       [node-page/page page-eid]]
-      [:> PageNotFound {:title @title
-                        :onClickHome #(router/navigate :pages)}])))
+    [:> PageContainer {:uid page-eid :type "node"}
+     (if (int? page-eid)
+       [node-page/page page-eid]
+       [:> PageNotFound {:title @title
+                         :onClickHome #(router/navigate :pages)}])]))
 
 
 (defn page

diff --git a/src/cljs/athens/views/right_sidebar.cljs b/src/cljs/athens/views/right_sidebar.cljs
@@ -1,7 +1,7 @@
 (ns athens.views.right-sidebar
   (:require
     ["/components/Icons/Icons" :refer [RightSidebarAddIcon]]
-    ["/components/Layout/Layout" :refer [RightSidebarContainer SidebarItem]]
+    ["/components/Layout/RightSidebar" :refer [RightSidebarContainer SidebarItem]]
     ["@chakra-ui/react" :refer [Flex Text Box]]
     [athens.parse-renderer :as parse-renderer]
     [athens.views.pages.block-page :as block-page]
@@ -87,7 +87,8 @@
                                     :on-mouse-down #(swap! state assoc :dragging true)
                                     :class (when (:dragging @state) "is-dragging")}]
                                   [:> Flex
-                                   {:flexDirection "column"
+                                   {:class "right-sidebar-content"
+                                    :flexDirection "column"
                                     :flex 1;
                                     :maxHeight "calc(100vh - 3.25rem - 1px)"
                                     :width (str (:width @state) "vw")

diff --git a/src/js/components/AppToolbar/AppToolbar.tsx b/src/js/components/AppToolbar/AppToolbar.tsx
@@ -12,7 +12,7 @@ import {
   ContrastIcon,
   DailyNotesIcon,
   GraphIcon,
-  EllipsisHorizontalIcon
+  EllipsisHorizontalCircleIcon
 } from '@/Icons/Icons';
 
 import {
@@ -72,6 +72,7 @@ const ToolbarIconButton = React.forwardRef((props: ToolbarIconButtonProps, ref)
 });
 
 const AppToolbarWrapper = ({ children, ...props }) => <Flex
+  className="app-toolbar"
   gridArea="app-header"
   borderBottom="1px solid transparent"
   justifyContent="space-between"
@@ -227,7 +228,7 @@ const SecondaryToolbarItems = (items) => {
 const SecondaryToolbarOverflowMenu = (items) => {
   return <Menu>
     {({ isOpen }) => <>
-      <ToolbarIconButton size="sm" as={MenuButton} isActive={isOpen}><EllipsisHorizontalIcon /></ToolbarIconButton>
+      <ToolbarIconButton size="sm" as={MenuButton} isActive={isOpen}><EllipsisHorizontalCircleIcon /></ToolbarIconButton>
       <Portal>
         <MenuList>
           {items.map((item) => (<MenuItem
@@ -316,7 +317,13 @@ export const AppToolbar = (props: AppToolbarProps): React.ReactElement => {
   ];
 
   return (
-    <AppToolbarWrapper className={isRightSidebarOpen ? 'is-right-sidebar-open' : ''} {...rest}>
+    <AppToolbarWrapper
+      className={[
+        "app-toolbar",
+        isRightSidebarOpen && 'is-right-sidebar-open',
+      ].filter(Boolean).join(' ')}
+      {...rest}
+    >
       <HStack flex="1">
         <ButtonGroup size="sm" mr="auto">
           {databaseMenu}

diff --git a/...js/components/Block/components/Anchor.tsx → src/js/components/Block/Anchor.tsx b/...js/components/Block/components/Anchor.tsx → src/js/components/Block/Anchor.tsx
diff --git a/...ponents/Block/components/Autocomplete.tsx → src/js/components/Block/Autocomplete.tsx b/...ponents/Block/components/Autocomplete.tsx → src/js/components/Block/Autocomplete.tsx
diff --git a/...components/Block/components/Container.tsx → src/js/components/Block/Container.tsx b/...components/Block/components/Container.tsx → src/js/components/Block/Container.tsx
@@ -84,7 +84,10 @@ const _Container = ({ children, isDragging, isSelected, isOpen, hasChildren, has
         borderRadius: "sm",
         "--block-surface-color": "background.basement",
         bg: "background.basement",
-        ".block-container": { marginLeft: 0.5 },
+        // Blocks nested in an embed get normal indentation...
+        ".block-container": { marginLeft: 8 },
+        // ...except for the first one, where that would be excessive
+        "& > .block-container": { marginLeft: 0.5 },
       },
       ".block-content": {
         gridArea: "content",

diff --git a/...s/components/Block/components/Content.tsx → src/js/components/Block/Content.tsx b/...s/components/Block/components/Content.tsx → src/js/components/Block/Content.tsx
diff --git a/...js/components/Block/components/Toggle.tsx → src/js/components/Block/Toggle.tsx b/...js/components/Block/components/Toggle.tsx → src/js/components/Block/Toggle.tsx
diff --git a/src/js/components/Icons/Icons.tsx b/src/js/components/Icons/Icons.tsx
@@ -224,6 +224,14 @@ export const EllipsisHorizontalIcon = createIcon({
   ),
 });
 
+export const EllipsisHorizontalCircleIcon = createIcon({
+  displayName: 'EllipsisHorizontalCircleIcon',
+  viewBox: '0 0 24 24',
+  path: (
+    <path fillRule="evenodd" clipRule="evenodd" d="M12 20.48C16.6834 20.48 20.48 16.6834 20.48 12C20.48 7.31663 16.6834 3.52 12 3.52C7.31663 3.52 3.52 7.31663 3.52 12C3.52 16.6834 7.31663 20.48 12 20.48ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM7.33333 10.5833C6.55093 10.5833 5.91667 11.2176 5.91667 12C5.91667 12.7824 6.55093 13.4167 7.33333 13.4167C8.11574 13.4167 8.75 12.7824 8.75 12C8.75 11.2176 8.11574 10.5833 7.33333 10.5833ZM12 10.5833C11.2176 10.5833 10.5833 11.2176 10.5833 12C10.5833 12.7824 11.2176 13.4167 12 13.4167C12.7824 13.4167 13.4167 12.7824 13.4167 12C13.4167 11.2176 12.7824 10.5833 12 10.5833ZM16.6667 10.5833C15.8843 10.5833 15.25 11.2176 15.25 12C15.25 12.7824 15.8843 13.4167 16.6667 13.4167C17.4491 13.4167 18.0833 12.7824 18.0833 12C18.0833 11.2176 17.4491 10.5833 16.6667 10.5833Z" fill="currentColor" />
+  ),
+});
+
 export const ExclamationCircleFillIcon = createIcon({
   displayName: 'ExclamationCircleFillIcon',
   viewBox: '0 0 24 24',