diff --git a/src/main/frontend/components/page.cljs b/src/main/frontend/components/page.cljs index 95bde16836..7ed77f07db 100644 --- a/src/main/frontend/components/page.cljs +++ b/src/main/frontend/components/page.cljs @@ -239,7 +239,7 @@ :else (state/set-modal! (confirm-fn))) (util/stop e))] - [:span.absolute.inset-0 + [:span.absolute.inset-0.edit-input-wrapper {:class (util/classnames [{:editing @*edit?}])} [:input.edit-input {:type "text" @@ -285,7 +285,7 @@ [:a.asset-ref (pdf-assets/fix-local-asset-pagename title)] (if fmt-journal? (date/journal-title->custom-format title) title)) old-name (or title page-name)] - [:h1.page-title.flex.cursor-pointer.gap-1 + [:h1.page-title.flex.cursor-pointer.gap-1.w-full {:on-mouse-down (fn [e] (when (util/right-click? e) (state/set-state! :page-title/context {:page page-name}))) @@ -301,7 +301,7 @@ (reset! *input-value (if untitled? "" old-name)) (reset! *edit? true))))} (when (not= icon "") [:span.page-icon icon]) - [:div.page-title-sizer-wrapper.relative.w-full + [:div.page-title-sizer-wrapper.relative (when (rum/react *edit?) (page-title-editor {:*title-value *title-value :*edit? *edit? @@ -314,13 +314,7 @@ [:span.title.block {:data-value (rum/react *input-value) :data-ref page-name - :style {:opacity (when @*edit? 0) - :pointer-events "none" - :font-weight "inherit" - :white-space "nowrap" - :overflow "hidden" - :text-overflow "ellipsis" - :min-width "80px"}} + :style {:opacity (when @*edit? 0)}} (cond @*edit? [:span {:style {:white-space "pre"}} (rum/react *input-value)] untitled? [:span.opacity-50 (t :untitled)] :else title)]]]))) @@ -420,13 +414,13 @@ (page-mouse-leave e *control-show?))} (page-blocks-collapse-control title *control-show? *all-collapsed?)]) (when-not whiteboard? - [:div.flex-1.flex-row + [:div.flex-1.flex-row.w-full [:h1.title.ls-page-title (page-title page-name icon title format fmt-journal?)]]) (when (not config/publishing?) - [:div.flex.flex-row - (when config/lsp-enabled? + (when config/lsp-enabled? + [:div.flex.flex-row (plugins/hook-ui-slot :page-head-actions-slotted nil) - (plugins/hook-ui-items :pagebar))])]) + (plugins/hook-ui-items :pagebar)]))]) [:div (when (and block? (not sidebar?) (not whiteboard?)) (let [config {:id "block-parent" diff --git a/src/main/frontend/components/page.css b/src/main/frontend/components/page.css index acd50d7d2a..be79091e38 100644 --- a/src/main/frontend/components/page.css +++ b/src/main/frontend/components/page.css @@ -188,6 +188,7 @@ position: absolute; right: 5px; top: 2px; + &:hover { opacity: .6; } @@ -267,12 +268,17 @@ width: 100%; border: none; box-shadow: none; - padding-left: 0; + padding-left: 5px; padding-top: 5px; - } - &.editing { - background-color: var(--ls-secondary-background-color); + &-wrapper { + @apply rounded; + + &.editing { + background-color: var(--ls-secondary-background-color); + margin-right: 15px; + } + } } } @@ -284,20 +290,30 @@ a.page-title { color: inherit; } +.page-title-sizer-wrapper { + @apply w-full; + + > .title { + @apply w-full pointer-events-none overflow-hidden overflow-ellipsis; + } + + .edit-input { + padding-right: 4px; + } +} + html.is-native-android, html.is-native-ipad, html.is-native-iphone, html.is-native-iphone-without-notch { - - .ls-page-title { - margin: 0px 0px 24px -15px; - padding: 0px; - } + .ls-page-title { + margin: 0 0 24px -15px; + padding: 0 !important; + } } /* Change to another cursor style if Shift key is active */ -[data-active-keystroke*="Shift" i] -:is(.journal-title, .page-title, +[data-active-keystroke*="Shift" i] :is(.journal-title, .page-title, .block-ref, .page-ref, a.tag, .bullet-container.cursor) { cursor: e-resize; @@ -324,7 +340,7 @@ html.is-native-iphone-without-notch { } .cp__right-sidebar .add-button-link { - margin-left: 21px; + margin-left: 21px; } html.is-native-android, @@ -347,11 +363,11 @@ html.is-native-ios { } .block-content-wrapper { - /* 38px is the width of block-control */ - width: calc(100% - 35px); - @screen sm { - width: calc(100% - 33px); - } + /* 38px is the width of block-control */ + width: calc(100% - 35px); + @screen sm { + width: calc(100% - 33px); + } } } @@ -366,24 +382,24 @@ html.is-native-ios { .control-hide { display: none; } - } +} - .toned-down { - opacity: 0.5; +.toned-down { + opacity: 0.5; color: var(--ls-secondary-text-color); - } +} - .highlighted { +.highlighted { opacity: 1; color: var(--ls-primary-text-color); - } +} - .separator-top { - border-top: 1px solid var(--ls-quaternary-background-color); - } +.separator-top { + border-top: 1px solid var(--ls-quaternary-background-color); +} - .icon-box { +.icon-box { display: inline-block; line-height: normal; background-color: var(--ls-quaternary-background-color); - } +} diff --git a/src/main/frontend/components/whiteboard.css b/src/main/frontend/components/whiteboard.css index 7fb34f39b4..7b854a6633 100644 --- a/src/main/frontend/components/whiteboard.css +++ b/src/main/frontend/components/whiteboard.css @@ -71,7 +71,7 @@ h1.title.whiteboard-dashboard-title { .dashboard-create-card:hover { background-color: var(--ls-selection-background-color); box-shadow: 0 4px 8px -2px rgba(16, 24, 40, 0.1), - 0 2px 4px -2px rgba(16, 24, 40, 0.06); + 0 2px 4px -2px rgba(16, 24, 40, 0.06); border: 1px solid var(--ls-page-blockquote-border-color); } @@ -148,12 +148,26 @@ input.tl-text-input { } .whiteboard-page-title { - @apply inline-flex px-2 py-1; + @apply inline-flex px-2 py-1 w-full; + font-size: 20px; border-radius: 8px; border: 1px solid transparent; background: var(--ls-secondary-background-color); + &-root { + max-width: 70%; + overflow: hidden; + } + + .page-title-sizer-wrapper { + width: 98%; + + > .title { + @apply whitespace-nowrap min-w-[80px]; + } + } + .edit-input { width: 100%; border: none;