More work on tap window design

Author: philippamarkovics

src/nextjournal/clerk/tap.clj

@@ -45,9 +45,11 @@
   {:pred (v/get-safe ::val)
    :render-fn '(fn [{::keys [val tapped-at]} opts]
                  [:div.w-full
-                  [:div.font-sans.bg-slate-50.px-2
-                   {:class "py-[2px] text-[9px]"} (:nextjournal/value tapped-at)]
-                  [:div.overflow-x-auto [nextjournal.clerk.render/inspect-presented val]]])
+                  [:div.font-sans.bg-slate-100.py-1
+                   {:class "px-[8px] text-[11px]"} (:nextjournal/value tapped-at)]
+                  [:div.overflow-x-auto.py-2
+                   {:class "px-[8px]"}
+                   [nextjournal.clerk.render/inspect-presented val]]])
    :transform-fn (fn [{:as wrapped-value :nextjournal/keys [value]}]
                    (-> wrapped-value
                        v/mark-preserve-keys

src/nextjournal/clerk/window.clj

@@ -9,27 +9,34 @@
 
 (def taps-viewer
   {:render-fn '(fn [taps {:as opts :keys [taps-view]}]
-                 [:div
-                  [:div.flex.justify-between.items-center
-                   (into [:div.flex.items-center.font-sans.text-xs.mb-3 [:span.text-slate-500.mr-2 "View-as:"]]
+                 [:div.flex.flex-col
+                  [:div.flex.justify-between.items-center.font-sans.border-b.border-t.shadow.z-1
+                   {:class "text-[11px] height-[24px] px-[8px]"}
+                   (into [:div.flex.items-center]
                          (map (fn [choice]
-                                [:button.px-3.py-1.font-medium.hover:bg-indigo-50.rounded-full.hover:text-indigo-600.transition
-                                 {:class (if (= taps-view choice) "bg-indigo-100 text-indigo-600" "text-slate-500")
+                                [:button.transition-all.mr-2.relative
+                                 {:class (str "h-[24px] border-b-2 "
+                                              (if (= taps-view choice)
+                                                "text-indigo-600 border-indigo-600 font-bold "
+                                                "text-slate-500 border-transparent hover:text-indigo-600 "))
                                   :on-click #(nextjournal.clerk.render/clerk-eval `(set-view! ~choice))}
-                                 choice]) [:stream :latest]))
-                   [:button.text-xs.rounded-full.px-3.py-1.border-2.font-sans.hover:bg-slate-100.cursor-pointer
-                    {:on-click #(nextjournal.clerk.render/clerk-eval `(tap/reset-taps!))} "Clear"]]
-                  (into [:div]
+                                 [:span.relative {:class "-bottom-[2px]"} (clojure.string/capitalize (name choice))]])
+                              [:stream :latest]))
+                   [:button.text-slate-500.hover:text-indigo-600
+                    {:on-click #(nextjournal.clerk.render/clerk-eval `(tap/reset-taps!))}
+                    "Clear"]]
+                  (into [:div.overflow-auto
+                         {:style {:height "calc(100% - 40px)"}}]
                         (nextjournal.clerk.viewer/inspect-children opts)
                         (cond->> taps (= :latest taps-view) (take 1)))])})
 
 (defn open!
   ([id]
    (case id
-     ::taps (open! id {:title "🚰 Taps" :css-class "p-0"}
+     ::taps (open! id {:title "🚰 Taps" :css-class "p-0 relative overflow-auto"}
                    (v/with-viewers (v/add-viewers [tap/tap-viewer])
-                       (v/with-viewer taps-viewer {:nextjournal/opts {:taps-view @!taps-view}}
-                         @tap/!taps)))))
+                     (v/with-viewer taps-viewer {:nextjournal/opts {:taps-view @!taps-view}}
+                       @tap/!taps)))))
   ([id content] (open! id {} content))
   ([id opts content]
    ;; TODO: consider calling v/transform-result