Skip to content

Commit

Permalink
Merge pull request #2128 from shanberg/chakra-fixes
Browse files Browse the repository at this point in the history 
Chakra fixes
  • Loading branch information
@shanberg
shanberg authored Apr 11, 2022
2 parents 2b9c6da + 7bc4e09 commit 051db3c
Show file tree
Hide file tree
Showing 10 changed files with 261 additions and 118 deletions.
43 changes: 30 additions & 13 deletions src/cljs/athens/views/athena.cljs
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
(ns athens.views.athena
(:require
["/components/Icons/Icons" :refer [XmarkIcon]]
["/components/Icons/Icons" :refer [PageAddIcon XmarkIcon ArrowRightIcon]]
["@chakra-ui/react" :refer [Modal ModalContent ModalOverlay VStack Button IconButton Input HStack Heading Text]]
[athens.common.utils :as utils]
[athens.db :as db :refer [search-in-block-content search-exact-node-title search-in-node-title re-case-insensitive]]
Expand Down Expand Up @@ -123,6 +123,7 @@

;; Components


(defn result-el
[{:keys [title preview prefix icon query on-click active?]}]
[:> Button {:justifyContent "flex-start"
Expand All @@ -131,21 +132,35 @@
:height "auto"
:textAlign "start"
:flexDirection "row"
:rightIcon icon
:bg "transparent"
:px 3
:py 3
:isActive active?
:onClick on-click}
:onClick on-click
:sx {"span[class*='icon']:last-child" {:ml "auto"
:mr "1rem"
:marginBlock "-0.2rem"
:alignItems "center"
:fontSize "1.5em"
:alignSelf "center"}}}
[:> VStack {:align "stretch"
:spacing 1
:overflow "hidden"}
[:> Heading {:as "h4"
:size "sm"} prefix (highlight-match query title)]
:size "sm"}
(when prefix
[:> Text {:as "span"
:textTransform "uppercase"
:color "foreground.secondary"
:fontSize "xs"
:letterSpacing "0.1ch"
:mr "1ch"} prefix])
(highlight-match query title)]
(when preview
[:> Text {:color "foreground.secondary"
:textOverflow "ellipsis"
:overflow "hidden"} (highlight-match query preview)])]
icon])
:overflow "hidden"} (highlight-match query preview)])]])


(defn results-el
Expand All @@ -171,9 +186,7 @@
:borderTopWidth "1px"
:borderTopStyle "solid"
:borderColor "separator.divider"
:pt 4
:mb 4
:px 4
:p 4
:overflowY "auto"
:sx {"@supports (overflow-y: overlay)" {:overflowY "overlay"}}
:_empty {:display "none"}}
Expand All @@ -199,26 +212,27 @@
:borderTopStyle "solid"
:borderColor "separator.divider"
:spacing 1
:pt 4
:mb 4
:px 4
:p 4
:overflowY "auto"
:sx {"@supports (overflow-y: overlay)" {:overflowY "overlay"}}
:_empty {:display "none"}}
(doall
(for [[i x] (map-indexed list results)
:let [block-uid (:block/uid x)
parent (:block/parent x)
type (if parent :block :node)
title (or (:node/title parent) (:node/title x))
uid (or (:block/uid parent) (:block/uid x))
string (:block/string x)]]
(if (nil? x)
^{:key i}
[result-el {:key i
:title query
:prefix "Create page: "
:prefix "Create page"
:preview nil
:type :page
:query query
:icon (r/as-element [:> PageAddIcon])
:active? (= i index)
:on-click (fn [e]
(let [block-uid (utils/gen-block-uid)
Expand All @@ -237,6 +251,8 @@
[result-el {:key i
:title title
:query query
:type type
:icon (when (= i index) (r/as-element [:> ArrowRightIcon]))
:preview string
:active? (= i index)
:on-click (fn [e]
Expand Down Expand Up @@ -276,14 +292,15 @@
:isOpen @athena-open?
:onClose #(dispatch [:athena/toggle])}
[:> ModalOverlay]
[:> ModalContent {:width "49rem"
[:> ModalContent {:width "45rem"
:class "athena-modal"
:overflow "hidden"
:backdropFilter "blur(20px)"
:bg "background.vibrancy"
:maxWidth "calc(100vw - 4rem)"}
[:> Input
{:type "search"
:autocomplete "off"
:width "100%"
:border 0
:fontSize "2.375rem"
Expand Down
23 changes: 12 additions & 11 deletions src/cljs/athens/views/pages/all_pages.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,26 +63,27 @@
;; Components

(defn- sortable-header
([column-id label width isNumeric]
([column-id label width is-numeric?]
(let [sorted-by @(rf/subscribe [:all-pages/sorted-by])
growing? @(rf/subscribe [:all-pages/sort-order-ascending?])
sort-icon (if growing? (r/as-element [:> ChevronUpIcon {:fontSize "0.5em"}])
(r/as-element [:> ChevronDownIcon {:fontSize "0.5em"}]))]
sort-icon (if growing? (r/as-element [:> ChevronUpIcon])
(r/as-element [:> ChevronDownIcon]))]
[:> Th {:width width
:border 0
:isNumeric isNumeric}
:isNumeric is-numeric?}
[:> Button {:onClick #(rf/dispatch [:all-pages/sort-by column-id])
:size "sm"
:textTransform "uppercase"
:justifyContent (if is-numeric? "flex-end" "flex-start")
:display "flex"
:height "1em"
:overflow "hidden"
:gap "0.25em"
:variant "link"
:leftIcon (when (and isNumeric
:leftIcon (when (and is-numeric?
(= column-id sorted-by))
sort-icon)
:rightIcon (when (and (not isNumeric)
:rightIcon (when (and (not is-numeric?)
(= column-id sorted-by))
sort-icon)
:_hover {:textDecoration "none"}}
Expand All @@ -103,8 +104,8 @@
[:> Tr
[sortable-header :title "Title"]
[sortable-header :links-count "Links" "6rem" true]
[sortable-header :modified "Modified" "16rem" false {:date? true}]
[sortable-header :created "Created" "16rem" false {:date? true}]]]
[sortable-header :modified "Modified" "14rem" false {:date? true}]
[sortable-header :created "Created" "14rem" false {:date? true}]]]
[:> Tbody
(doall
(for [{:keys [block/uid node/title block/_refs]
Expand All @@ -130,6 +131,6 @@
:main-pane)}])
(router/navigate-page title e)))}
title]]
[:> Td {:width "6rem" :whiteSpace "nowrap" :color "foreground.secondary" :isNumeric true} (count _refs)]
[:> Td {:width "16rem" :whiteSpace "nowrap" :color "foreground.secondary"} (dates/date-string modified)]
[:> Td {:width "16rem" :whiteSpace "nowrap" :color "foreground.secondary"} (dates/date-string created)]]))]]]))))
[:> Td {:width "6rem" :whiteSpace "nowrap" :color "foreground.secondary" :isNumeric true} (count _refs)]
[:> Td {:width "14rem" :whiteSpace "nowrap" :fontSize "sm" :color "foreground.secondary"} (dates/date-string modified)]
[:> Td {:width "14rem" :whiteSpace "nowrap" :fontSize "sm" :color "foreground.secondary"} (dates/date-string created)]]))]]]))))
1 change: 0 additions & 1 deletion src/cljs/athens/views/pages/graph.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,6 @@
(let [graph-conf @(subscribe [:graph/conf])
graph-ref (get @graph-ref-map (or local-node-eid :global))]
[:> Accordion {:width "14em"
:defaultIndex 0
:position "absolute"
:bg "background.basement"
:overflow "hidden"
Expand Down
19 changes: 13 additions & 6 deletions src/cljs/athens/views/pages/node_page.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
(:require
["/components/Block/components/Anchor" :refer [Anchor]]
["/components/Confirmation/Confirmation" :refer [Confirmation]]
["/components/Icons/Icons" :refer [EllipsisHorizontalIcon GraphIcon BookmarkIcon BookmarkFillIcon TrashIcon]]
["/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]]
["@chakra-ui/react" :refer [Box Button Portal IconButton MenuDivider MenuButton Menu MenuList MenuItem Breadcrumb BreadcrumbItem BreadcrumbLink VStack]]
Expand Down Expand Up @@ -208,7 +208,7 @@
(let [{:block/keys [uid] sidebar
:page/sidebar title
:node/title} node]
[:> Menu {:isLazy true}
[:> Menu {:isLazy true :size "sm"}
[:> MenuButton {:as IconButton
"aria-label" "Page menu"
:gridArea "menu"
Expand All @@ -234,7 +234,11 @@
[:span "Add Shortcut"]])
[:> MenuItem {:onClick #(dispatch [:right-sidebar/open-item uid true])
:icon (r/as-element [:> GraphIcon])}
"Show Local Graph"]]
"Show Local Graph"]
[:> MenuItem {:onClick #(dispatch [:right-sidebar/open-item uid true])
:isDisabled (contains? @(subscribe [:right-sidebar/items]) uid)
:icon (r/as-element [:> ArrowRightOnBoxIcon])}
"Open in Sidebar"]]
[:> MenuDivider]
[:> MenuItem {:icon (r/as-element [:> TrashIcon])
:onClick (fn []
Expand Down Expand Up @@ -393,7 +397,9 @@
(let [{:block/keys [children uid] title :node/title} node
{:alert/keys [message confirm-fn cancel-fn] alert-show :alert/show} @state
daily-note? (dates/is-daily-note uid)
on-daily-notes? (= :home @(subscribe [:current-route/name]))]
on-daily-notes? (= :home @(subscribe [:current-route/name]))
is-current-route? (or (and daily-note? on-daily-notes?)
(= @(subscribe [:current-route/page-title]) title))]

(sync-title title state)

Expand All @@ -403,9 +409,10 @@
:title message
:onConfirm confirm-fn
:onClose cancel-fn}]

;; Header
[:> PageHeader {:onClickOpenInSidebar (when-not (contains? @(subscribe [:right-sidebar/items]) uid)
[:> PageHeader {:onClickOpenInMainView (when-not is-current-route?
(fn [e] (router/navigate-page title e)))
:onClickOpenInSidebar (when-not (contains? @(subscribe [:right-sidebar/items]) uid)
#(dispatch [:right-sidebar/open-item uid]))}

;; Dropdown
Expand Down
10 changes: 6 additions & 4 deletions src/js/components/AppToolbar/AppToolbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ const AppToolbarWrapper = ({ children, ...props }) => <Flex
zIndex="3"
userSelect="none"
transition='0.5s ease-in-out'
transitionProperty='common'
transitionProperty='border'
height="var(--app-header-height, 44px)"
_hover={{
borderBottomColor: 'separator.divider',
Expand Down Expand Up @@ -119,8 +119,6 @@ const AppToolbarWrapper = ({ children, ...props }) => <Flex
".os-mac &": {
paddingLeft: '22px',
paddingRight: '22px',
borderTopLeftRadius: '12px',
borderTopRightRadius: '12px',
position: 'absolute',
top: 0,
left: 0,
Expand All @@ -130,7 +128,11 @@ const AppToolbarWrapper = ({ children, ...props }) => <Flex
background: 'background.floor',
},
},
".os-mac.is-electron &": { paddingLeft: "88px" },
".os-mac.is-electron &": {
paddingLeft: "88px",
borderTopLeftRadius: '12px',
borderTopRightRadius: '12px'
},
".os-mac.is-fullscreen &": {
paddingLeft: '22px'
}
Expand Down
Loading

0 comments on commit 051db3c

Please sign in to comment.