From 4f4481ee96eb2cb11cb1568b4cdc27d7c0cf8b0a Mon Sep 17 00:00:00 2001 From: Peng Xiao Date: Fri, 19 Aug 2022 16:29:54 +0800 Subject: [PATCH] wip: enhance page title ux --- src/main/frontend/components/page.cljs | 110 ++++++++++--------- src/main/frontend/components/whiteboard.cljs | 9 +- 2 files changed, 67 insertions(+), 52 deletions(-) diff --git a/src/main/frontend/components/page.cljs b/src/main/frontend/components/page.cljs index 9abddff59c..1d9e453f55 100644 --- a/src/main/frontend/components/page.cljs +++ b/src/main/frontend/components/page.cljs @@ -190,7 +190,7 @@ original-name]])] {:default-collapsed? false})]]))) -(rum/defcs page-title < +(rum/defcs page-title < rum/reactive (rum/local false ::edit?) {:init (fn [state] (assoc state ::title-value (atom (nth (:rum/args state) 2))))} @@ -201,18 +201,20 @@ input-ref (rum/create-ref) repo (state/get-current-repo) hls-file? (pdf-assets/hls-file? title) + whiteboard-page? (model/whiteboard-page? page-name) + untitled? (some? (parse-uuid page-name)) title (if hls-file? (pdf-assets/human-hls-filename-display title) (if fmt-journal? (date/journal-title->custom-format title) title)) old-name (or title page-name) + merge? #(and (not= (util/page-name-sanity-lc page-name) + (util/page-name-sanity-lc @*title-value)) + (db/page-exists? page-name) + (db/page-exists? @*title-value)) confirm-fn (fn [] - (let [new-page-name (string/trim @*title-value) - merge? (and (not= (util/page-name-sanity-lc page-name) - (util/page-name-sanity-lc @*title-value)) - (db/page-exists? page-name) - (db/page-exists? @*title-value))] + (let [new-page-name (string/trim @*title-value)] (ui/make-confirm-modal - {:title (if merge? + {:title (if (merge?) (str "Page “" @*title-value "” already exists, merge to it?") (str "Do you really want to change the page name to “" new-page-name "”?")) :on-confirm (fn [_e {:keys [close-fn]}] @@ -222,7 +224,8 @@ :on-cancel (fn [] (reset! *title-value old-name) (gobj/set (rum/deref input-ref) "value" old-name) - (reset! *edit? true))}))) + (reset! *edit? true) + (.focus input-ref.current))}))) rollback-fn #(do (reset! *title-value old-name) (gobj/set (rum/deref input-ref) "value" old-name) @@ -239,51 +242,60 @@ (string/blank? @*title-value) (rollback-fn) + (and (merge?) whiteboard-page?) + (notification/show! (str "Page “" @*title-value "” already exists!") :error) + :else (state/set-modal! (confirm-fn))) (util/stop e))] - (if @*edit? - [:span - {:class (util/classnames [{:editing @*edit?}]) - :style {:width "600px"}} - [:input.edit-input - {:type "text" - :ref input-ref - :auto-focus true - :style {:outline "none" - :width "100%" - :font-weight 600} - :auto-complete (if (util/chrome?) "chrome-off" "off") ; off not working here - :default-value old-name - :on-change (fn [^js e] - (let [value (util/evalue e)] - (reset! *title-value (string/trim value)))) - :on-blur blur-fn - :on-key-down (fn [^js e] - (when (= (gobj/get e "key") "Enter") - (blur-fn e))) - :on-key-up (fn [^js e] + [:h1.page-title.flex.gap-1 + {:on-mouse-down (fn [e] + (when (util/right-click? e) + (state/set-state! :page-title/context {:page page-name}))) + :on-click (fn [e] + (.preventDefault e) + (if (gobj/get e "shiftKey") + (when-let [page (db/pull repo '[*] [:block/name page-name])] + (state/sidebar-add-block! + repo + (:db/id page) + :page)) + (when (and (not hls-file?) (not fmt-journal?)) + (reset! *edit? true))))} + (when (not= icon "") [:span.page-icon icon]) + [:div.page-title-sizer-wrapper.relative + (when (rum/react *edit?) + [:span.absolute.inset-0 + {:class (util/classnames [{:editing @*edit?}])} + [:input.edit-input + {:type "text" + :ref input-ref + :auto-focus true + :style {:outline "none" + :width "100%" + :font-weight "inherit"} + :auto-complete (if (util/chrome?) "chrome-off" "off") ; off not working here + :default-value old-name + :on-change (fn [^js e] + (let [value (util/evalue e)] + (reset! *title-value (string/trim value)))) + :on-blur blur-fn + :on-key-down (fn [^js e] + (when (= (gobj/get e "key") "Enter") + (blur-fn e))) + :on-key-up (fn [^js e] ;; Esc - (when (= 27 (.-keyCode e)) - (reset! *title-value old-name) - (reset! *edit? false))) - :on-focus (fn [] (js/setTimeout #(.select input-ref.current)))}]] - [:a.page-title {:on-mouse-down (fn [e] - (when (util/right-click? e) - (state/set-state! :page-title/context {:page page-name}))) - :on-click (fn [e] - (.preventDefault e) - (if (gobj/get e "shiftKey") - (when-let [page (db/pull repo '[*] [:block/name page-name])] - (state/sidebar-add-block! - repo - (:db/id page) - :page)) - (when (and (not hls-file?) (not fmt-journal?)) - (reset! *edit? true))))} - [:span.title {:data-ref page-name} - (when (not= icon "") [:span.page-icon icon]) - title]])))) + (when (= 27 (.-keyCode e)) + (reset! *title-value old-name) + (reset! *edit? false))) + :on-focus (fn [] (js/setTimeout #(.select input-ref.current)))}]]) + [:span.title.inline-block + {:data-ref page-name + :style {:opacity (when @*edit? 0) + :pointer-events "none" + :font-weight "inherit" + :min-width "40px"}} + (if @*edit? (rum/react *title-value) title)]]]))) (defn- page-mouse-over [e *control-show? *all-collapsed?] diff --git a/src/main/frontend/components/whiteboard.cljs b/src/main/frontend/components/whiteboard.cljs index 573f6660a6..c38499b5f4 100644 --- a/src/main/frontend/components/whiteboard.cljs +++ b/src/main/frontend/components/whiteboard.cljs @@ -187,9 +187,12 @@ [:span.whiteboard-page-title {:style {:color "var(--ls-primary-text-color)" :user-select "none"}} - (page/page-title name [:span.tie.tie-whiteboard - {:style {:font-size "0.9em"}}] - (get-page-display-name name) nil false)] + (page/page-title name + [:span.tie.tie-whiteboard + {:style {:font-size "0.9em"}}] + (get-page-display-name name) + nil + false)] (page-refs-count name "text-md px-3 py-1 cursor-default whiteboard-page-refs-count"