From 44ee2baf42ebf97d7a9fbca51cc1494ca8094d95 Mon Sep 17 00:00:00 2001
From: Tienson Qin <tiensonqin@gmail.com>
Date: Thu, 19 Oct 2023 00:23:54 +0800
Subject: [PATCH] enhance: switching between class/property config and page
 properties

---
 src/main/frontend/components/page.cljs     | 51 ++++++++++++----------
 src/main/frontend/components/property.cljs | 13 +++---
 2 files changed, 35 insertions(+), 29 deletions(-)

diff --git a/src/main/frontend/components/page.cljs b/src/main/frontend/components/page.cljs
index 268cf04641..5acedd8e21 100644
--- a/src/main/frontend/components/page.cljs
+++ b/src/main/frontend/components/page.cljs
@@ -349,34 +349,39 @@
         class-or-property? (or class? property?)
         page-opts {:configure? true
                    :show-page-properties? @*show-page-properties?}]
-    [:div.p-4.flex.flex-col.gap-2 {:style {:min-width 700
-                                           :min-height 400}}
-     (cond
-       (not class-or-property?)
-       (when (and (not class?)
-                  (not property?)
-                  (not (property-handler/block-has-viewable-properties? page)))
-         (page-properties page page-opts))
-
-       @*show-page-properties?
-       (page-properties page page-opts)
-
-       :else
-       [:<>
-        (when class?
-          (configure page {}))
-        (when class?
+    [:div.flex.flex-col.justify-between.p-4 {:style {:min-width 700
+                                                     :min-height 400}}
+     [:div.flex.flex-col.gap-2
+      (cond
+        (not class-or-property?)
+        (when (and (not class?)
+                   (not property?)
+                   (not (property-handler/block-has-viewable-properties? page)))
           (page-properties page page-opts))
-        (when (and property? (not class?))
-          [:h1.title "Configure property"])
-        (when property?
-          (property/property-config page page (assoc opts
-                                                     :inline-text component-block/inline-text)))])
+
+        @*show-page-properties?
+        (page-properties page page-opts)
+
+        :else
+        [:<>
+         (when class?
+           (configure page {}))
+         (when class?
+           (page-properties page page-opts))
+         (when (and property? (not class?))
+           [:h1.title "Configure property"])
+         (when property?
+           (property/property-config page page (assoc opts
+                                                      :inline-text component-block/inline-text)))])]
 
      (when (and class-or-property?
                 (not (property-handler/block-has-viewable-properties? page))
                 (not config/publishing?))
-       [:a.fade-link.ml-2 {:on-click #(swap! *show-page-properties? not)}
+       [:a.fade-link.flex.flex-row.items-center.gap-1.text-sm
+        {:on-click #(swap! *show-page-properties? not)}
+        (ui/icon (if @*show-page-properties?
+                   "arrow-narrow-left"
+                   "arrow-narrow-right"))
         (if @*show-page-properties?
           "Back"
           "Edit page properties")])]))
diff --git a/src/main/frontend/components/property.cljs b/src/main/frontend/components/property.cljs
index 794a11f8c1..d8bcf7b563 100644
--- a/src/main/frontend/components/property.cljs
+++ b/src/main/frontend/components/property.cljs
@@ -422,11 +422,12 @@
        [:div.col-span-3
         (if (and disabled? inline-text)
           (inline-text {} :markdown (:description @*property-schema))
-          (ui/ls-textarea
-           {:on-change (fn [e]
-                         (swap! *property-schema assoc :description (util/evalue e)))
-            :disabled disabled?
-            :value (:description @*property-schema)}))]]
+          [:div.mt-1
+           (ui/ls-textarea
+            {:on-change (fn [e]
+                          (swap! *property-schema assoc :description (util/evalue e)))
+             :disabled disabled?
+             :value (:description @*property-schema)})])]]
 
       [:div
        (when-not disabled?
@@ -588,7 +589,7 @@
                      (property-handler/set-editing-new-property! edit-input-id)
                      (reset! *property-key nil)
                      (reset! *property-value nil))}
-        [:div.flex.flex-row.items-center {:style {:padding-left 1}}
+        [:div.flex.flex-row.items-center.py-1
          (ui/icon "circle-plus" {:size 15})
          [:div.ml-1.text-sm "Add property"]]]