From edd2a485c7c68acfb6b9d839cb905a359d97f77a Mon Sep 17 00:00:00 2001
From: den1k <kalavox@gmail.com>
Date: Thu, 20 Jun 2019 13:35:14 -0400
Subject: [PATCH] Add font-awesome, update styles

---
 deps.edn               |   2 +-
 src/zeal/serve.clj     |  34 +++++++++-----
 src/zeal/ui/views.cljc | 104 +++++++++++++++++++++--------------------
 3 files changed, 77 insertions(+), 63 deletions(-)

diff --git a/deps.edn b/deps.edn
index 1c260eb..6c36342 100644
--- a/deps.edn
+++ b/deps.edn
@@ -10,10 +10,10 @@
   medley                       {:mvn/version "1.1.0"} ; needed?
 
   aleph                        {:mvn/version "0.4.6"}
+  ring/ring-core               {:mvn/version "1.7.1"}
   cljs-http                    {:mvn/version "0.1.46"}
   com.cognitect/transit-clj    {:mvn/version "0.8.313"}
   com.cognitect/transit-cljs   {:mvn/version "0.8.256"}
-  yada                         {:mvn/version "1.2.15"} ; needed?
   bidi                         {:mvn/version "2.1.6"} ; needed?
 
 
diff --git a/src/zeal/serve.clj b/src/zeal/serve.clj
index a658420..dffafe5 100644
--- a/src/zeal/serve.clj
+++ b/src/zeal/serve.clj
@@ -4,6 +4,9 @@
             [manifold.stream :as s]
             [aleph.http.client-middleware :refer [parse-transit transit-encode]]
             [uix.dom.alpha :as uix.dom]
+            [ring.middleware.resource :refer [wrap-resource]]
+            [ring.middleware.content-type :refer [wrap-content-type]]
+            [ring.middleware.not-modified :refer [wrap-not-modified]]
             [zeal.ui.views :as views]
             [clojure.core.async :as a]
             [zeal.core :as zc]
@@ -20,11 +23,14 @@
    [:meta {:charset "UTF-8"}]
    [views/document
     {:styles []
-     :links  ["css/tachyons.css" "css/codemirror.css"]
+     :links  [
+              "css/tachyons.css"
+              "css/codemirror.css"
+              "css/font-awesome/css/all.css"]
      :js     [{:src "js/compiled/main.js"}
               {:script "zeal.ui.core.init()"}]}]])
 
-(defn index []
+(defn index [_]
   (let [res (s/stream)]
     (future
      (uix.dom/render-to-stream
@@ -95,16 +101,21 @@
   [[_ {id :crux.db/id}]]
   (zc/entity-history id))
 
-(defn handler [{:as req :keys [uri]}]
-  (case uri
-    "/" (index)
-    "/echo" (echo-handler req)
-    "/dispatch" (wrap-multi-handler multi-handler req)
+(def resource-handler
+  (-> (constantly {:status 200})
+      (wrap-resource "public")
+      (wrap-content-type)
+      (wrap-not-modified)))
 
-    ;; todo add 404
-    {:status  200
-     :headers {"content-type" "application/javascript"}
-     :body    (slurp (str "resources/public" (:uri req)))}))
+(defn handler [{:as req :keys [uri]}]
+  (let [handle
+        (case uri
+          "/" index
+          "/echo" echo-handler
+          "/dispatch" (wrap-multi-handler multi-handler)
+          ;; todo add 404
+          resource-handler)]
+    (handle req)))
 
 (defstate server
   :start (http/start-server handler {:port 3400})
@@ -114,3 +125,4 @@
  (mount/stop)
  (mount/start)
  )
+
diff --git a/src/zeal/ui/views.cljc b/src/zeal/ui/views.cljc
index 4ba1e17..1dc7aaa 100644
--- a/src/zeal/ui/views.cljc
+++ b/src/zeal/ui/views.cljc
@@ -35,7 +35,7 @@
                      (cm. node opts)))
            cm    (cm-fn node
                         (clj->js
-                         (merge {:mode "clojure"
+                         (merge {:mode              "clojure"
                                  :autoCloseBrackets true}
                                 (dissoc opts
                                         :node-ref :on-cm :from-textarea?
@@ -55,20 +55,21 @@
     (when st-value-fn
       (st/on-change st-value-fn #(cm-set-value @cm %)))
     [:div.w-50.h4
-     (merge
-      {:ref #(when-not @node
-               (reset! node %)
-               (init-codemirror
-                (merge {:node         %
-                        :on-cm        (fn [cm-instance]
-                                        (reset! cm cm-instance)
-                                        (when parinfer? (pcm/init cm-instance))
-                                        (when on-cm (on-cm cm-instance)))
-                        :value        default-value
-                        :lineWrapping true
-                        :lineNumbers  false}
-                       cm-opts)))}
-      (dissoc props :cm-opts :st-value-fn :on-cm :parinfer?))]))
+     #?(:cljs
+        (merge
+         {:ref #(when-not @node
+                  (reset! node %)
+                  (init-codemirror
+                   (merge {:node         %
+                           :on-cm        (fn [cm-instance]
+                                           (reset! cm cm-instance)
+                                           (when parinfer? (pcm/init cm-instance))
+                                           (when on-cm (on-cm cm-instance)))
+                           :value        default-value
+                           :lineWrapping true
+                           :lineNumbers  false}
+                          cm-opts)))}
+         (dissoc props :cm-opts :st-value-fn :on-cm :parinfer?)))]))
 
 (defn app []
   (let [search-query   (<sub :search-query)
@@ -78,7 +79,7 @@
         snippet        (<sub (comp :snippet :exec-ent))
         result         (<sub (comp :result :exec-ent))]
     [:main.app
-     [:div
+     [:div                              ;search
       [:div.flex
        [:input.outline-0
         {:ref       #(db-assoc :search-node %)
@@ -97,14 +98,14 @@
         "new"]]
       (cond
         (or show-history? (and (not-empty search-results) (not-empty search-query)))
-        [:div.bg-light-gray.ph2.overflow-auto
+        [:div.ph2.overflow-auto
          {:style {:max-height :40%}}
          (for [{:as   exec-ent
                 :keys [crux.db/id time snippet result]}
                (if show-history?
                  history
                  search-results)]
-           [:div.flex.pv2.align-center.overflow-hidden.hover-bg-black-60.hover-white.pointer.ph1
+           [:div.flex.pv2.align-center.overflow-hidden.hover-bg-light-gray.pointer.ph1.hide-child
             {:key      (str id "-" time)
              :style    {:max-height "3rem"}
              :on-click #(do (st/db-assoc :exec-ent exec-ent)
@@ -121,44 +122,46 @@
             [:pre.w-50.ws-normal.f6.ma0.ml3
              {:style {:white-space :pre-wrap}}
              result]
-            [:div.pointer.w-10
-             {:on-click (fn [_]
+            [:i.pointer.fas.fa-history.flex.self-center.pa1.br2.child
+             {:class    (if show-history?
+                          "bg-gray white hover-bg-white hover-black"
+                          "hover-bg-white")
+              :on-click (fn [_]
                           (if show-history?
                             (t/send-search search-query
                                            #(db-assoc :search-results %
                                                       :show-history? false))
                             (t/history exec-ent
                                        #(db-assoc :history %
-                                                  :show-history? true))))}
-             (if show-history? "hide-h" "show-h") ; todo clock icon
-             ]])]
+                                                  :show-history? true))))}]])]
         (not-empty search-query)
-        "No results")
-      [:div.flex
-       [codemirror
-        {:default-value (or snippet new-snippet-text)
-         :on-cm         #(db-assoc-in [:editor :snippet-cm] %)
-         :parinfer?     true
-         :cm-opts       {:keyboard-shortcuts
-                         {"Cmd-Enter"
-                          (fn [_cm]
-                            (t/send-eval!
-                             (db-get :exec-ent)
-                             (fn [m]
-                               (db-assoc :exec-ent m)
-                               (if (db-get :show-history?)
-                                 (t/history m #(db-assoc :history %))
-                                 (t/send-search (db-get :search-query)
-                                                #(db-assoc :search-results %)))
-                               )))}
+        "No results")]
+     [:div.bt.mv3]
+     [:div.flex
+      [codemirror
+       {:default-value (or snippet new-snippet-text)
+        :on-cm         #(db-assoc-in [:editor :snippet-cm] %)
+        :parinfer?     true
+        :cm-opts       {:keyboard-shortcuts
+                        {"Cmd-Enter"
+                         (fn [_cm]
+                           (t/send-eval!
+                            (db-get :exec-ent)
+                            (fn [m]
+                              (db-assoc :exec-ent m)
+                              (if (db-get :show-history?)
+                                (t/history m #(db-assoc :history %))
+                                (t/send-search (db-get :search-query)
+                                               #(db-assoc :search-results %)))
+                              )))}
 
-                         :on-changes
-                         (fn [cm _]
-                           (db-assoc-in [:exec-ent :snippet] (.getValue cm)))}}]
-       [codemirror
-        {:default-value (str result)
-         :st-value-fn   (comp :result :exec-ent)
-         :cm-opts       {:readOnly true}}]]]]))
+                        :on-changes
+                        (fn [cm _]
+                          (db-assoc-in [:exec-ent :snippet] (.getValue cm)))}}]
+      [codemirror
+       {:default-value (str result)
+        :st-value-fn   (comp :result :exec-ent)
+        :cm-opts       {:readOnly true}}]]]))
 
 
 (defn document
@@ -169,9 +172,8 @@
       [:style {:type "text/css"} s])]
    (for [l links]
      [:link {:rel "stylesheet" :href l}])
-   [:body.sans-serif
-
-    [:div#root [app]]
+   [:body
+    [:div#root.sans-serif [app]]
     (for [{:keys [src script]} js]
       [:script (when src {:src src}) script])]])