From d841c99c67bc0cfaf9226c0c353b0f1cbe27fb96 Mon Sep 17 00:00:00 2001 From: Stuart Hanberg Date: Wed, 31 Aug 2022 18:21:29 -0400 Subject: [PATCH 1/6] feat: readable table query --- src/cljs/athens/types/query/table.cljs | 43 +++++++++++++++++--------- 1 file changed, 28 insertions(+), 15 deletions(-) diff --git a/src/cljs/athens/types/query/table.cljs b/src/cljs/athens/types/query/table.cljs index 8fe451d4b8..5f58e92321 100644 --- a/src/cljs/athens/types/query/table.cljs +++ b/src/cljs/athens/types/query/table.cljs @@ -16,9 +16,11 @@ KanbanColumn]] ["/components/Query/Query" :refer [QueryRadioMenu]] ["/components/Query/Table" :refer [QueryTable]] + ["/components/Block/Taskbox" :refer [Taskbox]] ["@chakra-ui/react" :refer [Box, IconButton HStack + Grid Heading ButtonGroup Flex @@ -52,7 +54,7 @@ (defn render-entity - [uid children columns] + [uid children indent is-root] (let [entity (->> (reactive/get-reactive-block-document [:block/uid uid]) shared/block-to-flat-map) page-title (common-db/get-page-title @db/dsdb uid) @@ -65,6 +67,8 @@ _page (get entity ":task/page") due-date (get entity ":task/due-date") + next-indent (if indent (inc indent) 0) + assignee-value (shared/parse-for-title assignee) status-uid (shared/parse-for-uid status) status-value (common-db/get-block-string @db/dsdb status-uid) @@ -72,29 +76,38 @@ priority-value (common-db/get-block-string @db/dsdb priority-uid) parent-uid (:block/uid (common-db/get-parent @db/dsdb [:block/uid uid]))] - [:> Box {:width "100%"} - [:> HStack {:justifyContent "space-between" :width "100%"} - [:> Heading {:size "sm"} title] - [:> Text {:size "md"} status-value] - [:> Text {:size "md"} priority-value] - [:> Text {:size "md"} assignee-value] - [:> Text {:size "md"} due-date]] - [:> Box + [:<> + [:> Grid {:templateColumns "3fr 1fr 1fr 1fr 1fr" + :mt (if is-root 2 0) + :borderTop "1px solid" + :py 0.25 + :borderColor "separator.border" + :borderRadius "sm" + :textAlign "start" + :_hover {:bg "interaction.surface.hover"}} + [:> Flex {:alignSelf "inline-flex" :align "center" :gap 1.5 :size "sm" :ml 1 :pl (str (* 1 indent) "em")} + (when status-value [:> Taskbox {:status status-value}]) + [:> Text {:pl 1 + :color (if is-root "foreground.secondary" "foreground.primary")} title]] + [:> Text {:alignSelf "stretch" :size "md"} status-value] + [:> Text {:alignSelf "stretch" :size "md"} priority-value] + [:> Text {:alignSelf "stretch" :size "md"} assignee-value] + [:> Text {:alignSelf "stretch" :size "md"} due-date]] + [:<> (for [[uid children] children] ^{:key uid} - [:> Box {:ml 5} - [render-entity uid children]])]])) + [render-entity uid children next-indent false])]])) (defn QueryTableV2 [{:keys [data columns] :as props}] - [:> VStack - [:> HStack {:justifyContent "space-between" :width "100%"} + [:> Flex {:flexDirection "column" :align "stretch" :py 4} + [:> Grid {:templateColumns "3fr 1fr 1fr 1fr 1fr" :textAlign "start"} (for [column columns] ^{:key column} - [:> Heading {:size "md"} column])] + [:> Heading {:size "sm" :fontWeight "normal" :color "foreground.secondary"} column])] [:<> (for [[uid children] data] ^{:key uid} - [render-entity uid children columns])]]) + [render-entity uid children 0 true])]]) From 5629304171ca96b7e19ac5da3c4500cf079fce80 Mon Sep 17 00:00:00 2001 From: Stuart Hanberg Date: Wed, 31 Aug 2022 18:58:47 -0400 Subject: [PATCH 2/6] fix: clearer style for disabled taskbox --- src/js/components/Block/Taskbox.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/js/components/Block/Taskbox.tsx b/src/js/components/Block/Taskbox.tsx index e433741aa3..9c4725e611 100644 --- a/src/js/components/Block/Taskbox.tsx +++ b/src/js/components/Block/Taskbox.tsx @@ -149,10 +149,14 @@ export const Taskbox = (props: TaskboxProps) => { borderWidth="2px" justifyContent="center" position="relative" + _disabled={{ + borderWidth: "0", + cursor: "default" + }} _hover={{}} _active={{}} {...STATUS[status].isDone ? { - bg: isEditable ? STATUS[status].color : "none", + bg: STATUS[status].color, color: "background.floor", } : { borderColor: STATUS[status].color, @@ -161,8 +165,8 @@ export const Taskbox = (props: TaskboxProps) => { content: "''", position: "absolute", inset: 0, - opacity: isEditable ? 0.3 : 0, - bg: isEditable ? "currentColor" : "none" + opacity: 0.3, + bg: "currentColor" } }} onClick={() => { From abfa0ee038603fe5818a10f632b36e9aa513e912 Mon Sep 17 00:00:00 2001 From: Stuart Hanberg Date: Wed, 31 Aug 2022 18:58:57 -0400 Subject: [PATCH 3/6] improvement: neater query table --- src/cljs/athens/types/query/table.cljs | 44 +++++++++++++++----------- 1 file changed, 25 insertions(+), 19 deletions(-) diff --git a/src/cljs/athens/types/query/table.cljs b/src/cljs/athens/types/query/table.cljs index 5f58e92321..f3d1c73364 100644 --- a/src/cljs/athens/types/query/table.cljs +++ b/src/cljs/athens/types/query/table.cljs @@ -67,8 +67,6 @@ _page (get entity ":task/page") due-date (get entity ":task/due-date") - next-indent (if indent (inc indent) 0) - assignee-value (shared/parse-for-title assignee) status-uid (shared/parse-for-uid status) status-value (common-db/get-block-string @db/dsdb status-uid) @@ -77,26 +75,34 @@ parent-uid (:block/uid (common-db/get-parent @db/dsdb [:block/uid uid]))] [:<> - [:> Grid {:templateColumns "3fr 1fr 1fr 1fr 1fr" - :mt (if is-root 2 0) - :borderTop "1px solid" - :py 0.25 - :borderColor "separator.border" - :borderRadius "sm" - :textAlign "start" - :_hover {:bg "interaction.surface.hover"}} - [:> Flex {:alignSelf "inline-flex" :align "center" :gap 1.5 :size "sm" :ml 1 :pl (str (* 1 indent) "em")} - (when status-value [:> Taskbox {:status status-value}]) - [:> Text {:pl 1 - :color (if is-root "foreground.secondary" "foreground.primary")} title]] - [:> Text {:alignSelf "stretch" :size "md"} status-value] - [:> Text {:alignSelf "stretch" :size "md"} priority-value] - [:> Text {:alignSelf "stretch" :size "md"} assignee-value] - [:> Text {:alignSelf "stretch" :size "md"} due-date]] + (if is-root + [:> Grid {:templateColumns "3fr 1fr 1fr 1fr 1fr" + :mt 2 + :textAlign "start"} + [:> Text {:pl 1 + :color "foreground.secondary"} title] + [:> Text {:alignSelf "stretch" :size "md"} status-value] + [:> Text {:alignSelf "stretch" :size "md"} priority-value] + [:> Text {:alignSelf "stretch" :size "md"} assignee-value] + [:> Text {:alignSelf "stretch" :size "md"} due-date]] + [:> Grid {:templateColumns "3fr 1fr 1fr 1fr 1fr" + :textAlign "start" + :borderTop "1px solid" + :borderColor "separator.border" + :_hover {:bg "interaction.surface.hover" + :borderRadius "sm"}} + [:> Flex {:alignSelf "inline-flex" :align "center" :gap 0.5 :size "sm" :ml 1 :pl (str (* 1 indent) "em")} + (when status-value [:> Taskbox {:status status-value}]) + [:> Text {:pl 1 + :color (if is-root "foreground.secondary" "foreground.primary")} title]] + [:> Text {:alignSelf "stretch" :size "md"} status-value] + [:> Text {:alignSelf "stretch" :size "md"} priority-value] + [:> Text {:alignSelf "stretch" :size "md"} assignee-value] + [:> Text {:alignSelf "stretch" :size "md"} due-date]]) [:<> (for [[uid children] children] ^{:key uid} - [render-entity uid children next-indent false])]])) + [render-entity uid children (if is-root 0 (inc indent)) false])]])) (defn QueryTableV2 From d0fa8cc7610a93f19c87e75ebf502159ecc1df89 Mon Sep 17 00:00:00 2001 From: Stuart Hanberg Date: Thu, 1 Sep 2022 21:20:18 -0400 Subject: [PATCH 4/6] feat: block in row toggle and children counter --- src/cljs/athens/types/query/view.cljs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/cljs/athens/types/query/view.cljs b/src/cljs/athens/types/query/view.cljs index 37f7435055..675189c051 100644 --- a/src/cljs/athens/types/query/view.cljs +++ b/src/cljs/athens/types/query/view.cljs @@ -5,7 +5,7 @@ ["/components/DnD/DndContext" :refer [DragAndDropContext]] ["/components/DnD/Droppable" :refer [Droppable]] ["/components/DnD/Sortable" :refer [Sortable]] - ["/components/Icons/Icons" :refer [ArrowRightOnBoxIcon PlusIcon]] + ["/components/Icons/Icons" :refer [GraphChildIcon ArrowRightOnBoxIcon PlusIcon]] ["/components/ModalInput/ModalInput" :refer [ModalInput]] ["/components/ModalInput/ModalInputPopover" :refer [ModalInputPopover]] ["/components/ModalInput/ModalInputTrigger" :refer [ModalInputTrigger]] From b2807ff1c6b8641cad798eeaf613476edac63c99 Mon Sep 17 00:00:00 2001 From: Stuart Hanberg Date: Thu, 1 Sep 2022 21:20:23 -0400 Subject: [PATCH 5/6] feat: block in row toggle and children counter --- src/cljs/athens/types/query/table.cljs | 30 ++++++++++++++++++-------- src/js/components/Icons/Icons.tsx | 8 +++++++ 2 files changed, 29 insertions(+), 9 deletions(-) diff --git a/src/cljs/athens/types/query/table.cljs b/src/cljs/athens/types/query/table.cljs index f3d1c73364..9a5fb097c1 100644 --- a/src/cljs/athens/types/query/table.cljs +++ b/src/cljs/athens/types/query/table.cljs @@ -3,10 +3,11 @@ (:require [datascript.core :as d] ["/components/Block/BlockFormInput" :refer [BlockFormInput]] + ["/components/Block/Toggle" :refer [Toggle]] ["/components/DnD/DndContext" :refer [DragAndDropContext]] ["/components/DnD/Droppable" :refer [Droppable]] ["/components/DnD/Sortable" :refer [Sortable]] - ["/components/Icons/Icons" :refer [ArrowRightOnBoxIcon PlusIcon]] + ["/components/Icons/Icons" :refer [ChevronDownVariableIcon GraphChildIcon ArrowRightOnBoxIcon PlusIcon]] ["/components/ModalInput/ModalInput" :refer [ModalInput]] ["/components/ModalInput/ModalInputPopover" :refer [ModalInputPopover]] ["/components/ModalInput/ModalInputTrigger" :refer [ModalInputTrigger]] @@ -67,6 +68,8 @@ _page (get entity ":task/page") due-date (get entity ":task/due-date") + is-collapsed? false + assignee-value (shared/parse-for-title assignee) status-uid (shared/parse-for-uid status) status-value (common-db/get-block-string @db/dsdb status-uid) @@ -75,7 +78,7 @@ parent-uid (:block/uid (common-db/get-parent @db/dsdb [:block/uid uid]))] [:<> - (if is-root + (if (and is-root title) [:> Grid {:templateColumns "3fr 1fr 1fr 1fr 1fr" :mt 2 :textAlign "start"} @@ -89,12 +92,21 @@ :textAlign "start" :borderTop "1px solid" :borderColor "separator.border" - :_hover {:bg "interaction.surface.hover" - :borderRadius "sm"}} - [:> Flex {:alignSelf "inline-flex" :align "center" :gap 0.5 :size "sm" :ml 1 :pl (str (* 1 indent) "em")} - (when status-value [:> Taskbox {:status status-value}]) - [:> Text {:pl 1 - :color (if is-root "foreground.secondary" "foreground.primary")} title]] + :_hover {:bg "interaction.surface.hover"}} + [:> Flex {:alignSelf "inline-flex" :align "center" :gap 1 :ml 1 :pl (str (* 1 indent) "em")} + [:> IconButton {:size "xs" :variant "ghost" :colorScheme "subtle"} + [:> ChevronDownVariableIcon {:sx {:path {:strokeWidth "1.5px"}} + :transform (if is-collapsed? "rotate(-90deg)" "")}]] + [:> Flex {:alignSelf "inline-flex" :align "center" :gap 0.5} + (when status-value [:> Taskbox {:status status-value}]) + [:> Text {:pl 1 + :as "span" + :color (if is-root "foreground.secondary" "foreground.primary")} title]] + (when (seq children) + [:> HStack {:spacing 0 :color "foreground.tertiary"} + [:> GraphChildIcon] + (prn children) + [:> Text {:as "span"} (count children)]])] [:> Text {:alignSelf "stretch" :size "md"} status-value] [:> Text {:alignSelf "stretch" :size "md"} priority-value] [:> Text {:alignSelf "stretch" :size "md"} assignee-value] @@ -102,7 +114,7 @@ [:<> (for [[uid children] children] ^{:key uid} - [render-entity uid children (if is-root 0 (inc indent)) false])]])) + [render-entity uid children (if is-root -1 (inc indent)) false])]])) (defn QueryTableV2 diff --git a/src/js/components/Icons/Icons.tsx b/src/js/components/Icons/Icons.tsx index ab64f843d5..d1f09f8511 100644 --- a/src/js/components/Icons/Icons.tsx +++ b/src/js/components/Icons/Icons.tsx @@ -734,4 +734,12 @@ export const EditIcon = createIcon({ path: ( ), +}) + +export const GraphChildIcon = createIcon({ + displayName: 'GraphChildIcon', + viewBox: '0 0 14 14', + path: ( + + ), }) \ No newline at end of file From 5392db04cf33e7794854f1090b19c14eb54853db Mon Sep 17 00:00:00 2001 From: Stuart Hanberg Date: Thu, 1 Sep 2022 22:04:22 -0400 Subject: [PATCH 6/6] feat: more goodies in query table --- src/cljs/athens/types/query/table.cljs | 71 +++++++++++++++---- .../ModalInput/ModalInputAnchor.tsx | 10 +++ src/js/theme/theme.js | 2 +- 3 files changed, 67 insertions(+), 16 deletions(-) create mode 100644 src/js/components/ModalInput/ModalInputAnchor.tsx diff --git a/src/cljs/athens/types/query/table.cljs b/src/cljs/athens/types/query/table.cljs index 9a5fb097c1..7a8f90b9ba 100644 --- a/src/cljs/athens/types/query/table.cljs +++ b/src/cljs/athens/types/query/table.cljs @@ -7,10 +7,11 @@ ["/components/DnD/DndContext" :refer [DragAndDropContext]] ["/components/DnD/Droppable" :refer [Droppable]] ["/components/DnD/Sortable" :refer [Sortable]] - ["/components/Icons/Icons" :refer [ChevronDownVariableIcon GraphChildIcon ArrowRightOnBoxIcon PlusIcon]] + ["/components/Icons/Icons" :refer [ChevronDownVariableIcon PencilIcon GraphChildIcon ArrowRightOnBoxIcon PlusIcon]] ["/components/ModalInput/ModalInput" :refer [ModalInput]] ["/components/ModalInput/ModalInputPopover" :refer [ModalInputPopover]] ["/components/ModalInput/ModalInputTrigger" :refer [ModalInputTrigger]] + ["/components/ModalInput/ModalInputAnchor" :refer [ModalInputAnchor]] ["/components/Query/KanbanBoard" :refer [KanbanBoard KanbanCard KanbanSwimlane @@ -23,6 +24,7 @@ HStack Grid Heading + Input ButtonGroup Flex VStack @@ -68,6 +70,7 @@ _page (get entity ":task/page") due-date (get entity ":task/due-date") + ;; forwhen we can collapse items is-collapsed? false assignee-value (shared/parse-for-title assignee) @@ -80,7 +83,7 @@ [:<> (if (and is-root title) [:> Grid {:templateColumns "3fr 1fr 1fr 1fr 1fr" - :mt 2 + :mt 4 :textAlign "start"} [:> Text {:pl 1 :color "foreground.secondary"} title] @@ -93,20 +96,58 @@ :borderTop "1px solid" :borderColor "separator.border" :_hover {:bg "interaction.surface.hover"}} - [:> Flex {:alignSelf "inline-flex" :align "center" :gap 1 :ml 1 :pl (str (* 1 indent) "em")} - [:> IconButton {:size "xs" :variant "ghost" :colorScheme "subtle"} + + [:> Flex {:position "sticky" + :left 0 + :alignSelf "inline-flex" + :align "center" + :gap 1 + :ml 1 + :pr 1 + :pl (str (* 1 indent) "em")} + + [:> IconButton {:size "xs" + :variant "ghost" + :colorScheme "subtle" + ;; GIVE ME ONCLICK EVENT + ;; :onClick toggle this block + } [:> ChevronDownVariableIcon {:sx {:path {:strokeWidth "1.5px"}} + :boxSize 3 :transform (if is-collapsed? "rotate(-90deg)" "")}]] - [:> Flex {:alignSelf "inline-flex" :align "center" :gap 0.5} - (when status-value [:> Taskbox {:status status-value}]) - [:> Text {:pl 1 - :as "span" - :color (if is-root "foreground.secondary" "foreground.primary")} title]] - (when (seq children) - [:> HStack {:spacing 0 :color "foreground.tertiary"} - [:> GraphChildIcon] - (prn children) - [:> Text {:as "span"} (count children)]])] + [:> ModalInput {:placement "right-start" + :autoFocus true} + [:> ModalInputAnchor + [:> Flex {:alignSelf "inline-flex" + :flex "1 1 100%" + :align "center" + :gap 0.5} + (when status-value + [:> Taskbox {:status status-value}]) + [:> Text {:pl 1 + :as "span" + :color (if is-root "foreground.secondary" "foreground.primary")} title] + (when (seq children) + [:> HStack {:spacing 0 + :color "foreground.tertiary"} + [:> GraphChildIcon] + [:> Text {:as "span"} (count children)]])]] + [:> ModalInputTrigger + [:> IconButton {:size "sm" + :variant "ghost" + :colorScheme "subtle" + :icon (r/as-element [:> PencilIcon])}]] + [:> ModalInputPopover {:popoverContentProps {:mx "-5px" :my "-1px"}} + [:> Flex {:align "center" + :gap 0.5} + (when status-value + [:> Taskbox {:status status-value + :mx 1 :my "auto"}]) + [:> BlockFormInput {:variant "unstyled" + :flex "1 1 100%" + :size "md"} + ;; REPLACE ME WITH EDITOR + title]]]]] [:> Text {:alignSelf "stretch" :size "md"} status-value] [:> Text {:alignSelf "stretch" :size "md"} priority-value] [:> Text {:alignSelf "stretch" :size "md"} assignee-value] @@ -114,7 +155,7 @@ [:<> (for [[uid children] children] ^{:key uid} - [render-entity uid children (if is-root -1 (inc indent)) false])]])) + [render-entity uid children (if is-root 0 (inc indent)) false])]])) (defn QueryTableV2 diff --git a/src/js/components/ModalInput/ModalInputAnchor.tsx b/src/js/components/ModalInput/ModalInputAnchor.tsx new file mode 100644 index 0000000000..07f24b9524 --- /dev/null +++ b/src/js/components/ModalInput/ModalInputAnchor.tsx @@ -0,0 +1,10 @@ +import { PopoverAnchor } from "@chakra-ui/react"; +import React from "react"; + +/** + * ModalInputAnchor + * The trigger for the ModalInput component. + * @param {React.ReactChild} + * @returns {React.ReactNode} + */ +export const ModalInputAnchor = ({ children }) => {children}; diff --git a/src/js/theme/theme.js b/src/js/theme/theme.js index 1d37d58173..8b6e410f8e 100644 --- a/src/js/theme/theme.js +++ b/src/js/theme/theme.js @@ -535,7 +535,7 @@ const components = { baseStyle: { content: { bg: "background.upper", - border: "unset", + // border: "unset", shadow: "popover", _focus: { outline: 'none',