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])]])