diff --git a/src/main/frontend/components/page.cljs b/src/main/frontend/components/page.cljs index c209c0df2e..9c788d8a35 100644 --- a/src/main/frontend/components/page.cljs +++ b/src/main/frontend/components/page.cljs @@ -288,33 +288,31 @@ :else (state/set-modal! (confirm-fn))) (util/stop e))] - [:span.absolute.inset-0.edit-input-wrapper.z-10 - {: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 - :value (rum/react *input-value) - :on-change (fn [^js e] - (let [value (util/evalue e)] - (reset! *title-value (string/trim value)) - (reset! *input-value value))) - :on-blur blur-fn - :on-key-down (fn [^js e] - (when (= (gobj/get e "key") "Enter") - (blur-fn e))) - :placeholder (when untitled? (t :untitled)) - :on-key-up (fn [^js e] + [:input.edit-input.p-0.focus:outline-none.ring-none + {: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 + :value (rum/react *input-value) + :on-change (fn [^js e] + (let [value (util/evalue e)] + (reset! *title-value (string/trim value)) + (reset! *input-value value))) + :on-blur blur-fn + :on-key-down (fn [^js e] + (when (= (gobj/get e "key") "Enter") + (blur-fn e))) + :placeholder (when untitled? (t :untitled)) + :on-key-up (fn [^js e] ;; Esc - (when (= 27 (.-keyCode e)) - (reset! *title-value old-name) - (reset! *edit? false))) - :on-focus (fn [] - (when untitled? (reset! *title-value "")))}]])) + (when (= 27 (.-keyCode e)) + (reset! *title-value old-name) + (reset! *edit? false))) + :on-focus (fn [] + (when untitled? (reset! *title-value "")))}])) (rum/defc page-tags < [page tags-property *hover? *configuring?] @@ -453,7 +451,7 @@ icon)]) [:div.flex.flex-1.flex-row.flex-wrap.items-center.gap-4 - [:h1.page-title.flex.cursor-pointer.gap-1 + [:h1.page-title.flex-1.cursor-pointer.gap-1 {:class (when-not whiteboard-page? "title") :on-mouse-down (fn [e] (when (util/right-click? e) @@ -475,31 +473,29 @@ (reset! *input-value (if untitled? "" old-name)) (reset! *edit? true)))))} - [:div.page-title-sizer-wrapper.relative - (when @*edit? - (page-title-editor {:*title-value *title-value - :*edit? *edit? - :*input-value *input-value - :title title - :page-name page-name - :old-name old-name - :untitled? untitled? - :whiteboard-page? whiteboard-page? - :preview? preview?})) - [:span.title.block - {:on-click (fn [] - (when (and (state/home?) (not preview?)) - (route-handler/redirect-to-page! page-name))) - :data-value @*input-value - :data-ref page-name - :style {:opacity (when @*edit? 0)}} - (let [nested? (and (string/includes? title page-ref/left-brackets) - (string/includes? title page-ref/right-brackets))] - (cond @*edit? [:span {:style {:white-space "pre"}} (rum/react *input-value)] - untitled? [:span.opacity-50 (t :untitled)] - nested? (component-block/map-inline {} (gp-mldoc/inline->edn title (gp-mldoc/default-config - (:block/format page)))) - :else title))]]] + (if @*edit? + (page-title-editor {:*title-value *title-value + :*edit? *edit? + :*input-value *input-value + :title title + :page-name page-name + :old-name old-name + :untitled? untitled? + :whiteboard-page? whiteboard-page? + :preview? preview?}) + [:span.title.block + {:on-click (fn [] + (when (and (state/home?) (not preview?)) + (route-handler/redirect-to-page! page-name))) + :data-value @*input-value + :data-ref page-name + :style {:opacity (when @*edit? 0)}} + (let [nested? (and (string/includes? title page-ref/left-brackets) + (string/includes? title page-ref/right-brackets))] + (cond untitled? [:span.opacity-50 (t :untitled)] + nested? (component-block/map-inline {} (gp-mldoc/inline->edn title (gp-mldoc/default-config + (:block/format page)))) + :else title))])] (when (and db-based? (seq (:block/tags page))) [:div.page-tags.ml-4 (pv/property-value page tags-property (map :block/uuid (:block/tags page)) diff --git a/src/main/frontend/components/page.css b/src/main/frontend/components/page.css index 50fc03f2e3..7a29bff788 100644 --- a/src/main/frontend/components/page.css +++ b/src/main/frontend/components/page.css @@ -255,18 +255,6 @@ .edit-input { width: 100%; border: none; - box-shadow: none; - padding-left: 5px; - padding-top: 5px; - padding-bottom: 4px; - - &-wrapper { - @apply rounded; - - &.editing { - background-color: var(--ls-secondary-background-color); - } - } } } @@ -279,22 +267,6 @@ a.page-title { margin-bottom: 0; } -.page-title-sizer-wrapper { - @apply w-full overflow-x-auto overflow-y-hidden; - - :empty::before { - content: '\200b'; - } - - > .title { - @apply w-full overflow-hidden overflow-ellipsis; - } - - .edit-input { - padding-right: 4px; - } -} - html.is-native-android, html.is-native-ipad, html.is-native-iphone, @@ -404,3 +376,7 @@ html.is-native-ios { .class-parent .form-select { line-height: 1rem; } + +.ring-none { + @apply focus:ring-0 focus:ring-offset-0; +} diff --git a/src/main/frontend/components/whiteboard.css b/src/main/frontend/components/whiteboard.css index ef83e2a841..293b6c9bb1 100644 --- a/src/main/frontend/components/whiteboard.css +++ b/src/main/frontend/components/whiteboard.css @@ -160,12 +160,9 @@ input.tl-text-input { overflow: hidden; } - .page-title-sizer-wrapper { - width: calc(100% - 20px); - - > .title { - @apply whitespace-nowrap min-w-[100px]; - } + .ls-page-title { + padding: 0; + margin: 0; } .edit-input {