Skip to content

Commit

Permalink
feat: add block preview
Browse files Browse the repository at this point in the history 
use tippy for tooltip
  • Loading branch information
@tiensonqin
tiensonqin committed May 12, 2021
1 parent 0fee13b commit 82ddd4c
Show file tree
Hide file tree
Showing 8 changed files with 213 additions and 169 deletions.
6 changes: 4 additions & 2 deletions package.json
View file
Expand Up @@ -60,6 +60,7 @@
"dependencies": {
"@excalidraw/excalidraw": "^0.4.2",
"@kanru/rage-wasm": "^0.2.1",
"@tippyjs/react": "^4.2.5",
"chokidar": "^3.5.1",
"chrono-node": "^2.2.1",
"codemirror": "^5.58.1",
Expand All @@ -75,10 +76,11 @@
"jszip": "^3.5.0",
"mldoc": "0.6.16",
"path": "^0.12.7",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-resize-context": "^3.0.0",
"react-textarea-autosize": "^8.0.1",
"react-tippy": "^1.4.0",
"react-transition-group": "^4.3.0",
"url": "^0.11.0",
"yargs-parser": "^20.2.4"
Expand Down
17 changes: 1 addition & 16 deletions resources/css/tooltip.css
View file

Large diffs are not rendered by default.

114 changes: 67 additions & 47 deletions src/main/frontend/components/block.cljs
View file
Expand Up @@ -330,6 +330,39 @@

(declare page-reference)

(rum/defc page-inner
[config page-name href redirect-page-name page-entity contents-page? children html-export? label]
[:a.page-ref
{:data-ref page-name
:href href
:on-click (fn [e]
(util/stop e)
(if (gobj/get e "shiftKey")
(when-let [page-entity (db/entity [:block/name redirect-page-name])]
(state/sidebar-add-block!
(state/get-current-repo)
(:db/id page-entity)
:page
{:page page-entity}))
(route-handler/redirect! {:to :page
:path-params {:name redirect-page-name}}))
(when (and contents-page?
(state/get-left-sidebar-open?))
(ui-handler/close-left-sidebar!)))}

(if (seq children)
(for [child children]
(if (= (first child) "Label")
(last child)
(let [{:keys [content children]} (last child)
page-name (subs content 2 (- (count content) 2))]
(page-reference html-export? page-name (assoc config :children children) nil))))
(if (and label
(string? label)
(not (string/blank? label))) ; alias
label
(get page-entity :block/original-name page-name)))])

(rum/defc page-cp
[{:keys [html-export? label children contents-page?] :as config} page]
(when-let [page-name (:block/name page)]
Expand All @@ -349,37 +382,14 @@
page)
href (if html-export?
(util/encode-str page)
(rfe/href :page {:name redirect-page-name}))]
[:a.page-ref
{:data-ref page-name
:href href
:on-click (fn [e]
(util/stop e)
(if (gobj/get e "shiftKey")
(when-let [page-entity (db/entity [:block/name redirect-page-name])]
(state/sidebar-add-block!
(state/get-current-repo)
(:db/id page-entity)
:page
{:page page-entity}))
(route-handler/redirect! {:to :page
:path-params {:name redirect-page-name}}))
(when (and contents-page?
(state/get-left-sidebar-open?))
(ui-handler/close-left-sidebar!)))}

(if (seq children)
(for [child children]
(if (= (first child) "Label")
(last child)
(let [{:keys [content children]} (last child)
page-name (subs content 2 (- (count content) 2))]
(page-reference html-export? page-name (assoc config :children children) nil))))
(if (and label
(string? label)
(not (string/blank? label))) ; alias
label
(get page-entity :block/original-name page-name)))])))
(rfe/href :page {:name redirect-page-name}))
inner (page-inner config page-name href redirect-page-name page-entity contents-page? children html-export? label)]
inner
;; (ui/tippy
;; {:interactive true
;; :html (page-preview page-name)}
;; inner)
)))

(rum/defc asset-reference
[title path]
Expand Down Expand Up @@ -496,6 +506,7 @@
(util/format "{{{%s}}}" name)))

(declare block-content)
(declare block-container)
(rum/defc block-reference < rum/reactive
[config id label]
(when-not (string/blank? id)
Expand Down Expand Up @@ -524,9 +535,12 @@
:span.block-ref
(map-inline config title))))]
(if label
(->elem
:span.block-ref {:title (:block/content block)} ; TODO: replace with a popup
(map-inline config label))
(ui/tippy
{:html (block-container config block)
:interactive true}
(->elem
:span.block-ref
(map-inline config label)))
title))]
[:span.warning.mr-1 {:title "Block ref invalid"}
(util/format "((%s))" id)]))))
Expand Down Expand Up @@ -870,7 +884,6 @@
(<= (count url) 15) url
:else
(last (re-find id-regex url)))]
(prn {:id id})
(when-not (string/blank? id)
(let [width (min (- (util/get-width) 96)
560)
Expand Down Expand Up @@ -1097,7 +1110,6 @@
{:top 0}
{:bottom 0}))}]))

(declare block-container)
(defn block-checkbox
[block class]
(let [marker (:block/marker block)
Expand Down Expand Up @@ -1163,20 +1175,28 @@
:style {:margin-right 3.5}}
(string/upper-case marker)])))

(rum/defc set-priority
[block priority]
[:ul
(for [p (remove #(= priority %) ["A" "B" "C"])]
[:a.mr-2.text-base.tooltip-priority {:priority p
:on-click (fn [] (editor-handler/set-priority block p))}])])

(rum/defc priority-text
[priority]
[:a.opacity-50.hover:opacity-100
{:class "priority"
:href (rfe/href :page {:name priority})
:style {:margin-right 3.5}}
(util/format "[#%s]" (str priority))])

(defn priority-cp
[{:block/keys [pre-block? priority] :as block}]

(when (and (not pre-block?) priority)
(ui/tooltip
[:ul
(for [p (remove #(= priority %) ["A" "B" "C"])]
[:a.mr-2.text-base.tooltip-priority {:priority p
:on-click (fn [] (editor-handler/set-priority block p))}])]
[:a.opacity-50.hover:opacity-100
{:class "priority"
:href (rfe/href :page {:name priority})
:style {:margin-right 3.5}}
(util/format "[#%s]" (str priority))])))
(ui/tippy
{:interactive true
:html (set-priority block priority)}
(priority-text priority))))

(defn block-tags-cp
[{:block/keys [pre-block? tags] :as block}]
Expand Down
155 changes: 80 additions & 75 deletions src/main/frontend/components/page.cljs
View file
Expand Up @@ -80,23 +80,26 @@
:sidebar? sidebar?})
(str page-name "-hiccup"))])

(declare page)

(rum/defc page-blocks-cp < rum/reactive
db-mixins/query
[repo page file-path page-name page-original-name encoded-page-name sidebar? journal? block? block-id format]
[repo page-e file-path page-name page-original-name encoded-page-name sidebar? journal? block? block-id format]
(let [raw-page-blocks (get-blocks repo page-name page-original-name block? block-id)
;; grouped-blocks-by-file (into {} (for [[k v] (db-utils/group-by-file raw-page-blocks)]
;; [(:file/path (db-utils/entity (:db/id k))) v]))
;; raw-page-blocks (get grouped-blocks-by-file file-path raw-page-blocks)
page-blocks (block-handler/with-dummy-block raw-page-blocks format
(if (empty? raw-page-blocks)
{:block/page {:db/id (:db/id page)}
:block/file {:db/id (:db/id (:block/file page))}})
{:block/page {:db/id (:db/id page-e)}
:block/file {:db/id (:db/id (:block/file page-e))}})
{:journal? journal?
:page-name page-name})
hiccup-config {:id (if block? (str block-id) page-name)
:sidebar? sidebar?
:block? block?
:editor-box editor/box}
:editor-box editor/box
:page page}
hiccup-config (common-handler/config-with-document-mode hiccup-config)
hiccup (block/->hiccup page-blocks hiccup-config {})]
(page-blocks-inner page-name page-blocks hiccup sidebar?)))
Expand Down Expand Up @@ -130,7 +133,8 @@
(for [{:keys [title] :as query} queries]
(rum/with-key
(block/custom-query {:attr {:class "mt-10"}
:editor-box editor/box} query)
:editor-box editor/box
:page page} query)
(str repo "-custom-query-" (:query query))))]))))

(defn- delete-page!
Expand Down Expand Up @@ -233,8 +237,9 @@
:did-update (fn [state]
(ui-handler/scroll-and-highlight! state)
state)}
[state {:keys [repo] :as option}]
(when-let [path-page-name (or (get-page-name state)
[state {:keys [repo page-name preview?] :as option}]
(when-let [path-page-name (or page-name
(get-page-name state)
(state/get-current-page))]
(let [current-repo (state/sub :git/current-repo)
repo (or repo current-repo)
Expand Down Expand Up @@ -297,74 +302,74 @@
(not sidebar?)
(not config/publishing?))

(let [contents? (= (string/lower-case (str page-name)) "contents")
links (fn [] (->>
[(when-not contents?
{:title (t :page/add-to-contents)
:options {:on-click (fn [] (page-handler/handle-add-page-to-contents! page-original-name))}})

(when-not contents?
{:title (t :page/rename)
:options {:on-click #(state/set-modal! (rename-page-dialog title page-name))}})

(when-let [file-path (and (util/electron?) (page-handler/get-page-file-path))]
[{:title (t :page/open-in-finder)
:options {:on-click #(js/window.apis.showItemInFolder file-path)}}
{:title (t :page/open-with-default-app)
:options {:on-click #(js/window.apis.openPath file-path)}}])

(when-not contents?
{:title (t :page/delete)
:options {:on-click #(state/set-modal! (delete-page-dialog page-name))}})

(when (state/get-current-page)
{:title (t :export)
:options {:on-click #(state/set-modal! export/export-page)}})

(when (util/electron?)
{:title (t (if public? :page/make-private :page/make-public))
:options {:on-click
(fn []
(page-handler/update-public-attribute!
page-name
(if public? false true))
(state/close-modal!))}})

(when developer-mode?
{:title "(Dev) Show page data"
:options {:on-click (fn []
(let [page-data (with-out-str (pprint/pprint (db/pull (:db/id page))))]
(println page-data)
(notification/show!
[:div
[:pre.code page-data]
[:br]
(ui/button "Copy to clipboard"
:on-click #(.writeText js/navigator.clipboard page-data))]
:success
false)))}})]
(flatten)
(remove nil?)))]
[:div {:style {:position "absolute"
:right 0
:top 20}}
[:div.flex.flex-row
[:a.opacity-30.hover:opacity-100.page-op.mr-2
{:title "Search in current page"
:on-click #(route-handler/go-to-search! :page)}
svg/search]
(when (not config/mobile?)
(presentation repo page))
(ui/dropdown-with-links
(fn [{:keys [toggle-fn]}]
[:a.opacity-30.hover:opacity-100
{:title "More options"
:on-click toggle-fn}
(svg/vertical-dots {:class (util/hiccup->class "opacity-30.hover:opacity-100.h-5.w-5")})])
links
{:modal-class (util/hiccup->class
"origin-top-right.absolute.right-0.top-10.mt-2.rounded-md.shadow-lg.whitespace-no-wrap.dropdown-overflow-auto.page-drop-options")
:z-index 1})]]))
(let [contents? (= (string/lower-case (str page-name)) "contents")
links (fn [] (->>
[(when-not contents?
{:title (t :page/add-to-contents)
:options {:on-click (fn [] (page-handler/handle-add-page-to-contents! page-original-name))}})

(when-not contents?
{:title (t :page/rename)
:options {:on-click #(state/set-modal! (rename-page-dialog title page-name))}})

(when-let [file-path (and (util/electron?) (page-handler/get-page-file-path))]
[{:title (t :page/open-in-finder)
:options {:on-click #(js/window.apis.showItemInFolder file-path)}}
{:title (t :page/open-with-default-app)
:options {:on-click #(js/window.apis.openPath file-path)}}])

(when-not contents?
{:title (t :page/delete)
:options {:on-click #(state/set-modal! (delete-page-dialog page-name))}})

(when (state/get-current-page)
{:title (t :export)
:options {:on-click #(state/set-modal! export/export-page)}})

(when (util/electron?)
{:title (t (if public? :page/make-private :page/make-public))
:options {:on-click
(fn []
(page-handler/update-public-attribute!
page-name
(if public? false true))
(state/close-modal!))}})

(when developer-mode?
{:title "(Dev) Show page data"
:options {:on-click (fn []
(let [page-data (with-out-str (pprint/pprint (db/pull (:db/id page))))]
(println page-data)
(notification/show!
[:div
[:pre.code page-data]
[:br]
(ui/button "Copy to clipboard"
:on-click #(.writeText js/navigator.clipboard page-data))]
:success
false)))}})]
(flatten)
(remove nil?)))]
[:div {:style {:position "absolute"
:right 0
:top 20}}
[:div.flex.flex-row
[:a.opacity-30.hover:opacity-100.page-op.mr-2
{:title "Search in current page"
:on-click #(route-handler/go-to-search! :page)}
svg/search]
(when (not config/mobile?)
(presentation repo page))
(ui/dropdown-with-links
(fn [{:keys [toggle-fn]}]
[:a.opacity-30.hover:opacity-100
{:title "More options"
:on-click toggle-fn}
(svg/vertical-dots {:class (util/hiccup->class "opacity-30.hover:opacity-100.h-5.w-5")})])
links
{:modal-class (util/hiccup->class
"origin-top-right.absolute.right-0.top-10.mt-2.rounded-md.shadow-lg.whitespace-no-wrap.dropdown-overflow-auto.page-drop-options")
:z-index 1})]]))
(when (and (not sidebar?)
(not block?))
[:a {:on-click (fn [e]
Expand Down

0 comments on commit 82ddd4c

Please sign in to comment.