greatbody
/
logseq
mirror of https://github.com/logseq/logseq
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

enhance: display properties in outliner mode

pull/10438/head
Tienson Qin 2023-09-13 16:18:07 +08:00
parent beefdfb6ce
commit 03373d6268
6 changed files with 125 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/main/frontend/components/block.cljs
View File

@ -2923,16 +2923,18 @@
(let [block (merge block (block/parse-title-and-body uuid (:block/format block) pre-block? content)) (let [block (merge block (block/parse-title-and-body uuid (:block/format block) pre-block? content))
hide-block-refs-count? (and (:embed? config) hide-block-refs-count? (and (:embed? config)
(= (:block/uuid block) (:embed-id config)))] (= (:block/uuid block) (:embed-id config)))]
(block-content-or-editor config block edit-input-id block-id edit? hide-block-refs-count? selected?)) (block-content-or-editor config block edit-input-id block-id edit? hide-block-refs-count? selected?))])
(when @*show-right-menu?
(block-right-menu config block edit?))]
(when (and (config/db-based-graph? repo) (not collapsed?)) (when (and (config/db-based-graph? repo) (not collapsed?))
[:div {:style {:padding-left 29}}
(db-properties-cp config (db-properties-cp config
block block
edit-input-id edit-input-id
{:selected? selected? {:selected? selected?
:in-block-container? true}))]) :in-block-container? true})])
(when @*show-right-menu?
(block-right-menu config block edit?))]
(when-not (:hide-children? config) (when-not (:hide-children? config)
(let [children (db/sort-by-left (:block/_parent block) block) (let [children (db/sort-by-left (:block/_parent block) block)

2
src/main/frontend/components/editor.cljs
View File

@ -182,7 +182,7 @@
[:div [:div
(when (and db? tag?) (when (and db? tag?)
[:div.flex.flex-row.items-center.px-4.py-1.text-sm.opacity-70.gap-2 [:div.flex.flex-row.items-center.px-4.py-1.text-sm.opacity-70.gap-2
"Create page:" "Turn this block into a page:"
(ui/toggle create-page? (ui/toggle create-page?
(fn [_e] (fn [_e]
(swap! (:editor/create-page? @state/state) not)) (swap! (:editor/create-page? @state/state) not))

58
src/main/frontend/components/page.cljs
View File

@ -438,7 +438,9 @@
(js/console.error "No selected option found to navigate to"))))}))) (js/console.error "No selected option found to navigate to"))))})))
(rum/defcs configure < rum/reactive (rum/defcs configure < rum/reactive
[state page {:keys [journal?] :as opts}] [state page {:keys [journal? *configure-show? show-properties?] :as opts
:or {show-properties? true}}]
(when (rum/react *configure-show?)
(let [page-id (:db/id page) (let [page-id (:db/id page)
page (when page-id (db/sub-block page-id)) page (when page-id (db/sub-block page-id))
type (:block/type page) type (:block/type page)
@ -447,7 +449,7 @@
opts) opts)
class? (= type "class")] class? (= type "class")]
(when page (when page
[:div.property-configure.grid.gap-2.p-1 [:div.property-configure.grid.gap-2
(when-not journal? (when-not journal?
[:div.grid.grid-cols-4.gap-1 [:div.grid.grid-cols-4.gap-1
[:div.col-span-1 "Is it a class?"] [:div.col-span-1 "Is it a class?"]
@ -484,6 +486,7 @@
(db/transact! (db/transact!
[[:db.fn/retractAttribute (:db/id page) :block/namespace]]))))])])]) [[:db.fn/retractAttribute (:db/id page) :block/namespace]]))))])])])
(when-not show-properties?
(let [edit-input-id (str "edit-block-" (:block/uuid page))] (let [edit-input-id (str "edit-block-" (:block/uuid page))]
[:div [:div
[:div.text-sm.opacity-70.font-medium.mb-2 "Properties:"] [:div.text-sm.opacity-70.font-medium.mb-2 "Properties:"]
@ -491,7 +494,25 @@
{:editor-box editor/box} {:editor-box editor/box}
page page
edit-input-id edit-input-id
(assoc properties-opts :class-schema? class?))])]))) (assoc properties-opts :class-schema? class?))]))]))))
(rum/defc page-properties < rum/reactive
[page *configure-show?]
(let [type (:block/type page)
class? (= type "class")
configure? (rum/react *configure-show?)
opts {:selected? false
:page-configure? configure?
:class-schema? class?}]
[:div {:style {:padding 2}}
(let [edit-input-id (str "edit-block-" (:block/uuid page) "-schema")
properties-cp (component-block/db-properties-cp {:editor-box editor/box}
page edit-input-id opts)]
(if (and configure? class?)
[:div
[:div.text-sm.opacity-70.font-medium.mb-2 "Properties:"]
properties-cp]
properties-cp))]))
(defn- get-path-page-name (defn- get-path-page-name
[state page-name] [state page-name]
@ -546,7 +567,14 @@
*all-collapsed? (::all-collapsed? state) *all-collapsed? (::all-collapsed? state)
*current-block-page (::current-page state) *current-block-page (::current-page state)
block-or-whiteboard? (or block? whiteboard?) block-or-whiteboard? (or block? whiteboard?)
home? (= :home (state/get-current-route))] home? (= :home (state/get-current-route))
show-properties? (and
(config/db-based-graph? repo)
(not block?)
(not whiteboard?)
(or (seq (:block/properties page))
(seq (:block/alias page))
(seq (:block/tags page))))]
[:div.flex-1.page.relative [:div.flex-1.page.relative
(merge (if (seq (:block/tags page)) (merge (if (seq (:block/tags page))
(let [page-names (model/get-page-names-by-ids (map :db/id (:block/tags page)))] (let [page-names (model/get-page-names-by-ids (map :db/id (:block/tags page)))]
@ -581,9 +609,10 @@
(plugins/hook-ui-slot :page-head-actions-slotted nil) (plugins/hook-ui-slot :page-head-actions-slotted nil)
(plugins/hook-ui-items :pagebar)]))]) (plugins/hook-ui-items :pagebar)]))])
(when (and @*configure-show? db-based? (not built-in-property?)) (when (and db-based? (not built-in-property?))
(configure page {:*configure-show? *configure-show? (configure page {:*configure-show? *configure-show?
:journal? journal?})) :journal? journal?
:show-properties? show-properties?}))
[:div [:div
(when (and block? (not sidebar?) (not whiteboard?)) (when (and block? (not sidebar?) (not whiteboard?))
@ -592,21 +621,8 @@
[:div.mb-4 [:div.mb-4
(component-block/breadcrumb config repo block-id {:level-limit 3})])) (component-block/breadcrumb config repo block-id {:level-limit 3})]))
(when (and (when show-properties?
(config/db-based-graph? repo) (page-properties page *configure-show?))
(not block?)
(not whiteboard?)
(not @*configure-show?)
(or (seq (:block/properties page))
(seq (:block/alias page))
(seq (:block/tags page))))
[:div.p-2
(let [edit-input-id (str "edit-block-" (:block/uuid page) "-schema")]
(component-block/db-properties-cp
{:editor-box editor/box}
page
edit-input-id
{:selected? false}))])
;; blocks ;; blocks
(let [_ (and block? page (reset! *current-block-page (:block/name (:block/page page)))) (let [_ (and block? page (reset! *current-block-page (:block/name (:block/page page))))

18
src/main/frontend/components/property.cljs
View File

@ -247,8 +247,8 @@
(remove exclude-properties))] (remove exclude-properties))]
(if @*property-key (if @*property-key
(when-let [property (get-property-from-db @*property-key)] (when-let [property (get-property-from-db @*property-key)]
[:div.ls-property-add.grid.grid-cols-4.gap-1.flex.flex-row.items-center [:div.ls-property-add.grid.grid-cols-5.gap-1.flex.flex-row.items-center
[:div.col-span-1 @*property-key] [:div.col-span-2 @*property-key]
[:div.col-span-3.flex.flex-row [:div.col-span-3.flex.flex-row
(when (not class-schema?) (when (not class-schema?)
(if @*show-new-property-config? (if @*show-new-property-config?
@ -332,9 +332,8 @@
(when-let [id (:id icon)] (when-let [id (:id icon)]
(when (= :emoji (:type icon)) (when (= :emoji (:type icon))
[:em-emoji {:id id}])) [:em-emoji {:id id}]))
;; default property icon [:span.bullet-container.cursor
(ui/icon "point" {:size 16 [:span.bullet]])])
:class "opacity-50"}))])
(fn [{:keys [toggle-fn]}] (fn [{:keys [toggle-fn]}]
(ui/emoji-picker (ui/emoji-picker
{:auto-focus true {:auto-focus true
@ -403,21 +402,22 @@
(for [[k v] properties] (for [[k v] properties]
(when (uuid? k) (when (uuid? k)
(when-let [property (db/sub-block (:db/id (db/entity [:block/uuid k])))] (when-let [property (db/sub-block (:db/id (db/entity [:block/uuid k])))]
(let [block? (and (contains? #{:default :template} (get-in property [:block/schema :type] :default)) (let [type (get-in property [:block/schema :type] :default)
block? (and (contains? #{:default :template} type)
(uuid? v) (uuid? v)
(db/entity [:block/uuid v]))] (db/entity [:block/uuid v]))]
[:div {:class (if block? [:div {:class (if block?
"flex flex-1 flex-col gap-1" "flex flex-1 flex-col gap-1"
"property-pair items-center")} "property-pair items-center")}
[:div.property-key [:div.property-key
{:class (if (:class-schema? opts) "col-span-2" "col-span-1")} {:class "col-span-2"}
(property-key block property (select-keys opts [:class-schema?]))] (property-key block property (select-keys opts [:class-schema?]))]
(if (:class-schema? opts) (if (:class-schema? opts)
[:div.property-description.text-sm.opacity-70 [:div.property-description.text-sm.opacity-70
{:class (if (:class-schema? opts) "col-span-2" "col-span-3")} {:class "col-span-3"}
(get-in property [:block/schema :description])] (get-in property [:block/schema :description])]
[:div.property-value {:class (if block? [:div.property-value {:class (if block?
"col-span-4 ml-8 pl-1" "block-property-value"
"col-span-3 inline-grid")} "col-span-3 inline-grid")}
(pv/property-value block property v opts)])])))))) (pv/property-value block property v opts)])]))))))

23
src/main/frontend/components/property.css
View File

@ -1,5 +1,6 @@
.property-configure { .property-configure {
min-width: 32rem; min-width: 32rem;
padding: 2px;
.form-input, .form-select { .form-input, .form-select {
line-height: 1rem; line-height: 1rem;
@ -16,16 +17,26 @@
/* background: var(--ls-secondary-background-color); */ /* background: var(--ls-secondary-background-color); */
/* } */ /* } */
.ls-block .ls-properties-area { .ls-block .ls-properties-area, .block-property-value {
padding-left: 0.3rem; padding-left: 22px;
border-left: 1px solid;
border-left-color: var(--ls-guideline-color, #ddd);
}
.block-property-value {
margin-left: 7px;
}
.ls-block .block-property-value, .property-template .block-property-value {
padding-left: 0;
} }
.ls-properties-area { .ls-properties-area {
@apply grid gap-1; @apply grid gap-1;
.property-pair { .property-pair {
@apply grid grid-cols-4 gap-1; @apply grid grid-cols-5 gap-1;
grid-template-columns: repeat(auto-fit, 160px); grid-template-columns: repeat(auto-fit, 120px);
} }
.add-button-link { .add-button-link {
@ -76,10 +87,6 @@
margin: 0; margin: 0;
} }
.property-block-container {
margin-left: -1.5em;
}
.property-key a { .property-key a {
color: var(--ls-primary-text-color); color: var(--ls-primary-text-color);
} }

2
src/main/frontend/components/property/value.cljs
View File

@ -311,7 +311,7 @@
entity (db/sub-block (:db/id e)) entity (db/sub-block (:db/id e))
properties-cp (:properties-cp opts)] properties-cp (:properties-cp opts)]
(when (and entity properties-cp) (when (and entity properties-cp)
[:div.property-block-container.w-full [:div.property-block-container.w-full.property-template
(properties-cp config entity (:editor-id config) (merge opts {:in-block-container? true}))]))) (properties-cp config entity (:editor-id config) (merge opts {:in-block-container? true}))])))
(rum/defc property-scalar-value < rum/reactive db-mixins/query (rum/defc property-scalar-value < rum/reactive db-mixins/query