Skip to content

Commit

Permalink
feat: Athena power search bar (athensresearch#128)
Browse files Browse the repository at this point in the history 
* feat: Athena power search bar

- uses re-frame with devcards
- still don't have a good solution for colors/opacities

* fix: simplify logic in query
  • Loading branch information
@tangjeff0
tangjeff0 committed Jun 6, 2020
1 parent 3cb8124 commit 6e33d82
Show file tree
Hide file tree
Showing 7 changed files with 88 additions and 56 deletions.
3 changes: 2 additions & 1 deletion src/cljs/athens/db.cljs
View file
Expand Up @@ -86,7 +86,8 @@
(defonce rfdb {:user "Jeff"
:current-route nil
:loading true
:errors {}})
:errors {}
:athena false})


(defonce dsdb (d/create-conn schema))
Expand Down
113 changes: 59 additions & 54 deletions src/cljs/athens/devcards/athena.cljs
View file
@@ -1,21 +1,35 @@
(ns athens.devcards.athena
(:require
[athens.db]
[athens.devcards.db :refer [new-conn posh-conn! load-real-db-button]]
[athens.events]
[athens.lib.dom.attributes :refer [with-attributes with-styles]]
[athens.router :refer [navigate-page]]
[athens.style :refer [style-guide-css +flex-space-between]]
[athens.style :refer [style-guide-css +flex-space-between +depth-64]]
[athens.subs]
[cljsjs.react]
[cljsjs.react.dom]
[datascript.core :as d]
[devcards.core :refer-macros [defcard-rg]]
[re-frame.core :refer [subscribe dispatch]]
[reagent.core :as r]))


(defcard-rg Import-Styles
[style-guide-css])


(defcard-rg Instantiate-app-db
"Using re-frame, even though DevCards </3 re-frame. Not using re-frame elsewhere for subs, but will probably
need refactoring or real isolation later.
- https://github.com/athensresearch/athens/issues/126
- https://github.com/bhauman/devcards/issues/105
- https://github.com/bhauman/devcards/pull/131/
")


(dispatch [:init-rfdb])

(defcard-rg Instantiate-Dsdb)
(defonce conn (new-conn))
(posh-conn! conn)
Expand All @@ -25,24 +39,24 @@
[]
(let [n (inc (:max-eid @conn))
n-child (inc n)]
(d/transact! conn [{:node/title (str "Machine Page " n)
(d/transact! conn [{:node/title (str "Test Page " n)
:block/uid (str "uid-" n)
:block/children [{:block/string (str "Machine Block" n-child) :block/uid (str "uid-" n-child)}]}])))
:block/children [{:block/string (str "Test Block" n-child) :block/uid (str "uid-" n-child)}]}])))


(defcard-rg Create-Page
"Page title increments by more than one each time because we create multiple entities (the child blocks)."
[:button.primary {:on-click handler} "Create Page"])
"Press button and then search \"test\" "
[:button.primary {:on-click handler} "Create Test Pages and Blocks"])


(defcard-rg Load-Real-DB
[load-real-db-button conn])


(defn athena-prompt
[open?]
[]
[:button.primary (with-attributes (with-styles {:padding 0})
{:on-click #(swap! open? not)})
{:on-click #(dispatch [:toggle-athena])})
[:div (with-styles {:display "inline-block" :padding "6px 0 6px 8px"})
"🔍"]
[:div (with-styles {:display "inline-block" :font-weight "normal" :padding "6px 16px" :color "#322F38"})
Expand Down Expand Up @@ -97,24 +111,17 @@
part))
(clojure.string/split txt query-pattern))))

;;(highlight-match query (or string title))

(def log js/console.log)


(def +query
(with-styles {:background-color "white"
:position "absolute"
:z-index 99
:top "100%"
:left 0
:right 0
:overflow-y "auto"
:max-height "500px"}))


(def +depth-64
(with-styles {:box-shadow "0px 24px 60px rgba(0, 0, 0, 0.15), 0px 5px 12px rgba(0, 0, 0, 0.1)"}))
(with-styles +depth-64
{:background-color "white"
:position "absolute"
:z-index 99
:top "100%"
:left 0
:right 0
:overflow-y "auto"
:max-height "500px"}))


(def +athena-input
Expand All @@ -125,14 +132,13 @@
:line-height "49px"
:letter-spacing "-0.03em"
:color "#433F38"
;;:background-color "white"
:padding "25px 0 25px 35px"
:cursor "text"}))


(defn recent
[]
[:div (with-styles {:padding "0px 18px 0px 32px" :background-color "white"} +flex-space-between)
[:div (with-styles +flex-space-between {:padding "0px 18px 0px 32px" :background-color "white" :border-top "1px solid rgba(67, 63, 56, .5)"})
[:h5 "Recent"]
[:div
[:span "Press "]
Expand All @@ -142,38 +148,41 @@
"shift + enter"]
[:span " to open in right sidebar."]]])


(def +container
(with-styles +depth-64
{:width "784px"
:border-radius "4px"
:display "inline-block"
:position "fixed"
:top "50%"
:left "50%"
:transform "translate(-50%, -50%)"}))
{:width "784px"
:border-radius "4px"
:display "inline-block"
:position "fixed"
:top "30%"
:left "50%"
:transform "translate(-50%, -50%)"
:z-index 2}))


(defn athena
[open?]
[conn]
(let [*cache (r/atom {})
*match (r/atom nil)
db (d/db conn)
athena? (subscribe [:athena])
handler (fn [e]
(let [query (.. e -target -value)]
(let [result (when-not (clojure.string/blank? query)
(or (get @*cache query)
(let [db (d/db conn)
result (cond-> {:pages (search-in-block-title db query)}
(count query)
(assoc :blocks (search-in-block-content db query)))]
(swap! *cache assoc query result)
result)))]
(reset! *match [query result]))))]
(when @open?
(if (clojure.string/blank? query)
(reset! *match [query nil])
(let [result (or (get @*cache query)
(cond-> {:pages (search-in-block-title db query)}
(count query) (assoc :blocks (search-in-block-content db query))))]
(swap! *cache assoc query result)
(reset! *match [query result])))))]
(when @athena?
[:div +container
[:div {:style {:box-shadow "inset 0px -1px 0px rgba(0, 0, 0, 0.1)"}}
[:input (with-attributes +athena-input
{:type "search"
:placeholder "Find or Create Page",
:on-change handler})]]
{:type "search"
:placeholder "Find or Create Page",
:on-change handler})]]
[recent]
[(fn []
(let [[query {:keys [pages blocks] :as result}] @*match]
Expand All @@ -192,12 +201,8 @@
[:h4 (with-styles {:margin-left "auto"}) "➡️"]]))])))]])))


;;(defcard-rg Athena
;; [athena])

(def open? (r/atom false))

(defcard-rg Athena-Prompt
"Must press again to close. Doesn't go away if you click outside."
[:<>
[athena-prompt open?]
[athena open?]])
[athena-prompt]
[athena conn]])
3 changes: 2 additions & 1 deletion src/cljs/athens/devcards/left_sidebar.cljs
View file
Expand Up @@ -9,6 +9,7 @@
[cljsjs.react.dom]
[devcards.core :refer [defcard-rg]]
[posh.reagent :refer [q transact!]]
[re-frame.core :as re-frame :refer [dispatch]]
[reagent.core :as r]))


Expand Down Expand Up @@ -78,7 +79,7 @@
;; IF COLLAPSED
[:div +left-sidebar-collapsed
[:button {:on-click #(swap! open? not)} ">"]
[:button.primary "🔍"]
[:button.primary {:on-click #(dispatch [:toggle-athena])} "🔍"]
[:div (with-styles {:margin-top "auto"} +flex-column)
[:button (with-attributes (with-styles {:margin-bottom "5px"})
{:disabled true}) "🅰"]
Expand Down
6 changes: 6 additions & 0 deletions src/cljs/athens/events.cljs
View file
Expand Up @@ -18,6 +18,12 @@
db/rfdb))


(reg-event-db
:toggle-athena
(fn [db _]
(assoc db :athena (not (:athena db)))))


(reg-fx
:http
(fn [{:keys [url method opts on-success on-failure]}]
Expand Down
5 changes: 5 additions & 0 deletions src/cljs/athens/style.cljs
View file
Expand Up @@ -45,6 +45,11 @@
(def +box-shadow
(with-styles {:box-shadow "0px 8px 20px rgba(0, 0, 0, 0.1)"}))


(def +depth-64
(with-styles {:box-shadow "0px 24px 60px rgba(0, 0, 0, 0.15), 0px 5px 12px rgba(0, 0, 0, 0.1)"}))


;; Flex Functions


Expand Down
12 changes: 12 additions & 0 deletions src/cljs/athens/subs.cljs
View file
Expand Up @@ -14,6 +14,12 @@
(:user db)))


(re-frame/reg-sub
:app-db
(fn [db _]
db))


(re-frame/reg-sub
:errors
(fn [db _]
Expand All @@ -26,6 +32,12 @@
(:loading db)))


(re-frame/reg-sub
:athena
(fn [db _]
(:athena db)))


(re-frame/reg-sub
:merge-prompt
(fn [db _]
Expand Down
2 changes: 2 additions & 0 deletions src/cljs/athens/views.cljs
View file
Expand Up @@ -2,6 +2,7 @@
(:require
[athens.db :as db]
[athens.devcards.all-pages :refer [table]]
[athens.devcards.athena :refer [athena]]
[athens.devcards.left-sidebar :refer [left-sidebar]]
[athens.lib.dom.attributes :refer [with-styles]]
[athens.page :as page]
Expand Down Expand Up @@ -63,6 +64,7 @@
[:<>
[style/style-guide-css]
[alert]
[athena db/dsdb]
(if @loading
[:h1 "Loading Athens 😈"]
[:div style/+flex
Expand Down

0 comments on commit 6e33d82

Please sign in to comment.