Merge pull request #38 from GaiwanTeam/laurence/add-close-dialog-button

Add close dialog button

src/co/gaiwan/compass/html/components.clj

@@ -2,12 +2,28 @@
   "Generic components"
   (:require
    [co.gaiwan.compass.css.tokens :as t]
+   [co.gaiwan.compass.html.graphics :as graphics]
+   [co.gaiwan.compass.http.routing :refer [url-for]]
    [lambdaisland.ornament :as o]
    [ring.middleware.anti-forgery :as anti-forgery]))
 
 (o/defprop --toggle-radius-left t/--radius-2)
 (o/defprop --toggle-radius-right t/--radius-2)
 
+(o/defstyled close-dialog-button :button
+  ([]
+   [:<> {:id "close-dialog"
+         :hx-get (str (url-for :sessions/index))
+         :hx-push-url (str (url-for :sessions/index))
+         :hx-target "body"
+         :hx-swap "outerHTML"}
+    [graphics/cross]
+    [:script
+     "document.addEventListener('keydown', function(event) {
+      if (event.key === 'Escape') { // check if ESC is pressed 
+        document.getElementById('close-dialog').click(); // click the button 
+      }});"]]))
+
 (o/defstyled toggle-button :label
   "Toggle implemented as a checkbox (can also be used as a radio button)."
   {:color t/--text-2}

src/co/gaiwan/compass/html/contacts.clj

@@ -10,6 +10,16 @@
    [lambdaisland.ornament :as o]
    [markdown-to-hiccup.core :as m]))
 
+(o/defstyled qr-dialog :div
+  :m-4
+  [:.control :flex :justify-between]
+  ([]
+   [:<>
+    [:div.control
+     [:h2 "Add Contact"]
+     [c/close-dialog-button]]
+    [:img {:src (url-for :contact/qr-png)}]]))
+
 ;; UI of attendee list
 
 (o/defstyled attendee-card :div

src/co/gaiwan/compass/routes/contacts.clj

@@ -40,10 +40,7 @@
         (db/db) qr-hash))
 
 (defn GET-qr-html [req]
-  {:html/body [:div
-               {:style {:margin "var(--size-4)"}}
-               [:h2 "Add Contact"]
-               [:img {:src (url-for :contact/qr-png)}]]
+  {:html/body [h/qr-dialog]
    :html/layout false})
 
 (defn GET-qr-code
@@ -104,8 +101,7 @@
      :hx/trigger "contact-added"}))
 
 (defn routes []
-  [
-   ["/contact"
+  [["/contact"
     {:middleware [[response/wrap-requires-auth]]}
     ["/qr" {:name :contact/qr
             :get {:handler GET-qr-html}}]
@@ -122,9 +118,8 @@
     {:middleware [[response/wrap-requires-auth]]}
     ["/" {:name :contacts/index
           :get {:handler GET-contact-list}}]]
-   #_
-   ["/attendees"
-    [""
-     {:name :attendees/index
-      :middleware [[response/wrap-requires-auth]]
-      :get        {:handler GET-attendees}}]]])
+   #_["/attendees"
+      [""
+       {:name :attendees/index
+        :middleware [[response/wrap-requires-auth]]
+        :get        {:handler GET-attendees}}]]])