From bf81c09d832b7409b5dd9cc28d1878e5960d87db Mon Sep 17 00:00:00 2001 From: Stuart Hanberg Date: Mon, 8 Aug 2022 19:44:39 -0400 Subject: [PATCH 1/4] feat: basic updated reaction --- src/cljs/athens/views/blocks/editor.cljs | 17 +---- src/cljs/athens/views/blocks/reactions.cljs | 41 +++++++++- .../athens/views/blocks/types/default.cljs | 74 +++++++++---------- src/js/theme/theme.js | 3 +- 4 files changed, 76 insertions(+), 59 deletions(-) diff --git a/src/cljs/athens/views/blocks/editor.cljs b/src/cljs/athens/views/blocks/editor.cljs index 494fe88cb6..2dc9582aca 100644 --- a/src/cljs/athens/views/blocks/editor.cljs +++ b/src/cljs/athens/views/blocks/editor.cljs @@ -4,9 +4,8 @@ ["/components/Block/PropertyName" :refer [PropertyName]] ["/components/Block/Reactions" :refer [Reactions]] ["/components/Block/Toggle" :refer [Toggle]] - ["/components/EmojiPicker/EmojiPicker" :refer [EmojiPickerPopoverContent]] ["/components/References/InlineReferences" :refer [ReferenceGroup ReferenceBlock]] - ["@chakra-ui/react" :refer [VStack PopoverAnchor Popover Button Breadcrumb BreadcrumbItem BreadcrumbLink HStack]] + ["@chakra-ui/react" :refer [VStack Button Breadcrumb BreadcrumbItem BreadcrumbLink HStack]] [athens.common-db :as common-db] [athens.db :as db] [athens.events.inline-refs :as inline-refs.events] @@ -153,7 +152,7 @@ (defn editor-component - [block-el block-o children? linked-ref-data uid-sanitized-block state-hooks opts menu show-emoji-picker? hide-emoji-picker-fn] + [block-el block-o children? linked-ref-data uid-sanitized-block state-hooks opts menu] (let [{:keys [linked-ref parent-uids]} linked-ref-data uid (:block/uid block-o) @@ -205,12 +204,6 @@ (router/navigate-page (:node/title key) e)))}]) - [:> Popover {:isOpen @show-emoji-picker? - :placement "bottom-end" - :onOpen #(js/console.log "tried to open") - :onClose hide-emoji-picker-fn} - - [:> PopoverAnchor [:> Anchor {:isClosedWithChildren (when (and (seq children) (or (and (true? linked-ref) (not @linked-ref-open?)) (and (false? linked-ref) (not open)))) @@ -228,11 +221,7 @@ (router/navigate-uid uid e))) :on-drag-start (fn [e] (bullet-drag-start e uid)) :on-drag-end (fn [e] (bullet-drag-end e uid)) - :unreadNotification (actions/unread-notification? properties)}]] - (when reactions-enabled? - [:> EmojiPickerPopoverContent - {:onClose hide-emoji-picker-fn - :onEmojiSelected (fn [e] (toggle-reaction [:block/uid uid] (.. e -detail -unicode) user-id))}])] + :unreadNotification (actions/unread-notification? properties)}] diff --git a/src/cljs/athens/views/blocks/reactions.cljs b/src/cljs/athens/views/blocks/reactions.cljs index 5e657a7040..5585e14e0f 100644 --- a/src/cljs/athens/views/blocks/reactions.cljs +++ b/src/cljs/athens/views/blocks/reactions.cljs @@ -1,9 +1,20 @@ (ns athens.views.blocks.reactions (:require - [athens.common-db :as common-db] - [athens.common-events.graph.ops :as graph-ops] - [athens.db :as db] - [re-frame.core :as rf])) + ["@chakra-ui/react" :refer [Box + Tooltip + VStack + HStack + MenuItem + MenuGroup + Text]] + [athens.common-db :as common-db] + [athens.common-events.graph.ops :as graph-ops] + [athens.db :as db] + [re-frame.core :as rf] + [reagent.core :as r])) + + +(def common-reactions ["❤️" "💔" "😐" "😕" "😡"]) (defn toggle-reaction @@ -43,6 +54,11 @@ (graph-ops/build-block-remove-op @db/dsdb user-reaction-uid))]))])) + + + + + (defn props->reactions [props] (->> (get props ":reactions") @@ -57,3 +73,20 @@ (sort-by first) (into []))) + + +(defn reactions-menu-list-item + [props] + (let [{:keys [icon fn command]} props] + [:> Box {:display "inline-flex" :flex 1} + [:> Tooltip {:label (r/as-element [:> VStack {:align "center"} + [:> Text "React with '" icon "'"] + (when command [:> Text command])])} + [:> MenuItem {:justifyContent "center" :on-click fn} icon]]])) + + (defn reactions-menu-list + [uid user-id] + [:> MenuGroup {:title "Add reaction"} + [:> HStack {:spacing 0 :justifyContent "stretch"} + (for [reaction-icon common-reactions] + [reactions-menu-list-item {:icon reaction-icon :fn (toggle-reaction uid reaction-icon user-id)}])]]) \ No newline at end of file diff --git a/src/cljs/athens/views/blocks/types/default.cljs b/src/cljs/athens/views/blocks/types/default.cljs index 7204857ee9..91513f22c9 100644 --- a/src/cljs/athens/views/blocks/types/default.cljs +++ b/src/cljs/athens/views/blocks/types/default.cljs @@ -2,36 +2,37 @@ "Default Block Type Renderer. A.k.a standard `:block/string` blocks" (:require - ["/components/Block/Container" :refer [Container]] - ["/components/Icons/Icons" :refer [PencilIcon BlockEmbedIcon TextIcon ChatIcon ThumbUpFillIcon ArchiveIcon]] - ["@chakra-ui/react" :refer [Box Button ButtonGroup IconButton MenuList MenuItem Divider]] - [athens.common.logging :as log] - [athens.db :as db] - [athens.electron.images :as images] - [athens.electron.utils :as electron.utils] - [athens.events.dragging :as drag.events] - [athens.events.inline-refs :as inline-refs.events] - [athens.events.linked-refs :as linked-ref.events] - [athens.events.selection :as select-events] - [athens.parse-renderer :as parser] - [athens.reactive :as reactive] - [athens.router :as router] - [athens.subs.dragging :as drag.subs] - [athens.subs.selection :as select-subs] - [athens.time-controls :as time-controls] - [athens.util :as util] - [athens.views.blocks.context-menu :as ctx-menu] - [athens.views.blocks.drop-area-indicator :as drop-area-indicator] - [athens.views.blocks.editor :as editor] - [athens.views.blocks.types :as types] - [athens.views.blocks.types.dispatcher :as dispatcher] - [athens.views.notifications.actions :as actions] - [clojure.string :as str] - [com.rpl.specter :as s] - [goog.functions :as gfns] - [re-frame.core :as rf] - [reagent.core :as r] - [reagent.ratom :as ratom])) + ["/components/Block/Container" :refer [Container]] + ["/components/Icons/Icons" :refer [PencilIcon BlockEmbedIcon TextIcon ChatIcon ArchiveIcon]] + ["@chakra-ui/react" :refer [Box Button ButtonGroup IconButton MenuList MenuItem MenuDivider Divider]] + [athens.common.logging :as log] + [athens.db :as db] + [athens.electron.images :as images] + [athens.electron.utils :as electron.utils] + [athens.events.dragging :as drag.events] + [athens.events.inline-refs :as inline-refs.events] + [athens.events.linked-refs :as linked-ref.events] + [athens.events.selection :as select-events] + [athens.parse-renderer :as parser] + [athens.reactive :as reactive] + [athens.router :as router] + [athens.subs.dragging :as drag.subs] + [athens.subs.selection :as select-subs] + [athens.time-controls :as time-controls] + [athens.util :as util] + [athens.views.blocks.context-menu :as ctx-menu] + [athens.views.blocks.drop-area-indicator :as drop-area-indicator] + [athens.views.blocks.editor :as editor] + [athens.views.blocks.reactions :as reactions] + [athens.views.blocks.types :as types] + [athens.views.blocks.types.dispatcher :as dispatcher] + [athens.views.notifications.actions :as actions] + [clojure.string :as str] + [com.rpl.specter :as s] + [goog.functions :as gfns] + [re-frame.core :as rf] + [reagent.core :as r] + [reagent.ratom :as ratom])) (defn- block-breadcrumb-string @@ -287,9 +288,6 @@ reactions-enabled? (:reactions @feature-flags) comments-enabled? (:comments @feature-flags) notifications-enabled? (:notifications @feature-flags) - show-emoji-picker? (r/atom false) - hide-emoji-picker-fn #(reset! show-emoji-picker? false) - show-emoji-picker-fn #(reset! show-emoji-picker? true) menu (r/as-element [:> MenuList [:> MenuItem {:children (if (> (count @selected-items) 1) @@ -306,9 +304,9 @@ :onClick #(ctx-menu/handle-click-comment % uid) :icon (r/as-element [:> ChatIcon])}]) (when reactions-enabled? - [:> MenuItem {:children "Add reaction" - :onClick show-emoji-picker-fn - :icon (r/as-element [:> ThumbUpFillIcon])}]) + [:<> + [:> MenuDivider] + [reactions/reactions-menu-list uid "Stuart"]]) (when (and notifications-enabled? (actions/is-block-inbox? properties)) [:<> @@ -369,9 +367,7 @@ uid-sanitized-block state-hooks opts - menu - show-emoji-picker? - hide-emoji-picker-fn] + menu] (when (= @drag-target :first) [drop-area-indicator/drop-area-indicator {:placement "below" :child? true}]) (when (= @drag-target :after) [drop-area-indicator/drop-area-indicator {:placement "below"}])]))}))) diff --git a/src/js/theme/theme.js b/src/js/theme/theme.js index 000d483d3e..0c481a9c68 100644 --- a/src/js/theme/theme.js +++ b/src/js/theme/theme.js @@ -449,9 +449,8 @@ const components = { }, groupTitle: { color: "foreground.secondary", - textTransform: "uppercase", fontSize: "0.75em", - fontWeight: "bold", + fontWeight: "700", }, item: { "&.isActive": { From ee9d35be596bebc05345ee10570ca75429e68398 Mon Sep 17 00:00:00 2001 From: Stuart Hanberg Date: Mon, 8 Aug 2022 19:44:59 -0400 Subject: [PATCH 2/4] chore: lint --- src/cljs/athens/views/blocks/editor.cljs | 36 +++++------ src/cljs/athens/views/blocks/reactions.cljs | 43 ++++++------- .../athens/views/blocks/types/default.cljs | 64 +++++++++---------- 3 files changed, 69 insertions(+), 74 deletions(-) diff --git a/src/cljs/athens/views/blocks/editor.cljs b/src/cljs/athens/views/blocks/editor.cljs index 2dc9582aca..17e7856500 100644 --- a/src/cljs/athens/views/blocks/editor.cljs +++ b/src/cljs/athens/views/blocks/editor.cljs @@ -204,24 +204,24 @@ (router/navigate-page (:node/title key) e)))}]) - [:> Anchor {:isClosedWithChildren (when (and (seq children) - (or (and (true? linked-ref) (not @linked-ref-open?)) - (and (false? linked-ref) (not open)))) - "closed-with-children") - :uidSanitizedBlock uid-sanitized-block - :shouldShowDebugDetails (util/re-frame-10x-open?) - :menu menu - :onClick (fn [e] - (let [shift? (.-shiftKey e)] - (rf/dispatch [:reporting/navigation {:source :block-bullet - :target :block - :pane (if shift? - :right-pane - :main-pane)}]) - (router/navigate-uid uid e))) - :on-drag-start (fn [e] (bullet-drag-start e uid)) - :on-drag-end (fn [e] (bullet-drag-end e uid)) - :unreadNotification (actions/unread-notification? properties)}] + [:> Anchor {:isClosedWithChildren (when (and (seq children) + (or (and (true? linked-ref) (not @linked-ref-open?)) + (and (false? linked-ref) (not open)))) + "closed-with-children") + :uidSanitizedBlock uid-sanitized-block + :shouldShowDebugDetails (util/re-frame-10x-open?) + :menu menu + :onClick (fn [e] + (let [shift? (.-shiftKey e)] + (rf/dispatch [:reporting/navigation {:source :block-bullet + :target :block + :pane (if shift? + :right-pane + :main-pane)}]) + (router/navigate-uid uid e))) + :on-drag-start (fn [e] (bullet-drag-start e uid)) + :on-drag-end (fn [e] (bullet-drag-end e uid)) + :unreadNotification (actions/unread-notification? properties)}] diff --git a/src/cljs/athens/views/blocks/reactions.cljs b/src/cljs/athens/views/blocks/reactions.cljs index 5585e14e0f..557d180bed 100644 --- a/src/cljs/athens/views/blocks/reactions.cljs +++ b/src/cljs/athens/views/blocks/reactions.cljs @@ -1,17 +1,17 @@ (ns athens.views.blocks.reactions (:require - ["@chakra-ui/react" :refer [Box - Tooltip - VStack - HStack - MenuItem - MenuGroup - Text]] - [athens.common-db :as common-db] - [athens.common-events.graph.ops :as graph-ops] - [athens.db :as db] - [re-frame.core :as rf] - [reagent.core :as r])) + ["@chakra-ui/react" :refer [Box + Tooltip + VStack + HStack + MenuItem + MenuGroup + Text]] + [athens.common-db :as common-db] + [athens.common-events.graph.ops :as graph-ops] + [athens.db :as db] + [re-frame.core :as rf] + [reagent.core :as r])) (def common-reactions ["❤️" "💔" "😐" "😕" "😡"]) @@ -54,11 +54,6 @@ (graph-ops/build-block-remove-op @db/dsdb user-reaction-uid))]))])) - - - - - (defn props->reactions [props] (->> (get props ":reactions") @@ -74,7 +69,6 @@ (into []))) - (defn reactions-menu-list-item [props] (let [{:keys [icon fn command]} props] @@ -84,9 +78,10 @@ (when command [:> Text command])])} [:> MenuItem {:justifyContent "center" :on-click fn} icon]]])) - (defn reactions-menu-list - [uid user-id] - [:> MenuGroup {:title "Add reaction"} - [:> HStack {:spacing 0 :justifyContent "stretch"} - (for [reaction-icon common-reactions] - [reactions-menu-list-item {:icon reaction-icon :fn (toggle-reaction uid reaction-icon user-id)}])]]) \ No newline at end of file + +(defn reactions-menu-list + [uid user-id] + [:> MenuGroup {:title "Add reaction"} + [:> HStack {:spacing 0 :justifyContent "stretch"} + (for [reaction-icon common-reactions] + [reactions-menu-list-item {:icon reaction-icon :fn (toggle-reaction uid reaction-icon user-id)}])]]) diff --git a/src/cljs/athens/views/blocks/types/default.cljs b/src/cljs/athens/views/blocks/types/default.cljs index 91513f22c9..fca47b8750 100644 --- a/src/cljs/athens/views/blocks/types/default.cljs +++ b/src/cljs/athens/views/blocks/types/default.cljs @@ -2,37 +2,37 @@ "Default Block Type Renderer. A.k.a standard `:block/string` blocks" (:require - ["/components/Block/Container" :refer [Container]] - ["/components/Icons/Icons" :refer [PencilIcon BlockEmbedIcon TextIcon ChatIcon ArchiveIcon]] - ["@chakra-ui/react" :refer [Box Button ButtonGroup IconButton MenuList MenuItem MenuDivider Divider]] - [athens.common.logging :as log] - [athens.db :as db] - [athens.electron.images :as images] - [athens.electron.utils :as electron.utils] - [athens.events.dragging :as drag.events] - [athens.events.inline-refs :as inline-refs.events] - [athens.events.linked-refs :as linked-ref.events] - [athens.events.selection :as select-events] - [athens.parse-renderer :as parser] - [athens.reactive :as reactive] - [athens.router :as router] - [athens.subs.dragging :as drag.subs] - [athens.subs.selection :as select-subs] - [athens.time-controls :as time-controls] - [athens.util :as util] - [athens.views.blocks.context-menu :as ctx-menu] - [athens.views.blocks.drop-area-indicator :as drop-area-indicator] - [athens.views.blocks.editor :as editor] - [athens.views.blocks.reactions :as reactions] - [athens.views.blocks.types :as types] - [athens.views.blocks.types.dispatcher :as dispatcher] - [athens.views.notifications.actions :as actions] - [clojure.string :as str] - [com.rpl.specter :as s] - [goog.functions :as gfns] - [re-frame.core :as rf] - [reagent.core :as r] - [reagent.ratom :as ratom])) + ["/components/Block/Container" :refer [Container]] + ["/components/Icons/Icons" :refer [PencilIcon BlockEmbedIcon TextIcon ChatIcon ArchiveIcon]] + ["@chakra-ui/react" :refer [Box Button ButtonGroup IconButton MenuList MenuItem MenuDivider Divider]] + [athens.common.logging :as log] + [athens.db :as db] + [athens.electron.images :as images] + [athens.electron.utils :as electron.utils] + [athens.events.dragging :as drag.events] + [athens.events.inline-refs :as inline-refs.events] + [athens.events.linked-refs :as linked-ref.events] + [athens.events.selection :as select-events] + [athens.parse-renderer :as parser] + [athens.reactive :as reactive] + [athens.router :as router] + [athens.subs.dragging :as drag.subs] + [athens.subs.selection :as select-subs] + [athens.time-controls :as time-controls] + [athens.util :as util] + [athens.views.blocks.context-menu :as ctx-menu] + [athens.views.blocks.drop-area-indicator :as drop-area-indicator] + [athens.views.blocks.editor :as editor] + [athens.views.blocks.reactions :as reactions] + [athens.views.blocks.types :as types] + [athens.views.blocks.types.dispatcher :as dispatcher] + [athens.views.notifications.actions :as actions] + [clojure.string :as str] + [com.rpl.specter :as s] + [goog.functions :as gfns] + [re-frame.core :as rf] + [reagent.core :as r] + [reagent.ratom :as ratom])) (defn- block-breadcrumb-string @@ -305,7 +305,7 @@ :icon (r/as-element [:> ChatIcon])}]) (when reactions-enabled? [:<> - [:> MenuDivider] + [:> MenuDivider] [reactions/reactions-menu-list uid "Stuart"]]) (when (and notifications-enabled? (actions/is-block-inbox? properties)) From bce03e656f2b0eb013ca6ad014719c3d62806658 Mon Sep 17 00:00:00 2001 From: Stuart Hanberg Date: Mon, 8 Aug 2022 21:20:06 -0400 Subject: [PATCH 3/4] chore: fix lint --- src/cljs/athens/views/blocks/types/default.cljs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/cljs/athens/views/blocks/types/default.cljs b/src/cljs/athens/views/blocks/types/default.cljs index 01bf8b889f..b4458e0240 100644 --- a/src/cljs/athens/views/blocks/types/default.cljs +++ b/src/cljs/athens/views/blocks/types/default.cljs @@ -4,7 +4,7 @@ (:require ["/components/Block/Container" :refer [Container]] ["/components/Icons/Icons" :refer [PencilIcon BlockEmbedIcon TextIcon ChatIcon ArchiveIcon]] - ["@chakra-ui/react" :refer [Box Button ButtonGroup IconButton MenuList MenuItem Divider]] + ["@chakra-ui/react" :refer [Box Button ButtonGroup IconButton MenuDivider MenuList MenuItem Divider]] [athens.common-db :as common-db] [athens.common.logging :as log] [athens.db :as db] From ea38f5b1cc02069ca6690d26d994f3c618fd04d6 Mon Sep 17 00:00:00 2001 From: Stuart Hanberg Date: Wed, 10 Aug 2022 18:38:54 -0400 Subject: [PATCH 4/4] fix: no error from tooltip in menu --- src/cljs/athens/views/blocks/reactions.cljs | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/cljs/athens/views/blocks/reactions.cljs b/src/cljs/athens/views/blocks/reactions.cljs index 00204afaca..8f83fca60e 100644 --- a/src/cljs/athens/views/blocks/reactions.cljs +++ b/src/cljs/athens/views/blocks/reactions.cljs @@ -73,10 +73,11 @@ [props] (let [{:keys [icon fn command]} props] [:> Box {:display "inline-flex" :flex 1} - [:> Tooltip {:label (r/as-element [:> VStack {:align "center"} + [:> Tooltip {:closeOnMouseDown true + :label (r/as-element [:> VStack {:align "center"} [:> Text "React with '" icon "'"] (when command [:> Text command])])} - [:> MenuItem {:justifyContent "center" :on-click fn} icon]]])) + [:> MenuItem {:justifyContent "center" :on-click #(fn)} icon]]])) (defn reactions-menu-list