mirror of https://github.com/logseq/logseq
enhance: display properties in outliner mode
Tienson Qin
parent
beefdfb6ce
commit
03373d6268
|
|
@ -2923,17 +2923,19 @@
|
|||
(let [block (merge block (block/parse-title-and-body uuid (:block/format block) pre-block? content))
|
||||
hide-block-refs-count? (and (:embed? config)
|
||||
(= (:block/uuid block) (:embed-id config)))]
|
||||
(block-content-or-editor config block edit-input-id block-id edit? hide-block-refs-count? selected?))
|
||||
(when (and (config/db-based-graph? repo) (not collapsed?))
|
||||
(db-properties-cp config
|
||||
block
|
||||
edit-input-id
|
||||
{:selected? selected?
|
||||
:in-block-container? true}))])
|
||||
(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?))
|
||||
[:div {:style {:padding-left 29}}
|
||||
(db-properties-cp config
|
||||
block
|
||||
edit-input-id
|
||||
{:selected? selected?
|
||||
:in-block-container? true})])
|
||||
|
||||
(when-not (:hide-children? config)
|
||||
(let [children (db/sort-by-left (:block/_parent block) block)
|
||||
config' (-> (update config :level inc)
|
||||
|
|
|
|||
|
|
@ -182,7 +182,7 @@
|
|||
[:div
|
||||
(when (and db? tag?)
|
||||
[: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?
|
||||
(fn [_e]
|
||||
(swap! (:editor/create-page? @state/state) not))
|
||||
|
|
|
|||
|
|
@ -438,60 +438,81 @@
|
|||
(js/console.error "No selected option found to navigate to"))))})))
|
||||
|
||||
(rum/defcs configure < rum/reactive
|
||||
[state page {:keys [journal?] :as opts}]
|
||||
(let [page-id (:db/id page)
|
||||
page (when page-id (db/sub-block page-id))
|
||||
type (:block/type page)
|
||||
properties-opts (merge {:selected? false
|
||||
:page-configure? true}
|
||||
opts)
|
||||
class? (= type "class")]
|
||||
(when page
|
||||
[:div.property-configure.grid.gap-2.p-1
|
||||
(when-not journal?
|
||||
[:div.grid.grid-cols-4.gap-1
|
||||
[:div.col-span-1 "Is it a class?"]
|
||||
[:div.col-span-3
|
||||
(ui/checkbox {:checked class?
|
||||
:disabled config/publishing?
|
||||
:on-change (fn []
|
||||
(if class?
|
||||
(db/transact! [[:db/retract (:db/id page) :block/type]])
|
||||
(db/transact! [{:db/id (:db/id page)
|
||||
:block/type "class"}])))})]])
|
||||
|
||||
(when class?
|
||||
[:div.grid.grid-cols-4.gap-1.items-center.class-parent
|
||||
[:div.col-span-1 "Parent class:"]
|
||||
(if config/publishing?
|
||||
[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)
|
||||
page (when page-id (db/sub-block page-id))
|
||||
type (:block/type page)
|
||||
properties-opts (merge {:selected? false
|
||||
:page-configure? true}
|
||||
opts)
|
||||
class? (= type "class")]
|
||||
(when page
|
||||
[:div.property-configure.grid.gap-2
|
||||
(when-not journal?
|
||||
[:div.grid.grid-cols-4.gap-1
|
||||
[:div.col-span-1 "Is it a class?"]
|
||||
[:div.col-span-3
|
||||
(if-let [parent-class (some-> (:db/id (:block/namespace page))
|
||||
db/entity
|
||||
:block/original-name)]
|
||||
[:a {:on-click #(route-handler/redirect-to-page! parent-class)}
|
||||
parent-class]
|
||||
"None")]
|
||||
[:div.col-span-3
|
||||
(let [namespace (some-> (:db/id (:block/namespace page))
|
||||
db/entity
|
||||
:block/uuid)]
|
||||
[:div.w-60
|
||||
(class-select page namespace (fn [value]
|
||||
(if (seq value)
|
||||
(db/transact!
|
||||
[{:db/id (:db/id page)
|
||||
:block/namespace [:block/uuid (uuid value)]}])
|
||||
(db/transact!
|
||||
[[:db.fn/retractAttribute (:db/id page) :block/namespace]]))))])])])
|
||||
(ui/checkbox {:checked class?
|
||||
:disabled config/publishing?
|
||||
:on-change (fn []
|
||||
(if class?
|
||||
(db/transact! [[:db/retract (:db/id page) :block/type]])
|
||||
(db/transact! [{:db/id (:db/id page)
|
||||
:block/type "class"}])))})]])
|
||||
|
||||
(let [edit-input-id (str "edit-block-" (:block/uuid page))]
|
||||
(when class?
|
||||
[:div.grid.grid-cols-4.gap-1.items-center.class-parent
|
||||
[:div.col-span-1 "Parent class:"]
|
||||
(if config/publishing?
|
||||
[:div.col-span-3
|
||||
(if-let [parent-class (some-> (:db/id (:block/namespace page))
|
||||
db/entity
|
||||
:block/original-name)]
|
||||
[:a {:on-click #(route-handler/redirect-to-page! parent-class)}
|
||||
parent-class]
|
||||
"None")]
|
||||
[:div.col-span-3
|
||||
(let [namespace (some-> (:db/id (:block/namespace page))
|
||||
db/entity
|
||||
:block/uuid)]
|
||||
[:div.w-60
|
||||
(class-select page namespace (fn [value]
|
||||
(if (seq value)
|
||||
(db/transact!
|
||||
[{:db/id (:db/id page)
|
||||
:block/namespace [:block/uuid (uuid value)]}])
|
||||
(db/transact!
|
||||
[[:db.fn/retractAttribute (:db/id page) :block/namespace]]))))])])])
|
||||
|
||||
(when-not show-properties?
|
||||
(let [edit-input-id (str "edit-block-" (:block/uuid page))]
|
||||
[:div
|
||||
[:div.text-sm.opacity-70.font-medium.mb-2 "Properties:"]
|
||||
(component-block/db-properties-cp
|
||||
{:editor-box editor/box}
|
||||
page
|
||||
edit-input-id
|
||||
(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:"]
|
||||
(component-block/db-properties-cp
|
||||
{:editor-box editor/box}
|
||||
page
|
||||
edit-input-id
|
||||
(assoc properties-opts :class-schema? class?))])])))
|
||||
properties-cp]
|
||||
properties-cp))]))
|
||||
|
||||
(defn- get-path-page-name
|
||||
[state page-name]
|
||||
|
|
@ -546,7 +567,14 @@
|
|||
*all-collapsed? (::all-collapsed? state)
|
||||
*current-block-page (::current-page state)
|
||||
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
|
||||
(merge (if (seq (: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-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?
|
||||
:journal? journal?}))
|
||||
:journal? journal?
|
||||
:show-properties? show-properties?}))
|
||||
|
||||
[:div
|
||||
(when (and block? (not sidebar?) (not whiteboard?))
|
||||
|
|
@ -592,21 +621,8 @@
|
|||
[:div.mb-4
|
||||
(component-block/breadcrumb config repo block-id {:level-limit 3})]))
|
||||
|
||||
(when (and
|
||||
(config/db-based-graph? repo)
|
||||
(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}))])
|
||||
(when show-properties?
|
||||
(page-properties page *configure-show?))
|
||||
|
||||
;; blocks
|
||||
(let [_ (and block? page (reset! *current-block-page (:block/name (:block/page page))))
|
||||
|
|
|
|||
|
|
@ -247,8 +247,8 @@
|
|||
(remove exclude-properties))]
|
||||
(if @*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.col-span-1 @*property-key]
|
||||
[:div.ls-property-add.grid.grid-cols-5.gap-1.flex.flex-row.items-center
|
||||
[:div.col-span-2 @*property-key]
|
||||
[:div.col-span-3.flex.flex-row
|
||||
(when (not class-schema?)
|
||||
(if @*show-new-property-config?
|
||||
|
|
@ -332,9 +332,8 @@
|
|||
(when-let [id (:id icon)]
|
||||
(when (= :emoji (:type icon))
|
||||
[:em-emoji {:id id}]))
|
||||
;; default property icon
|
||||
(ui/icon "point" {:size 16
|
||||
:class "opacity-50"}))])
|
||||
[:span.bullet-container.cursor
|
||||
[:span.bullet]])])
|
||||
(fn [{:keys [toggle-fn]}]
|
||||
(ui/emoji-picker
|
||||
{:auto-focus true
|
||||
|
|
@ -356,12 +355,12 @@
|
|||
[:div.ml-1 (:block/original-name property)]])
|
||||
(fn [{:keys [toggle-fn]}]
|
||||
[:a.property-k
|
||||
{:data-propertyid (:block/uuid property)
|
||||
:data-blockid (:block/uuid block)
|
||||
:data-class-schema (boolean class-schema?)
|
||||
:title (str "Configure property: " (:block/original-name property))
|
||||
:on-click toggle-fn}
|
||||
[:div.ml-1 (:block/original-name property)]]))
|
||||
{:data-propertyid (:block/uuid property)
|
||||
:data-blockid (:block/uuid block)
|
||||
:data-class-schema (boolean class-schema?)
|
||||
:title (str "Configure property: " (:block/original-name property))
|
||||
:on-click toggle-fn}
|
||||
[:div.ml-1 (:block/original-name property)]]))
|
||||
(fn [{:keys [toggle-fn]}]
|
||||
[:div.p-8
|
||||
(property-config repo property {:toggle-fn toggle-fn})])
|
||||
|
|
@ -403,21 +402,22 @@
|
|||
(for [[k v] properties]
|
||||
(when (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)
|
||||
(db/entity [:block/uuid v]))]
|
||||
[:div {:class (if block?
|
||||
"flex flex-1 flex-col gap-1"
|
||||
"property-pair items-center")}
|
||||
[: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?]))]
|
||||
(if (:class-schema? opts)
|
||||
[: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])]
|
||||
[:div.property-value {:class (if block?
|
||||
"col-span-4 ml-8 pl-1"
|
||||
"block-property-value"
|
||||
"col-span-3 inline-grid")}
|
||||
(pv/property-value block property v opts)])]))))))
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
.property-configure {
|
||||
min-width: 32rem;
|
||||
padding: 2px;
|
||||
|
||||
.form-input, .form-select {
|
||||
line-height: 1rem;
|
||||
|
|
@ -16,16 +17,26 @@
|
|||
/* background: var(--ls-secondary-background-color); */
|
||||
/* } */
|
||||
|
||||
.ls-block .ls-properties-area {
|
||||
padding-left: 0.3rem;
|
||||
.ls-block .ls-properties-area, .block-property-value {
|
||||
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 {
|
||||
@apply grid gap-1;
|
||||
|
||||
.property-pair {
|
||||
@apply grid grid-cols-4 gap-1;
|
||||
grid-template-columns: repeat(auto-fit, 160px);
|
||||
@apply grid grid-cols-5 gap-1;
|
||||
grid-template-columns: repeat(auto-fit, 120px);
|
||||
}
|
||||
|
||||
.add-button-link {
|
||||
|
|
@ -76,10 +87,6 @@
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
.property-block-container {
|
||||
margin-left: -1.5em;
|
||||
}
|
||||
|
||||
.property-key a {
|
||||
color: var(--ls-primary-text-color);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -311,7 +311,7 @@
|
|||
entity (db/sub-block (:db/id e))
|
||||
properties-cp (:properties-cp opts)]
|
||||
(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}))])))
|
||||
|
||||
(rum/defc property-scalar-value < rum/reactive db-mixins/query
|
||||
|
|
|
|||
Loading…
Reference in New Issue